/* app.css - the one stylesheet. Colour theme built on the Minerva logo: royal blue and maroon, with the website's teal and
   orange as accents. Flat colour blocks, no gradients except the score tile; reads well on a phone. */
:root
{
    --ink: #1b1f3a;
    --ink-soft: #5c6180;
    --line: #d5daf0;
    --paper: #ffffff;
    --page: #eef1fb;
    --blue: #2e3a97;          /* logo blue */
    --blue-deep: #1f2870;
    --blue-soft: #e4e8fb;
    --maroon: #8a1538;        /* logo maroon */
    --maroon-soft: #f8e6ec;
    --teal: #1dc3a8;
    --teal-deep: #0f8f7b;
    --teal-soft: #dff6f1;
    --orange: #f59b21;
    --orange-deep: #b86a06;
    --orange-soft: #fff1dd;
    --green: #2e9e5b;
    --green-soft: #e3f5ea;
    --red: #d1343b;
    --red-soft: #fde7e8;
    --radius: 6px;
    --display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}
*               { box-sizing: border-box; }
html, body      { margin: 0; padding: 0; }
body            { font: 16px/1.5 var(--body); color: var(--ink); background: var(--page); }
a               { color: var(--blue); }
h1, h2, h3      { font-family: var(--display); line-height: 1.15; margin: 0 0 .5rem; color: var(--blue-deep); }
h1              { font-size: 1.8rem; }
h2              { font-size: 1.25rem; margin-top: 1.75rem; padding-bottom: .35rem; border-bottom: 3px solid var(--teal); display: inline-block; }
h3              { font-size: 1rem; }
p               { margin: 0 0 1rem; }
.wrap           { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.wrap.wide      { max-width: 1180px; }
main.wrap       { padding-top: 1.5rem; padding-bottom: 3rem; min-height: 70vh; }

/* ---- header / footer ---------------------------------------------------------------------------------------------- */
header.top          { background: var(--blue); color: #fff; border-bottom: 4px solid var(--maroon); }
header.top .wrap    { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
                      min-height: 60px; max-width: 1180px; }
header.top .brand   { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; }
header.top .brand em { font-style: normal; color: var(--orange); }
header.top nav      { display: flex; flex-wrap: wrap; gap: .25rem; }
header.top nav a    { color: #fff; text-decoration: none; padding: .4rem .7rem; border-radius: var(--radius); font-size: .95rem; }
header.top nav a:hover { background: rgba(255, 255, 255, .15); }
header.top nav a.muted { color: #c9cff5; }
footer.wrap         { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; color: var(--ink-soft);
                      font-size: .85rem; padding: 1rem; border-top: 1px solid var(--line); max-width: 1180px; }

/* ---- blocks ------------------------------------------------------------------------------------------------------- */
.card           { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: var(--radius);
                  padding: 1.25rem; margin-bottom: 1rem; }
.flash          { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border-left: 5px solid; font-weight: 500; }
.flash.ok       { background: var(--green-soft); border-color: var(--green); color: #1b5e36; }
.flash.warn     { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-deep); }
.flash.bad      { background: var(--red-soft); border-color: var(--red); color: #8f1f24; }
.kicker         { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--maroon); font-weight: 600; margin-bottom: .25rem; }
.stats          { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat           { border-radius: var(--radius); padding: .85rem 1rem; color: #fff; background: var(--blue); }
.stat b         { display: block; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.stat span      { font-size: .8rem; opacity: .9; }
.stat.c2        { background: var(--maroon); }
.stat.c3        { background: var(--teal-deep); }
.stat.c4        { background: var(--orange-deep); }
.stat.c5        { background: var(--green); }
.stat.c6        { background: var(--blue-deep); }

/* ---- forms -------------------------------------------------------------------------------------------------------- */
label           { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .9rem; color: var(--blue-deep); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea
                { width: 100%; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit;
                  background: var(--paper); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.field          { margin-bottom: 1rem; }
.field small    { color: var(--ink-soft); font-size: .8rem; }
.grid2          { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid3          { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1rem; }
@media (max-width: 600px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.btn            { display: inline-block; padding: .65rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--maroon);
                  background: var(--maroon); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover      { background: #a21a43; border-color: #a21a43; }
.btn.ghost      { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn.ghost:hover { background: var(--blue-soft); }
.btn.quiet      { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn.quiet:hover { background: var(--blue-soft); }
.btn.small      { padding: .3rem .7rem; font-size: .85rem; }
.btn:disabled   { opacity: .5; cursor: default; }
.actions        { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .5rem; }

/* ---- tables ------------------------------------------------------------------------------------------------------- */
table           { width: 100%; border-collapse: collapse; background: var(--paper); font-size: .92rem; border-radius: var(--radius); overflow: hidden; }
th, td          { text-align: left; padding: .55rem .65rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th              { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--blue); font-weight: 600; }
tr:nth-child(even) td { background: #f7f8fd; }
table.kv th     { background: var(--blue-soft); color: var(--blue-deep); text-transform: none; letter-spacing: 0; font-size: .85rem; width: 9em; }
td.num, th.num  { text-align: right; font-variant-numeric: tabular-nums; }
.mono           { font-family: ui-monospace, Consolas, monospace; }
.tag            { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
                  background: var(--blue-soft); color: var(--blue-deep); }
.tag.ok         { background: var(--green-soft); color: #1b5e36; }
.tag.bad        { background: var(--red-soft); color: #8f1f24; }
.tag.warn       { background: var(--orange-soft); color: var(--orange-deep); }
.scroll         { overflow-x: auto; }

/* Subject colours, used on the test bar, the result review and the examiner page. */
.subj           { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #fff; }
.subj-maths     { background: var(--blue); }
.subj-physics   { background: var(--orange-deep); }
.subj-chemistry { background: var(--teal-deep); }
.subj-botany    { background: var(--green); }
.subj-zoology   { background: var(--maroon); }
.testbar .subj-maths { background: #5b6ad8; }           /* the logo blue vanishes on the dark test bar */

/* ---- the test screen ---------------------------------------------------------------------------------------------- */
.testbar        { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
                  background: var(--blue-deep); color: #fff; border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .75rem; }
.testbar .kicker { color: #c9cff5; }
.testbar .clock { font-family: var(--display); font-size: 1.6rem; font-variant-numeric: tabular-nums; background: var(--teal);
                  color: #fff; padding: .2rem .8rem; border-radius: var(--radius); }
.testbar .clock.low { background: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .6; } }
.progress       { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.progress i     { display: block; height: 100%; background: var(--teal); }
.qimage         { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; text-align: center; }
.qimage img     { max-width: 100%; height: auto; }
.options        { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: 1rem 0; }
@media (max-width: 600px) { .options { grid-template-columns: repeat(2, 1fr); } }
.options label  { display: block; margin: 0; }
.options input  { position: absolute; opacity: 0; }
.options span   { display: block; text-align: center; padding: 1rem; border: 2px solid var(--blue); border-radius: var(--radius);
                  background: var(--paper); color: var(--blue); font-family: var(--display); font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.options span:hover { background: var(--blue-soft); }
.options input:checked + span { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.options input:focus-visible + span { outline: 3px solid var(--teal); }

/* ---- result ------------------------------------------------------------------------------------------------------- */
.review         { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.review .item   { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.review .item.right { border-left-color: var(--green); }
.review .item.wrong { border-left-color: var(--red); }
.review .item.blank { border-left-color: var(--orange); }
.review .item img { max-width: 100%; height: auto; display: block; margin: .5rem 0; }
.review .meta   { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; align-items: center; }
.review .meta b { font-family: var(--display); }
.answer-row     { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.answer-row span { padding: .35rem .75rem; border-radius: var(--radius); font-weight: 600; }
.answer-row .yours { background: var(--blue-soft); color: var(--blue-deep); }
.answer-row .key   { background: var(--teal-soft); color: var(--teal-deep); }
.answer-row .mark-ok  { background: var(--green); color: #fff; }
.answer-row .mark-bad { background: var(--red); color: #fff; }
.scorecard      { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%); color: #fff; border-radius: var(--radius);
                  padding: 1.25rem 1.5rem; margin-bottom: 1rem; display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; }
.scorecard .big { font-family: var(--display); font-size: 3rem; line-height: 1; }
.scorecard .big small { font-size: 1.2rem; opacity: .8; }
.scorecard div span { display: block; font-size: .8rem; opacity: .85; }
.scorecard div b  { font-family: var(--display); font-size: 1.5rem; }
.login-box      { max-width: 420px; margin: 3rem auto; border-top-color: var(--maroon); }
.codes          { columns: 4; column-gap: 1rem; font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; }
.codes div      { background: var(--blue-soft); margin-bottom: .4rem; padding: .25rem .6rem; border-radius: var(--radius); break-inside: avoid; }
@media (max-width: 600px) { .codes { columns: 2; } }
@media print { header.top, footer, .noprint { display: none; } body { background: #fff; } .codes div { background: none; } }

/* ---- sign-in landing: guide on the left, login card in the top-right corner ---------------------------------- */
.landing        { display: grid; grid-template-columns: 1fr 340px; gap: 2.5rem; align-items: start; }
.landing-login  { position: sticky; top: 1rem; }
.landing-login .login-card { margin: 0; border-top-color: var(--maroon); }
.landing-login hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.landing-info h1 { font-size: 2.1rem; }
.landing-info h2 { margin-top: 2rem; }
.landing-info .lead { font-size: 1.05rem; color: var(--ink-soft); max-width: 64ch; }
.small          { font-size: .9rem; }
.facts          { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1.5rem 0; }
.fact           { border-radius: var(--radius); padding: .9rem 1rem; color: #fff; background: var(--blue); }
.fact b         { display: block; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.fact span      { font-size: .82rem; opacity: .92; }
.fact.c2        { background: var(--teal-deep); }
.fact.c3        { background: var(--green); }
.fact.c4        { background: var(--maroon); }
table.guide th  { white-space: nowrap; }
table.guide tr > th:first-child { background: var(--blue-soft); color: var(--blue-deep); text-transform: none; letter-spacing: 0; font-size: .85rem; width: 9em; }
table.guide tr:first-child th, table.guide tr:first-child > th:first-child { background: var(--blue); color: #fff; width: auto; }
table.guide td a { color: var(--blue); }
.steps          { padding-left: 1.3rem; }
.steps li       { margin-bottom: .6rem; }
@media (max-width: 860px)
{
    .landing       { grid-template-columns: 1fr; }
    .landing-login { position: static; order: -1; }
    .facts         { grid-template-columns: 1fr 1fr; }
}
.faq dt         { font-weight: 600; color: var(--blue-deep); margin-top: 1rem; }
.faq dd         { margin: .25rem 0 0; color: var(--ink); }