/* 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); }
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 card in the middle of the page. */
body.dialogPage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--page-pad); }
.dialogPage main { display: block; width: 100%; max-width: var(--dialog); margin: 0; padding: var(--card-pad-y) var(--card-pad-x); background: var(--panel); border: var(--hairline) solid var(--border); border-radius: var(--radius-panel); box-shadow: 0 var(--space-1) var(--space-5) var(--shadow-soft); }
.dialogPage h1 { margin: 0 0 var(--space-2); font-size: var(--text-xl); font-weight: var(--weight-strong); letter-spacing: -0.01em; }
.dialogPage p.sub { margin: 0 0 var(--space-5); color: var(--sub); font-size: var(--text-md); line-height: var(--leading-body); }
.dialogPage label { text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-2); }
.dialogPage .field { margin-bottom: var(--space-4); } .dialogPage .field:last-of-type { margin-bottom: 0; }
.dialogPage input[type=text], .dialogPage input[type=password] { min-height: var(--tap); padding: var(--space-3); background: var(--panel2); }
.dialogPage input.has-error { border-color: var(--bad); }
.dialogPage button[type=submit], .dialogPage button.block { width: 100%; min-height: var(--tap); margin-top: var(--space-4); font-size: var(--text-md); background: var(--accent); border-color: var(--accent); color: var(--accentText); }
.dialogPage .error-msg { margin-bottom: var(--space-4); }
.dialogPage .note, .dialogPage .foot { margin-top: var(--space-4); text-align: center; color: var(--sub); font-size: var(--text-sm); }
.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); }