/* Responsive typography and simple defaults */

html{
    /* scales between 16 px (mobile) and 22 px (large desktop) */
    font-size:clamp(1rem,0.875rem + 0.6vw,1.375rem);
}
body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
    line-height:1.5;
    margin:0.5rem;
}
.warn{color:orange}
.ok{color:green}
.err{color:red}

.muted{color:#666}

table {
  --tbl-border: #BBB;
  --cell-pad: .1rem .1rem;
  font-size:.9rem;
  border-collapse: collapse;
  border: 1px solid var(--tbl-border);
}
th, td {
  padding: var(--cell-pad);
  border: 1px solid var(--tbl-border);
}

h1,h2{margin-top:0}
/* Normalize form control typography across browsers */
input, button, select, textarea {
    font-family: inherit;
    font-size: 1rem;
}

/* Uniform spacing/alignment for table-based forms */
table.form{border-collapse:collapse; border:none}
table.form td{padding:4px 8px; border:none}
table.form td.label{vertical-align:top; white-space:nowrap}

/* Visual hint for read-only fields */
input[readonly]{
    background-color:#f3f3f3;
}

/* Chart sizing used by /marks/exam/analyse */
.chartwrap{
  display:block;
  width:min(100%, 900px);   /* hard cap width at 900px */
  aspect-ratio: 4 / 3;      /* height ~= 3/4 of width */
  max-height: 675px;        /* hard cap height at 3/4 of 900px */
}
canvas.chart{
  display:block;
  width:100%;
  height:100%;
}

/* Align numeric cells and grade codes to the right in Marks tables */
td.right, th.right { text-align: right; }

/* Flag cells with associated notes: small red dot in top-left */
.has-note { position: relative; }
.has-note::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: #c00;
  border-radius: 50%;
}

/* Note flag colors */
.has-note-yellow::before { background: #fc0; }  /* canvas feedback */
.has-note-red::before    { background: #c00; }  /* other/serious */

/* Help overlay */
.qrhelp-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:9998}
.qrhelp-panel{display:none;position:fixed;top:5vh;left:5vw;width:90vw;height:85vh;background:#f0fff0;border:2pt solid #aaa;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.qrhelp-frame{width:100%;height:100%;border:0;background:#f0fff0}
.qrhelp-close{position:absolute;top:6px;right:10px;text-decoration:none;font-weight:bold;color:#333}

/* Help: dotted underline for local links and compact superscript “(go→)” */
a.help-local{ text-decoration-line: underline; text-decoration-style: dotted; text-underline-offset: 2px }
sup.help-go{ font-size:.75em; margin-left:.25em }