/* C Practice — one stylesheet, no CDN, no web fonts.
   Lab PCs lose their WAN during exam lockdown, so anything fetched from the
   internet would leave the page unstyled exactly when it is most in use. */

:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1b1f24;
  --muted: #5b6672;
  --line: #d9dee4;
  --accent: #14508c;
  --accent-soft: #e7eef7;
  --danger: #a6231c;
  --ok-bg: #e6f4ea;
  --ok-ink: #1c5b32;
  --err-bg: #fbe9e7;
  --err-ink: #8c2019;
  --mono: ui-monospace, "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, sans-serif;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------- header */

.top { background: var(--accent); color: #fff; }
.topbar {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px;
}
.brand { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.findbar { display: flex; gap: 6px; flex: 1 1 260px; min-width: 0; }
.findbar input {
  flex: 1 1 auto; min-width: 0; padding: 7px 10px;
  border: 1px solid transparent; border-radius: 5px; font-size: 1rem;
}
.findbar button, .topnav .linkish {
  background: rgba(255, 255, 255, .16); color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 5px; padding: 7px 12px; font-size: .95rem; cursor: pointer;
}
.topnav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topnav a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }
.who { opacity: .85; font-size: .9rem; }
.inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------ text */

h1 { font-size: 1.5rem; margin: 26px 0 10px; }
h2 { font-size: 1.15rem; margin: 0 0 8px; }
h3 { font-size: .95rem; margin: 0 0 6px; color: var(--muted); }
.sub, .meta, .hint { color: var(--muted); }
.meta { font-size: .87rem; }
.hint { font-size: .87rem; margin: 6px 0 14px; }
.opt { color: var(--muted); font-weight: 400; font-size: .85rem; }
.crumbs { font-size: .9rem; margin: 18px 0 0; }
a { color: var(--accent); }
.empty { color: var(--muted); font-style: italic; }

.prose p { margin: 0 0 10px; }
.prose ul { margin: 0 0 10px; padding-left: 22px; }
.prose code, code {
  font-family: var(--mono); font-size: .92em;
  background: var(--accent-soft); padding: 1px 5px; border-radius: 3px;
}

/* ----------------------------------------------------------------- cards */

.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 14px 16px; text-decoration: none; color: inherit;
  min-width: 0;
}
.card:hover { border-color: var(--accent); }
.card h2 { margin: 6px 0; }
.card p { margin: 0 0 8px; color: var(--muted); font-size: .92rem; }
.count { font-size: .85rem; color: var(--muted); }

.pill {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 600;
}
.pill.draft { background: #fdf0d5; color: #7a5200; }

/* ----------------------------------------------------------------- lists */

.qlist, .labs { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.qlist { list-style: none; margin: 0 0 24px; padding: 0; }
.labs { margin: 0 0 24px; padding: 8px 8px 8px 42px; }
.qlist li { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.labs li { padding: 5px 4px; }
.qlist li:last-child, .labs li:last-child { border-bottom: 0; }
.qlist a, .labs a { font-weight: 600; text-decoration: none; }
.qlist a:hover, .labs a:hover { text-decoration: underline; }
.qlist .meta { display: block; }

/* -------------------------------------------------------------- question */

.qhead { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 8px; }
.block {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px 16px; margin: 0 0 16px; min-width: 0;
}
.io { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.io > div { min-width: 0; }
.io-pre {
  font-family: var(--mono); font-size: .9rem; background: #f2f4f7;
  border: 1px solid var(--line); border-radius: 6px; padding: 10px;
  margin: 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

/* Pygments blocks. `overflow-x` on the container, not the code, so a long
   line scrolls inside its own box and never widens the page. */
.hl {
  background: #f2f4f7; border: 1px solid var(--line); border-radius: 6px;
  padding: 12px; overflow-x: auto; font-family: var(--mono); font-size: .9rem;
  line-height: 1.5; margin: 0 0 10px;
}
.hl pre { margin: 0; }
.prose .hl code, .hl code { background: none; padding: 0; }

.tags { margin: 0 0 18px; }
.tag {
  display: inline-block; background: var(--accent-soft); color: var(--accent);
  border-radius: 4px; padding: 2px 8px; margin: 0 6px 6px 0;
  font-size: .85rem; text-decoration: none;
}
.prevnext {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 24px 0; font-size: .92rem;
}
.prevnext .next { margin-left: auto; text-align: right; }

/* ----------------------------------------------------------- forms, flash */

.flash { padding: 10px 14px; border-radius: 6px; margin: 16px 0; }
.flash.ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash.error { background: var(--err-bg); color: var(--err-ink); }
.flash ul { margin: 0; padding-left: 20px; }

.form, .filters, .loginbox form { display: block; }
.form { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
label { display: block; font-weight: 600; font-size: .92rem; margin: 14px 0 5px; }
label.check { font-weight: 400; display: flex; align-items: center; gap: 8px; }
input, select, textarea {
  width: 100%; padding: 8px 10px; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink);
}
input[type="checkbox"] { width: auto; }
textarea { resize: vertical; }
textarea.mono { font-family: var(--mono); font-size: .9rem; }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.row > div { min-width: 0; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.filters input[type="search"] { flex: 1 1 220px; min-width: 0; }
.filters select, .filters button { width: auto; }

button, .btn {
  display: inline-block; padding: 8px 14px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: .95rem; text-decoration: none;
}
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.linkish { border: 0; background: none; color: var(--accent); padding: 0; }
.linkish.danger { color: var(--danger); }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 18px; }

.loginbox {
  max-width: 420px; margin: 8vh auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 24px;
}
.loginbox h1 { margin-top: 0; }
.loginbox button { width: 100%; margin-top: 18px; }

/* ---------------------------------------------------------------- tables */

.tablewrap { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; background: var(--panel); }
.grid th, .grid td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-size: .92rem; vertical-align: top;
}
.grid th { background: #eef1f5; font-size: .85rem; }
.rowacts { white-space: nowrap; }
.rowacts a, .rowacts button { margin-right: 10px; }

.foot { color: var(--muted); font-size: .85rem; margin: 32px 0 40px; }

/* ---------------------------------------------------------------- phones */

@media (max-width: 600px) {
  .topbar { gap: 10px; }
  .brand { flex: 1 1 100%; }
  h1 { font-size: 1.3rem; }

  /* Stack each row into labelled lines rather than scrolling a wide table. */
  .grid, .grid thead, .grid tbody, .grid tr, .grid th, .grid td { display: block; }
  .grid thead { position: absolute; left: -9999px; }
  .grid tr { border-bottom: 2px solid var(--line); padding: 8px 0; }
  .grid td { border: 0; padding: 3px 12px; }
  .grid td::before {
    content: attr(data-label); display: block;
    font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase;
  }
  .grid td:empty, .grid td[data-label=""]::before { display: none; }
}

/* ------------------------------------------------- practice sets and locks */

.lvl {
  display: inline-block; border-radius: 4px; padding: 1px 8px; margin-right: 6px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid transparent; white-space: nowrap;
}
.lvl-easy   { background: #e6f4ea; color: #1c5b32; border-color: #bfe0cb; }
.lvl-medium { background: #fdf3dc; color: #7a5200; border-color: #ecd9a6; }
.lvl-tough  { background: #fbe9e7; color: #8c2019; border-color: #f0c8c3; }

.mix { margin: 6px 0 10px; }

.setcard { display: flex; flex-direction: column; gap: 4px; }
.setcard-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.setcard h2 { margin: 0; }

.status {
  display: inline-block; margin-top: 6px; font-size: .85rem; font-weight: 600;
}
.status.new     { color: var(--accent); }
.status.waiting { color: #7a5200; }
.status.open    { color: #1c5b32; }

.banner {
  border: 1px solid var(--line); border-left-width: 5px; border-radius: 8px;
  background: var(--panel); padding: 14px 16px; margin: 0 0 18px;
}
.banner p { margin: 0 0 8px; }
.banner p:last-child { margin-bottom: 0; }
.banner.start   { border-left-color: var(--accent); }
.banner.waiting { border-left-color: #c58b00; background: #fffaf0; }
.banner.open    { border-left-color: #1c5b32; background: var(--ok-bg); color: var(--ok-ink); }
.banner.staff   { border-left-color: #5b6672; color: var(--muted); }
.banner form { margin: 10px 0; }

.lock {
  border: 1px dashed #c58b00; background: #fffaf0; border-radius: 8px;
  padding: 14px 16px; margin: 10px 0 0;
}
.lock.compact { padding: 10px 14px; }
.lockline { margin: 0 0 4px; }
.lock .meta { margin: 0; }

.countdown { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.countdown.big { font-size: 1.25rem; }

.setq h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.setq h2 a { text-decoration: none; }
.setq h3 {
  margin: 16px 0 6px; color: var(--ink); font-size: .9rem;
  text-transform: uppercase; letter-spacing: .04em;
}

/* --------------------------------------------------- the question picker */

.pickhead { margin: 24px 0 0; }
.picker {
  border: 1px solid var(--line); border-radius: 6px; margin-top: 10px;
  max-height: 420px; overflow-y: auto; background: #fff;
}
.pickrow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--line);
  font-weight: 400; cursor: pointer;
}
.pickrow:last-child { border-bottom: 0; }
.pickrow:hover { background: var(--accent-soft); }
.pickrow input { width: auto; flex: none; }
.picktitle { flex: 1 1 200px; min-width: 0; }

/* ------------------------------------------------------- hub and subjects */

.sectionhead {
  font-size: 1.15rem; margin: 26px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.sectionhead a { text-decoration: none; }

.subjcard .pill { margin-bottom: 2px; }
.pill.stream-programming { background: var(--accent-soft); color: var(--accent); }
.pill.stream-aptitude    { background: #ede7f6; color: #4527a0; }
.pill.stream-design      { background: #e0f2f1; color: #00695c; }

.editrow {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; margin: 8px 0; padding: 10px 14px;
}
.editrow summary { cursor: pointer; font-weight: 600; }
.editrow .form { margin-top: 12px; }
.meta.warn { color: #7a5200; }

/* -------------------------------------------- the two solutions, compared */

/* A coloured spine down the left, so the eye can tell at a glance which
   listing it is reading after scrolling past the heading. */
.sol { border-left: 4px solid var(--line); }
.sol.pro { border-left-color: #1c5b32; }
.sol.pronotes { border-left-color: #1c5b32; background: #f4faf6; }
.solnote { color: var(--muted); font-size: .88rem; margin: -4px 0 10px; }
.setq h3 + .hl { margin-top: 0; }

/* ------------------------------------------- worked solutions (design) */
/* Matrices, fractions, figures and tables from mathtext.py. An equation
   never widens the page: a 6x6 stiffness matrix scrolls inside its own box. */
.prose h3 { font-size: 1rem; color: var(--ink); margin: 16px 0 6px; }
.eq {
  display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap;
  gap: 2px; margin: 10px 0 14px; padding: 4px 2px; overflow-x: auto;
  white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.35;
}
.eq > * { flex: 0 0 auto; }
/* Centred by auto margins, not justify-content: a centred row that
   overflows cannot be scrolled back to its start. */
.eq > :first-child { margin-left: auto; }
.eq > :last-child { margin-right: auto; }
.mx { display: inline-table; border-collapse: collapse; margin: 0 4px; vertical-align: middle; }
.mx td { padding: 1px 7px; text-align: center; }
.mx td.dlc { padding: 0; width: 7px; position: relative; }
.mx td.dlc svg.dl { position: absolute; top: 0; left: 0; width: 7px; height: 100%; }
.mx tr.mxl th, .mx th.mxr {
  font-weight: 400; font-size: .8em; color: var(--muted); padding: 0 7px;
}
.mx th.mxr { text-align: left; padding-left: 6px; }
svg.dl { overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.3; }
.fr { display: inline-flex; flex-direction: column; vertical-align: middle;
      text-align: center; margin: 0 3px; }
.fr > span { padding: 0 3px; }
.fr > span + span { border-top: 1px solid currentColor; }
.prose sup, .prose sub { font-size: .72em; line-height: 0; }
.fig { margin: 10px 0 14px; text-align: center; }
.fig img { max-width: 100%; height: auto; max-height: 360px; border: 1px solid var(--line);
           border-radius: 4px; background: #fff; }
.fig figcaption { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.tbl { overflow-x: auto; margin: 8px 0 14px; }
table.dt { border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.dt th, table.dt td { border: 1px solid var(--line); padding: 4px 10px; text-align: center; }
table.dt th { background: var(--accent-soft); font-weight: 600; }
.eq .gap { display: inline-block; width: 2.5em; }
.eq .t { white-space: pre; }

/* Phones. An equation wraps between its pieces and inside its text instead of
   scrolling; only a matrix wider than the screen still scrolls, inside the
   equation's own box. Measured at 390 px across all 170 FEM pages. */
@media (max-width: 700px) {
  .eq { flex-wrap: wrap; row-gap: 6px; justify-content: flex-start; }
  .eq > :first-child, .eq > :last-child { margin-left: 0; margin-right: 0; }
  .eq > .t { flex: 0 1 auto; min-width: 0; white-space: normal; }
  .eq > .gap { width: 100%; height: 0; }          /* next equation on its own line */
  .mx td { padding: 1px 4px; }
  .mx { font-size: .92em; margin: 0 2px; }
  .mx tr.mxl th, .mx th.mxr { padding: 0 3px; }
  table.dt th, table.dt td { padding: 3px 6px; font-size: .92em; }
}

/* ------------------------------------------- sub-hubs: MRIT-Exskilence */
/* A training shelf wears the site's own colours -- no accent of its own
   (asked for 2026-09-22). What sets it apart is the shape: days in order
   instead of cards, and no countdown anywhere. */

.subhub-head { border-bottom: 1px solid var(--line); padding: 14px 0 6px; margin-bottom: 14px; }
.subhub-head h1 { margin: 6px 0 8px; }
.banner.openbook { border-left-color: var(--accent); }

.daylist {
  list-style: none; margin: 0 0 22px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.daylist li { padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.daylist li:last-child { border-bottom: 0; }
.daylist a { text-decoration: none; font-weight: 600; }
.daylist a:hover .dayname { text-decoration: underline; }
.daylist .meta { display: block; }
.daytag {
  display: inline-block; min-width: 4.2em; margin-right: 8px; padding: 1px 8px;
  border-radius: 4px; background: var(--accent-soft); color: var(--accent);
  font-size: .82rem; font-weight: 700;
  text-align: center; white-space: nowrap;
}
.daytag.big { font-size: .95rem; vertical-align: middle; }

.drills {
  margin: 0 0 22px; padding: 6px 10px 6px 40px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.drills li { padding: 6px 2px; }
.drills a { font-weight: 600; text-decoration: none; margin-right: 6px; }
.drills a:hover { text-decoration: underline; }

.handouts {
  list-style: none; margin: 0 0 14px; padding: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
}
.handout { padding: 10px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.handout:last-child { border-bottom: 0; }
.handout-file { text-decoration: none; font-weight: 600; }
.handout-file:hover .handout-title { text-decoration: underline; }
.handout .meta { display: block; }
.handout-notes { margin-top: 6px; }
.filetag {
  display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 3px;
  background: #fbe9e7; color: #8c2019; font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; vertical-align: 1px;
}

/* The solution, folded. The summary is a full-width bar with a large target,
   because on a phone it is the one thing on the page to tap. */
.tryfirst {
  border: 1px dashed var(--line); background: var(--panel);
  border-radius: 8px; padding: 10px 14px; margin: 0 0 12px;
}
.tryfirst p { margin: 0; }
.reveal { margin: 0 0 12px; }
.reveal > summary {
  cursor: pointer; list-style: none; padding: 11px 14px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); font-weight: 600;
  color: var(--accent);
}
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary::before { content: "▸ "; }
.reveal[open] > summary { border-color: var(--accent); margin-bottom: 12px; }
.reveal[open] > summary::before { content: "▾ "; }
.reveal-pro > summary { color: #1c5b32; }
.reveal-pro[open] > summary { border-color: #1c5b32; }
.reveal-body { min-width: 0; }