@font-face { font-family: Nunito; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/nunito-400.ttf) format('truetype'); }
@font-face { font-family: Nunito; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/nunito-600.ttf) format('truetype'); }
@font-face { font-family: Nunito; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/nunito-700.ttf) format('truetype'); }
@font-face { font-family: Nunito; font-weight: 800; font-style: normal; font-display: swap; src: url(/fonts/nunito-800.ttf) format('truetype'); }
/* The look is Skillseed's (see DESIGN.md): the app's palette, unchanged. One colour does the real work, green on every main action; the rest is a calm grey scale so
   that bands and marks are the brightest things on a page. Light only, like the app. */
:root {
  --font-round: Nunito, ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-read: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --canvas: #ffffff; --sunken: #f3f4f6; --card-hi: #f9fafb; --line: #e5e7eb; --line-strong: #d1d5db;
  --ink: #111827; --ink-muted: #6b7280; --ink-faint: #9ca3af; --slate: #0f172a;

  --green: #00ad5a; --green-press: #00994f; --green-lip: #00843f; --green-ink: #00733a; --green-soft: #e3f7ec; --green-border: #9fe0be;
  --success: #16a34a; --success-soft: #dcfce7;
  --danger: #ef4444; --danger-ink: #b91c1c; --danger-soft: #fee2e2;
  --amber: #f59e0b; --warn-ink: #92400e; --warn-soft: #fef3c7;
  --info: #3b82f6; --info-ink: #1e40af; --info-soft: #dbeafe;
  --word-new: #fef08a; --word-new-ink: #713f12; --word-learning: #fed7aa; --word-learning-ink: #7c2d12;

  --radius: 20px; --radius-hero: 28px;
  --shadow: 0 4px 12px rgb(15 23 42 / .06); --shadow-lift: 0 10px 24px rgb(15 23 42 / .12);
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* the older names, as aliases of the tokens above: every rule and inline style that uses them keeps working */
  --bg: var(--card-hi); --card: #ffffff; --sunk: var(--sunken); --muted: var(--ink-muted);
  --accent: var(--green); --accent-lip: var(--green-lip); --accent-ink: #ffffff; --accent-soft: var(--green-soft);
  --ok: var(--success); --ok-soft: var(--success-soft); --warn: var(--warn-ink); --bad: var(--danger-ink); --bad-soft: var(--danger-soft);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* the hidden attribute must beat any component's own display rule (buttons, flex rows) */
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 15px/1.5 Nunito, ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--word-new); color: var(--word-new-ink); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 55%, white); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--font-round); text-wrap: balance; } p { text-wrap: pretty; }
h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 .25rem; } h2 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; margin: 1.4rem 0 .6rem; } h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .4rem; } h4 { font-weight: 800; }
a { color: var(--green-ink); text-decoration: none; } a:hover { text-decoration: underline; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .pad { padding: 1.5rem; } .right { text-align: right; } .nowrap { white-space: nowrap; }
main { max-width: 1840px; margin: 0 auto; padding: 1.25rem 1.5rem 4rem; }

#top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
#top .bar { max-width: 1840px; margin: 0 auto; padding: .6rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-round); font-weight: 800; letter-spacing: -.02em; font-size: 1.2rem; color: var(--ink); } .brand:hover { text-decoration: none; } .brand span { color: var(--green); }
.brand img { display: block; flex: none; }
nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
nav a { padding: .35rem .8rem; border-radius: 999px; color: var(--muted); font-family: var(--font-round); font-weight: 800; } nav a:hover { background: var(--sunken); color: var(--ink); text-decoration: none; }
nav a.on { background: var(--green-soft); color: var(--green-ink); }
.who { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.grid { display: grid; gap: .9rem; } .g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .between { justify-content: space-between; } .grow { flex: 1; }
.stack > * + * { margin-top: .7rem; }
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* The button: a pill with a lip, a solid edge underneath that it presses down into. */
button, .btn { --lip: 4px; --lip-color: var(--line); font: inherit; font-family: var(--font-round); font-weight: 800; letter-spacing: .005em; border: 2px solid var(--line); background: var(--card); color: var(--green-ink);
  padding: .5rem 1.15rem; border-radius: 999px; cursor: pointer; display: inline-block; user-select: none; box-shadow: 0 var(--lip) 0 var(--lip-color); transform: translateY(0);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), background-color 150ms, border-color 150ms, filter 150ms; }
button:hover, .btn:hover { border-color: var(--green-border); background: var(--card-hi); text-decoration: none; }
button:active:not(:disabled), .btn:active { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--lip-color); }
button.primary, .btn.primary { --lip-color: var(--green-lip); background: var(--green); color: #fff; border-color: var(--green); }
button.primary:hover, .btn.primary:hover { background: var(--green); border-color: var(--green); filter: brightness(1.05); }
button.dark, .btn.dark { --lip-color: #000; background: var(--slate); color: #fff; border-color: var(--slate); } button.dark:hover, .btn.dark:hover { background: var(--slate); border-color: var(--slate); filter: brightness(1.15); }
button.sprout { --lip: 0px; background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; } button.sprout:active:not(:disabled) { transform: none; }
button[data-act=loginas] { border-radius: 18px; text-align: left; }
button.small, .btn.small { --lip: 3px; padding: .25rem .8rem; font-size: .85rem; }
button:disabled { opacity: 1; cursor: not-allowed; background: var(--line); color: var(--ink-faint); border-color: var(--line); --lip-color: var(--line-strong); filter: none; }
button.primary:disabled { background: var(--line); }
/* what is a control inside something else keeps no lip: the stars, the menus, the exam's strip and tabs */
.rating .star, .hlmenu button, nav .menu > button, .nums button, .parts button { box-shadow: none; } .rating .star:active, .hlmenu button:active, nav .menu > button:active, .nums button:active, .parts button:active { transform: none; box-shadow: none; }

/* A box is a sunken well; it lights up green when it has the focus and red when it is wrong. */
input, select, textarea { font: inherit; font-family: var(--font-read); color: var(--ink); background: var(--card-hi); border: 2px solid var(--line); border-radius: 14px; padding: .45rem .75rem; width: 100%; transition: border-color 150ms, background-color 150ms, box-shadow 150ms; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--green); }
textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }
label { display: block; font-family: var(--font-round); font-weight: 700; font-size: .88rem; margin-bottom: .2rem; }
label.inline { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; margin: 0 .8rem 0 0; }
.field { margin-bottom: .8rem; }

.badge { display: inline-block; font-family: var(--font-round); font-size: .72rem; font-weight: 800; padding: .1rem .55rem; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); vertical-align: middle; }
.badge.ok { background: var(--success-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.bad { background: var(--danger-soft); color: var(--bad); } .badge.gray { background: var(--sunken); color: var(--muted); }

table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-family: var(--font-round); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.tabs { display: flex; gap: .2rem; border-bottom: 2px solid var(--line); margin: 1rem 0; overflow-x: auto; }
.tabs a { padding: .5rem .9rem; color: var(--muted); font-family: var(--font-round); font-weight: 800; box-shadow: inset 0 -3px 0 transparent; white-space: nowrap; } .tabs a.on { color: var(--green-ink); box-shadow: inset 0 -3px 0 var(--green); } .tabs a:hover { text-decoration: none; color: var(--ink); }
.stat { font-family: var(--font-round); font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .stat small { display: block; font-size: .78rem; color: var(--muted); font-weight: 700; letter-spacing: 0; }
.code { font-family: ui-monospace, monospace; background: var(--green-soft); color: var(--green-ink); padding: .15rem .5rem; border-radius: 8px; letter-spacing: .08em; }
.notice { padding: .7rem .9rem; border-radius: 14px; background: var(--warn-soft); color: var(--warn); font-size: .9rem; }
.notice.ok { background: var(--success-soft); color: var(--ok); } .notice.bad { background: var(--danger-soft); color: var(--bad); } .notice.info { background: var(--green-soft); color: var(--green-ink); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.passage { font-family: var(--font-read); white-space: pre-wrap; line-height: 1.7; max-height: 70vh; overflow: auto; } .sticky { position: sticky; top: 4.2rem; }
.q { padding: .8rem 0; border-bottom: 1px solid var(--line); } .q:last-child { border: 0; } .q .n { font-weight: 800; color: var(--accent); margin-right: .4rem; }
.q .opt { display: block; padding: .3rem .5rem; border-radius: 8px; margin: .15rem 0; cursor: pointer; font-weight: 500; } .q .opt:hover { background: var(--accent-soft); }
.q.right { background: var(--ok-soft); } .q.wrong { background: var(--bad-soft); } .q { padding-left: .5rem; padding-right: .5rem; border-radius: 8px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.1rem; } .timer.low { color: var(--bad); }
.layer { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; margin-bottom: .8rem; }
.layer header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.crit { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; } .band { font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.resp { font-family: var(--font-read); white-space: pre-wrap; background: var(--bg); border-radius: 14px; padding: .8rem; max-height: 60vh; overflow: auto; }
.inline-item { border-left: 3px solid var(--accent); padding: .2rem .6rem; margin: .4rem 0; background: var(--accent-soft); border-radius: 0 8px 8px 0; }

.overlay { position: fixed; inset: 0; background: rgb(15 23 42 / .5); display: grid; place-items: center; z-index: 20; padding: 1rem; }
.dialog { background: var(--card); border-radius: var(--radius); max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: 1.2rem; box-shadow: var(--shadow-lift); animation: pop 320ms var(--ease-out) both; }
#toasts { position: fixed; bottom: 1rem; right: 1rem; display: grid; gap: .5rem; z-index: 30; }
.toast { background: var(--slate); color: #fff; font-family: var(--font-round); font-weight: 700; padding: .6rem .95rem; border-radius: 14px; box-shadow: var(--shadow-lift); animation: rise 420ms var(--ease-out) both; max-width: 340px; } .toast.bad { background: var(--danger); color: #fff; }
.empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.lock { opacity: .75; }
.login { max-width: 640px; margin: 2rem auto; }
.oauth { display: grid; gap: .5rem; } .oauth button { padding: .7rem; }

/* diffs: what was added and what was taken out */
.diff-add { background: var(--ok-soft); color: var(--ok); border-radius: 4px; padding: 0 .15rem; font-weight: 600; }
.diff-del { background: var(--bad-soft); color: var(--bad); border-radius: 4px; padding: 0 .15rem; text-decoration: line-through; }
.diff-row { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; margin-bottom: .5rem; background: var(--card); }
.diff-field { margin: .3rem 0 0 0; } .diff-field > .muted { display: inline-block; min-width: 6rem; }
.diff-panel { background: var(--bg); border-radius: 10px; padding: .7rem; margin: .5rem 0; line-height: 1.8; }
.ai-banner { margin: 1rem 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* gradebook */
table.gradebook th, table.gradebook td { text-align: center; white-space: nowrap; }
table.gradebook th:first-child, table.gradebook td:first-child { text-align: left; position: sticky; left: 0; background: var(--card); }
.gb { font-size: .85rem; font-weight: 600; }
.gb a { color: inherit; display: block; text-decoration: none; padding: .1rem .2rem; border-radius: 6px; } .gb a:hover { background: rgba(0,0,0,.06); }
.gb-todo { color: var(--muted); font-weight: 500; } .gb-missing { background: var(--bad-soft, #fbe9e7); color: var(--bad, #b3261e); font-weight: 600; } .gb-in_progress { background: var(--warn-soft); color: var(--warn); }
.gb-submitted { background: var(--accent-soft); color: var(--accent); } .gb-marked { background: var(--warn-soft); color: var(--warn); } .gb-released { background: var(--ok-soft); color: var(--ok); }
.progress .chip { display: inline-block; margin: 0 .4rem .4rem 0; }

/* bell, notifications, announcements */
a.bell { position: relative; display: inline-flex; align-items: center; padding: .3rem .45rem; border-radius: 8px; color: var(--muted); } a.bell:hover { background: var(--accent-soft); }
a.bell .count { position: absolute; top: -.1rem; right: -.1rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 99px; background: var(--bad); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.notification { display: block; padding: .7rem .9rem; border-bottom: 1px solid var(--line); color: inherit; } .notification:last-child { border: 0; } .notification a { color: var(--ink); font-weight: 600; }
.notification.unread { background: var(--accent-soft); } .notification.unread a::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); margin-right: .5rem; }
.announcement { white-space: normal; } .announcement .body { white-space: pre-wrap; margin: .4rem 0 0; }

#qs.only-wrong .q.right, #qs.only-wrong .q.subj { display: none; }
@media print { #top, .no-print, .toasts, #toasts, #flicker, .sprout { display: none !important; } }

.bar-track { background: var(--bg); border-radius: 999px; height: .6rem; overflow: hidden; } .bar-fill { background: var(--accent); height: 100%; border-radius: 999px; } .bar-fill.weak { background: #d9822b; }
.hist { display: flex; align-items: flex-end; gap: .5rem; height: 8rem; } .hist-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; text-align: center; } .hist-bar { width: 100%; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; }
.group { border-left: 3px solid var(--line); padding-left: .9rem; margin: .9rem 0; } .group h4 { margin: .2rem 0; }
.shared-options { margin: .3rem 0 .6rem 1.3rem; padding: 0; line-height: 1.6; }
.md, .cloze, .inline-item, .announcement .body, .coach-better { font-family: var(--font-read); } .md p { margin: .5rem 0; } .md-table { border-collapse: collapse; margin: .6rem 0; } .md-table th, .md-table td { border: 1px solid var(--line); padding: .3rem .6rem; text-align: left; }
.pdf { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 8px; }
.bgroup { border-left: 3px solid var(--accent, #2563eb); padding: .5rem .8rem; margin: .6rem 0; background: var(--soft, #f8fafc); border-radius: 8px; } .bgroup .bgroup { border-left-color: var(--line); }
.bq { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .2rem; border-bottom: 1px solid var(--line); } .bq .n { font-weight: 800; min-width: 1.6rem; }
.bkids { margin: .4rem 0; }
.cloze { line-height: 2.1; margin: .6rem 0; } .gapin { width: 9.5rem; margin: 0 .25rem; padding: .15rem .45rem; text-align: center; font-weight: 700; } .gapin::placeholder { color: var(--ink); opacity: 1; } .gapin:focus::placeholder { color: transparent; }
.gapbox { display: inline-block; padding: 0 .5rem; border: 1px solid var(--line); border-radius: 6px; min-width: 2.5rem; text-align: center; } .gapbox.right { background: var(--ok-soft); } .gapbox.wrong { background: var(--bad-soft); }
.exam-mode #top { display: none; } .exam-mode #main { padding: 0; max-width: none; }
mark.hl { background: var(--hl, #fff3a3); color: inherit; cursor: pointer; }
:is(.hlmenu, .hlnote) { position: fixed; z-index: 30; font-size: .875rem; } .hlmenu[hidden] { display: none; }
.hlmenu.ctx, .hlnote { padding: .25rem; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.hlmenu.ctx:not([hidden]) { display: flex; flex-direction: column; min-width: 9rem; } .hlmenu.ctx button { border: 0; border-radius: 4px; padding: .35rem .7rem; text-align: left; background: none; }
.hlnote { display: grid; gap: .3rem; width: min(18rem, calc(100vw - 16px)); padding: .5rem; } .hlnote textarea { font: inherit; min-height: 5rem; resize: vertical; padding: .4rem; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--ink); } .hlnote button { justify-self: end; padding: .25rem .9rem; }

/* charts: the pictures of Writing Task 1, drawn by public/charts-draw.js */
:root { --ch-g1: #555a70; --ch-g2: #c9ccd8; --ch-g3: #9094a8; }
.ch-fig { margin: 0 0 1.25rem; }
.ch-figs { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; align-items: flex-start; }
.ch-fig svg { display: block; max-width: 100%; height: auto; margin: 0 auto; font: 13px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.ch-fig text { fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.ch-fig figcaption { text-align: center; color: var(--muted); font-size: .88rem; margin-top: .4rem; }
.ch-grid { stroke: var(--line); }
.ch-axis { stroke: var(--ink); stroke-width: 1.2; }
.ch-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.ch-line.l1 { stroke-dasharray: 7 4; } .ch-line.l2 { stroke: var(--ch-g3); } .ch-line.l3 { stroke: var(--ch-g3); stroke-dasharray: 2 3; }
.ch-dot { fill: var(--ink); } .ch-dot.l2, .ch-dot.l3 { fill: var(--ch-g3); }
.ch-bar, .ch-slice { stroke: var(--ink); stroke-width: .8; }
.ch-bar.s0, .ch-slice.s0 { fill: var(--ch-g1); } .ch-bar.s1, .ch-slice.s1 { fill: var(--ch-g2); } .ch-bar.s2, .ch-slice.s2 { fill: var(--card); }
.ch-slice.s3 { fill: url(#hatch); } .ch-slice.s4 { fill: url(#speckle); } .ch-slice.s5 { fill: var(--ch-g3); }
.ch-step, .ch-area, .ch-spot { fill: var(--card); stroke: var(--ink); stroke-width: 1.2; }
.ch-num { font-size: 12px; fill: var(--muted); }
.ch-flow { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.ch-frame { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.ch-road { fill: none; stroke: var(--ch-g2); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.ch-area.green { fill: url(#speckle); } .ch-area.water { fill: url(#waves); }
.ch-north, .ch-fig marker path { fill: var(--ink); }
.ch-title, .ch-key { font-weight: 700; } .ch-small { font-size: 12px; }
.ch-paper { fill: var(--card); }
.ch-fig pattern .ch-ink { fill: var(--ink); stroke: var(--ink); stroke-width: .9; } .ch-fig pattern path.ch-ink { fill: none; }
.ch-table { width: auto; margin: 0 auto; border-collapse: collapse; }
.ch-table th, .ch-table td { border: 1px solid var(--ink); padding: .35rem 1rem; text-align: center; }
.ch-table th { background: var(--accent-soft); }

/* rating boxes: stars, and reasons for a low rating */
.rating { align-items: center; gap: .6rem; margin: .6rem 0; flex-wrap: wrap; }
.rating .stars { display: inline-flex; }
.rating .star { background: none; border: 0; padding: 0 .1rem; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--muted, #8a8f98); }
.rating .star.on { color: #e0a800; }
.rating .star:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* the Speaking coach: a card for each answer */
.coach-card ul { margin: .2rem 0 .6rem 1.1rem; padding: 0; }
.coach-better { margin: .3rem 0 0; padding: .5rem .8rem; border-left: 3px solid currentColor; background: rgba(127, 127, 127, .08); white-space: pre-wrap; }

/* a band in a hexagon: the one shape a band is shown in, in the lists and on the result */
.hex { position: relative; display: inline-grid; place-items: center; width: 3.1rem; height: 3.1rem; vertical-align: middle; flex: none; }
.hex svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hex .n { position: relative; z-index: 1; font-family: var(--font-round); font-weight: 800; font-size: 1.05rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; margin-top: -.15rem; }
.hex.sm { width: 2.3rem; height: 2.3rem; } .hex.sm .n { font-size: .82rem; } .hex.lg { width: 6.5rem; height: 6.5rem; } .hex.lg .n { font-size: 2.2rem; }
[data-met] { color: var(--ok); font-weight: 700; }
/* the five kinds of task in one row where there is room, each with its button at the foot */
.practice-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.practice-tile { display: flex; flex-direction: column; } .practice-tile > .grow { flex: 1; }
.practice-tile > .btn, .practice-tile > button { align-self: flex-start; margin-top: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.practice-tile > .grow { margin-bottom: .8rem; }
.q textarea[data-count] { min-height: 40vh !important; }
/* a page of separate cards (the account) is laid out in as many columns as fit */
.cols { column-width: 30rem; column-gap: 1.25rem; } .cols > * { break-inside: avoid; margin-bottom: 1rem; } .cols > h2 { break-after: avoid; margin-top: .4rem; }

/* IELTS on computer: the window is the test. A bar at the top (what it is, the clock), the part's instructions in a box, the paper in the middle with the
   passage on one side and the questions on the other, each scrolling by itself, and along the foot every part with the numbers of the one on the screen, the
   arrows, and the tick. The layout is the test's; the look is Skillseed's: round numbers, pill parts, a lip on the arrows, the app's type. */
:root { --raised: var(--card-hi); }
.exam { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100vh; height: 100dvh; font-family: var(--font-read); background: var(--card); }
.exam .top, .exam .bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .6rem 1.25rem; background: var(--card); }
.exam .top { border-bottom: 1px solid var(--line); font-family: var(--font-round); font-weight: 800; } .exam .bottom { grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line); gap: .8rem 1.5rem; }
.exam .clockbox { font-family: var(--font-round); font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; background: var(--sunken); border-radius: 999px; padding: .15rem .9rem; } .exam .timer.low { color: var(--bad); background: var(--danger-soft); }
.exam .end { display: flex; justify-content: flex-end; }
.partbox { margin: .75rem 1.25rem 0; padding: .65rem 1rem; border-radius: 14px; background: var(--green-soft); box-shadow: inset 4px 0 0 var(--green); } .partbox strong { display: block; margin-bottom: .15rem; font-family: var(--font-round); font-weight: 800; color: var(--green-ink); }
.partbox .notice-inline { display: block; margin-top: .25rem; color: var(--warn); }
.exam > main { overflow: hidden; padding: 0; min-height: 0; }
.exam #paper { height: 100%; width: 100%; margin: 0; max-width: none; }
.exam #paper > .card { height: 100%; display: flex; flex-direction: column; border: 0; border-radius: 0; box-shadow: none; padding: .75rem 1.25rem 0; background: none; }
.exam #paper > .card > * + * { margin-top: 0; }
.exam #paper > .card > :last-child { flex: 1; min-height: 0; overflow: auto; padding-bottom: 1.25rem; }
.exam #paper .split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; overflow: hidden; }
.exam #paper .split > * { min-height: 0; overflow: auto; padding: .5rem 1.25rem 1.25rem; }
.exam #paper .split > .passage { border: 0; border-right: 2px solid var(--line); border-radius: 0; box-shadow: none; background: none; position: static; max-height: none; line-height: 1.75; }
.exam #paper textarea { width: 100%; min-height: 50vh !important; }
/* the question you are on: tinted, with a green edge (the numbers below show it too) */
#paper .q:focus-within { background: var(--green-soft); box-shadow: inset 4px 0 0 var(--green); border-radius: 10px; }
@media (max-width: 860px) { .exam #paper .split { grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; overflow: auto; } .exam #paper .split > * { overflow: visible; min-height: auto; } .exam #paper .split > .passage { border-right: 0; border-bottom: 2px solid var(--line); } .exam .top { grid-template-columns: 1fr auto; } .exam .top .end { display: none; } .exam .bottom { grid-template-columns: 1fr; } .exam .step { justify-content: space-between; } }
.parts { display: flex; align-items: center; gap: .3rem; overflow-x: auto; scrollbar-width: thin; padding: .15rem 0; }
.parts button { flex: none; padding: .35rem .85rem; border: 2px solid transparent; border-radius: 999px; background: none; box-shadow: none; font-family: var(--font-round); font-weight: 800; color: var(--muted); white-space: nowrap; }
.parts button:hover { background: var(--sunken); border-color: transparent; color: var(--ink); }
.parts button small { margin-left: .5rem; font-weight: 700; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.parts .here { display: flex; align-items: center; gap: .4rem; } .parts [aria-current=true] { background: var(--green-soft); color: var(--green-ink); }
.nums { display: flex; gap: .3rem; margin-left: .25rem; }
.nums button { min-width: 2rem; height: 2rem; padding: 0 .3rem; border: 2px solid var(--line); border-radius: 50%; box-shadow: none; font-family: var(--font-round); font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; background: var(--card); color: var(--muted); }
.nums button:hover { border-color: var(--green); background: var(--card); color: var(--green-ink); }
.nums button.answered { background: var(--green-soft); border-color: var(--green-border); color: var(--green-ink); }
.nums button.current, .nums button[aria-current=true] { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 0 0 4px var(--green-soft); }
.exam .step { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.exam .step .arrow, .exam .step .tick { --lip: 3px; width: 3rem; height: 2.5rem; padding: 0; border-radius: 999px; font-size: 1.15rem; line-height: 1; box-shadow: 0 var(--lip) 0 var(--lip-color); }
.exam .step .arrow { background: var(--card); color: var(--ink); border: 2px solid var(--line); --lip-color: var(--line); } .exam .step .arrow:hover:not(:disabled) { border-color: var(--green-border); background: var(--card-hi); }
.exam .step .tick { background: var(--green); color: #fff; border: 2px solid var(--green); --lip-color: var(--green-lip); margin-left: .35rem; width: 3.4rem; } .exam .step .tick:hover { background: var(--green); border-color: var(--green); filter: brightness(1.05); }
.exam .step button:active:not(:disabled) { transform: translateY(var(--lip)); box-shadow: 0 0 0 var(--lip-color); }
.exam .step .arrow:disabled { background: var(--sunken); color: var(--ink-faint); border-color: var(--sunken); --lip-color: var(--line); box-shadow: 0 var(--lip) 0 var(--lip-color); opacity: .8; }
/* a task with no picture or passage (Writing Task 2): the question on the left, the box to write in on the right, as in the test on computer */
.exam #paper > .card > div:last-child:not(.split) .q:has(textarea[data-count]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: 2rem; align-items: start; border: 0; }
.exam #paper > .card > div:last-child:not(.split) .q:has(textarea[data-count]) > :first-child { grid-row: 1 / span 2; font-size: 1.1rem; line-height: 1.6; padding-top: .3rem; }
.exam #paper > .card > div:last-child:not(.split) .q:has(textarea[data-count]) > :not(:first-child) { grid-column: 2; }
.exam #paper > .card > div:last-child:not(.split) .q:has(textarea[data-count]) textarea { min-height: 62vh !important; }
.exam-mode #devpanel { top: auto !important; bottom: .5rem !important; right: auto !important; left: 50% !important; transform: translateX(-50%); }

/* the practice menu in the top bar, the viewing banner, the usage bar, and the fund tree */
nav .menu { position: relative; } nav .menu > button { background: none; border: 0; padding: .35rem .7rem; border-radius: 8px; color: var(--muted); font-weight: 600; cursor: pointer; font: inherit; font-weight: 600; } nav .menu > button:hover, nav .menu > button.on { background: var(--accent-soft); color: var(--accent); }
nav .menu .drop { position: absolute; top: 100%; left: 0; min-width: 12rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .3rem; display: flex; flex-direction: column; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 10; }
.viewing { background: var(--accent-soft); color: var(--ink); border-bottom: 1px solid var(--line); padding: .5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ai-meter { display: flex; align-items: center; gap: .6rem; font-size: .9rem; } .ai-meter .bar-track { width: 9rem; }
.fund-node { margin-left: calc(var(--depth, 0) * 1.5rem); } .fund-node.closed { opacity: .55; }

/* ------------------------------------------------------------- brand: the grid, Sprout, the halftone, motion (see DESIGN.md) */
/* the flickering grid behind the whole page: one fixed canvas that never catches a click; calm in the exam, absent in print (above) */
#flicker { position: fixed; inset: 0; z-index: -10; pointer-events: none; }
.exam-mode #flicker, .exam-mode .sprout { display: none; }
/* Sprout, where the app speaks: a small stage with a name under it, and a speech bubble beside it */
.sprout { display: inline-block; line-height: 0; vertical-align: middle; } .sprout[data-click] { cursor: pointer; }
.speak { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bubble { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .7rem 1rem; font-family: var(--font-round); font-weight: 700; max-width: 26rem; }
.bubble::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; background: var(--card); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.empty .sprout { display: block; margin: 0 auto .6rem; }
/* the halftone the logo sits on, for green fields */
.halftone { background-color: var(--green); background-image: radial-gradient(circle at center, rgb(132 225 92 / .55) 1.6px, transparent 2px); background-size: 11px 11px; color: #fff; }
/* things that appear: once, and not at all under Reduce Motion (below) */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shake-x { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.anim-rise { animation: rise 700ms var(--ease-out) both; } .anim-pop { animation: pop 420ms var(--ease-out) both; } .anim-shake { animation: shake-x 380ms ease-in-out; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }

/* a phone: the brand and who you are on the first line, where to go under them in rows of pills; padding is smaller; nothing is wider than the screen */
@media (max-width: 720px) {
  #top .bar { padding: .5rem 1rem; gap: .4rem .8rem; } .who { margin-left: auto; gap: .4rem; }
  nav { order: 3; flex: 1 1 100%; gap: .15rem; } nav a { padding: .25rem .65rem; font-size: .9rem; }
  main { padding: 1rem 1rem 4rem; } h1 { font-size: 1.4rem; } .hero { align-items: flex-start; } .login { margin: 1rem auto; }
  .bubble::before { display: none; }
}

/* ------------------------------------------------------------- polish: things you can tap lift, boxes sit in rows, files are pills, dialogs have a title */
.row > input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.grow), .row > select:not(.grow) { width: auto; flex: 0 1 auto; max-width: 100%; } .row > .grow { flex: 1 1 8rem; min-width: 0; }
input[type=file] { padding: .35rem; background: var(--card-hi); }
input[type=file]::file-selector-button { font: inherit; font-family: var(--font-round); font-weight: 800; color: var(--green-ink); background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: .2rem .9rem; margin-right: .7rem; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
input[type=file]::file-selector-button:hover { border-color: var(--green-border); }
.card > table > tbody > tr:hover > td:not(.gb) { background: var(--card-hi); } .card > table td:first-child, .card > table th:first-child { padding-left: .9rem; }
a.card { transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), border-color 150ms; } a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--green-border); text-decoration: none; }
.practice-tile { transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out); } .practice-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.chip { display: inline-flex; align-items: center; gap: .25rem; background: var(--sunken); color: var(--muted); border-radius: 999px; padding: .1rem .65rem; font-family: var(--font-round); font-weight: 700; font-size: .8rem; }
.layer { border-radius: 16px; background: var(--card); } .diff-row, .bgroup, .partbox { border-radius: 14px; }
.dialog > h3:first-child { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .8rem; }
.dialog button.close, .overlay .dialog > .row:last-child { margin-top: .4rem; }
details > summary { cursor: pointer; font-family: var(--font-round); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); }
.hero > div > .muted { margin-top: .15rem; }
.stat { color: var(--ink); } .card .stat small { margin-top: .1rem; }
#devpanel { font-family: var(--font-round); }

/* ------------------------------------------------------------- the teacher side: chips, menus, sheets, the type picker, the one item list (see TEACHER_UX_PLAN.md) */
:root { --ai: #7c3aed; --ai-soft: #ede9fe; --ai-line: #c4b5fd; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
button.pill { --lip: 0px; box-shadow: none; padding: .22rem .8rem; border: 2px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: .88rem; }
button.pill:hover { border-color: var(--green-border); background: var(--card); color: var(--green-ink); } button.pill:active:not(:disabled) { transform: none; box-shadow: none; }
button.pill.on { background: var(--green-soft); border-color: var(--green-border); color: var(--green-ink); }
button.link { all: unset; cursor: pointer; font-family: var(--font-round); font-weight: 800; color: var(--ink); border-radius: 6px; } button.link:hover { color: var(--green-ink); text-decoration: underline; } button.link:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 55%, white); outline-offset: 2px; }
.badge.ai { background: var(--ai-soft); color: var(--ai); }
.menu-pop { position: relative; display: inline-block; }
.menu-list { position: absolute; z-index: 15; top: calc(100% + 6px); min-width: 12rem; display: grid; gap: .1rem; padding: .3rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); animation: pop 160ms var(--ease-out) both; transform-origin: top; }
.menu-list.right { right: 0; } .menu-list.left { left: 0; }
.menu-list[popover] { position: fixed; inset: auto; margin: 0; width: max-content; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; }
.menu-list[popover] button { white-space: normal; }
.menu-list button { --lip: 0px; box-shadow: none; border: 0; background: none; border-radius: 10px; text-align: left; padding: .45rem .7rem; color: var(--ink); white-space: nowrap; } .menu-list button:hover { background: var(--sunken); border: 0; } .menu-list button:active { transform: none; }
.sheet-overlay { place-items: stretch end; padding: 0; grid-template-rows: minmax(0, 1fr); }
.sheet { width: min(34rem, 100vw); height: 100%; display: flex; flex-direction: column; background: var(--card); box-shadow: var(--shadow-lift); animation: sheet-in 240ms var(--ease-out) both; } .sheet.wide { width: min(54rem, 100vw); }
.sheet > header { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); } .sheet > header h3 { margin: 0; font-size: 1.2rem; } .sheet-body { flex: 1; overflow: auto; padding: 1rem 1.2rem 2rem; }
@keyframes sheet-in { from { transform: translateX(2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
.typepicker .tp-all { margin-bottom: .6rem; }
.tp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.4rem; }
.tp-head { --lip: 0px; box-shadow: none; border: 0; background: none; padding: .1rem 0; margin: 0 0 .4rem; display: flex; gap: .4rem; align-items: baseline; font-family: var(--font-round); font-weight: 800; font-size: 1rem; color: var(--ink); cursor: pointer; text-align: left; }
button.tp-head:hover { background: none; color: var(--green-ink); } button.tp-head:active { transform: none; } .tp-head.all { color: var(--green-ink); } .tp-head small { font-weight: 700; color: var(--ink-faint); }
h4.tp-head { cursor: default; margin: 0 0 .4rem; }
.tp-group { margin-bottom: .6rem; } .tp-group .label { margin-bottom: .25rem; }
.items { padding: 0; overflow: hidden; }
.item { display: flex; gap: .8rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); } .item:last-child { border-bottom: 0; } .item:hover { background: var(--card-hi); } .item.picked { background: var(--green-soft); }
.item-title { overflow-wrap: anywhere; } .item-sub { gap: .35rem; margin-top: .2rem; } .item-actions { gap: .4rem; }
.filters .grow { min-width: 12rem; }

/* ---- the test editor: outline, canvas of cards ---- */
.editor { --edit-gap: .9rem; }
.editgrid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.editside { position: sticky; top: 4.5rem; max-height: calc(100vh - 6rem); overflow: auto; }
.outline { display: flex; flex-direction: column; gap: 1px; }
.outline .orow { --lip: 0px; box-shadow: none; display: flex; align-items: center; gap: .4rem; text-align: left; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: .88rem; padding: .3rem .5rem; font-weight: 600; }
.outline .orow.item { font-weight: 500; color: var(--ink-muted); }
.outline .orow:hover { background: var(--sunken); } .outline .orow.on { background: var(--green-soft); color: var(--green-ink); }
.outline .olabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.outline .n { color: var(--ink-faint); min-width: 1.4rem; } .outline .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--amber); flex: none; }
fieldset.canvas { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--edit-gap); }
.ncard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.ncard .ncard { background: var(--card); border-radius: 16px; }
.ncard.selected, .qcard.selected { border-color: var(--green-border); }
.ncard, .qcard { scroll-margin-top: 8rem; }      /* a jump to a card (the outline) puts its start just under the sticky site bar and editor bar */
@media (max-width: 900px) { .ncard, .qcard { scroll-margin-top: 4.5rem; } }      /* on a phone the bars are shorter */
.ncard .ntitle { font-weight: 800; font-size: 1.05rem; }
.kids { display: flex; flex-direction: column; gap: .6rem; }
.qcard { border: 2px solid var(--line); border-radius: 16px; background: var(--card); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.qcard.unchecked { background: var(--warn-soft); border-color: var(--amber); }
.qcard.bank { background: var(--card-hi); }
.qcard .n { font-weight: 800; color: var(--ink-muted); }
.qcard .need { color: var(--warn-ink); }
.qcard .tight, .ncard .tight { gap: .35rem; }
.match-answer-summary { --lip: 0px; box-shadow: none; display: flex; align-items: center; gap: .65rem; width: 100%; min-width: 0; padding: .55rem .2rem; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); text-align: left; }
.match-answer-summary:hover { background: var(--sunken); }
.match-answer-label { flex: none; color: var(--ink-muted); font-size: .8rem; font-weight: 700; }
.match-answer-value { display: flex; align-items: baseline; gap: .45rem; min-width: 0; flex: 1; }
.match-answer-value b { color: var(--green-ink); }
.match-answer-value span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-answer-empty { flex: 1; color: var(--ink-muted); }
.match-answer-options { display: grid; gap: .35rem; padding-top: .35rem; }
.match-answer-options .editor-option-row { flex-wrap: nowrap; min-width: 0; }
.editor-option-readonly { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .65rem; min-width: 0; padding: .45rem .75rem; border: 2px solid var(--line); border-radius: 14px; background: var(--card); color: var(--ink); font: 400 1rem var(--font-read); cursor: pointer; }
.editor-option-readonly span { min-width: 0; overflow-wrap: anywhere; }
.editor-option-readonly .match-answer-used { margin-left: auto; color: var(--ink-muted); font-size: .8rem; white-space: nowrap; }
.match-answer-options .editor-option-row:has(input:disabled) .editor-option-readonly { background: var(--sunken); color: var(--ink-muted); cursor: not-allowed; }
.passage { border: 2px dashed var(--line-strong); border-radius: 14px; padding: .6rem .8rem; display: flex; flex-direction: column; gap: .4rem; background: var(--canvas); }
.adds { flex-wrap: wrap; }
.pick-list { max-height: 55vh; overflow: auto; }
.paper-preview .pq { margin: .6rem 0; } .paper-preview .gap { border-bottom: 2px solid var(--ink); padding: 0 .8rem; }
@media (max-width: 760px) { .editgrid { grid-template-columns: 1fr; } .editside { position: static; max-height: 12rem; } }

.tp-category { --lip: 0px; box-shadow: none; background: none; border: 0; padding: 0; margin-bottom: .25rem; font-weight: 600; color: var(--ink-muted); text-align: left; }
.tp-category:hover, .tp-category[aria-pressed="true"], .tp-category[aria-pressed="mixed"] { color: var(--green-ink); background: none; }
@media (max-width: 640px) { .library-create .menu-list.right { left: 0; right: auto; max-width: calc(100vw - 32px); } }

.library-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.filter-label { color: var(--ink-muted); font-weight: 700; font-size: .8rem; }
.library-filters .row { flex-wrap: wrap; }
.library-filter-main > .library-filter-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.6fr); align-items: start; }
.library-filters .library-filter-grid .row > .chips { display: contents; }
.library-filters .library-filter-grid .row { gap: .4rem; }
.library-filters .library-filter-grid .stack > * + * { margin-top: .4rem; }
.library-filter-main > .library-filter-grid > * { margin-top: 0; min-width: 0; }
@media (max-width: 1000px) { .library-filter-main > .library-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .library-filter-main > .library-filter-grid > .stack:last-of-type { grid-column: 1 / -1; } }
@media (max-width: 640px) { .library-filter-main > .library-filter-grid { grid-template-columns: minmax(0, 1fr); } }
.typepicker .tp-cols:has(> .tp-col:only-child) { grid-template-columns: minmax(0, 1fr); }

.library-more { grid-column: 1 / -1; }
.library-more summary { cursor: pointer; color: var(--green-ink); font-weight: 700; }
.library-more .library-filter-grid { border: 0; padding: .8rem 0 0; }
.assignment-page{max-width:960px;margin:0 auto}
.assignment-page .hero{align-items:flex-start}
.assignment-form{padding:28px;gap:24px}
.assignment-form .assignment-timing{display:grid;grid-template-columns:2fr 1fr 1fr;align-items:start;gap:16px}
.assignment-form .assignment-timing input{width:100%!important}
.assignment-template{padding:14px 0;border-bottom:1px solid var(--line);gap:16px}
.assignment-template>span{flex:1;min-width:200px}
.assignment-options,.assignment-save-template{border-top:1px solid var(--line);padding-top:16px}
.assignment-options>summary,.assignment-save-template>summary{cursor:pointer;font-weight:700;color:var(--green);padding:4px 0}
.assignment-options>.stack,.assignment-save-template>.field{margin-top:18px}
.assignment-footer{padding-top:16px;border-top:1px solid var(--line)}
[data-template-picker]{display:grid;gap:10px}
[data-template-picker]>[data-template]{text-align:left;padding:16px;width:100%}
@media(max-width:640px){.assignment-form{padding:18px}.assignment-form .assignment-timing{grid-template-columns:1fr 1fr}.assignment-timing>.grow{grid-column:1/-1}.assignment-options .row{flex-wrap:wrap}.assignment-options .grow{min-width:180px}}

/* icons and the plan rows: the whole row opens, a grip drags it, the trash is a red icon, nothing shouts until it is wanted */
.icon { flex: none; vertical-align: middle; }
.icon-btn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; color: var(--muted); cursor: pointer; }
.icon-btn:hover, .icon-btn:focus-visible { background: var(--sunken); color: var(--ink); } .icon-btn:focus-visible { outline: 2px solid var(--green); }
.icon-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.icon-btn.grip { cursor: grab; width: 1.6rem; }
.part { padding: .35rem .6rem; transition: box-shadow .15s, border-color .15s; } .part.open { border-color: var(--green); } .part.dragging { opacity: .5; }
.part-head { display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; cursor: pointer; } .part-title { flex: 1; min-width: 0; }
.part-state { display: flex; gap: .3rem; } .part-state .badge { display: inline-flex; align-items: center; gap: .2rem; }
.part-tools { display: flex; align-items: center; gap: .1rem; } .part .nudge { display: flex; flex-direction: column; opacity: 0; } .part .nudge .icon-btn { height: 1.1rem; }
.part:hover .nudge, .part:focus-within .nudge { opacity: 1; } .part .chev .icon { transition: transform .15s; } .part.open .chev .icon { transform: rotate(180deg); }
.part-body { padding: .4rem .2rem .8rem 2rem; cursor: auto; }
@media (hover: none) { .part .nudge { opacity: 1; } }

/* the question editor: one flat list, a number and the question and its answer on one line; the by hand / AI choice is one pill */
.seg { display: inline-flex; padding: .15rem; gap: .1rem; border-radius: 99px; background: var(--sunken); }
.seg button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem; border-radius: 99px; font: 700 .8rem var(--font-round); color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--card); color: var(--green-ink); box-shadow: var(--shadow); } .seg button:focus-visible { outline: 2px solid var(--green); }
.seg button[data-mode=ai].on { color: var(--green-ink); }
.sec-head h3 { margin: 0; font-size: .95rem; }
.chip-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .6rem; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); font: 700 .78rem var(--font-round); cursor: pointer; }
.qlist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.qrow { display: grid; grid-template-columns: 2rem 1fr minmax(8rem, 12rem); gap: .6rem; align-items: start; padding: .55rem .7rem; } .qrow + .qrow { border-top: 1px solid var(--line); }
.qnum { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-top: .25rem; border-radius: 50%; background: var(--sunken); color: var(--muted); font: 800 .8rem var(--font-round); }
.qbody { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.qkey { display: flex; align-items: center; gap: .3rem; color: var(--green-ink); } .qkey > .bare, .qkey select { flex: 1; min-width: 0; }
label.bare { display: block; } .qrow input, .qrow textarea, .qrow select { background: transparent; border-color: transparent; box-shadow: none; } .qrow input:hover, .qrow textarea:hover, .qrow select:hover { border-color: var(--line); } .qrow input:focus, .qrow textarea:focus, .qrow select:focus { background: var(--card); border-color: var(--green); }
@media (max-width: 640px) { .qrow { grid-template-columns: 2rem 1fr; } .qkey { grid-column: 2; } }
label.bare.qkey { display: flex; } .qrow select, .qrow input, .qrow textarea { margin: 0; } .qkey { min-height: 2.4rem; }
/* a question's move arrows appear on hover and focus only; touch screens always show them */
.hov { display: inline-flex; flex-direction: column; opacity: 0; transition: opacity .12s; } .hov .icon-btn { height: 1.1rem; }
.qcard:hover .hov, .ncard:hover > .row .hov, .qcard:focus-within .hov, .ncard:focus-within > .row .hov { opacity: 1; }
@media (hover: none) { .hov { opacity: 1; } }
.adds { gap: .4rem; }
/* a row that opens what it shows when pressed anywhere, with its own controls kept apart */
.clickrow { cursor: pointer; } .clickrow:hover { background: var(--card-hi); }
a.icon-btn { text-decoration: none; } td .icon-btn { vertical-align: middle; }
.chip-btn.on { background: var(--green); color: var(--card); } .count { display: inline-grid; place-items: center; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; margin-left: .2rem; border-radius: 99px; background: var(--card); color: var(--green-ink); font-size: .7rem; }
.selbar { padding: .5rem .7rem; border-radius: var(--radius); background: var(--green-soft); }
.statline { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: .2rem 0 .6rem; color: var(--muted); } .statline b { color: var(--ink); font: 800 1.15rem var(--font-round); }
.skill-ic { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--green-soft); color: var(--green-ink); } .row.tight { gap: .5rem; }
/* number tiles are small: the figure and its name side by side, not a block each */
.card:has(> .stat) { padding: .55rem .9rem; } .card > .stat { display: flex; align-items: baseline; gap: .5rem; font-size: 1.3rem; } .card > .stat small { display: inline; margin: 0; }
.qcard textarea[data-f=prompt], .qrow textarea { min-height: 3.2rem; }
.seg.radios label { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .7rem; border-radius: 99px; font: 700 .8rem var(--font-round); color: var(--muted); cursor: pointer; }
.seg.radios input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg.radios label:has(input:checked) { background: var(--card); color: var(--green-ink); box-shadow: var(--shadow); } .seg.radios label:has(input:focus-visible) { outline: 2px solid var(--green); }

/* a drop box is drawn by us, so its hover and focus have the shape of the box (the browser's own arrow and highlight are square) */
select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.3rem; background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem; }
select:not([multiple]):not([size]), select:not([multiple]):not([size]):hover, select:not([multiple]):not([size]):focus, select:not([multiple]):not([size]):disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select:not([multiple]):not([size]):disabled { cursor: default; opacity: .6; }
select:focus-visible { outline: none; }

/* the ways to add into a section are one kind of control: soft green chips with an icon, in a menu or not */
.chip-btn { white-space: nowrap; transition: background-color 120ms; } .chip-btn:hover { background: var(--green-border); } .chip-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 55%, white); outline-offset: 2px; }
.chip-btn[aria-expanded=true] { background: var(--green-border); }
.adds { align-items: center; } .adds .menu-pop { display: inline-flex; }

/* the gapped text as it reads: a marker is a chip with the number of its question */
.clozepreview { border: 2px dashed var(--line-strong); border-radius: 14px; padding: .6rem .8rem; background: var(--canvas); white-space: pre-wrap; line-height: 2; }
.gapchip { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; padding: .05rem .6rem; margin: 0 .15rem; border-radius: 99px; background: var(--green-soft); color: var(--green-ink); font: 700 .8rem var(--font-round); cursor: pointer; white-space: nowrap; }
.gapchip:hover { background: var(--green-border); } .gapchip:focus-visible { outline: 3px solid color-mix(in srgb, var(--green) 55%, white); outline-offset: 2px; }
.gapchip.missing, .gapchip.twice { background: var(--danger-soft); color: var(--danger-ink); cursor: help; }
.task-card { border-left: 4px solid var(--green-border); background: var(--card); }
.ncard.task-card.selected, .ncard.task-card:focus-within { border-left-color: var(--green); }
.container-card { border-left: 4px solid var(--border); }

.task-summary { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }

.task-range { width: 100%; max-width: 400px; padding: 0 16px; box-sizing: border-box; }
.task-range-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .88rem; font-weight: 700; margin: 0 -12px 4px; }
.task-range-track { position: relative; height: 70px; touch-action: none; cursor: pointer; }
.task-range-rail, .task-range-fill { position: absolute; top: 32px; height: 6px; border-radius: 4px; pointer-events: none; }
.task-range-rail { left: 0; right: 0; background: var(--line-strong); }
.task-range-fill { background: var(--green); }
.task-range-thumb { position: absolute; top: 19px; transform: translateX(-50%); width: 32px; height: 32px; padding: 0; border: 2px solid var(--green); border-radius: 50%; background: white; color: var(--green-ink); box-shadow: 0 2px 4px #0002; font-size: .75rem; cursor: grab; touch-action: none; z-index: 1; }
.task-range-thumb:hover, .task-range-thumb:focus-visible { background: var(--green-soft); z-index: 2; }
.task-range-thumb:active { cursor: grabbing; }
.task-range-ticks i { position: absolute; top: 55px; height: 4px; width: 1px; background: var(--line-strong); pointer-events: none; }
.task-range-marks { position: relative; height: 18px; color: var(--ink-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.task-range-marks span { position: absolute; transform: translateX(-50%); }

.task-range-track.close .task-range-thumb[data-edge=min] { top: 1px; }
.task-range-track.close .task-range-thumb[data-edge=max] { top: 37px; }
.task-range-track.close .task-range-thumb::after { content: ''; position: absolute; width: 2px; height: 4px; left: calc(50% - 1px); background: var(--green); }
.task-range-track.close .task-range-thumb[data-edge=min]::after { top: 100%; }
.task-range-track.close .task-range-thumb[data-edge=max]::after { bottom: 100%; }
.task-range-joined { position: absolute; top: 19px; transform: translateX(-50%); width: 32px; height: 32px; display: grid; place-items: center; pointer-events: none; z-index: 3; color: var(--green-ink); font-size: .75rem; font-weight: 700; }

/* Task filters use a compact main area and a range area aligned with its top. */
.library-filter-body { border-top: 1px solid var(--line); padding-top: 1rem; }
.library-filter-main > .library-filter-grid { border: 0; padding-top: 0; }
.library-filter-body:has(> .task-range) { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 2rem; align-items: start; }
.library-filter-body:has(> .task-range) .library-filter-main > .library-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.library-filter-body:has(> .task-range) .library-skill-filter { grid-column: 1 / -1; }
.library-task-controls { align-items: flex-start; }
.library-filter-body > .task-range { margin: 0; }
@media (max-width: 1100px) { .library-filter-body:has(> .task-range) { grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; } }
@media (max-width: 800px) { .library-filter-body:has(> .task-range) { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .library-filter-body:has(> .task-range) .library-filter-main > .library-filter-grid { grid-template-columns: minmax(0, 1fr); } .library-filter-body > .task-range { max-width: none; } }

/* ui review, batch 1: a visible allowance bar, the clock as a segmented control, tidy class cards */
.bar-track { background: var(--sunken); border: 1px solid var(--line); } .ai-meter .bar-track { width: 9rem; min-width: 6rem; }
.clock-box { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .clock-box .seg { flex-wrap: wrap; } .heading-row { align-items: center; margin-bottom: .6rem; } .heading-row h2 { margin: 0; }
.class-card { display: flex; flex-direction: column; gap: .2rem; }
.badge { font-size: .75rem; }
.checklist { padding: .6rem 1rem; } .checklist > summary { cursor: pointer; list-style: none; } .checklist > summary::-webkit-details-marker { display: none; }
.tick { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--muted); } .tick.done { background: var(--green); border-color: var(--green); color: var(--card); }
.card:has(> table) { overflow-x: auto; } .code-btn { all: unset; cursor: pointer; font-family: var(--font-mono, monospace); background: var(--green-soft); color: var(--green-ink); padding: .1rem .5rem; border-radius: .5rem; } .code-btn:hover { background: var(--green); color: var(--card); } .code-btn:focus-visible { outline: 2px solid var(--green); }
.mini-bar { display: inline-block; vertical-align: middle; width: 3.2rem; height: .35rem; margin-left: .5rem; border-radius: 99px; background: var(--sunken); border: 1px solid var(--line); overflow: hidden; } .mini-bar i { display: block; height: 100%; background: var(--green); }
.asg-table td:first-child { max-width: 28rem; }
/* what a person types is regular weight even inside a bold label; hints are lighter than typed words */
input, select, textarea { font-weight: 400; } input::placeholder, textarea::placeholder { font-weight: 400; opacity: .8; }
.study-row { align-items: flex-end; gap: 1rem 1.5rem; } .study-row > label { flex: 0 1 14rem; } #setCount, input[type=number][data-count] { width: 7rem; }
.tabs button { all: unset; box-sizing: border-box; cursor: pointer; padding: .45rem .9rem; font: 700 .95rem var(--font-round); color: var(--muted); border-bottom: 3px solid transparent; } .tabs button.on { color: var(--green-ink); border-color: var(--green); } .tabs button:focus-visible { outline: 2px solid var(--green); border-radius: 6px; }
/* notifications: one row is one link, a dot marks unread, no wash */
a.notification { display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; text-decoration: none; border-bottom: 1px solid var(--line); } a.notification:hover { background: var(--card-hi); } a.notification.unread { background: none; } a.notification.unread .notif-text { font-weight: 700; }
a.notification .notif-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; } a.notification .notif-text { color: var(--ink); overflow-wrap: anywhere; }
.notif-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: var(--green-soft); color: var(--green-ink); flex: none; } .unread-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--green); flex: none; }
.notif-group { padding: .5rem .9rem .2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.notification.unread a::before { content: none; }
.readable { max-width: 70ch; } .clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } button.link { all: unset; cursor: pointer; color: var(--green-ink); text-decoration: underline; } button.link:focus-visible { outline: 2px solid var(--green); }
.kv { margin: 0; display: grid; gap: 0; } .kv > div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-top: 1px solid var(--line); } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 700; }
/* the exam: the part line is a quiet header with a pill; the foot scrolls instead of cutting; the hand in button says so; options are big rows */
.partbox { background: none; box-shadow: none; padding: .2rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; } .partbox strong { display: inline; margin: 0; } .partbox .pill { background: var(--green-soft); color: var(--green-ink); border-radius: 99px; padding: .1rem .7rem; font-size: .8rem; font-weight: 700; }
.exam .parts { flex-wrap: nowrap; min-width: 0; } .exam .parts > * { flex: none; }
.exam .step .tick { width: auto; padding: 0 1.1rem; display: inline-flex; align-items: center; gap: .3rem; font-size: 1rem; font-weight: 800; }
.exam .opt { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .35rem .6rem; border-radius: 12px; cursor: pointer; font-size: 1rem; } .exam .opt:hover { background: var(--card-hi); } .exam .opt input { width: 1.15rem; height: 1.15rem; flex: none; }
.exam .num, .exam #paper .n { color: var(--green-ink); }
@media (max-width: 860px) { .exam .bottom { grid-template-columns: 1fr; padding: .4rem .75rem; gap: .35rem; } .exam .step { order: -1; justify-content: space-between; } .exam .parts { padding-bottom: .25rem; } }
.back-link { display: inline-flex; align-items: center; gap: .2rem; color: var(--green-ink); text-decoration: none; font-weight: 700; font-size: .9rem; margin-bottom: .2rem; } .back-link:hover { text-decoration: underline; }
#qs > .card { border: 0; box-shadow: none; padding: 0; background: none; }
.forgot-link { display: inline-block; padding: .55rem 0; font-size: .9rem; } .signin-card .tabs { margin: -.2rem 0 .4rem; }

/* assignment form: options in headed sections, pick-one rows, select that never overflows */
.opt-sections { display: grid; gap: 1.1rem; }
.opt-sections h4 { margin: 0 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1rem; align-items: start; }
.opt-grid > div > label:not(.inline) { display: block; margin-bottom: .25rem; }
.opt-grid input:not([type=checkbox]):not([type=radio]), .opt-grid select { width: 100% !important; }
.opt-checks { display: grid; gap: .4rem; align-self: end; }
#asgTest { max-width: 100%; text-overflow: ellipsis; }
.pick-list { display: grid; border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; }
.pick-list .pick-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; border: 0; border-radius: 0; box-shadow: none; background: var(--card, #fff); padding: .7rem .9rem; }
.pick-list .pick-row + .pick-row { border-top: 1px solid var(--line); }
.pick-list .pick-row:hover { background: var(--tint, rgba(0,0,0,.04)); }
.pick-row > span { display: grid; gap: .1rem; }
.pick-row .icon { transform: rotate(-90deg); color: var(--muted); }
.assignment-save-template { padding-top: .25rem; }

/* codex class tabs */
.class-table-scroll { max-width:100%; overflow-x:auto; }
.class-marking { min-width:0; }
.class-tab-filters { gap:1rem; align-items:end; }
.class-tab-filters > label { width:min(24rem,100%); }
.class-tab-filters .chip { min-height:32px; }
.class-tab-filters .chip.on { color:#006b37; background:#e3f7ed; border-color:#8adbb1; }
.class-marking table { min-width:680px; }
.class-assignment-group th { background:#f5f8f7; text-align:left; }
.class-assignment-group span { display:block; max-width:48rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.class-marking .clickrow:hover { background:#f2fbf6; }
.gradebook-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; width:220px; max-width:220px; white-space:normal; overflow-wrap:anywhere; }
.gradebook [data-average-band] { background:#f1faf5; white-space:nowrap; }
.class-analytics-grid { align-items:start; }
#analytics { min-width:0; }
#analytics .card { min-width:0; }
#analytics td { overflow-wrap:anywhere; }
.class-attention-scroll { max-height:340px; overflow:auto; }
.class-add-member { align-items:end; gap:1rem; }
.class-person-picker { position:relative; min-width:220px; }
.class-person-picker > input[type=search] { width:100%; }
.class-person-results { position:absolute; top:100%; left:0; right:0; z-index:15; max-height:260px; overflow:auto; background:#fff; border:1px solid #dce2e8; box-shadow:0 6px 18px #192e2020; border-radius:12px; padding:.4rem; }
.class-person-results button { display:block; text-align:left; width:100%; border:0; box-shadow:none; border-radius:6px; min-height:40px; }
.class-person-results button:hover, .class-person-results button:focus { background:#e3f7ed; }
.class-person-results p { padding:.5rem; }
.class-roster { min-width:0; }
.class-roster > label { max-width:28rem; }
.class-roster table { table-layout:fixed; width:100%; }
.class-roster th:first-child { width:55%; }
.class-roster th:last-child { width:60px; }
.class-roster td { overflow-wrap:anywhere; }
@media(max-width:640px) {
 .class-add-member > .class-person-picker { flex-basis:100%; min-width:0; }
 .class-tab-filters > label { width:100%; }
 .class-assignment-group span { max-width:280px; }
 .class-analytics-grid { grid-template-columns:1fr; }
 .class-roster th:first-child { width:50%; }
}
/* codex class tabs: visual review refinements */
#analytics .badge { white-space:nowrap; }
#analytics td:last-child { min-width:100px; }
[data-form=saveClass] [name=ends] { max-width:28rem; }
[data-act=archive].danger { display:inline-flex; gap:.35rem; align-items:center; }
/* codex class tabs: long analytics titles */
.class-participation { min-width:640px; }
.class-analytics-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; width:280px; max-width:280px; }
.gradebook-title { margin-inline:auto; }
/* codex class tabs: shared filter controls */
.filter-bar { display:flex; flex-direction:column; gap:.7rem; min-width:0; }
.filter-bar-top { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; min-width:0; }
.filter-bar-top > input[type=search] { flex:1; min-width:150px; }
.filter-bar-top > label { flex:0 1 24rem; max-width:100%; }
.filter-bar-top .chips { gap:.45rem; }
.filter-count { margin-left:.35rem; font-size:12px; opacity:.8; font-variant-numeric:tabular-nums; }
.filter-bar-content { display:flex; flex-direction:column; gap:.75rem; min-width:0; }
.filter-bar-more { border-top:1px solid #e0e4e9; padding-top:.6rem; }
.filter-bar-more > summary { cursor:pointer; color:#00733d; font-weight:600; }
.filter-bar-more > .filter-bar-content { margin-top:.7rem; }
.filter-result-count { align-self:flex-start; }
@media(max-width:640px) { .filter-bar-top > label { flex-basis:100%; } }

/* org: tab bar that fades where it scrolls, cards that never touch */
.tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .tabs { -webkit-mask-image: none; mask-image: none; } }
.grid + .card, .grid + .grid, .card + .card, .card + .grid, #ai-usage .grid { margin-top: .8rem; }
.grid > .card { margin-top: 0; }
.amt-in { color: var(--success, #1a7f37); } .amt-out { color: var(--ink); }
.chip-btn { border-color: var(--ink); color: var(--ink); }
.icon-btn { color: var(--ink); }

/* codex class completion */
.gradebook-scroll { max-width:100%; }
.gradebook th:first-child, .gradebook td:first-child { z-index:1; box-shadow:3px 0 6px rgb(0 0 0 / .08); }
.gb-submitted, .gb-marked { background:var(--warn-soft); color:var(--warn-ink); }
.gb-released { background:var(--green-soft); color:var(--ink); }
.gradebook-band-dot { display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.35rem; }
.gradebook-band-dot.good { background:var(--green); }
.gradebook-band-dot.fair { background:var(--amber); }
.gradebook-band-dot.low { background:var(--danger); }
@media (max-width:600px) {
 .class-marking table, .class-marking tbody { display:block; min-width:0; }
 .class-marking thead { display:none; }
 .class-marking .class-assignment-group { display:block; }
 .class-marking .class-assignment-group th { display:block; border:0; padding:.5rem 0; }
 .class-marking .clickrow { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:.2rem .4rem; margin-bottom:.75rem; padding:.65rem; border:1px solid var(--line); border-radius:14px; background:var(--card); }
 .class-marking .clickrow td { border:0; min-width:0; padding:.3rem; overflow-wrap:anywhere; }
 .class-marking .clickrow td:nth-child(2) { grid-column:2 / -1; align-self:center; }
 .class-marking .clickrow td:nth-child(3) { grid-column:1 / -1; }
 .class-marking .clickrow td:nth-child(4), .class-marking .clickrow td:nth-child(6) { grid-column:1 / 3; }
 .class-marking .clickrow td:nth-child(5) { grid-column:3; text-align:right; }
 .class-marking .clickrow td[data-label]::before { content:attr(data-label); display:block; font-size:.75rem; color:var(--muted); font-weight:700; }
 .class-marking .clickrow td:last-child { grid-column:3; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:.35rem; text-align:right; }
 .class-marking .clickrow td:nth-child(6) .badge { white-space:normal; }
}

/* touch targets and small text (review T1): links 36px, chips 28px (32 on a phone), nothing under 12px */
nav a { padding: .55rem .8rem; }
.chip-btn { min-height: 28px; }
th, .badge, .count { font-size: .75rem; }
.muted.small, small, .small.muted { font-size: max(.75rem, 12px); }
@media (max-width: 700px) { .chip-btn { min-height: 32px; } .icon-btn, .btn.small, button.small { min-height: 36px; } }
.load-error { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; } .load-error p { margin: 0; }
/* a table that does not fit scrolls inside its card, never the page */
.card:has(> table) { overflow-x: auto; }
@media (max-width: 700px) { .asg-table, .asg-table tbody, .asg-table tr, .asg-table td { display: block; width: 100%; } .asg-table thead { display: none; } .asg-table tr { padding: .7rem .9rem; border-bottom: 1px solid var(--line); } .asg-table td { padding: .15rem 0; border: 0; } .asg-table td.right { text-align: left; padding-top: .4rem; } body { overflow-x: clip; } }

/* Keep scrolled cells out of the frozen-name gutter. */
.gradebook-scroll { padding:0; }

/* contrast and targets found by the review's automatic checks */
th { color: var(--muted); }
.badge.ok { color: #00632f; } .badge.gray { color: var(--ink); }
.exam small, .exam .muted.small, .tick-count { color: var(--muted); }
.seg button, .tabs button { min-height: 32px; }
.back-link { display: inline-flex; align-items: center; min-height: 28px; }
button.link, button.link.small, button.code-btn, .code-btn { min-height: 28px; }
.icon-btn { min-width: 28px; min-height: 28px; }
td a:not(.btn), li > a:not(.btn) { display: inline-block; padding: .25rem 0; }
.review-score { text-align: center; min-width: 5rem; padding: .5rem .75rem; }
.review-score-overall { min-width: 6rem; }
.mark-criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mark-comment-tools { gap: .5rem; margin: .5rem 0; flex-wrap: wrap; }
.preview-banner { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.25rem; color: var(--green-ink); background: var(--green-soft); font-weight: 700; }
.preview-banner svg { flex: none; }
.exam.has-banner { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.task-editor-form input, .task-editor-form textarea, .task-editor-form select { font-weight: 400; }
.node-card-header { flex-wrap: nowrap; align-items: flex-start; }
.node-card-header .node-card-identity { flex: 1; min-width: 0; }
.container-card > .node-card-header .node-card-identity { flex: none; }
.node-card-header .node-card-actions { flex: none; }
.node-card-header .ntitle { min-width: 0; }
.node-card-header select { max-width: 100%; }
.outline, .outline .orow, .outline .olabel { min-width: 0; max-width: 100%; }
.outline .orow { width: 100%; }
.ncard > textarea.container-instructions { min-height: 0; resize: none; overflow: hidden; }
.exam-mobile-nav { display: none; }
@media (max-width: 600px) {
  .review-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .review-scores .review-score { min-width: 0; padding: .5rem .25rem; }
  .review-scores .review-score-overall { grid-column: 1 / -1; }
  .exam .bottom { position: relative; grid-template-columns: auto minmax(0, 1fr); gap: .4rem; padding: .5rem .75rem; }
  .exam .exam-mobile-nav { display: flex; gap: .5rem; align-items: center; font-size: .85rem; white-space: nowrap; }
  .exam .exam-mobile-nav button { padding: .35rem .55rem; font-size: .85rem; }
  .exam .step { order: 0; justify-content: flex-end; gap: .35rem; }
  .exam .step .arrow { width: 2.75rem; }
  .exam .step .tick { margin-left: 0; padding: 0 .65rem; font-size: .85rem; }
  .exam .parts { display: none; }
  .exam .parts.parts-open { display: flex; position: absolute; left: 0; right: 0; bottom: 100%; max-height: min(40vh, 18rem); overflow: auto; flex-wrap: wrap; padding: .75rem; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px #0001; }
  .exam .parts.parts-open > * { max-width: 100%; }
  .exam .parts.parts-open .here { flex-wrap: wrap; }
  .exam .parts.parts-open .nums { flex-wrap: wrap; }
}

/* streak flame, class card work line */
.streak .flame { color: #e8590c; vertical-align: -2px; margin-right: .15rem; }
.class-card [data-class-work] { margin-top: .2rem; }
.type-count-controls { align-items: flex-end; gap: .8rem; }
.type-count-controls > label { flex: 0 0 auto; gap: .5rem; }
.type-count-controls select { max-width: 100%; }
.type-count-controls #stLevel { width: 9rem; }
.quantity-stepper { gap: .3rem; }
.quantity-stepper input, .quantity-stepper #setCount { width: 4.5rem; text-align: center; min-width: 0; }
.quantity-stepper button { min-width: 36px; padding: .45rem .55rem; }

/* codex header-preserving page loading */
.page-skeleton { display: grid; gap: 1rem; padding: 1rem 0; }
.page-skeleton .skeleton-line, .page-skeleton .skeleton-card { background: var(--sunken); border-radius: 12px; }
.page-skeleton .skeleton-line { height: 1.5rem; width: min(18rem, 70%); }
.page-skeleton .skeleton-card { min-height: 8rem; width: 100%; }
.page-skeleton > div { display: grid; gap: 1rem; }

/* codex remaining approved UI details */
[data-licence] { margin-bottom: 1rem; }
.icon-btn.grip { width: 2rem; min-width: 2rem; }
a.notification.unread { background: var(--accent-soft); }
.opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .opt-grid { grid-template-columns: minmax(0, 1fr); } }

/* checkbox and radio: the cartoon look, one rule for every tick box and radio in the app (same rounded lip as the buttons, solid green when on) */
input[type=checkbox], input[type=radio] {
  appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-content: center; vertical-align: -.35rem; cursor: pointer;
  width: 1.4rem; height: 1.4rem; margin: 0; padding: 0; background-color: var(--card); background-repeat: no-repeat; background-position: center;
  border: 2px solid var(--line-strong); box-shadow: 0 2px 0 var(--line-strong);
  transition: background-color 120ms, border-color 120ms, box-shadow 120ms, transform 80ms;
}
input[type=checkbox] { border-radius: 8px; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: var(--green-border); box-shadow: 0 2px 0 var(--green-border); }
input[type=checkbox]:checked, input[type=radio]:checked { background-color: var(--green); border-color: var(--green-lip); box-shadow: 0 2px 0 var(--green-lip); }
input[type=checkbox]:checked { background-size: .95rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
input[type=radio]:checked { background-image: radial-gradient(circle, #fff 0 .32rem, transparent .34rem); }
input[type=checkbox]:active, input[type=radio]:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--line-strong); }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 3px solid var(--green-border); outline-offset: 2px; }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.exam .opt input, .q .opt input { width: 1.4rem; height: 1.4rem; }
.exam .opt:has(input:checked), .q .opt:has(input:checked) { background: var(--green-soft); box-shadow: inset 0 0 0 2px var(--green-border); }
@media (max-width: 700px) { input[type=checkbox], input[type=radio] { width: 1.55rem; height: 1.55rem; } }

/* hint: a small (i) that shows the longer text on hover or focus */
.hint { all: unset; box-sizing: border-box; position: relative; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-left: .3rem; vertical-align: middle; color: var(--muted); border-radius: 50%; cursor: help; }
.hint:hover { color: var(--green-ink); background: var(--green-soft); }
.hint:focus-visible { color: var(--green-ink); outline: 3px solid var(--green-border); outline-offset: 2px; }
.hint:active:not(:disabled) { transform: none; box-shadow: none; }
.hint-pop { position: fixed; z-index: 2000; width: min(18rem, calc(100vw - 16px)); padding: .45rem .65rem; border-radius: 10px; background: var(--ink); color: var(--card); font: 600 .8rem/1.35 var(--font-round); text-align: left; box-shadow: var(--shadow); overflow-wrap: anywhere; }

/* destructive actions are red everywhere: buttons, row icons and menu items share one look */
:is(button, .btn).danger { color: var(--danger-ink); font-weight: 800; border-color: var(--line); background: transparent; --lip-color: var(--line); }
:is(button, .btn).danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.assignment-template-actions { gap: .75rem 1rem; margin-top: .25rem; }
.assignment-template-actions .inline { margin: 0; }
.chip-btn[aria-expanded=true] { background: var(--green); border-color: var(--green-lip); color: #fff; } .chip-btn[aria-expanded=true]:hover { background: var(--green-press); }

/* codex round2: part progress */
.items .item-title button.link { color: var(--ink); font-weight: 700; text-decoration: none; }
.partbox { display: block; padding: .6rem .8rem; background: var(--green-soft); box-shadow: none; }
.partbox .row { gap: .4rem 1rem; }
.part-progress { height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: .4rem; }
.part-progress > span { display: block; height: 100%; background: var(--green); transition: width 150ms var(--ease-out); }
#paper > .notice-inline { margin: 0 0 .75rem; color: var(--warn); }

/* codex round2: responsive class layouts and accessible controls */
@media (max-width: 700px) { .card > .asg-table td:first-child { padding-left: 0; } }
.announcement .body { max-width: none; }
.class-news-grid { width: 100%; }
@media (max-width: 700px) {
  .student-asg-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; }
  .student-asg-table td:first-child { grid-column: 1 / -1; max-width: none; }
  .student-asg-table td:nth-child(2), .student-asg-table td:nth-child(3) { grid-column: 1; }
  .student-asg-table td.right { grid-column: 2; grid-row: 2 / 4; align-self: center; text-align: right; padding-top: 0; }
}
.gradebook .gradebook-title { width: 100%; max-width: 100%; }
.gradebook .gradebook-cell-content { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gradebook .gradebook-cell-content > div { overflow: hidden; text-overflow: ellipsis; }
.editor-outline-mobile { display: none; }
@media (max-width: 900px) { .editor-outline-mobile { display: block; margin-bottom: .7rem; } .editgrid { grid-template-columns: minmax(0, 1fr); } .editgrid > .editside { display: none; } }
.org-features-card { padding: 1.5rem; }
.org-transfer-section { margin-top: 2rem; }
.org-transfer-section h3 { margin: 0 0 .75rem; }
.org-features-card h2 { margin: 0; }
.org-feature-list { display: grid; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; gap: 1rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle-row:last-child { border-bottom: 0; }
.toggle-label { min-width: 0; overflow-wrap: anywhere; }
.toggle-control { position: relative; display: inline-flex; width: 52px; height: 30px; flex: 0 0 52px; }
.toggle-control input[type=checkbox] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.toggle-track { display: block; width: 52px; height: 30px; border: 2px solid var(--line); border-radius: 99px; background: var(--sunken); padding: 1px; }
.toggle-thumb { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px #0002; transition: transform 150ms var(--ease-out); }
.toggle-control input:checked + .toggle-track { background: var(--green); border-color: var(--green); }
.toggle-control input:checked + .toggle-track .toggle-thumb { transform: translateX(22px); }
.toggle-control input:focus-visible + .toggle-track { outline: 3px solid var(--green-ink); outline-offset: 3px; }
.toggle-control input:disabled + .toggle-track { opacity: .55; }

/* phone editor: Outline and the editing actions (undo, redo, preview, publish) are one bar at the bottom, like the exam's; on wide screens they stay in the header */
.editor-actions { display: contents; } .editor-actions .outline-btn { display: none; }
@media (max-width: 900px) {
  .editor-actions { display: flex; align-items: center; gap: .4rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 14px rgb(0 0 0 / .06); }
  .editor-actions .outline-btn { display: inline-flex; align-items: center; gap: .35rem; margin-right: auto; }
  .editor-actions button { min-height: 2.5rem; padding-inline: .7rem; } .editor-actions .lbl { display: none; }
  .editor { padding-bottom: 5rem; }
}

/* classes page header: the title and two action rows, both rows ending on the same right edge */
.class-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; } .class-actions .row { justify-content: flex-end; }
.hero:has(> .class-actions) { align-items: center; }
@media (max-width: 700px) { .class-actions { align-items: stretch; width: 100%; } .class-actions .row { justify-content: flex-start; } .hero:has(> .class-actions) { align-items: flex-start; flex-direction: column; gap: .6rem; } }

/* editor toolbar (saved state, count, undo, redo, preview, publish): a slim strip that stays under the navigation while the page scrolls */
.editor-toolbar { justify-content: flex-end; align-items: center; margin-bottom: .6rem; }
@media (min-width: 901px) {
  .editor-toolbar { position: sticky; top: 3.7rem; z-index: 6; padding: .4rem .1rem; background: var(--bg); border-bottom: 1px solid var(--line); }
  .editor-toolbar button { min-height: 2.2rem; }
}
@media (min-width: 901px) { .editside { top: 7.2rem; max-height: calc(100vh - 8.5rem); } }

/* news: title and date share the top line, the text below runs the whole width of the card */
.announcement { display: block; }
.announcement .ann-head { display: flex; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; flex-wrap: wrap; margin-bottom: .35rem; }
.announcement .ann-meta { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }

/* classes page: a quiet header, one joining field with its Join button inside it, class cards you can tick, and a bar that appears only when something is ticked */
.join-field { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .25rem .2rem 1rem; background: var(--card); border: 2px solid var(--line); border-radius: 99px; } .join-field:focus-within { border-color: var(--green); }
.join-field input { all: unset; width: 8rem; font: inherit; color: var(--ink); min-width: 0; } .join-field input::placeholder { color: var(--muted); }
.join-field { padding: .2rem .3rem .35rem 1rem; } .join-field button { border-radius: 99px; }
.class-actions { flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .6rem; }
.class-card-wrap { position: relative; } .class-card-wrap .class-card { height: 100%; }
.class-card-wrap .class-pick { position: absolute; top: .7rem; right: .7rem; opacity: 0; transition: opacity 120ms; }
.class-card-wrap:hover .class-pick, .class-card-wrap:focus-within .class-pick, .class-card-wrap.picking .class-pick, .class-card-wrap.picked .class-pick { opacity: 1; }
.class-card-wrap.picked .class-card { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.selection-bar { position: sticky; bottom: 1rem; z-index: 6; display: flex; align-items: center; justify-content: center; gap: .6rem; width: fit-content; margin: 1.2rem auto 0; padding: .5rem .6rem .5rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 99px; box-shadow: 0 8px 24px rgb(0 0 0 / .14); }
@media (max-width: 700px) { .class-actions { width: 100%; justify-content: flex-start; } .join-field { flex: 1 1 12rem; } .join-field input { flex: 1; width: auto; } }

/* destructive: a real BUTTON (Archive, Delete my account) is a red button; actions inside lists (menu items, small row buttons, row icons) stay bold red text with the red only on hover */
:is(button, .btn).danger:not(.icon-btn):not(.menu-list > *) { color: var(--danger-ink); background: var(--danger-soft); border-color: var(--danger); --lip-color: var(--danger); }
:is(button, .btn).danger:not(.icon-btn):not(.menu-list > *):hover { background: var(--danger); border-color: var(--danger); color: #fff; }
/* the template picker and other pick-one lists: dark titles, muted summaries, like every other list */
.pick-list .pick-row { color: var(--ink); } .pick-list .pick-row b { color: var(--ink); } .pick-list .pick-row small { color: var(--muted); font-weight: 500; }

/* popups: an optional one has an X in its corner */
.dialog { position: relative; } .dialog-x { position: absolute; top: .55rem; right: .55rem; z-index: 1; } .dialog > h2:first-of-type, .dialog > h3:first-child { padding-right: 2.2rem; }
.class-card-wrap .class-card { padding-right: 2.8rem; }
.selection-bar { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); margin: 0; }

/* recent attempts use the shared list; its title is the bold ink title like every other list */
.recent-list .recent-title { color: var(--ink); font-weight: 700; text-decoration: none; }

/* study and practice clock: one row (it never wraps), and the level label has air before its dropdown */
.clock-box .seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .clock-box .seg::-webkit-scrollbar { display: none; }
.clock-box .seg button { padding: .2rem .55rem; flex: none; }
.clock-box { flex-wrap: wrap; row-gap: .3rem; }
label:has(> #stLevel) { display: flex; align-items: center; gap: .7rem; }
.study-row, .type-count-controls { row-gap: 1rem; }
.recent-list .item-sub { flex-wrap: nowrap; white-space: nowrap; }

/* a code is copied by pressing it */
.code { cursor: pointer; }

/* tabs never break a label over two lines; a bar that is wider than the screen scrolls inside itself */
.tabs button { white-space: nowrap; flex: none; } .tabs { flex-wrap: nowrap; }
/* classes header on a phone: New class and the joining field stay on one row */
@media (max-width: 700px) { .class-actions { flex-wrap: nowrap; gap: .5rem; } .class-actions > button { flex: none; } .class-actions .join-field { flex: 1 1 0; min-width: 0; } .join-field input { min-width: 0; width: 100%; } }
@media (max-width: 700px) { .tabs button { padding-inline: .45rem; font-size: .9rem; } .tabs a { padding-inline: .5rem; } }

/* the folded "More ..." rows share one look: the dark green that reads on white, bold, rounded font */
:is(.assignment-options, .filter-bar-more, .library-more) > summary { color: var(--green-ink); font-weight: 700; font-family: var(--font-round); cursor: pointer; padding: .25rem 0; }

/* round 4: news actions have air above them; a badge never breaks over two lines; the phone header is ONE scrollable row without the word; a dangerous menu item has no pill */
.announcement .ann-actions { margin-top: .6rem; gap: .3rem; }
.badge { white-space: nowrap; }
.pill, .layers-cell .badge { white-space: nowrap; }
@media (max-width: 700px) {
  #top .brand > span { display: none; }
  #top .bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: .6rem; padding-block: .4rem; } #top .bar::-webkit-scrollbar { display: none; }
  #top .bar > *, #top nav, #top nav > *, .who > * { flex: none; white-space: nowrap; }
  #top nav { display: flex; gap: .2rem; } .who { margin-left: 0; }
}
.menu-list button.danger { background: transparent; border-color: transparent; color: var(--danger-ink); font-weight: 800; --lip-color: transparent; }
.menu-list button.danger:hover, .menu-list button.danger:focus-visible { background: var(--danger-soft); }

/* Scale gradually on roomy desktops; short windows retain room for their content. */
body { font-size: .9375rem; }
main, #top .bar { max-width: 115rem; }
html { font-size: clamp(16px, min(calc(8px + .5vw), 2vh), 20px); }

@media (max-width: 600px) {
  .fund-actions > span { flex-basis: 100%; }
}

/* a lone tick box row (for example "Share with my organization" under the questions) has air above it and between the box and its words */
label.check { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; font-weight: 600; cursor: pointer; }

/* listening audio player: icon buttons, a bar, no native controls */
[data-audio-box].card { padding: .9rem 1rem; border-color: var(--green-border); background: color-mix(in srgb, var(--green-soft) 35%, var(--card)); box-shadow: none; }
[data-audio-box] > .muted { color: var(--green-ink); font-family: var(--font-round); font-weight: 700; }
[data-audio-box] > p { margin: .6rem 0 0; color: var(--muted); font-size: .9rem; }
.audio-bar { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; margin-top: .65rem; }
.audio-bar:has(.audio-speed) { grid-template-columns: 2.75rem minmax(0, 1fr) auto auto; }
.audio-bar .icon-btn:not(.audio-speed) { grid-column: 1; width: 2.75rem; height: 2.75rem; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--green); border-color: var(--green); color: white; --lip: 3px; --lip-color: var(--green-ink); }
.audio-bar .icon-btn:not(.audio-speed):hover { background: var(--green-ink); border-color: var(--green-ink); }
.audio-bar progress, .audio-bar input[type=range] { grid-column: 2; width: 100%; min-width: 0; accent-color: var(--green); }
.audio-bar progress { appearance: none; height: .45rem; border: 0; border-radius: 99px; overflow: hidden; background: var(--green-border); }
.audio-bar progress::-webkit-progress-bar { background: var(--green-border); border-radius: 99px; }
.audio-bar progress::-webkit-progress-value { background: var(--green); border-radius: 99px; }
.audio-bar progress::-moz-progress-bar { background: var(--green); border-radius: 99px; }
.audio-bar input[type=range] { appearance: none; height: 1.75rem; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.audio-bar input[type=range]::-webkit-slider-runnable-track { height: .45rem; border-radius: 99px; background: var(--green-border); }
.audio-bar input[type=range]::-moz-range-track { height: .45rem; border-radius: 99px; background: var(--green-border); }
.audio-bar input[type=range]::-webkit-slider-thumb { appearance: none; width: 1rem; height: 1rem; margin-top: -.275rem; border-radius: 50%; background: var(--green); border: 2px solid white; box-shadow: 0 0 0 1px var(--green); }
.audio-bar input[type=range]::-moz-range-thumb { width: .8rem; height: .8rem; border-radius: 50%; background: var(--green); border: 2px solid white; }
.audio-bar input[type=range]:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.audio-bar > span { grid-column: 3; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .75rem; color: var(--green-ink); }
.audio-bar .audio-speed { grid-column: 4; width: 2.75rem; height: 2.75rem; padding: 0; color: var(--green-ink); font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums; border: 0; background: transparent; box-shadow: none; border-radius: 50%; }
.audio-bar .audio-speed:hover, .audio-bar .audio-speed:focus-visible { background: var(--green-soft); }
[data-response-audio] { margin-top: .5rem; }
[data-response-audio] .audio-bar { margin-top: 0; }
[data-audio-left] { margin-top: .55rem; }
@media (max-width: 420px) { .audio-bar { gap: .4rem; } [data-audio-box].card { padding: .8rem; } }

/* the reading gap between two recordings of a Listening test */
.audio-gap { margin: .6rem 0 .2rem; padding: .45rem .9rem; width: fit-content; max-width: 100%; border-radius: 99px; background: color-mix(in srgb, var(--green) 14%, var(--bg, #fff)); color: var(--green-ink); font-family: var(--font-round); font-weight: 700; font-variant-numeric: tabular-nums; }

/* outline drag: shared test and task editors */
.outline.movable .orow { position: relative; user-select: none; -webkit-user-select: none; touch-action: pan-y; cursor: grab; }
.outline.movable .orow:active { cursor: grabbing; }
.outline .orow.moving { opacity: .45; }
.outline .orow[data-drop=inside] { background: var(--green-soft); box-shadow: inset 0 0 0 2px var(--green); }
.outline .orow[data-drop=before]::before, .outline .orow[data-drop=after]::after { content: ''; position: absolute; left: .4rem; right: .4rem; height: 3px; border-radius: 3px; background: var(--green); pointer-events: none; }
.outline .orow[data-drop=before]::before { top: -2px; }
.outline .orow[data-drop=after]::after { bottom: -2px; }
.outline-hint { margin: 0 0 .5rem; padding: 0 .5rem; }
.outline-drag-label { position: fixed; z-index: 1000; pointer-events: none; max-width: 190px; padding: .5rem .7rem; border-radius: .7rem; background: var(--green-ink); color: var(--card); box-shadow: var(--shadow); font-size: .8rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.task-editgrid { align-items: start; }
.task-editgrid > form { min-width: 0; }
.task-outline-trigger { display: none; }
@media (max-width: 900px) { .task-outline-trigger { display: inline-flex; } .outline.movable .orow { min-height: 44px; } }

[data-ai-preview] summary { display:flex; align-items:center; gap:8px; color:var(--green-ink); cursor:pointer; padding:8px 0; }
[data-ai-preview] summary::before { content:"▸"; }
[data-ai-preview][open] summary::before { content:"▾"; }
[data-sec=examiner] [data-audio-box] { flex:1 1 280px; min-width:0; }
/* Shared creation controls use the existing app tabs and card surfaces. */
.source-tabs { margin: 0; flex-shrink: 0; }
.source-tabs button { display: inline-flex; align-items: center; gap: .35rem; }
.source-setup { padding: .3rem 0 .6rem; }
.standalone-task-editor { max-width: 1100px; margin-inline: auto; }
.task-metadata { margin-top: 1rem; }
.source-ai-actions { margin-bottom: .75rem; }
.task-source-bar { display: flex; gap: .75rem; align-items: center; }
.task-source-bar > .source-tabs { flex: 1; min-width: 0; }
.task-source-bar > button { flex: none; }
.dialog:has(.task-version-browser) { width: 100%; max-width: 1200px; }
.task-version-browser h2 { margin-right: 2rem; }
.task-version-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1.25rem; align-items: start; }
.task-version-content { min-width: 0; }
.task-version-list { position: sticky; top: 0; display: grid; gap: .6rem; }
.version-list-heading { margin: 0; }
.version-list-toggle { display: none; }
.version-phone-hint { display: none; }
.version-list-rows { display: flex; flex-direction: column; gap: .6rem; max-height: min(60vh, 600px); overflow-y: auto; overscroll-behavior: contain; }
.version-selection-rows { display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; overscroll-behavior: contain; }
.version-selection-screen header { padding-bottom: 1rem; }
.version-choice { display: flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.version-choice.on { border-color: var(--green); background: var(--green-soft); }
.version-choice > button:first-child { flex: 1; min-width: 0; display: grid; gap: .35rem; text-align: left; padding: .75rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-weight: 400; }
.version-choice > button:first-child b { display: flex; align-items: center; justify-content: space-between; color: var(--ink); }
.version-choice > button:first-child span { overflow-wrap: anywhere; }
.version-choice > .icon-btn { align-self: start; margin: .5rem .35rem 0 0; }
.version-preview :disabled { opacity: 1; color: var(--ink); cursor: default; }
.version-preview .adds, .version-preview .nudge, .version-preview .qhead .menu, .version-preview [data-act=detach], .version-preview [data-act=checkAI] { display: none; }
.version-legend { margin-bottom: .6rem; }
.version-preview [data-change] { background: var(--ok-soft); border-color: var(--ok); }
.version-preview[data-changed-instructions=true] [data-f=instructions], .version-preview[data-changed-type=true] [name=type], .version-preview[data-changed-skill=true] [name=skill], .version-preview[data-changed-cloze=true] [data-part=cloze], .version-preview[data-changed-passage=true] .passage, .version-preview[data-changed-limits=true] .task-limits input { background: var(--ok-soft); border-color: var(--ok); }
.version-removed { margin-bottom: .75rem; }
@media (max-width: 700px) {
  .dialog:has(.task-version-browser) { width: 100%; padding: 1rem; }
  .task-version-layout { display: flex; flex-direction: column-reverse; gap: .85rem; }
  .task-version-content, .task-version-list { width: 100%; }
  .task-version-list { position: static; }
  .version-list-heading { display: none; }
  .version-desktop-hint { display: none; }
  .version-phone-hint { display: block; }
  .version-list-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 44px; padding: .5rem .75rem; text-align: left; box-shadow: none; }
  .version-list-toggle svg { transform: rotate(-90deg); }
  .version-list-rows { display: none; }
  .dialog:has(.version-selection-screen) { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; padding: 1rem; border: 0; border-radius: 0; overflow: hidden; animation: none; }
  .version-selection-screen { height: 100%; display: flex; flex-direction: column; }
  .version-selection-screen header { flex: none; padding-right: 2rem; }
  .version-selection-screen h2 { margin: .6rem 0 0; }
  .version-selection-rows { flex: 1; min-height: 0; padding-bottom: max(.5rem, env(safe-area-inset-bottom)); }
  .version-choice { border-radius: 10px; }
  .version-choice > button:first-child { padding: .5rem .65rem; font-size: .85rem; gap: .2rem; }
  .version-choice > button:first-child span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
  .version-choice > .icon-btn { align-self: center; margin: 0 .25rem; }
  .task-version-browser .node-card-header { flex-wrap: wrap; }
}
.bank-picker-actions { position: sticky; bottom: -2rem; background: var(--card); padding-block: .6rem 2rem; border-top: 1px solid var(--line); z-index: 1; }
@media (max-width: 640px) { .bank-search-row > input.grow { flex-basis: 100%; } }
.task-manual-content { min-width: 0; }
.sheet-body .hero { align-items: flex-start; }
.sheet-body .hero h1 { font-size: 1.3rem; }
@media (max-width: 700px) { .sheet.wide { width: 100vw; } }

.version-preview textarea { min-height: 0; resize: none; }
.version-preview [data-act=removeMatchOption], .version-preview [data-act=addMatchOption], .version-preview [data-act=insertGap] { display: none; }

.bank-selected { border: 1px solid var(--ok); border-radius: 16px; padding: .65rem; background: var(--ok-soft); }
.bank-selection-toggle { width: 100%; border: 0; box-shadow: none; padding: .3rem .4rem; background: transparent; }

.material-editor { padding: .6rem 0; }
.material-pill { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--line); border-radius: 24px; background: var(--ok-soft); max-width: 100%; padding: .15rem .3rem; }
.material-pill-preview { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; background: transparent; border: 0; box-shadow: none; padding: .3rem .4rem; }
.material-pill-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.material-pill .icon-btn { flex-shrink: 0; }
.material-bank-list { max-height: 400px; overflow: auto; display: grid; gap: .6rem; }
.material-bank-item { display: grid; gap: .35rem; text-align: left; width: 100%; padding: .8rem; border-radius: 14px; box-shadow: none; }
.material-bank-item > b { color: var(--ink); }
.material-bank-item > span { font-weight: 400; margin: 0; }
.material-upload { padding: 1rem; border: 1px dashed var(--line); border-radius: 16px; }
.material-image, [data-part=materialPreview] video { max-width: 100%; }
.material-text { white-space: pre-wrap; }
.question-material-label { margin-bottom: .35rem; }
[data-part=materialPreview] .pdf { width: 100%; min-height: 420px; }

/* IELTS answer banks and visual targets retain the same controls on small screens. */
.choice-drop { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; }
.choice-drop select { min-width: 0; max-width: 100%; }
.visual-target .choice-drop { padding: .2rem; background: var(--surface, white); border-radius: .5rem; }
.shared-options li[draggable=true] { cursor: grab; }
.task-presentation .answer-visual img { display: block; }
.material-text-input { min-height: 5rem; padding: .7rem .85rem; border: 2px solid var(--line); border-radius: 16px; background: var(--sunken); white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; } .material-text-input:focus { outline: 2px solid var(--green); outline-offset: 1px; } .inline-material-pill { vertical-align: middle; margin: .1rem .2rem; white-space: nowrap; cursor: default; } .inline-material-view { display: inline-block; max-width: 100%; vertical-align: middle; margin: .4rem .15rem; } .inline-material-view img, .inline-material-view video { max-width: 100%; max-height: 30rem; } .inline-material-view.kind-audio, .inline-material-view.kind-pdf, .inline-material-view.kind-chart { display: block; } .material-text-view { white-space: pre-wrap; overflow-wrap: anywhere; }
.material-text-control { position: relative; } .material-text-control > .row:first-child { min-height: 1.3rem; padding-right: 2rem; } .inline-material-insert { position: absolute; top: -.3rem; right: 0; visibility: hidden; } .material-text-control.editing > .inline-material-insert { visibility: visible; }
.task-preview-viewport { width: 100%; min-width: 0; }
.task-preview-viewport.phone { width: 390px; max-width: 100%; margin-inline: auto; }
.task-preview-viewport.phone .split { grid-template-columns: 1fr; }
.task-preview-viewport.phone .sticky { position: static; }
.toast:has(button) { display: flex; align-items: center; gap: .75rem; pointer-events: auto; }

/* the answer check flags a question on its own card */
.qflag { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; padding: .45rem .7rem; border-radius: 12px; background: var(--warn-soft, #fff4e0); color: var(--warn, #8a5a00); font-weight: 600; }
.qflag .icon { flex: none; }
.qflag .grow { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

/* the outline's status mark: one on every row, for everything the editor knows about it */
.outline .ostatus { display: inline-flex; align-items: center; gap: .15rem; margin-left: auto; flex: none; font-size: .75rem; font-weight: 700; }
.outline .ostatus b { font-weight: 700; }
.outline .ostatus .dot { background: currentColor; }
.outline .ostatus.error { color: var(--danger, #b3261e); }
.outline .ostatus.unfinished { color: var(--amber, #c77d00); }
.outline .ostatus.flag { color: var(--amber, #c77d00); }
.outline .ostatus.ai { color: var(--ink-faint, #7a8a80); }

/* Assignment timers reuse the editor outline rows, with an aligned input column. */
.timer-branch { min-width: 0; }
.outline .timer-row { justify-content: space-between; gap: 12px; padding: 10px 8px; }
.timer-row > span { min-width: 0; overflow-wrap: anywhere; }
.timer-row label { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.timer-row input { width: 88px; text-align: right; font-variant-numeric: tabular-nums; }
.timer-row input[readonly] { background: var(--sunken); color: var(--muted); }
[data-timer-path=test] > .timer-row { margin-bottom: 6px; }
.timer-children { margin-left: .8rem; }
.timer-outline > .timer-children > .timer-branch + .timer-branch { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.outline .timer-row:focus-within { background: var(--sunken); }
@media (max-width: 520px) {
  .timer-children { margin-left: .65rem; }
  .outline .timer-row { gap: 8px; }
  .timer-row input { width: 70px; }
  .timer-row label { gap: 4px; }
  .timer-row label .small { font-size: 11px; }
}

/* a sticky toast (an AI job finished or failed): stays until the X, with a highlighted link to where to look */
.toast.sticky { display: flex; align-items: flex-start; gap: .6rem; max-width: 400px; pointer-events: auto; }
.toast.sticky .ticon { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--green); color: #fff; margin-top: .05rem; }
.toast.sticky.bad .ticon { background: #fff; color: var(--danger); }
.toast.sticky .ttext { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.toast .tlink { flex: none; align-self: center; padding: .2rem .8rem; border-radius: 99px; background: var(--green); color: #fff; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 2px rgb(255 255 255 / .22); }
.toast .tlink:hover, .toast .tlink:focus-visible { background: var(--green-ink, #00733a); }
.toast.bad .tlink { background: #fff; color: var(--danger); box-shadow: none; }
.toast .tx { flex: none; align-self: flex-start; background: transparent; border: 0; box-shadow: none; color: inherit; padding: .1rem .25rem; border-radius: 8px; opacity: .8; cursor: pointer; }
.toast .tx:hover, .toast .tx:focus-visible { opacity: 1; background: rgb(255 255 255 / .16); }

/* the AI jobs: one row each, a cooking mark, and the nav badge */
.jobrow { display: flex; align-items: center; gap: .8rem; }
.jobrow.seen { opacity: .7; }
.jobrow .jobtitle { font-weight: 700; }
.jobmark { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); }
.jobrow.failed .jobmark { background: var(--danger-soft, #fde8e6); color: var(--danger); }
.jobrow.running .jobmark { background: var(--amber-soft, #fff1d6); }
.spin { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--amber, #c77d00); border-top-color: transparent; animation: jobspin 900ms linear infinite; }
@keyframes jobspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
#top nav a .count { margin-left: .35rem; }
#top nav a .count.cooking { background: var(--amber, #c77d00); color: #fff; }
#top nav a .count.done { background: var(--green); color: #fff; }

/* in development the DEV badge sits bottom right: the toasts stack above it so their X and link stay clickable */
body:has(#devpanel) #toasts { bottom: 4.5rem; }

/* waiting for the AI: Sprout at the stove, centred, with room for the minigame */
.aiwait { justify-items: center; text-align: center; padding: 1.6rem 1rem; }
.aiwait .mini { width: 100%; max-width: 440px; border: 2px dashed var(--line); border-radius: 16px; padding: 1.2rem; color: var(--muted); }

/* the answer check: the chip the AI picked is ringed, and on a phone the check button is the icon alone */
.pill[data-ai-says] { box-shadow: 0 0 0 2px var(--warn, #8a5a00); }
@media (max-width: 600px) { [data-act=keycheck] .lbl { display: none; } }

/* Library primary choices stay visible; optional filters stay behind the shared disclosure. */
.library-main-controls { display: flex; align-items: start; justify-content: space-between; gap: 1.2rem; }
.library-main-controls > [data-part=libraryBanks] { flex-shrink: 0; }
.library-main-controls [data-part=libraryBanks] { display: grid; grid-template-columns: auto auto; gap: .35rem .75rem; }
.library-main-controls [data-part=libraryBanks] > .filter-label { grid-column: 1 / -1; }
.library-main-controls [data-part=libraryBanks] > label { align-self: center; white-space: nowrap; }
.library-filters .library-filter-main > .library-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.library-results .item:hover { background: transparent; }
@media (max-width: 800px) {
  .library-main-controls { flex-direction: column; gap: .9rem; }
  .library-main-controls > [data-part=libraryBanks] { flex-shrink: 1; }
}
@media (max-width: 640px) { .library-filters .library-filter-main > .library-filter-grid { grid-template-columns: 1fr; } }

/* Library: browsing tabs, compact bank/source switches, and independent skill checks. */
.library-switch { flex-wrap: wrap; width: fit-content; max-width: 100%; border-radius: 12px; }
.library-switch button { min-height: 32px; border-radius: 9px; }
.library-kind-tabs .seg { background: none; padding: 0; gap: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.library-kind-tabs .seg button { border-radius: 0; padding: .4rem .7rem; border-bottom: 3px solid transparent; font-size: .9rem; }
.library-kind-tabs .seg button.on { background: none; box-shadow: none; border-bottom-color: var(--green); }
.library-skill-checks { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .35rem 0; }
.library-skill-checks label { font-weight: 400; }

.library-kind-tabs, .library-filters [data-part=bankSources] { display: grid; gap: .4rem; }
.library-kind-tabs > * + *, .library-main-controls [data-part=libraryBanks] > * + * { margin-top: 0; }
.library-filters [data-part=bankSources] > * + * { margin-top: 0; }
.library-filters .library-filter-body { padding-top: .7rem; }

/* Keep Library tabs on one scrollable row; phone source segments use equal cells. */
.library-kind-tabs { min-width: 0; max-width: 100%; }
.library-kind-tabs .seg { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.library-kind-tabs .seg button { flex: none; white-space: nowrap; }
@media (max-width: 800px) { .library-kind-tabs { width: 100%; } }
@media (max-width: 640px) {
  .library-filters [data-part=bankSources] .library-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .library-filters [data-part=bankSources] .library-switch button { justify-content: center; min-width: 0; min-height: 36px; text-align: center; }
}

/* Less chrome on a question card: default Points and the delete icons of option rows appear when the row or card is hovered or focused (always on touch) */
.qpoints { opacity: 0; transition: opacity .12s; }
.qpoints[data-set=true], .qcard:hover .qpoints, .qcard:focus-within .qpoints { opacity: 1; }
[data-part=options] .icon-btn.danger, .matchopts .icon-btn.danger { color: var(--muted); border-color: transparent; background: transparent; opacity: 0; transition: opacity .12s; }
[data-part=options] .row:hover .icon-btn.danger, [data-part=options] .row:focus-within .icon-btn.danger, .matchopts .row:hover .icon-btn.danger, .matchopts .row:focus-within .icon-btn.danger { opacity: 1; }
[data-part=options] .icon-btn.danger:hover, .matchopts .icon-btn.danger:hover { color: var(--danger-ink); }
@media (hover: none) { .qpoints, [data-part=options] .icon-btn.danger, .matchopts .icon-btn.danger { opacity: 1; } }
/* a task that holds one question (Writing): the prompt sits in the task card, not in a card of its own */
.qcard.flat, .qcard.flat.selected { border: 0; background: transparent; padding: 0; box-shadow: none; }
.accepted .icon-btn.danger { color: var(--muted); border-color: transparent; background: transparent; opacity: 0; transition: opacity .12s; }
.accepted .row:hover .icon-btn.danger, .accepted .row:focus-within .icon-btn.danger { opacity: 1; } .accepted .icon-btn.danger:hover { color: var(--danger-ink); }
@media (hover: none) { .accepted .icon-btn.danger { opacity: 1; } }
@media (max-width: 480px) { .editor-actions { gap: .25rem; padding-inline: .5rem; } .editor-actions button { padding-inline: .5rem; } .editor-actions .outline-btn { font-size: 0; gap: 0; } }
/* one label style in a task card: the field names read the same whatever the field is */
.task-card .task-limits > label, .task-card label:has(> select), .task-card label:has(> input[type=checkbox]), .task-card .qcard label.muted.small, .task-card details > summary.muted.small { color: var(--ink-muted); font-weight: 700; font-size: .8rem; }
/* the prompt label is only for screen readers (the placeholder says what to write); fields in a task card are white like the card, with their border */
.qcard .rich-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.task-card :is(input:not([type=checkbox], [type=radio]), select, textarea, .rich-editor .ProseMirror) { background-color: var(--card); }

/* Add actions keep their space and remain discoverable by keyboard and touch. */
.ncard > .task-manual-content > .adds,
.canvas > .row:has(> [data-act="addSection"]) { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.ncard:hover > .task-manual-content > .adds,
.ncard:focus-within > .task-manual-content > .adds,
.container-card:not(:has(> .task-manual-content > .kids > *)) > .task-manual-content > .adds,
.canvas:hover > .row:has(> [data-act="addSection"]),
.canvas:focus-within > .row:has(> [data-act="addSection"]),
.canvas:not(:has(> .ncard)) > .row:has(> [data-act="addSection"]) { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .ncard > .task-manual-content > .adds,
  .canvas > .row:has(> [data-act="addSection"]) { opacity: 1; pointer-events: auto; }
}
/* the editor's preview is the exam frame over the whole page, one Part at a time */
.exam-preview { position: fixed; inset: 0; z-index: 70; background: var(--bg); overflow: auto; }
.exam-preview .clockbox { display: flex; justify-content: flex-end; }