/* The management and sign-in pages: the admin pages for a syllabus, the tutor tools (create a question, match a question), the progress summary and the three sign-in pages. Each links this file instead of
   styling its own body, header, buttons, boxes, tables and cards, so a button or a box is the same on every one of them and a page's own <style> holds only what is particular to it. The pages a student
   practises on use igcse/lib/components.css, which is the same idea for the question card; a page links one of the two, not both. Everything is a token (igcse/lib/tokens.css): no raw size, no colour.
   igcse/tests/manage-css.mjs fails if a page that links this file defines one of these again, or redeclares the colours. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-body); }
[hidden] { display: none !important; }

/* The page column: the header and the toolbar span the page, but their contents start where the column's contents start. */
header, .bar { padding-inline: var(--page-inset-wide); }
header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); background: var(--panel); border-bottom: var(--hairline) solid var(--border); }
header h1 { margin: 0; font-size: var(--text-lg); }
header .sub { color: var(--sub); font-size: var(--text-sm); margin-top: calc(var(--space-1) / 2); max-width: var(--column); }
nav a { color: var(--accent); text-decoration: none; font-weight: var(--weight-strong); font-size: var(--text-sm); margin-left: var(--space-3); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-block: var(--space-2); background: var(--panel2); border-bottom: var(--hairline) solid var(--border); position: sticky; top: 0; z-index: 2; }
main { max-width: var(--column-wide); margin-inline: auto; padding: var(--space-4) var(--gutter) var(--space-6); display: grid; gap: var(--space-3); }
main.full { max-width: var(--column-full); }

/* A page with two panes side by side (a form and its preview; a list of topics and a page): body class "full" for the header and the toolbar to start where the panes start. */
body.full header, body.full .bar { padding-inline: var(--page-inset-full); }
.layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; max-width: var(--column-full); margin-inline: auto; padding: var(--space-4) var(--gutter) var(--space-6); }
.layout:not(.sidebar) > * { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.layout.sidebar { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.layout > main { max-width: none; margin: 0; padding: 0; }
@media (max-width: 62.5em) { .layout, .layout.sidebar { grid-template-columns: 1fr; } }

/* A section is a card: the panel fill, a hairline, the panel corner, one padding, and one gap between what is in it. */
.card, section.card, .topic { background: var(--panel); border: var(--hairline) solid var(--border); border-radius: var(--radius-panel); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.card > * { margin: 0; min-width: 0; }
h2 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-strong); }
h2 .hint { font-weight: normal; color: var(--sub); font-size: var(--text-sm); margin-left: var(--space-2); }
.note, .muted { color: var(--sub); font-size: var(--text-sm); line-height: var(--leading-body); margin: 0; }
ul.links { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
ul.links a { color: var(--accent); font-weight: var(--weight-strong); text-decoration: none; }
ul.links span { color: var(--sub); font-size: var(--text-sm); }
.tiles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tile { background: var(--panel2); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); min-width: var(--tile-min); }
.tile b { display: block; font-size: var(--text-lg); }
.pill, .tag { display: inline-flex; align-items: center; padding: calc(var(--space-1) / 2) var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-strong); background: var(--panel2); color: var(--sub); }
.pill.ok, .tag.ok { background: var(--okBg); color: var(--ok); } .pill.bad, .tag.bad { background: var(--badBg); color: var(--bad); } .pill.warn, .tag.warn { background: var(--warnBg); color: var(--warn); }
code { background: var(--panel2); border: var(--hairline) solid var(--border); border-radius: var(--radius-control); padding: 0 var(--space-1); font-size: var(--text-sm); }

/* A message: what happened and what to do next, in the colour of what it says. */
.msg, .error-msg { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); font-size: var(--text-sm); line-height: var(--leading-body); background: var(--panel2); color: var(--text); }
.msg.bad, .error-msg { background: var(--badBg); color: var(--bad); } .msg.warn { background: var(--warnBg); color: var(--warn); } .msg.ok { background: var(--okBg); color: var(--ok); }

/* The line a page shows when something it asked for did not come back. */
#error { background: var(--warnBg); color: var(--warn); padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel); }
#error:empty { display: none; }

/* A table: figures line up, a heading row in small capitals, a hairline between rows. */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--border); vertical-align: top; }
th { color: var(--sub); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--weight-strong); }
td.num, th.num { text-align: right; }

/* Buttons: a touch target high, strong type, one filled (primary) in a group, the others outlined. */
button, a.btn { font: inherit; font-size: var(--text-sm); font-weight: var(--weight-strong); display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap-compact); padding: 0 var(--space-3); border-radius: var(--radius-control); border: var(--hairline) solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; text-decoration: none; touch-action: manipulation; }
button.primary, button[aria-pressed="true"], a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accentText); }
button.danger { color: var(--bad); }
button.small { padding: 0 var(--space-2); }
button:disabled { opacity: 0.5; cursor: default; }
.seg { display: flex; } .seg button { border-radius: 0; } .seg button:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); } .seg button:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.status { margin-left: auto; font-size: var(--text-sm); } .status.ok { color: var(--ok); } .status.dirty { color: var(--warn); }

/* Boxes and lists: one fill, one border, one corner, read at the input size so a phone does not zoom in when one is focused. */
label { display: block; font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--sub); }
input, select, textarea { font: inherit; font-size: var(--text-input); color: var(--text); background: var(--bg); border: var(--hairline) solid var(--border); border-radius: var(--radius-control); padding: var(--space-1) var(--space-2); min-height: var(--tap-compact); max-width: 100%; }
input[type=text], input[type=password], input[type=number], input[type=email], textarea, select.wide { width: 100%; }
textarea { padding: var(--space-2); resize: vertical; line-height: var(--leading-body); min-height: calc(var(--tap) * 2); }
/* A form: rows of fields on one grid with one gap between rows (a pane in .layout gives that gap to its rows), and a label directly above its box. A field is a label that holds its box. */
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: var(--space-3); }
label.field { display: grid; gap: var(--space-1); min-width: 0; }
label.field > :is(input, select, textarea) { min-width: 0; }
input[type=checkbox], input[type=radio] { min-height: 0; width: auto; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a.btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 var(--focus-glow) var(--focus); }

/* On paper: the system's own text and paper colours (a dark theme must not print pale text), no controls marked .noprint, a plain outline round each card. */
@media print { body { background: Canvas; color: CanvasText; } .noprint { display: none !important; } .card { border-color: GrayText; } }

/* A sign-in page: one quiet column in the middle of the page. A role mark, a short title, what it is for in muted type, the sign-in control, one line of help, and a way back. No company name. */
body.dialogPage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--page-pad); }
.dialogPage main { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); width: 100%; max-width: var(--dialog); margin: 0; padding: 0; text-align: center; }
.dialogPage .mark { width: calc(var(--tap) * 1.25); height: calc(var(--tap) * 1.25); display: flex; align-items: center; justify-content: center; background: var(--panel); border: var(--hairline) solid var(--border); border-radius: var(--radius-panel); color: var(--accent); }
.dialogPage .mark svg { width: calc(var(--icon-size) * 1.5); height: calc(var(--icon-size) * 1.5); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dialogPage h1 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-strong); letter-spacing: -0.01em; }
.dialogPage p.sub { margin: 0; color: var(--sub); font-size: var(--text-sm); line-height: var(--leading-body); }
.dialogPage h1 + p.sub { margin-top: calc(var(--space-3) * -1); }
.dialogPage form { width: 100%; display: grid; gap: var(--space-3); text-align: left; }
.dialogPage label { margin-bottom: var(--space-1); }
.dialogPage .field { margin: 0; }
.dialogPage input[type=text], .dialogPage input[type=password] { min-height: var(--tap); padding: var(--space-3); background: var(--panel); }
.dialogPage input.has-error { border-color: var(--bad); }
.dialogPage button[type=submit], .dialogPage button.block { width: 100%; min-height: var(--tap); margin: 0; font-size: var(--text-md); background: var(--accent); border-color: var(--accent); color: var(--accentText); }
.dialogPage .error-msg { width: 100%; margin: 0; text-align: left; }
.dialogPage .note, .dialogPage .foot { margin: 0; text-align: center; color: var(--sub); font-size: var(--text-sm); }
.dialogPage a.back { color: var(--sub); font-size: var(--text-sm); text-decoration: none; padding: var(--space-2) var(--space-3); }
.dialogPage a.back:hover { color: var(--accent); }
.passwordField, .codeField { position: relative; }
.passwordField input, .codeField input { padding-right: var(--space-6); letter-spacing: 0.06em; }
.toggle-visibility { position: absolute; top: 0; right: 0; bottom: 0; width: var(--tap); display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; margin: 0; min-height: 0; color: var(--sub); cursor: pointer; }
.toggle-visibility:hover { color: var(--text); }
.toggle-visibility svg { width: var(--icon-size); height: var(--icon-size); }