/* MarksPulse — docs/BRAND.md. Ink on paper, pulse reserved for actions. */

/* **First, because the spec says so.** An `@import` after any rule is ignored
   — the sheet still applies, the font silently does not, and Arabic falls back
   to whatever the platform picks. It rendered acceptably in Chrome, which is
   exactly why this is worth fixing rather than leaving. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

:root {
  --ink: #16181C;
  --paper: #FBFAF7;
  --secondary: #5A5F66;
  --muted: #8A9099;
  --pulse: #5A2FD0;
  --rule: #E6E3DD;
  --danger: #A83232;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F0EC;
    --paper: #101215;
    --secondary: #A2A8B0;
    --muted: #6E757E;
    --pulse: #8B6BFF;
    --rule: #2A2E34;
    --danger: #E87A7A;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Cairo, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}

/* Western digits in both languages — a brand rule, and `font-variant-numeric`
   is not enough on its own for Arabic-Indic defaults on some platforms. */
body { font-variant-numeric: lining-nums; }

header {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: var(--ink);
}
.mark svg { width: 28px; height: 28px; }

h1 { font-size: 30px; line-height: 1.3; margin: 36px 0 8px; }
h2 { font-size: 21px; margin: 32px 0 8px; }
p, li { color: var(--ink); }
.lede { color: var(--secondary); margin-top: 0; }
.updated { color: var(--muted); font-size: 15px; }

a { color: var(--pulse); }

.card {
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 20px 0;
}
.card.warn { border-color: var(--danger); }
.card h2 { margin-top: 0; }

ol, ul { padding-inline-start: 22px; }

footer {
  border-top: 1px solid var(--rule);
  margin-top: 56px;
  padding: 24px 0 48px;
  color: var(--muted);
  font-size: 15px;
}
footer a { color: var(--secondary); }

.langs { float: inline-end; font-size: 15px; }
.langs a { color: var(--secondary); text-decoration: none; }

table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td {
  text-align: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th { color: var(--secondary); font-weight: 600; font-size: 15px; }

/* The teacher account page — phase-51. */
[hidden] { display: none !important; }

.form { display: grid; gap: 8px; }
.form label { font-weight: 600; font-size: 15px; color: var(--secondary); }
input {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
input:focus { outline: 2px solid var(--pulse); outline-offset: 1px; }
button {
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--pulse);
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 8px;
  cursor: pointer;
}
button.link {
  background: none;
  color: var(--pulse);
  font-weight: 600;
  padding: 4px 0;
  justify-self: start;
}
#message { color: var(--secondary); }
#message.error { color: var(--danger); }