/* Question Paper Studio by DiLen Labs.
   One idea runs through everything: a teacher's desk. In light mode it is paper, blue ink and a red correction pen;
   in dark mode the same desk becomes a blackboard with chalk. Every colour below is a role (surface, ink, pen...) and
   the two modes only change what the role looks like.
   This is the Classic theme. The other themes (themes.css) give the same roles other values, each in a light and a
   dark mode. [data-skin-preview] lets a small sample of a theme be drawn inside a page that uses another one. */
:root, [data-skin-preview='classic'], :root[data-theme='dark'] [data-skin-preview='classic'][data-mode='light'] {
  --font-ui: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-paper: 'Tinos', 'Times New Roman', Times, 'Liberation Serif', serif;
  --font-pen: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;

  --font-head: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;

  --r-ctl: 8px;          /* buttons and fields */
  --r-panel: 14px;       /* panels and dialogs */
  --r-pill: 999px;

  /* what a theme may change beyond the colours */
  --canvas-image: none;                     /* the background behind everything */
  --canvas-size: auto;
  --btn-primary-bg: var(--blue);
  --btn-primary-hover: var(--blue-hover);
  --tab-mark: var(--pen-red);               /* the line under the tab you are on */

  /* light: paper and ink */
  color-scheme: light;
  --bg: #edf1f8;
  --surface: #ffffff;
  --surface-2: #f5f7fc;
  --field: #ffffff;
  --hover: #eef2fb;
  --line: #d3dcec;
  --line-strong: #aebbd4;
  --ink: #12203f;
  --ink-2: #44526f;
  --ink-3: #5e6c88;
  --blue: #2549cf;
  --blue-hover: #1b3cb4;
  --blue-ink: #ffffff;
  --blue-soft: #e4eafb;
  --blue-text: #2043c2;
  --red: #c9243a;
  --red-soft: #fce8eb;
  --red-solid: #c9243a;
  --green: #12805c;
  --green-soft: #ddf4ea;
  --amber: #8a5a00;
  --amber-soft: #fff0cc;
  --mark: #ffe874;       /* highlighter: the row you just added */
  --desk: #d9e1ee;       /* the table the paper lies on */
  --grid-line: rgb(37 73 207 / 7%);
  --brand-tile: #2549cf;
  --pen-red: #d6283c;    /* ink on the white paper in both themes */
  --focus: #2549cf;
  --shadow-pop: 0 2px 6px rgb(18 32 63 / 14%), 0 18px 48px rgb(18 32 63 / 22%);
  --shadow-sheet: 0 1px 2px rgb(18 32 63 / 18%), 0 12px 34px rgb(18 32 63 / 16%);
  --series-1: #2549cf; --series-2: #b4510c; --series-3: #0b7f78; --series-4: #8a3fa5;
}

:root[data-theme='dark'], :root[data-theme='dark'] [data-skin-preview='classic'], [data-skin-preview='classic'][data-mode='dark'] {
  color-scheme: dark;
  --bg: #0d1815;
  --surface: #14231f;
  --surface-2: #101e1b;
  --field: #0f1c19;
  --hover: #1b302a;
  --line: #27403a;
  --line-strong: #3f5f56;
  --ink: #e6eee9;
  --ink-2: #b6c6be;
  --ink-3: #8fa59b;
  --blue: #86aeff;
  --blue-hover: #a3c1ff;
  --blue-ink: #0b1633;
  --blue-soft: #1b3047;
  --blue-text: #9cbcff;
  --red: #ff8b98;
  --red-soft: #3a2026;
  --red-solid: #d6283c;
  --green: #6fd3a8;
  --green-soft: #17372b;
  --amber: #f2c45d;
  --amber-soft: #3a3014;
  --mark: #6a5a10;
  --desk: #0a1210;
  --grid-line: rgb(190 225 210 / 6%);
  --brand-tile: #86aeff;
  --focus: #9cbcff;
  --shadow-pop: 0 2px 6px rgb(0 0 0 / 40%), 0 18px 48px rgb(0 0 0 / 55%);
  --shadow-sheet: 0 1px 2px rgb(0 0 0 / 50%), 0 14px 38px rgb(0 0 0 / 50%);
  --series-1: #86aeff; --series-2: #f0a35e; --series-3: #4fcfc5; --series-4: #d49be8;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Every font size in these stylesheets is a multiple of --fz. The site is set a little smaller (15 px for a 16 px
   browser), except the question paper and answer key screens (.bench in app.css), which keep their own sizes. */
:root { --fz: .9375rem; }
body {
  margin: 0; min-height: 100vh; background-color: var(--bg); color: var(--ink);
  background-image: var(--canvas-image); background-size: var(--canvas-size); background-attachment: fixed;
  font: 400 calc(1 * var(--fz))/1.5 var(--font-ui); font-optical-sizing: auto;
  transition: background-color .25s ease, color .25s ease;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-head); }
h1 { font-size: clamp(calc(1.6 * var(--fz)), calc(1.3 * var(--fz)) + 1vw, calc(2 * var(--fz))); line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; }
h2 { font-size: calc(1.3 * var(--fz)); line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }
h3 { font-size: calc(1.05 * var(--fz)); line-height: 1.3; font-weight: 700; }
a { color: var(--blue-text); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
.icon { flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.grow { flex: 1 1 auto; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }
.muted { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: calc(.9375 * var(--fz)); line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: var(--hover); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--btn-primary-bg); border-color: var(--blue); color: var(--blue-ink); }
.btn.primary:hover:not(:disabled) { background: var(--btn-primary-hover); border-color: var(--blue-hover); }
.btn.quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.quiet:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
.btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 50%, transparent); }
.btn.danger:hover:not(:disabled) { background: var(--red-soft); }
.btn.danger-solid { background: var(--red-solid); border-color: var(--red-solid); color: #fff; }
.btn.danger-solid:hover:not(:disabled) { filter: brightness(.92); }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: calc(.875 * var(--fz)); }
.btn.icon-only { padding: 0; width: 40px; }
.btn.sm.icon-only { width: 32px; }
.btn.wide { width: 100%; min-height: 46px; font-size: calc(1 * var(--fz)); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn[aria-pressed='true'] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-text); }

/* ---------- fields ---------- */
.fld { display: grid; gap: 6px; margin: 0 0 14px; align-content: start; min-width: 0; }
.lbl { font-weight: 600; font-size: calc(.875 * var(--fz)); color: var(--ink); }
.hint { font-size: calc(.8125 * var(--fz)); color: var(--ink-3); line-height: 1.4; }
input:where(:not([type='radio'], [type='checkbox'], [type='file'], [type='range'])), select, textarea {   /* :where keeps this easy to override */
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--field); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.4; }
select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237f8aa3' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .85; }
input:where(:not([type='radio'], [type='checkbox'], [type='file'], [type='range'])):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
}
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
/* The text cursor (I-beam) over boxes you type in: black with a thin white edge, in light and dark mode alike, so it
   shows on white boxes too (some computers draw it white, which disappears on a white box). */
:root {
  --ibeam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 3.6c2 0 2.9.5 3.4 1.4.5-.9 1.4-1.4 3.4-1.4M12 5v14M8.6 20.4c2 0 2.9-.5 3.4-1.4.5.9 1.4 1.4 3.4 1.4' stroke='white' stroke-width='3.4'/%3E%3Cpath d='M8.6 3.6c2 0 2.9.5 3.4 1.4.5-.9 1.4-1.4 3.4-1.4M12 5v14M8.6 20.4c2 0 2.9-.5 3.4-1.4.5.9 1.4 1.4 3.4 1.4' stroke='black' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 12 12, text;
}
:is(input:not([type]), input[type='text'], input[type='search'], input[type='password'], input[type='email'], input[type='tel'],
  input[type='url'], input[type='number'], textarea, [contenteditable='true']):not(:disabled) { cursor: var(--ibeam); }
input[type='radio'], input[type='checkbox'] { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex: none; }
input[type='number'] { font-variant-numeric: tabular-nums; }
.fld.inline { display: flex; align-items: center; gap: 8px; }
.fld.inline .lbl { white-space: nowrap; }
.checkline { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.err, .form-error { min-height: 1.4em; margin: 0 0 8px; color: var(--red); font-size: calc(.9 * var(--fz)); font-weight: 500; }

.choices { display: grid; gap: 8px; margin: 0 0 14px; }
.choice {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--field); transition: background-color .15s, border-color .15s;
}
.choice:hover { background: var(--hover); }
.choice input { margin-top: 2px; }
.choice:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choices.cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ---------- small marks ---------- */
.chip { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--blue-soft); color: var(--blue-text); font-size: calc(.8125 * var(--fz)); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px; border-radius: var(--r-pill); font-size: calc(.8125 * var(--fz)); font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.badge.administrator { background: var(--blue-soft); color: var(--blue-text); border-color: transparent; }
.badge.management { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.badge.teacher { background: var(--green-soft); color: var(--green); border-color: transparent; }
.badge.suspended, .badge.blocked { background: var(--red-soft); color: var(--red); border-color: transparent; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); flex: none; }
.dot.active { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
.dot.idle { background: var(--amber); }
.dot.away { background: transparent; border: 2px solid var(--ink-3); }
.note { margin: 12px 0; padding: 10px 14px; background: var(--blue-soft); border-left: 3px solid var(--blue); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; overflow-wrap: anywhere; }
.note.warn { background: var(--amber-soft); border-left-color: var(--amber); }
.note.bad { background: var(--red-soft); border-left-color: var(--red); }
.note.good { background: var(--green-soft); border-left-color: var(--green); }
.note.bad, .note.good { display: flex; align-items: flex-start; gap: 8px; }
.note.good svg, .note.bad svg { flex: none; margin-top: 2px; }
.empty { margin: 0 0 8px; color: var(--ink-3); font-size: calc(.9375 * var(--fz)); }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- tables ---------- */
.tablewrap { position: relative; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.table { width: 100%; border-collapse: collapse; font-size: calc(.9375 * var(--fz)); }
.table th, .table td { padding: 10px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.table th { font-size: calc(.8125 * var(--fz)); font-weight: 600; color: var(--ink-3); background: var(--surface-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--hover); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table .acts { text-align: right; white-space: nowrap; }
.table .acts .btn + .btn { margin-left: 6px; }
.table select { width: auto; min-height: 34px; padding: 4px 30px 4px 10px; }
.table tr.is-blocked td { color: var(--ink-3); }

/* ---------- dialogs and toasts ---------- */
dialog.modal {
  width: min(460px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--surface-solid, var(--surface)); color: var(--ink); box-shadow: var(--shadow-pop);
}
dialog.modal.wide { width: min(640px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgb(6 12 24 / 58%); }
dialog.modal h3 { font-size: calc(1.15 * var(--fz)); margin-bottom: 12px; }
dialog.modal .modal-text { margin-bottom: 18px; color: var(--ink-2); overflow-wrap: anywhere; }
dialog.modal .row { margin-top: 10px; flex-wrap: nowrap; }
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: grid; gap: 8px; max-width: min(400px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-pop); animation: toast-in .2s ease-out; }
.toast.err { background: var(--red-solid); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- the dark / light switch ---------- */
.theme-switch {
  display: inline-flex; align-items: center; gap: 10px; padding: 3px; border: 1px solid var(--line-strong);
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); cursor: pointer; font-weight: 600; font-size: calc(.875 * var(--fz));
}
.theme-switch:has(.ts-text) { padding-right: 14px; }
.theme-switch:hover { background: var(--hover); }
.ts-track { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; width: 56px; height: 28px; border-radius: var(--r-pill); background: var(--surface-2); }
.ts-sun, .ts-moon { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; color: var(--ink-3); transition: color .2s; }
.ts-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); transition: transform .28s cubic-bezier(.3, .8, .25, 1); }
.ts-sun { color: var(--blue-ink); }
:root[data-theme='dark'] .ts-knob { transform: translateX(28px); }
:root[data-theme='dark'] .ts-sun { color: var(--ink-3); }
:root[data-theme='dark'] .ts-moon { color: var(--blue-ink); }

/* ---------- the paper ----------
   The sheet always stays white with black text (it is a printed page); everything around it follows the theme. */
.desk { overflow: auto; padding: 16px; background: var(--desk); border-radius: var(--r-panel); }
.sheet {
  margin: 0 auto; background: #fff; color: #000; box-shadow: var(--shadow-sheet);
  font: 11pt/normal var(--font-paper); width: 21cm; min-height: 29.7cm; padding: 1.27cm;
}
.sheet-empty { margin: 120px 20px; text-align: center; font: 15px/1.5 var(--font-ui); color: #5a6580; }
.tbl { display: grid; grid-auto-rows: minmax(0.51cm, auto); margin-inline: auto; }
.tbl.line-below { border-bottom: 1pt solid #000; }
.cell { padding: 0 0.19cm; min-width: 0; }
.cell.v-center { display: flex; flex-direction: column; justify-content: center; }
.cell.v-bottom { display: flex; flex-direction: column; justify-content: flex-end; }
.p { white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.15em; }
.p.b { font-weight: 700; }
.p.it { font-style: italic; }
.p.un { text-decoration: underline; }
.li { display: flex; }
.tx { flex: 1; min-width: 0; }
.tb { flex: none; white-space: pre; }
.gap { height: 0.446cm; }
.pic { max-width: 100%; }
.pic.ghost { display: inline-block; background: #eef1f6 linear-gradient(135deg, transparent 49%, #c5cde0 49% 51%, transparent 51%); border: 1px dashed #98a4c2; }
.cell.flash { animation: mark 1.7s ease-out; }
@keyframes mark { 0%, 55% { background: var(--mark); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cell.flash { background: var(--mark); }
}