/* ==========================================================================
   OEdu Console — minimal.

   The console's structure stays what it was (a sidebar, tables, a split view,
   an inspector); this is how it looks: the way Apple draws a tool you use all
   day. White, and space. A sidebar of monochrome glyphs and plain words,
   groups that fold. Type does the hierarchy — a large title, a quiet line
   under it, numbers set big and light. Hairlines instead of boxes and
   shadows. One accent, and only on what you are standing on or can press;
   red only where something is wrong.

   Everything is under body.is-console, so nothing a student sees changes.
   Light, dark, or whatever the Mac is set to (System → Appearance).
   ========================================================================== */

body.is-console {
  --cx-bg: #ffffff;
  --cx-side: #f7f7f8;
  --cx-card: #ffffff;
  --cx-card-2: #f7f7f8;
  --cx-fill: rgba(0, 0, 0, .05);
  --cx-fill-2: rgba(0, 0, 0, .035);
  --cx-sep: rgba(0, 0, 0, .09);
  --cx-label: #1d1d1f;
  --cx-label-2: #6e6e73;
  --cx-label-3: #a1a1a6;
  --cx-accent: #0071e3;
  --cx-accent-soft: rgba(0, 113, 227, .09);
  --cx-ink: #1d1d1f;
  --cx-bar: #1d1d1f;
  --cx-bar-2: #d2d2d7;
  --cx-green: #1d1d1f; --cx-teal: #1d1d1f; --cx-cyan: #1d1d1f; --cx-indigo: #1d1d1f; --cx-purple: #1d1d1f;
  --cx-pink: #1d1d1f; --cx-yellow: #6e6e73; --cx-gray: #a1a1a6;
  --cx-red: #d70015; --cx-orange: #b25000; --cx-ok: #1d7a3e;
  --cx-shadow: none;
  --cx-shadow-hi: 0 0 0 .5px rgba(0, 0, 0, .08), 0 20px 60px -12px rgba(0, 0, 0, .22);
  --cx-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --cx-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  --cx-ease: cubic-bezier(.2, .8, .2, 1);
  background: var(--cx-bg);
  font-family: var(--cx-font);
  color: var(--cx-label);
  min-height: 100vh;
}
body.is-console[data-appearance="dark"] {
  --cx-bg: #0b0b0c; --cx-side: #121214; --cx-card: #0b0b0c; --cx-card-2: #161618;
  --cx-fill: rgba(255, 255, 255, .07); --cx-fill-2: rgba(255, 255, 255, .045); --cx-sep: rgba(255, 255, 255, .1);
  --cx-label: #f5f5f7; --cx-label-2: #98989d; --cx-label-3: #636366; --cx-accent: #2997ff; --cx-accent-soft: rgba(41, 151, 255, .14);
  --cx-ink: #f5f5f7; --cx-bar: #f5f5f7; --cx-bar-2: #3a3a3c;
  --cx-green: #f5f5f7; --cx-teal: #f5f5f7; --cx-cyan: #f5f5f7; --cx-indigo: #f5f5f7; --cx-purple: #f5f5f7; --cx-pink: #f5f5f7;
  --cx-yellow: #98989d; --cx-gray: #636366; --cx-red: #ff453a; --cx-orange: #ff9f0a; --cx-ok: #30d158;
  --cx-shadow-hi: 0 0 0 .5px rgba(255, 255, 255, .12), 0 24px 70px -12px rgba(0, 0, 0, .8);
  --paper: #0b0b0c; --canvas: #0b0b0c; --sunk: #1c1c1e; --ink: #f5f5f7; --ink-2: #98989d; --ink-3: #636366;
  --rule: rgba(255, 255, 255, .16); --hair: rgba(255, 255, 255, .1);
  --blue: #2997ff; --blue-d: #52aaff; --green: #30d158; --amber: #ff9f0a; --red: #ff453a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  body.is-console[data-appearance="auto"] {
    --cx-bg: #0b0b0c; --cx-side: #121214; --cx-card: #0b0b0c; --cx-card-2: #161618;
    --cx-fill: rgba(255, 255, 255, .07); --cx-fill-2: rgba(255, 255, 255, .045); --cx-sep: rgba(255, 255, 255, .1);
    --cx-label: #f5f5f7; --cx-label-2: #98989d; --cx-label-3: #636366; --cx-accent: #2997ff; --cx-accent-soft: rgba(41, 151, 255, .14);
    --cx-ink: #f5f5f7; --cx-bar: #f5f5f7; --cx-bar-2: #3a3a3c;
    --cx-green: #f5f5f7; --cx-teal: #f5f5f7; --cx-cyan: #f5f5f7; --cx-indigo: #f5f5f7; --cx-purple: #f5f5f7; --cx-pink: #f5f5f7;
    --cx-yellow: #98989d; --cx-gray: #636366; --cx-red: #ff453a; --cx-orange: #ff9f0a; --cx-ok: #30d158;
    --cx-shadow-hi: 0 0 0 .5px rgba(255, 255, 255, .12), 0 24px 70px -12px rgba(0, 0, 0, .8);
    --paper: #0b0b0c; --canvas: #0b0b0c; --sunk: #1c1c1e; --ink: #f5f5f7; --ink-2: #98989d; --ink-3: #636366;
    --rule: rgba(255, 255, 255, .16); --hair: rgba(255, 255, 255, .1);
    --blue: #2997ff; --blue-d: #52aaff; --green: #30d158; --amber: #ff9f0a; --red: #ff453a;
    color-scheme: dark;
  }
}
/* The page behind the console. --cx-page is declared here, once, rather than
   written into each branch's background: it is the only place the console
   decides what the document root is, which is also the only place that has
   to be disagreed with. obsidian.css restates it under
   html[data-look="obsidian"] — a person can be an administrator and a
   student, the console shell is a body class rather than a second document,
   and this selector is more specific than the student scope's, so without
   that the console would paint a student's page white and win on both
   specificity and load order. */
html:has(> body.is-console) { --cx-page: #ffffff; background: var(--cx-page); }
html:has(> body.is-console[data-appearance="dark"]) { --cx-page: #0b0b0c; }
@media (prefers-color-scheme: dark) { html:has(> body.is-console[data-appearance="auto"]) { --cx-page: #0b0b0c; } }

/* ------------------------------------------------------------- The window */
body.is-console .lx-wrap { padding-left: calc(248px + 64px); padding-right: 64px; padding-top: 64px; }
body.is-console .admin-body { max-width: 1120px; }
body.is-console .cn-back { left: calc(248px + 64px); top: 22px; font-size: 13px; color: var(--cx-accent); background: none; box-shadow: none; padding: 4px 0; }
body.is-console .cn-back:hover { box-shadow: none; opacity: .7; color: var(--cx-accent); }

/* ------------------------------------------------------------- The sidebar */
body.is-console .cn-rail { width: 248px; padding: 18px 12px 12px; background: var(--cx-side); border-right: .5px solid var(--cx-sep); }
body.is-console .cn-school { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; }
body.is-console .cn-school .logo { width: 22px; height: 22px; flex: none; color: var(--cx-label); display: grid; place-items: center; }
body.is-console .cn-school .logo svg { width: 20px; height: 20px; }
body.is-console .cn-school b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--cx-label); }
body.is-console .cn-school span span { display: block; font-size: 11.5px; color: var(--cx-label-2); }
body.is-console .cn-find { margin: 0 0 10px; padding: 6px 9px; gap: 7px; justify-content: flex-start; border-radius: 8px; background: var(--cx-fill); box-shadow: none; color: var(--cx-label-3); font-size: 13px; }
body.is-console .cn-find svg { width: 13px; height: 13px; flex: none; }
body.is-console .cn-find span { flex: 1; text-align: left; }
body.is-console .cn-find kbd { background: none; color: var(--cx-label-3); font-size: 11px; }
body.is-console .cn-find:hover { box-shadow: none; color: var(--cx-label-2); }
body.is-console .cn-nav { margin-top: 0; }
body.is-console .cn-group { display: none; }
body.is-console .cn-item { gap: 10px; padding: 5.5px 8px; border-radius: 7px; font-size: 13.5px; font-weight: 400; letter-spacing: -.005em; color: var(--cx-label); background: none; }
body.is-console .cn-item .ic { width: 17px; height: 17px; flex: none; display: grid; place-items: center; color: var(--cx-label-2); }
body.is-console .cn-item .ic svg { width: 16px; height: 16px; stroke-width: 1.7; }
body.is-console .cn-item:hover { background: var(--cx-fill-2); color: var(--cx-label); }
body.is-console .cn-item.on { background: var(--cx-fill); color: var(--cx-label); font-weight: 600; }
body.is-console .cn-item.on .ic { color: var(--cx-accent); }
body.is-console .cn-item .ct { font-size: 12px; color: var(--cx-label-3); padding: 0; background: none; }
body.is-console .cn-item .ct.on { background: none; color: var(--cx-label-2); }
body.is-console .cn-item.on .ct { color: var(--cx-label-2); }
/* A group folds: its row carries a disclosure chevron, its places sit under it. */
body.is-console .cn-item.grp .chev { width: 12px; height: 12px; color: var(--cx-label-3); transition: transform .2s var(--cx-ease); }
body.is-console .cn-item.grp.open .chev { transform: rotate(90deg); }
body.is-console .cn-item.grp.has-on:not(.open) { font-weight: 600; }
body.is-console .cn-item.grp.has-on:not(.open) .ic { color: var(--cx-accent); }
body.is-console .cn-kids { display: none; margin: 1px 0 4px; }
body.is-console .cn-item.grp.open + .cn-kids { display: block; }
body.is-console .cn-kids .cn-item { padding-left: 35px; font-size: 13px; color: var(--cx-label-2); }
body.is-console .cn-kids .cn-item.on { color: var(--cx-label); }
body.is-console .cn-foot { border-top: .5px solid var(--cx-sep); padding-top: 10px; margin-top: 10px; }
body.is-console .cn-org { padding: 6px 8px; border-radius: 8px; }
body.is-console .cn-org:hover { background: var(--cx-fill-2); }
body.is-console .cn-org .av { width: 26px; height: 26px; font-size: 10.5px; background: var(--cx-label-3) !important; }
body.is-console .cn-org .t b { color: var(--cx-label); font-size: 13px; font-weight: 500; }
body.is-console .cn-org .t span { color: var(--cx-label-2); }
body.is-console .cn-item.quiet { color: var(--cx-label-2); }

/* ---------------------------------------------------------------- Headings */
body.is-console .cn-head { margin-bottom: 36px; }
body.is-console .cn-eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cx-label-2); margin-bottom: 4px; }
body.is-console .cn-h1 { font-family: var(--cx-display); font-size: 34px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; color: var(--cx-label); }
body.is-console .cn-sub { font-size: 15px; color: var(--cx-label-2); line-height: 1.45; margin-top: 8px; max-width: 60ch; }
body.is-console .cn-h2 { font-family: var(--cx-display); font-size: 17px; font-weight: 600; letter-spacing: -.012em; margin: 40px 0 12px; color: var(--cx-label); }

/* --------------------------------------------- Tiles, rows, blocks, tables */
body.is-console .cn-tiles { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 32px; border-top: .5px solid var(--cx-sep); border-bottom: .5px solid var(--cx-sep); }
body.is-console .cn-tile { flex: 1 1 140px; padding: 18px 20px 18px 0; border-radius: 0; background: none; box-shadow: none; }
body.is-console .cn-tile + .cn-tile { padding-left: 20px; border-left: .5px solid var(--cx-sep); }
body.is-console .cn-tile b { font-family: var(--cx-display); font-size: 30px; font-weight: 300; letter-spacing: -.02em; color: var(--cx-label); }
body.is-console .cn-tile span { color: var(--cx-label-2); font-size: 12.5px; margin-top: 4px; }
body.is-console .cn-tile.owe b { color: var(--cx-orange); } body.is-console .cn-tile.late b { color: var(--cx-red); } body.is-console .cn-tile.done b { color: var(--cx-ok); }
body.is-console .cn-rows { background: none; border-top: .5px solid var(--cx-sep); border-radius: 0; box-shadow: none; }
body.is-console .cn-row { border-radius: 0; background: none; box-shadow: none; border-bottom: .5px solid var(--cx-sep); }
body.is-console .cn-row:hover { background: var(--cx-fill-2); }
body.is-console .cn-block, body.is-console .cn-empty, body.is-console .cn-start { background: none; border: .5px solid var(--cx-sep); border-radius: 12px; box-shadow: none; }
body.is-console .cn-tbl { background: none; border: 0; border-top: .5px solid var(--cx-sep); border-radius: 0; box-shadow: none; overflow: visible; }
body.is-console .cn-tr.head { background: var(--cx-bg); border-bottom: .5px solid var(--cx-sep); position: sticky; top: 0; z-index: 2; }
body.is-console .cn-th { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--cx-label-2); }
body.is-console .cn-tbody .cn-tr { border-top: 0; border-bottom: .5px solid var(--cx-sep); }
body.is-console button.cn-tr:hover { background: var(--cx-fill-2); }
body.is-console button.cn-tr.on, body.is-console .cn-tr.on { background: var(--cx-accent-soft); }
body.is-console .cn-insp { background: none; border: 0; border-left: .5px solid var(--cx-sep); border-radius: 0; box-shadow: none; padding: 0 0 0 24px; }
body.is-console .cn-insp .cn-tbl { border-top: .5px solid var(--cx-sep); }
body.is-console .cn-inspbig b { font-family: var(--cx-display); font-weight: 300; }
body.is-console .cn-mk { font-weight: 500; }
body.is-console .cn-mk.bad { color: var(--cx-red); }
body.is-console .cn-mk.warn { color: var(--cx-orange); }
body.is-console .cn-none { color: var(--cx-label-3); }
body.is-console .cn-sub2 { color: var(--cx-label-2); }
body.is-console .cn-verdict, body.is-console .cn-verdict.ok { background: none; box-shadow: none; border-left: 2px solid var(--cx-orange); border-radius: 0; padding: 4px 0 4px 14px; margin: 0 0 24px; color: var(--cx-label); }
body.is-console .cn-verdict.ok { border-left-color: var(--cx-ok); }
body.is-console .cn-tag, body.is-console .cn-tag.on { background: none; color: var(--cx-label-2); padding: 0; }
body.is-console .admin-warn, body.is-console .admin-failed { background: none; border-left: 2px solid var(--cx-orange); }
body.is-console .admin-failed { border-left-color: var(--cx-red); }

/* --------------------------------------------------------------- Controls */
body.is-console .cn-acts { gap: 8px; }
body.is-console .cn-btn { height: 30px; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 500; background: var(--cx-fill); color: var(--cx-label); box-shadow: none; border: 0; transition: background .15s var(--cx-ease), opacity .15s; }
body.is-console .cn-btn:hover { background: color-mix(in srgb, var(--cx-label) 10%, transparent); }
body.is-console .cn-btn.strong { background: var(--cx-accent); color: #fff; box-shadow: none; }
body.is-console .cn-btn.strong:hover { opacity: .88; background: var(--cx-accent); }
body.is-console .cn-btn.small { height: 26px; padding: 0 11px; font-size: 12px; }
body.is-console .cn-seg, body.is-console .cn-filters { display: inline-flex; gap: 0; padding: 2px; border-radius: 8px; background: var(--cx-fill); border: 0; }
body.is-console .cn-segb, body.is-console .cn-filter { font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: 6px; color: var(--cx-label-2); background: none; box-shadow: none; border: 0; }
body.is-console .cn-segb.on, body.is-console .cn-filter.on { background: var(--cx-bg); color: var(--cx-label); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04); }
body.is-console[data-appearance="dark"] .cn-segb.on, body.is-console[data-appearance="dark"] .cn-filter.on { background: #3a3a3c; }
body.is-console .cn-filter em { font-style: normal; margin-left: 6px; color: var(--cx-label-3); font-weight: 400; }
body.is-console input.cn-search, body.is-console .cx-search {
  height: 30px; padding: 0 10px 0 28px; border-radius: 8px; border: 0; font-size: 13px; color: var(--cx-label);
  background: var(--cx-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") 9px center / 13px no-repeat;
}
body.is-console input.cn-search:focus, body.is-console .cx-search:focus { outline: none; box-shadow: 0 0 0 3px var(--cx-accent-soft); }
body.is-console .cn-bar { gap: 12px; margin-bottom: 20px; }
body.is-console .admin-field input, body.is-console .admin-field textarea, body.is-console .admin-field select {
  border-radius: 8px; border: .5px solid var(--cx-sep); background: var(--cx-bg); color: var(--cx-label); font-size: 14px; box-shadow: none;
}
body.is-console .admin-field input:focus, body.is-console .admin-field textarea:focus, body.is-console .admin-field select:focus { outline: none; border-color: var(--cx-accent); box-shadow: 0 0 0 3px var(--cx-accent-soft); }
body.is-console .admin-field > span { color: var(--cx-label-2); font-size: 12px; font-weight: 500; }
.cx-select { height: 30px; min-width: 210px; padding: 0 10px; border-radius: 8px; border: .5px solid var(--cx-sep); background: var(--cx-bg); color: var(--cx-label); font: inherit; font-size: 13px; }
.cx-select:focus { outline: none; box-shadow: 0 0 0 3px var(--cx-accent-soft); }
.cx-switch { position: relative; width: 38px; height: 22px; flex: none; border-radius: 99px; background: var(--cx-fill); border: 0; cursor: pointer; transition: background .2s var(--cx-ease); }
.cx-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s var(--cx-ease); }
.cx-switch[aria-checked="true"] { background: var(--cx-accent); }
.cx-switch[aria-checked="true"]::after { transform: translateX(16px); }

/* ------------------------------------------------------------ Spotlight */
body.is-console .cn-finderwrap { background: rgba(0, 0, 0, .12); }
body.is-console .cn-finder { border-radius: 14px; border: 0; box-shadow: var(--cx-shadow-hi); background: color-mix(in srgb, var(--cx-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); }
body.is-console .cn-finderin { font-size: 20px; font-weight: 300; color: var(--cx-label); background: none; }
body.is-console .cn-finderrow { border-radius: 7px; }
body.is-console .cn-finderrow.on, body.is-console .cn-finderrow:hover { background: var(--cx-accent); color: #fff; }
body.is-console .cn-finderrow.on *, body.is-console .cn-finderrow:hover * { color: #fff !important; }

/* =============================================================== Overview */
.cx-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.cx-top .cn-head { margin: 0; }
.cx-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px 48px; }
.cx-card { position: relative; min-width: 0; background: none; border-radius: 0; box-shadow: none; padding: 0; animation: cx-in .5s var(--cx-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes cx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cx-s3 { grid-column: span 3; } .cx-s4 { grid-column: span 4; } .cx-s5 { grid-column: span 5; } .cx-s6 { grid-column: span 6; }
.cx-s7 { grid-column: span 7; } .cx-s8 { grid-column: span 8; } .cx-s12 { grid-column: span 12; }
@media (max-width: 1180px) { .cx-s3 { grid-column: span 6; } .cx-s4, .cx-s5, .cx-s6, .cx-s7, .cx-s8 { grid-column: span 12; } }
.cx-ch { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: .5px solid var(--cx-sep); }
.cx-ch .ic { display: none; }
.cx-ch h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--cx-label); }
.cx-ch small { margin-left: auto; font-size: 12.5px; color: var(--cx-label-2); }
.cx-ch .more { margin-left: auto; font-size: 13px; color: var(--cx-accent); background: none; border: 0; cursor: pointer; padding: 0; }
.cx-ch .more:hover { opacity: .7; }
.cx-note { font-size: 13px; line-height: 1.5; color: var(--cx-label-2); margin: 12px 0 0; max-width: 72ch; }
.cx-note b { color: var(--cx-label); font-weight: 600; }

/* The figures: numbers set big and light, a word under each, a hairline between. */
.cx-metrics { grid-column: span 12; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: .5px solid var(--cx-sep); border-bottom: .5px solid var(--cx-sep); }
.cx-metric { padding: 20px 20px 20px 0; min-width: 0; text-align: left; background: none; border: 0; font: inherit; color: inherit; }
button.cx-metric { cursor: pointer; }
button.cx-metric:hover b { color: var(--cx-accent); }
.cx-metric + .cx-metric { padding-left: 20px; border-left: .5px solid var(--cx-sep); }
.cx-metric b { display: block; font-family: var(--cx-display); font-size: 38px; font-weight: 200; letter-spacing: -.03em; line-height: 1; color: var(--cx-label); font-variant-numeric: tabular-nums; }
.cx-metric b small { font-size: 18px; font-weight: 300; margin-left: 1px; color: var(--cx-label-2); }
.cx-metric span { display: block; margin-top: 8px; font-size: 12.5px; color: var(--cx-label-2); }
.cx-metric em { display: block; margin-top: 3px; font-style: normal; font-size: 12px; color: var(--cx-label-3); }
.cx-metric em.bad { color: var(--cx-red); }
.cx-metric .line { height: 2px; margin-top: 12px; background: var(--cx-bar-2); position: relative; }
.cx-metric .line i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cx-bar); transition: width 1s var(--cx-ease); }

/* KPI cards from the teacher's Today, kept plain. */
.cx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: .5px solid var(--cx-sep); }
.cx-kpi { padding: 16px 0; border-bottom: .5px solid var(--cx-sep); }
.cx-kpi .lab { font-size: 12.5px; color: var(--cx-label-2); display: flex; gap: 6px; align-items: center; }
.cx-kpi .lab svg { display: none; }
.cx-kpi b { display: block; margin-top: 6px; font-family: var(--cx-display); font-size: 32px; font-weight: 200; letter-spacing: -.03em; color: var(--cx-label); }
.cx-kpi b small { font-size: 16px; color: var(--cx-label-2); }
.cx-kpi p { margin: 4px 0 0; font-size: 12.5px; color: var(--cx-label-2); }
.cx-kpi p .bad { color: var(--cx-red); } .cx-kpi p .ok { color: var(--cx-ok); }
.cx-mini { display: flex; height: 3px; margin-top: 10px; gap: 2px; }
.cx-mini i { display: block; min-width: 2px; }

/* Charts: bars in ink, a hairline grid, the average as a dotted line. */
.cx-chart { position: relative; }
.cx-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cx-chart .grid { stroke: var(--cx-sep); }
.cx-chart .ax { font-size: 11px; fill: var(--cx-label-2); font-family: var(--cx-font); }
.cx-chart .val { font-size: 11px; font-weight: 500; fill: var(--cx-label); font-family: var(--cx-font); }
.cx-chart .avg { stroke: var(--cx-accent); stroke-width: 1; stroke-dasharray: 2 3; }
.cx-chart .avgt { font-size: 11px; font-weight: 500; fill: var(--cx-accent); font-family: var(--cx-font); }
.cx-big { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; }
.cx-big b { font-family: var(--cx-display); font-size: 28px; font-weight: 200; letter-spacing: -.02em; color: var(--cx-label); font-variant-numeric: tabular-nums; }
.cx-big span { font-size: 13px; color: var(--cx-label-2); }

/* Lists. */
.cx-list { display: grid; }
.cx-li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 6px; margin: 0 -6px; text-align: left;
  background: none; border: 0; border-bottom: .5px solid var(--cx-sep); border-radius: 0; font: inherit; color: inherit; cursor: pointer; }
.cx-li:hover { background: var(--cx-fill-2); }
/* People are monograms in one grey, the way Contacts draws them: a colour per
   person is decoration the eye then has to read past. */
.cx-av, body.is-console .admin-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  background: linear-gradient(180deg, #b9b9be, #8e8e93) !important; }
body.is-console .admin-av { width: 24px; height: 24px; font-size: 9.5px; }
.cx-av svg { width: 14px; height: 14px; }
.cx-li .t { min-width: 0; }
.cx-li .t b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cx-label); }
.cx-li .t span { display: block; font-size: 12.5px; color: var(--cx-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-li .r { text-align: right; display: grid; justify-items: end; gap: 2px; }
.cx-li .r b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--cx-label); }
.cx-pill { display: inline; padding: 0; background: none; font-size: 12px; font-weight: 400; color: var(--cx-label-2); white-space: nowrap; }
.cx-pill.red { color: var(--cx-red); } .cx-pill.orange { color: var(--cx-orange); } .cx-pill.green { color: var(--cx-label-3); } .cx-pill.blue { color: var(--cx-accent); }
.cx-mring { width: 28px; height: 28px; display: block; }
.cx-mring circle { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.cx-mring .trk { stroke: var(--cx-bar-2); }
.cx-feed { display: grid; }
.cx-ev { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: .5px solid var(--cx-sep); }
.cx-ev .cx-av { width: 28px; height: 28px; }
.cx-ev .t { font-size: 13.5px; color: var(--cx-label); min-width: 0; }
.cx-ev .t b { font-weight: 500; }
.cx-ev .t span { color: var(--cx-label-2); }
.cx-ev time { font-size: 12px; color: var(--cx-label-3); white-space: nowrap; }
.cx-chg { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--cx-label); }
.cx-skel { border-radius: 4px; background: linear-gradient(90deg, var(--cx-fill-2) 0%, var(--cx-fill) 40%, var(--cx-fill-2) 80%); background-size: 300% 100%; animation: cx-shim 1.3s linear infinite; }
@keyframes cx-shim { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.cx-dist { display: flex; height: 3px; gap: 2px; background: none; }
.cx-dist i { display: block; }

/* ----------------------------------------------------------------- Sheets */
.cx-sheetwrap { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .2); animation: cx-fade .2s ease both; }
@keyframes cx-fade { from { opacity: 0; } to { opacity: 1; } }
.cx-sheet { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 14px; background: var(--cx-bg); box-shadow: var(--cx-shadow-hi);
  animation: cx-drop .3s var(--cx-ease) both; padding: 24px 26px 22px; color: var(--cx-label); }
@keyframes cx-drop { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
.cx-sheet .cn-insp { border: 0; padding: 0; }
.cx-sheetx { position: sticky; top: 0; float: right; margin: -8px -10px 0 0; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; background: var(--cx-fill); color: var(--cx-label-2); display: grid; place-items: center; font-size: 15px; }

/* --------------------------------------------------------- Courses, as cards */
.cx-cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 40px; border-top: .5px solid var(--cx-sep); }
.cx-course { text-align: left; border: 0; border-bottom: .5px solid var(--cx-sep); border-radius: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 18px 0; }
.cx-course:hover h4 { color: var(--cx-accent); }
.cx-course .band { display: none; }
.cx-course .body { display: grid; gap: 12px; padding: 0; }
.cx-course h4 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.012em; color: var(--cx-label); transition: color .15s; }
.cx-course .who { font-size: 12.5px; color: var(--cx-label-2); margin-top: 3px; }
.cx-course .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cx-course .nums div { display: grid; gap: 2px; }
.cx-course .nums b { font-family: var(--cx-display); font-size: 22px; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--cx-label) !important; }
.cx-course .nums span { font-size: 11.5px; color: var(--cx-label-2); }

.cx-role { font-size: 12.5px; font-weight: 400; padding: 0; background: none !important; color: var(--cx-label-2) !important; }

/* Settings rows. */
.cx-set { border-top: .5px solid var(--cx-sep); margin-bottom: 28px; }
.cx-setrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: .5px solid var(--cx-sep); }
.cx-setrow .ic { width: 20px; height: 20px; display: grid; place-items: center; color: var(--cx-label-2); background: none; }
.cx-setrow .ic svg { width: 17px; height: 17px; stroke-width: 1.7; }
.cx-setrow > .cx-av { width: 20px; height: 20px; font-size: 8px; }
.cx-setrow .t b { display: block; font-size: 14px; font-weight: 500; color: var(--cx-label); }
.cx-setrow .t span { display: block; font-size: 12.5px; color: var(--cx-label-2); line-height: 1.45; margin-top: 2px; }
.cx-setrow .v { font-size: 13px; color: var(--cx-label-2); display: flex; align-items: center; gap: 8px; }
.cx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cx-ok); }
.cx-dot.off { background: var(--cx-red); }
.cx-sethead { font-size: 13px; font-weight: 600; color: var(--cx-label); margin: 32px 0 8px; }
.cx-sethead:first-child { margin-top: 0; }

/* ---------------------------------------------------- One student / teacher */
.cx-ihead { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cx-ihead .cx-av { width: 40px; height: 40px; font-size: 14px; }
.cx-ihead b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: var(--cx-label); }
.cx-ihead span { display: block; font-size: 12.5px; color: var(--cx-label-2); }
.cx-ihero { display: flex; align-items: center; gap: 22px; padding: 16px 0; border-top: .5px solid var(--cx-sep); border-bottom: .5px solid var(--cx-sep); background: none; border-radius: 0; }
.cx-ihero .ring { position: relative; width: 70px; height: 70px; flex: none; }
.cx-mring.big { width: 70px; height: 70px; }
.cx-mring.big circle { stroke-width: 2; }
.cx-ihero .ring b { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 22px; font-family: var(--cx-display); font-size: 20px; font-weight: 300; letter-spacing: -.02em; color: var(--cx-label); }
.cx-ihero .ring b small { font-size: 11px; }
.cx-ihero .stats { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cx-ihero .stats div { display: grid; gap: 2px; }
.cx-ihero .stats b { font-family: var(--cx-display); font-size: 24px; font-weight: 300; font-variant-numeric: tabular-nums; color: var(--cx-label); }
.cx-ihero .stats span { font-size: 12px; color: var(--cx-label-2); }
.cx-ilist { display: grid; margin: 12px 0 4px; }
.cx-irow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 56px; gap: 14px; align-items: center; padding: 11px 0; text-align: left;
  background: none; border: 0; border-bottom: .5px solid var(--cx-sep); border-radius: 0; font: inherit; color: inherit; cursor: pointer; }
.cx-irow:hover .t b { color: var(--cx-accent); }
.cx-irow .t b { display: block; font-size: 14px; font-weight: 500; color: var(--cx-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s; }
.cx-irow .t span { display: block; font-size: 12.5px; color: var(--cx-label-2); }
.cx-irow .t em { font-style: normal; color: var(--cx-orange); }
.cx-irow .bar { height: 2px; background: var(--cx-bar-2); position: relative; }
.cx-irow .bar i { display: block; height: 100%; }
.cx-irow .g { text-align: right; }
.cx-irow .g b { display: block; font-size: 14px; font-weight: 600; color: var(--cx-label); }
.cx-irow .g span { display: block; font-size: 11.5px; color: var(--cx-label-2); font-variant-numeric: tabular-nums; }
body.is-console .cx-insp { padding-top: 0; }

.cx-360h { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; flex-wrap: wrap; }
.cx-360h > .cx-av { width: 56px; height: 56px; font-size: 19px; }
.cx-360h .t { flex: 1; min-width: 220px; }
.cx-360h .cn-eyebrow { margin-bottom: 2px; }
.cx-360h .cn-sub { margin-top: 2px; }
.cx-360tabs { margin-bottom: 32px; }
.cx-bul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; color: var(--cx-label); }
.cx-gcard { padding-top: 8px; }
.cx-360p > .cx-card + .cx-card { margin-top: 44px; }
.cx-gtop { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.cx-gtop b { font-family: var(--cx-display); font-size: 28px; font-weight: 300; letter-spacing: -.02em; color: var(--cx-label) !important; }
.cx-gtop span { font-size: 13px; color: var(--cx-label-2); }
.cx-cats { display: grid; gap: 8px; margin-bottom: 18px; max-width: 520px; }
.cx-cats > div { display: grid; grid-template-columns: 140px 1fr 44px; gap: 12px; align-items: center; font-size: 12.5px; color: var(--cx-label-2); }
.cx-cats .bar { height: 2px; background: var(--cx-bar-2); position: relative; }
.cx-cats .bar i { display: block; height: 100%; }
.cx-cats b { text-align: right; color: var(--cx-label); font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: -16px 0 24px; }
.cx-crumb { border: 0; background: none; font: inherit; font-size: 14px; color: var(--cx-accent); cursor: pointer; padding: 2px 0; }
.cx-crumb:hover { opacity: .7; }
.cx-crumb + .cx-crumb::before { content: "/"; color: var(--cx-label-3); margin: 0 10px; }
.cx-crumb.on { color: var(--cx-label); font-weight: 500; cursor: default; }
.cx-crumb.on:hover { opacity: 1; }

/* A place that is not set up yet: said plainly, with what it will hold. */
.cx-soon { max-width: 640px; border-top: .5px solid var(--cx-sep); padding-top: 24px; }
.cx-soon h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.012em; color: var(--cx-label); }
.cx-soon p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cx-label-2); }
.cx-soon ul { margin: 18px 0 0; padding: 0; list-style: none; border-top: .5px solid var(--cx-sep); }
.cx-soon li { padding: 11px 0; border-bottom: .5px solid var(--cx-sep); font-size: 14px; color: var(--cx-label); }
.cx-soon .needs { margin-top: 18px; font-size: 13px; color: var(--cx-label-3); }

/* ----------------------------------------------- Older pieces, kept plain */
body.is-console .gb-pickb { border-radius: 8px; background: none; box-shadow: inset 0 0 0 .5px var(--cx-sep); }
body.is-console .gb-pickb:hover { box-shadow: inset 0 0 0 .5px var(--cx-label-3); }
body.is-console .gb-pickb.on { background: var(--cx-label); color: var(--cx-bg); box-shadow: none; }
body.is-console .gb-pickb.on span { color: color-mix(in srgb, var(--cx-bg) 70%, transparent); }
body.is-console .admin-x:hover { background: color-mix(in srgb, var(--cx-red) 12%, transparent); }
body.is-console .gb-r:not(.head):not(.foot):hover, body.is-console .gb-r:not(.head):not(.foot):hover .gb-c.name { background: var(--cx-fill-2); }
body.is-console .gb-owed.late { background: none; color: var(--cx-orange); }
body.is-console .gb-c.cell.blank.late { background: color-mix(in srgb, var(--cx-orange) 8%, transparent); }
body.is-console .gb-c.cell.bad { background: color-mix(in srgb, var(--cx-red) 10%, transparent); }
body.is-console .gb-ibtn:hover { background: var(--cx-bg); }
body.is-console .lx-exam-status.today, body.is-console .asm-security-value.restricted, body.is-console .lx-exam-status.upcoming { background: none; color: var(--cx-label-2); }

/* The teacher's Today still draws its three rings; kept quiet here. */
.cx-rings { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.cx-ringsvg { width: 150px; height: 150px; display: block; }
.cx-ringsvg circle { fill: none; stroke-linecap: round; }
.cx-ringsvg .trk { opacity: .14; }
.cx-ringsvg .arc { transition: stroke-dashoffset 1.2s var(--cx-ease); }
.cx-legend { display: grid; gap: 12px; }
.cx-legend > div { display: grid; gap: 2px; }
.cx-legend b { font-family: var(--cx-display); font-size: 26px; font-weight: 200; letter-spacing: -.02em; line-height: 1; color: var(--cx-label); font-variant-numeric: tabular-nums; }
.cx-legend b small { font-size: 14px; }
.cx-legend span { font-size: 12.5px; color: var(--cx-label-2); }
.cx-legend em { font-style: normal; font-size: 12px; color: var(--cx-label-3); }

/* ----------------------------------------------------- The whole school */
.admin-body > .cx-metrics { margin-bottom: 40px; }
.admin-body > .cx-grid + .cx-note, .admin-body > .cn-tbl + .cx-note { margin-top: 20px; }
.cx-metric b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-metric em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-ch small + .more { margin-left: 16px; }
.cx-li.plain { grid-template-columns: minmax(0, 1fr) auto; }
.cx-prog { margin: 0 0 16px; }
.cx-card > .cn-bar { margin-top: 4px; }
.cx-meter { display: inline-block; vertical-align: middle; width: calc(100% - 44px); max-width: 160px; height: 2px; background: var(--cx-bar-2); position: relative; margin-right: 8px; }
.cx-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cx-bar); }
.cx-meter.sm { width: 90px; }
.cx-meterv { font-size: 12.5px; color: var(--cx-label-2); font-variant-numeric: tabular-nums; }
.cx-div { display: block; position: relative; height: 12px; }
.cx-div::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: .5px; background: var(--cx-label-3); }
.cx-div i { position: absolute; top: 5px; height: 2px; background: var(--cx-bar); }
.cx-div i.neg { background: var(--cx-red); }
.cx-setrow2 { grid-template-columns: minmax(0, 1fr) auto; }
.cx-transcript .cx-ihero { margin-bottom: 8px; }
.cx-transcript .cn-tbl { margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) { .cx-card, .cx-sheet, .cx-sheetwrap { animation: none; } .cx-metric .line i { transition: none; } }

/* ==========================================================================
   The teacher's console — its own rail.

   Full (240–300px, the teacher's choice) or icons only (64px); collapsed on
   its own when the window is too narrow for the gradebook, and then the full
   rail only peeks over the page. The selected row is a surface, a leading
   bar and a heavier word — never colour alone. Icons are one quiet grey; the
   only colour is the accent on where you are, and red on what is wrong.
   ========================================================================== */
body.t-console { --rail-w: 252px; --rail-full: 252px; }
body.t-console .lx-wrap { padding-left: calc(var(--rail-w) + 56px); padding-right: 56px; }
body.t-console .cn-back { left: calc(var(--rail-w) + 56px); }
body.t-console .admin-body { max-width: 1180px; }
body.t-console.rail-anim .lx-wrap, body.t-console.rail-anim .cn-rail { transition: padding-left .24s var(--cx-ease), width .24s var(--cx-ease); }
body.t-console.rail-drag, body.t-console.rail-drag * { cursor: col-resize !important; user-select: none; }

body.t-console .cn-rail.t-rail { width: var(--rail-w); padding: 14px 10px 10px; gap: 0; overflow: visible; }
.t-rail .tr-top { display: flex; align-items: center; gap: 9px; padding: 2px 4px 12px 8px; min-height: 30px; }
.t-rail .tr-logo { width: 20px; height: 20px; flex: none; color: var(--cx-label); display: grid; place-items: center; }
.t-rail .tr-logo svg { width: 19px; height: 19px; }
.t-rail .tr-top b { flex: 1; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; color: var(--cx-label); white-space: nowrap; }
.t-rail .tr-toggle { width: 28px; height: 28px; flex: none; border-radius: 7px; display: grid; place-items: center; color: var(--cx-label-2); background: none; }
.t-rail .tr-toggle svg { width: 17px; height: 17px; stroke-width: 1.7; }
.t-rail .tr-toggle:hover { background: var(--cx-fill); color: var(--cx-label); }
.t-rail .tr-find { margin: 0 0 6px; height: 30px; }
.t-rail .tr-nav { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px 8px; scrollbar-width: thin; }
.t-rail .tr-head { margin: 14px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cx-label-3); white-space: nowrap; }
.t-rail .tr-sec:first-child .tr-head { margin-top: 6px; }
.t-rail .cn-item { position: relative; height: 30px; padding: 0 8px 0 10px; gap: 10px; color: var(--cx-label); white-space: nowrap; }
.t-rail .cn-item .nm { overflow: hidden; text-overflow: ellipsis; }
.t-rail .cn-item.on { background: var(--cx-fill); font-weight: 600; }
.t-rail .cn-item.on::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cx-accent); }
.t-rail .cn-item.on .ic { color: var(--cx-accent); }
.t-rail .cn-item:focus-visible, .t-rail .tr-more:focus-visible, .t-rail .tr-toggle:focus-visible, .t-rail .tr-me:focus-visible, .t-rail .tr-find:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: -2px; }
.t-rail .cn-item .ct.on { min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; font-size: 11.5px; font-weight: 600; background: var(--cx-fill); color: var(--cx-label); }
.t-rail .tr-row { position: relative; }
.t-rail .tr-row .cn-item { padding-right: 34px; }
.t-rail .tr-more { position: absolute; right: 3px; top: 3px; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--cx-label-3); background: none; }
.t-rail .tr-more svg { width: 13px; height: 13px; stroke-width: 2.2; }
.t-rail .tr-more:hover, .t-rail .tr-more[aria-expanded="true"] { background: var(--cx-fill); color: var(--cx-label); }
.t-rail .tr-foot { border-top: .5px solid var(--cx-sep); padding-top: 8px; margin-top: 4px; }
.t-rail .tr-me { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 7px 8px; border-radius: 10px; text-align: left; background: var(--cx-fill-2); }
.t-rail .tr-me:hover, .t-rail .tr-me[aria-expanded="true"] { background: var(--cx-fill); }
.t-rail .tr-me .admin-av { width: 30px; height: 30px; flex: none; font-size: 11px; }
.t-rail .tr-me .t { min-width: 0; }
.t-rail .tr-me .t b { display: block; font-size: 13px; font-weight: 600; color: var(--cx-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-rail .tr-me .t span { display: block; font-size: 11.5px; color: var(--cx-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-rail .tr-grip { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 2; }
.t-rail .tr-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3.5px; width: 1px; background: transparent; transition: background .15s; }
.t-rail .tr-grip:hover::after, body.rail-drag .t-rail .tr-grip::after, .t-rail .tr-grip:focus-visible::after { background: var(--cx-accent); }
.t-rail .tr-grip:focus-visible { outline: none; }

/* Icons only. Headings become a hairline; the count rides on the icon. */
body.rail-mini:not(.rail-peek) .t-rail { padding-left: 10px; padding-right: 10px; }
body.rail-mini:not(.rail-peek) .t-rail .tr-top { flex-direction: column; padding: 2px 0 10px; gap: 10px; }
body.rail-mini:not(.rail-peek) .t-rail .tr-top b,
body.rail-mini:not(.rail-peek) .t-rail .cn-item .nm,
body.rail-mini:not(.rail-peek) .t-rail .tr-find span,
body.rail-mini:not(.rail-peek) .t-rail .tr-find kbd,
body.rail-mini:not(.rail-peek) .t-rail .tr-more,
body.rail-mini:not(.rail-peek) .t-rail .tr-me .t,
body.rail-mini:not(.rail-peek) .t-rail .tr-grip { display: none; }
body.rail-mini:not(.rail-peek) .t-rail .tr-find { justify-content: center; padding: 0; width: 44px; margin: 0 auto 4px; }
body.rail-mini:not(.rail-peek) .t-rail .tr-find svg { width: 15px; height: 15px; }
body.rail-mini:not(.rail-peek) .t-rail .tr-head { font-size: 0; height: 0; margin: 9px 10px; border-top: .5px solid var(--cx-sep); }
body.rail-mini:not(.rail-peek) .t-rail .tr-sec:first-child .tr-head { display: none; }
body.rail-mini:not(.rail-peek) .t-rail .cn-item { width: 44px; height: 36px; margin: 0 auto; padding: 0; justify-content: center; }
body.rail-mini:not(.rail-peek) .t-rail .tr-row .cn-item { padding: 0; }
body.rail-mini:not(.rail-peek) .t-rail .cn-item .ic { width: 20px; height: 20px; }
body.rail-mini:not(.rail-peek) .t-rail .cn-item .ic svg { width: 18px; height: 18px; }
body.rail-mini:not(.rail-peek) .t-rail .cn-item .ct.on { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px;
  background: var(--cx-label); color: var(--cx-bg); }
body.rail-mini:not(.rail-peek) .t-rail .tr-me { width: 44px; padding: 7px; margin: 6px auto 0; justify-content: center; }
body.rail-mini:not(.rail-peek) .t-rail .tr-toggle.shut svg { transform: scaleX(-1); }

/* Peeking: the full rail over the page, when the window is narrow. */
body.rail-peek .t-rail { width: var(--rail-full) !important; box-shadow: var(--cx-shadow-hi); }

/* The label a collapsed row says when reached. */
.tr-tip { position: fixed; z-index: 980; transform: translateY(-50%); padding: 4px 9px; border-radius: 6px; font: 500 12px/1.3 var(--cx-font, system-ui);
  background: #1d1d1f; color: #fff; pointer-events: none; opacity: 0; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.tr-tip.on { opacity: 1; }

/* Popovers: the course switcher and the profile menu. */
.tr-pop { position: fixed; z-index: 960; width: 290px; padding: 6px; border-radius: 12px; font-family: var(--cx-font, system-ui);
  background: color-mix(in srgb, var(--cx-bg, #fff) 92%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--cx-shadow-hi, 0 20px 60px -12px rgba(0,0,0,.25)); color: var(--cx-label); animation: cx-fade .14s ease both; }
.tr-phead { margin: 6px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cx-label-3); }
.tr-pnote { margin: 6px 10px 8px; font-size: 13px; color: var(--cx-label-2); }
.tr-sep { border: 0; border-top: .5px solid var(--cx-sep); margin: 6px 8px; }
.tr-mrow { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px; padding: 5px 10px; border-radius: 7px; text-align: left; font-size: 13.5px; color: var(--cx-label); background: none; }
.tr-mrow .ic { width: 16px; height: 16px; flex: none; color: var(--cx-label-2); display: grid; place-items: center; }
.tr-mrow .ic svg { width: 15px; height: 15px; stroke-width: 1.8; }
.tr-mrow .nm { flex: 1; }
.tr-mrow .r { color: var(--cx-label-3); }
button.tr-mrow:hover, button.tr-mrow:focus-visible { background: var(--cx-accent); color: #fff; outline: none; }
button.tr-mrow:hover .ic, button.tr-mrow:hover .r, button.tr-mrow:focus-visible .ic, button.tr-mrow:focus-visible .r { color: #fff; }
.tr-look .cn-seg { margin-left: auto; }
.tr-look .cn-segb { padding: 3px 8px; font-size: 11.5px; }
.tr-look .nm { flex: 0 1 auto; }
.tr-phero { display: flex; align-items: center; gap: 11px; padding: 8px 10px 6px; }
.tr-phero .admin-av { width: 38px; height: 38px; font-size: 13px; }
.tr-phero .t b { display: block; font-size: 14px; font-weight: 600; }
.tr-phero .t span { display: block; font-size: 12px; color: var(--cx-label-2); }
.tr-plist { max-height: 50vh; overflow: auto; }
.tr-course { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 7px; text-align: left; background: none; color: var(--cx-label); }
.tr-course i { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.tr-course.on i { background: var(--cx-accent); }
.tr-course b { display: block; font-size: 13.5px; font-weight: 500; }
.tr-course.on b { font-weight: 600; }
.tr-course span span { display: block; font-size: 12px; color: var(--cx-label-2); }
.tr-course:hover, .tr-course:focus-visible { background: var(--cx-fill); outline: none; }
.tr-pfoot { margin-top: 4px; border-top: .5px solid var(--cx-sep); border-radius: 0 0 7px 7px; }

/* The course at the head of a page, and the page's own views. */
.tr-pagehead { margin-bottom: 4px; }
.tr-pagehead .cn-head { margin-top: 10px; }
.tr-coursepill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 12px; border-radius: 8px; background: var(--cx-fill); color: var(--cx-label); font-size: 13px; }
.tr-coursepill b { font-weight: 600; }
.tr-coursepill svg { width: 14px; height: 14px; color: var(--cx-label-2); stroke-width: 2.2; }
.tr-coursepill:hover, .tr-coursepill[aria-expanded="true"] { background: var(--cx-fill); box-shadow: inset 0 0 0 .5px var(--cx-sep); }
body.is-console .tr-subnav { margin: 4px 0 26px; }
body.is-console .tr-subnav .cn-segb { padding: 5px 14px; font-size: 13px; }
.gb-hint { margin: -8px 0 14px; }

/* To Grade, Lessons: one row per piece of work. */
.tq-head { margin: 26px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cx-label-3); }
.tq-list { border-top: .5px solid var(--cx-sep); }
.tq-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 6px; border-bottom: .5px solid var(--cx-sep); text-align: left; background: none; color: var(--cx-label); }
.tq-row:hover { background: var(--cx-fill-2); }
.tq-row .ic { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--cx-fill); color: var(--cx-label-2); display: grid; place-items: center; }
.tq-row .ic svg { width: 16px; height: 16px; stroke-width: 1.8; }
.tq-row .t { flex: 1; min-width: 0; }
.tq-row .t b { display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; }
.tq-row .t span { display: block; font-size: 12.5px; color: var(--cx-label-2); margin-top: 2px; }
.tq-row .n { font: 200 26px/1 var(--cx-display); font-variant-numeric: tabular-nums; }
.tq-row .n small { font-size: 14px; color: var(--cx-label-3); }
.tq-row .go { width: 14px; color: var(--cx-label-3); }
.tq-row .go svg { width: 14px; height: 14px; }

/* Grading, one student at a time. */
.gq { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.gq-list { position: sticky; top: 20px; max-height: calc(100vh - 140px); overflow: auto; border-right: .5px solid var(--cx-sep); padding-right: 12px; }
.gq-sum { font-size: 12px; color: var(--cx-label-2); margin: 0 6px 8px; }
.gq-li { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 8px; text-align: left; background: none; color: var(--cx-label); }
.gq-li:hover { background: var(--cx-fill-2); }
.gq-li.on { background: var(--cx-fill); }
.gq-li .cx-av { width: 26px; height: 26px; font-size: 10px; }
.gq-li .t { flex: 1; min-width: 0; }
.gq-li .t b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gq-li .st { display: block; font-size: 11.5px; color: var(--cx-label-2); }
.gq-li .st.handed { color: var(--cx-accent); }
.gq-li .st.late, .gq-li .st.missing { color: var(--cx-red); }
.gq-li .m { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--cx-label-2); }
.gq-who { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.gq-who .cx-av { width: 40px; height: 40px; font-size: 14px; }
.gq-who b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.gq-who span span { display: block; font-size: 13px; color: var(--cx-label-2); }
.gq-ev { padding: 16px 18px; border-radius: 12px; background: var(--cx-fill-2); }
.gq-ev .k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-label-3); margin: 0 0 6px; }
.gq-ev b { display: block; font: 200 34px/1.1 var(--cx-display); }
.gq-ev span { display: block; font-size: 13px; color: var(--cx-label-2); margin-top: 4px; }
.gq-form { grid-template-columns: 1fr; margin: 18px 0 8px; display: grid; gap: 14px; }
.gq-nav { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 12.5px; color: var(--cx-label-2); }

/* Setting work. */
.as-sheet { padding: 4px 4px 2px; }
.as-h { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 4px; }
.as-form { margin-top: 14px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.as-form .admin-field { min-width: 0; }
.as-form select, .as-form input { width: 100%; min-width: 0; text-overflow: ellipsis; }
.as-form .cn-seg { align-self: flex-start; }
.as-form > div { display: contents; }
.as-note { grid-column: 1 / -1; margin: 0; }
.as-kind { display: block; font-size: 12px; margin-top: 1px; }
.lx-btn.quiet.danger { color: var(--cx-red); margin-left: auto; }

/* The library. */
.lib-course { margin: 8px 0 26px; }
.lib-course h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin: 0 0 8px; }
.lib-unit { border-top: .5px solid var(--cx-sep); }
.lib-unit:last-child { border-bottom: .5px solid var(--cx-sep); }
.lib-unit summary { display: flex; align-items: center; gap: 10px; padding: 11px 4px; cursor: pointer; list-style: none; font-size: 14px; }
.lib-unit summary::-webkit-details-marker { display: none; }
.lib-unit summary span { flex: 1; color: var(--cx-label-2); }
.lib-unit summary svg { width: 13px; height: 13px; color: var(--cx-label-3); transition: transform .2s var(--cx-ease); }
.lib-unit[open] summary svg { transform: rotate(90deg); }
.lib-items { padding: 0 0 10px 18px; }
.lib-item { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; }
.lib-item:hover { background: var(--cx-fill-2); }
.lib-item .ic { width: 16px; height: 16px; flex: none; color: var(--cx-label-2); }
.lib-item .ic svg { width: 16px; height: 16px; stroke-width: 1.8; }
.lib-item .t { flex: 1; min-width: 0; font-size: 13.5px; }
.lib-more > summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 10px 0 16px; }

/* Curriculum. */
.cu-list { border-top: .5px solid var(--cx-sep); }
.cu-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: .5px solid var(--cx-sep); }
.cu-row .t { flex: 1; min-width: 0; }
.cu-row .t b { display: block; font-size: 14.5px; font-weight: 500; }
.cu-row .t span { display: block; font-size: 12.5px; color: var(--cx-label-2); margin-top: 2px; }
.cu-row .r { display: flex; gap: 8px; }
.cu-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid var(--cx-label-3); }
.cu-row.taught .cu-dot { background: var(--cx-label); border-color: var(--cx-label); }
.cu-row.going .cu-dot { background: linear-gradient(90deg, var(--cx-label) 50%, transparent 50%); border-color: var(--cx-label); }
.tr-meter { display: block; width: 140px; height: 4px; border-radius: 2px; background: var(--cx-fill); margin-top: 6px; overflow: hidden; }
.tr-meter i { display: block; height: 100%; background: var(--cx-bar); border-radius: 2px; }

/* Groups and interventions. */
.tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tg-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; border-radius: 14px; text-align: left; background: var(--cx-fill-2); color: var(--cx-label); }
.tg-card:hover { background: var(--cx-fill); }
.tg-card .k { font-size: 11.5px; color: var(--cx-label-3); margin: 0; }
.tg-card h3 { font-size: 16px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
.tg-card p { font-size: 12.5px; color: var(--cx-label-2); margin: 0; }
.tg-card .av { display: flex; margin: 10px 0 2px; }
.tg-card .av .cx-av { width: 24px; height: 24px; font-size: 9px; margin-right: -5px; box-shadow: 0 0 0 2px var(--cx-bg); }
.tg-card .av span { font-size: 11.5px; color: var(--cx-label-2); margin-left: 10px; align-self: center; }
.tg-card .n { font-size: 12.5px; font-weight: 600; }
.iv-list { border-top: .5px solid var(--cx-sep); margin-top: 18px; }
.iv-card { display: flex; align-items: flex-start; gap: 14px; padding: 14px 4px; border-bottom: .5px solid var(--cx-sep); }
.iv-card .cx-av { width: 34px; height: 34px; }
.iv-card .t { flex: 1; min-width: 0; }
.iv-card .t b { font-size: 14.5px; font-weight: 600; }
.iv-card .why { margin: 4px 0 0; padding-left: 16px; font-size: 13px; color: var(--cx-label); }
.iv-card .do { margin: 6px 0 0; font-size: 12.5px; color: var(--cx-label-2); }
.iv-card .r { display: flex; gap: 8px; }

/* Search. */
body.is-console .cn-finderhint { margin: -6px 18px 8px; font-size: 12px; color: var(--cx-label-3); }
.cn-finderhead { margin: 10px 12px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--cx-label-3, #a1a1a6); }
.cn-findernone { margin: 14px 12px; font-size: 13px; color: var(--cx-label-2, #6e6e73); }
.cn-finderrow .ic { width: 16px; height: 16px; align-self: center; flex: none; }
.cn-finderrow .ic svg { width: 15px; height: 15px; stroke-width: 2; }

/* Help. */
.tr-kbd { font: 500 12px var(--cx-font); padding: 2px 7px; border-radius: 6px; background: var(--cx-fill); color: var(--cx-label); }
.hp-list { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--cx-label); }
.hp-list li { margin-bottom: 8px; }
.hp-flash { animation: hp-flash 1.4s ease; }
@keyframes hp-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--cx-accent-soft); } 100% { box-shadow: none; } }

/* The teacher's rail in dark: the numbers from the design. */
body.t-console[data-appearance="dark"] .t-rail { background: #101012; }
body.t-console[data-appearance="dark"] .t-rail .cn-item { color: #a1a1a6; }
body.t-console[data-appearance="dark"] .t-rail .cn-item.on { background: #242428; color: #f5f5f7; }
body.t-console[data-appearance="dark"] .t-rail .cn-item.on .ic { color: #0a84ff; }
body.t-console[data-appearance="dark"] .t-rail .cn-item.on::before { background: #0a84ff; }
body.t-console[data-appearance="dark"] .tr-tip { background: #f5f5f7; color: #1d1d1f; }
@media (prefers-color-scheme: dark) {
  body.t-console[data-appearance="auto"] .t-rail { background: #101012; }
  body.t-console[data-appearance="auto"] .t-rail .cn-item { color: #a1a1a6; }
  body.t-console[data-appearance="auto"] .t-rail .cn-item.on { background: #242428; color: #f5f5f7; }
  body.t-console[data-appearance="auto"] .t-rail .cn-item.on .ic { color: #0a84ff; }
  body.t-console[data-appearance="auto"] .t-rail .cn-item.on::before { background: #0a84ff; }
  body.t-console[data-appearance="auto"] .tr-tip { background: #f5f5f7; color: #1d1d1f; }
}
@media (max-width: 900px) {
  body.t-console .lx-wrap { padding-left: 24px; padding-right: 24px; }
  body.t-console .cn-rail.t-rail { width: 272px; }
  .gq { grid-template-columns: 1fr; }
  .gq-list { position: static; max-height: 260px; border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.t-console.rail-anim .lx-wrap, body.t-console.rail-anim .cn-rail { transition: none; }
  .tr-pop, .hp-flash { animation: none; }
}

/* Handed in on OEdu, not yet marked: a blue wash, a dot, and OEdu's result
   as the cell's placeholder — never as its value. */
body.is-console .gb-c.cell.handed { position: relative; background: var(--cx-accent-soft); }
body.is-console .gb-c.cell.handed::after { content: ""; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--cx-accent); pointer-events: none; }
body.is-console .gb-c.cell.handed input::placeholder { color: var(--cx-accent); opacity: .75; }

/* ==========================================================================
   The teacher's own tools (teach.js): the course's rules, a column's tools,
   a student's what-if, rubrics and stickers, the mastery chart, seating,
   lesson plans, announcements. The same look as the rest of the console:
   hairlines, one accent, nothing that is not information.
   ========================================================================== */

/* A short list edited in place. */
.tx-rows { margin: 10px 0 0; }
.tx-row { display: grid; grid-template-columns: var(--cols); gap: 8px; align-items: center; margin-bottom: 6px; }
.tx-row.head span { font-size: 11.5px; font-weight: 500; color: var(--cx-label-2); }
.tx-row input, .tx-row select, .tx-select, .tx-wrow input, .tx-rrow input, .tx-seat input, .gb-minput {
  min-width: 0; width: 100%; box-sizing: border-box; padding: 7px 9px; font: inherit; font-size: 13.5px;
  border-radius: 8px; border: .5px solid var(--cx-sep); background: var(--cx-bg); color: var(--cx-label);
}
.tx-row input:focus, .tx-row select:focus, .tx-select:focus, .tx-wrow input:focus, .tx-rrow input:focus, .tx-seat input:focus, .gb-minput:focus {
  outline: none; border-color: var(--cx-accent); box-shadow: 0 0 0 3px var(--cx-accent-soft);
}
.tx-rm { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--cx-label-3); font-size: 17px; line-height: 1; cursor: pointer; }
.tx-rm:hover { background: var(--cx-fill); color: var(--cx-red); }
.tx-add { margin-top: 2px; padding: 4px 0; border: 0; background: none; color: var(--cx-accent); font: inherit; font-size: 13px; cursor: pointer; }
.tx-add:hover { opacity: .7; }
.tx-select { width: auto; max-width: 100%; }
.tx-save { margin-top: 32px; }
.tx-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 16px; }
.tx-lab { font-size: 12px; font-weight: 500; color: var(--cx-label-2); margin: 16px 0 2px; }
.tx-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cx-label); margin: 8px 0; cursor: pointer; }
.tx-check input { accent-color: var(--cx-accent); margin: 0; }
.tx-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 14px; max-height: 190px; overflow: auto; }
details.tx-more { grid-column: 1 / -1; border-top: .5px solid var(--cx-sep); padding-top: 12px; }
details.tx-more > summary { cursor: pointer; font-size: 13.5px; color: var(--cx-accent); list-style: none; }
details.tx-more > summary::-webkit-details-marker { display: none; }
details.tx-more[open] > summary { margin-bottom: 12px; }
details.tx-more .admin-field { margin-bottom: 12px; }

/* The sheet: work set for a few students, and marking down a student's page. */
body.is-console .gb-c.cell.na { background: var(--cx-fill-2); }
body.is-console .gb-c.cell.na input { color: var(--cx-label-3); text-align: center; }
.gb-minput { width: 84px; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.admin-av.anon { background: var(--cx-bar-2) !important; }
.gq-anon { margin: 0 6px 10px; }

/* A student in a course: what if, the override, each piece's weight. */
.tx-stools { margin: 18px 0 6px; }
.tx-ovnote { font-size: 13px; color: var(--cx-orange); margin: 8px 0 0; }
.tx-whatif { display: flex; gap: 28px; align-items: baseline; margin: 10px 0 6px; font-size: 13px; color: var(--cx-label-2); }
.tx-whatif b { display: block; font-size: 28px; font-weight: 300; letter-spacing: -.02em; color: var(--cx-label); }
.tx-whatif .to b { color: var(--cx-accent); }
.tx-wlist { margin-top: 12px; border-top: .5px solid var(--cx-sep); }
.tx-wrow { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: .5px solid var(--cx-sep); }
.tx-wrow > span { flex: 1; min-width: 0; }
.tx-wrow b { display: block; font-size: 14px; font-weight: 500; }
.tx-wrow small { font-size: 12px; color: var(--cx-label-2); }
.tx-wrow input { width: 76px; text-align: right; }
.tx-impact { margin: 28px 0 8px; max-width: 760px; }
.tx-impact h3, .tx-map h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 2px; }
.tx-irow { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 52px; gap: 12px; align-items: center; padding: 5px 0; font-size: 13px; }
.tx-irow .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-irow .bar { position: relative; height: 8px; background: linear-gradient(var(--cx-sep), var(--cx-sep)) center / .5px 100% no-repeat; }
.tx-irow .bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--cx-bar); }
.tx-irow .bar i.neg { background: var(--cx-red); }
.tx-irow b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.tx-irow b.bad { color: var(--cx-red); }

/* Marking: a rubric's subtotals, stock comments, a sticker. */
.tx-extras { display: grid; gap: 14px; }
.tx-rubric .k { font-size: 12px; font-weight: 500; color: var(--cx-label-2); margin: 0 0 6px; }
.tx-rrow { display: grid; grid-template-columns: 1fr 72px 54px; gap: 10px; align-items: center; padding: 5px 0; border-top: .5px solid var(--cx-sep); font-size: 13.5px; }
.tx-rrow input { text-align: right; }
.tx-rrow small { color: var(--cx-label-2); font-size: 12.5px; }
.tx-bank { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-chip { border: .5px solid var(--cx-sep); background: none; color: var(--cx-label); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.tx-chip:hover { background: var(--cx-fill); }
.tx-chip.edit { color: var(--cx-accent); border-style: dashed; }
.tx-stickers { display: flex; gap: 4px; }
.tx-sticker { width: 34px; height: 34px; border: 0; border-radius: 9px; background: none; font-size: 19px; line-height: 1; cursor: pointer; filter: grayscale(1); opacity: .55; }
.tx-sticker:hover { background: var(--cx-fill); opacity: 1; }
.tx-sticker.on { background: var(--cx-accent-soft); filter: none; opacity: 1; box-shadow: inset 0 0 0 1px var(--cx-accent); }

/* Standards: every student against every objective. */
.tx-mwrap { overflow: auto; margin: 0 0 4px; border-top: .5px solid var(--cx-sep); border-bottom: .5px solid var(--cx-sep); }
.tx-mastery { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tx-mastery td { min-width: 96px; }
.tx-mastery th { text-align: left; font-weight: 500; padding: 8px 12px 8px 0; white-space: nowrap; position: sticky; left: 0; background: var(--cx-bg); }
.tx-mastery thead th { vertical-align: bottom; color: var(--cx-label-2); font-size: 11.5px; padding: 10px 6px; min-width: 76px; text-align: center; position: static; }
.tx-mastery thead th:first-child { text-align: left; padding-left: 0; }
.tx-mastery thead th b { display: block; color: var(--cx-label); font-size: 12.5px; font-weight: 600; }
.tx-mastery thead th span { display: block; font-weight: 400; white-space: normal; line-height: 1.25; }
.tx-mastery td { text-align: center; padding: 0; height: 34px; border-left: 2px solid var(--cx-bg); border-top: 2px solid var(--cx-bg); font-weight: 500; }
.tx-mastery td.l4 { background: color-mix(in srgb, var(--cx-ok) 30%, transparent); }
.tx-mastery td.l3 { background: color-mix(in srgb, var(--cx-ok) 13%, transparent); }
.tx-mastery td.l2 { background: color-mix(in srgb, var(--cx-orange) 16%, transparent); }
.tx-mastery td.l1 { background: color-mix(in srgb, var(--cx-red) 20%, transparent); }
.tx-mastery td.na { color: var(--cx-label-3); background: var(--cx-fill-2); font-weight: 400; }
.tx-mastery tfoot th, .tx-mastery tfoot td { border-top: .5px solid var(--cx-sep); font-weight: 600; }
.tx-map { margin-top: 40px; }

/* Seating: a room, and a seat for everyone in it. */
.tx-room { position: relative; height: min(64vh, 620px); min-height: 420px; border: .5px solid var(--cx-sep); border-radius: 14px; background: var(--cx-fill-2); overflow: hidden; touch-action: none; }
.tx-front { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-label-3); pointer-events: none; }
.tx-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px 7px; min-width: 64px; border-radius: 11px; background: var(--cx-bg); border: .5px solid var(--cx-sep); cursor: grab; user-select: none; }
.tx-seat .nm { font-size: 12px; font-weight: 500; white-space: nowrap; }
.tx-seat .admin-av { width: 28px; height: 28px; font-size: 11px; }
.tx-seat.drag { cursor: grabbing; z-index: 2; border-color: var(--cx-accent); box-shadow: 0 6px 22px rgba(0, 0, 0, .14); }
.tx-seat.ok { border-color: var(--cx-ok); }
.tx-seat input { width: 54px; padding: 3px 5px; text-align: center; font-size: 12.5px; cursor: text; }

/* Lesson plans: a month. */
.tx-month { display: flex; align-items: center; gap: 8px; }
.tx-month b { min-width: 150px; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.tx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: .5px solid var(--cx-sep); border-left: .5px solid var(--cx-sep); }
.tx-cal .dow { padding: 7px 8px; font-size: 11.5px; font-weight: 500; color: var(--cx-label-2); border-right: .5px solid var(--cx-sep); border-bottom: .5px solid var(--cx-sep); }
.tx-cal .pad, .tx-cal .day { min-height: 104px; border-right: .5px solid var(--cx-sep); border-bottom: .5px solid var(--cx-sep); }
.tx-cal .pad { background: var(--cx-fill-2); }
.tx-cal .day { padding: 5px 6px 7px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tx-cal .day .n { align-self: flex-start; min-width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--cx-label-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.tx-cal .day .n:hover { background: var(--cx-fill); color: var(--cx-label); }
.tx-cal .day.today .n { background: var(--cx-accent); color: #fff; font-weight: 600; }
.tx-cal .plan { border: 0; text-align: left; font: inherit; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: 5px; background: var(--cx-accent-soft); color: var(--cx-label); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-cal .plan:hover { box-shadow: inset 0 0 0 1px var(--cx-accent); }
.tx-cal .due { font-size: 11.5px; color: var(--cx-label-2); padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Announcements. */
.tx-compose { max-width: 680px; display: grid; gap: 12px; margin: 18px 0 30px; }
.tx-feed { max-width: 680px; border-top: .5px solid var(--cx-sep); }
.tx-post { padding: 16px 0; border-bottom: .5px solid var(--cx-sep); }
.tx-post header { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.tx-post header b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.tx-post time, .tx-post small { font-size: 12px; color: var(--cx-label-2); }
.tx-post p { margin: 6px 0 8px; font-size: 14px; line-height: 1.5; }
.tx-post .cn-btn { margin-left: 12px; }

/* Today: rising and falling. */
.tx-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.tx-movehead { font-size: 12px; font-weight: 500; color: var(--cx-label-2); margin: 0 0 4px; }

/* Setting work: the courses it is for, and when it is due in each. */
.as-courses { grid-column: 1 / -1; }
.as-course { display: grid; grid-template-columns: 18px minmax(0, 1fr) 160px; gap: 12px; align-items: center; padding: 9px 0; border-top: .5px solid var(--cx-sep); cursor: pointer; }
.as-course:last-child { border-bottom: .5px solid var(--cx-sep); }
.as-course input[type="checkbox"] { accent-color: var(--cx-accent); margin: 0; width: 16px; height: 16px; }
.as-course .nm b { display: block; font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
.as-course .nm small { display: block; font-size: 12px; color: var(--cx-label-2); }
body.is-console .admin-field .as-course input[type="date"] { width: 100%; padding: 6px 8px; font-size: 13px; }
.as-course.off .nm, .as-course.off input[type="date"] { opacity: .4; }