/* mechaite
 *
 * Rebuilt 2026-08-21 after Melbin read the first version: "no design sense in it and this
 * should not be a chatbot response made into a website it should be a proper website".
 * He was right. The first version was a single column of paragraphs with one card, which is
 * what markdown looks like when you give it a stylesheet, not what a company looks like.
 *
 * The colour values are not chosen by eye. They are the validated data-viz palette, and the
 * three series hues were re-run through the validator for this exact set: all-pairs CVD
 * deltaE 9.2 light / 9.4 dark, normal-vision 24.0 / 20.9, both modes PASS. The one WARN is
 * aqua at 2.74:1 on the light surface, which the method allows only with visible labels as
 * relief - so every meter here prints its number beside the bar, always, by construction.
 *
 * Dark mode is SELECTED, not an inverted flip: each dark value is its own step chosen for
 * the dark surface.
 */

:root {
  color-scheme: light;

  /* surfaces and ink */
  --plane:        #f4f4f1;
  --surface:      #fcfcfb;
  --surface-2:    #f9f9f7;
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --muted:        #898781;
  --line:         #e1e0d9;
  --line-strong:  #c3c2b7;

  /* the deep band the hero and footer sit on */
  --deep:         #10233a;
  --deep-2:       #16304e;
  --on-deep:      #f2f5f9;
  --on-deep-2:    #a9bdd4;

  /* accent, from the palette's categorical slot 1 */
  --accent:       #2a78d6;
  --accent-ink:   #1c5cab;
  --accent-soft:  #e8f0fc;

  /* the three curriculum components, slots 1 to 3 */
  --ct:           #2a78d6;
  --ai:           #eb6834;
  --project:      #1baf7a;
  --ct-track:     #cde2fb;
  --ai-track:     #fbe0d5;
  --project-track:#cdefe2;

  /* status, fixed and never themed */
  --good:         #0ca30c;
  --warning:      #fab219;
  --critical:     #d03b3b;

  --radius:       10px;
  --radius-lg:    16px;
  --shadow:       0 1px 2px rgba(16, 35, 58, .05), 0 8px 24px rgba(16, 35, 58, .06);
  --shadow-lg:    0 2px 4px rgba(16, 35, 58, .06), 0 18px 48px rgba(16, 35, 58, .10);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --plane:        #0d0d0d;
    --surface:      #1a1a19;
    --surface-2:    #141413;
    --ink:          #ffffff;
    --ink-2:        #c3c2b7;
    --muted:        #898781;
    --line:         #2c2c2a;
    --line-strong:  #383835;
    --deep:         #0a1626;
    --deep-2:       #101f33;
    --on-deep:      #eef2f7;
    --on-deep-2:    #93a8c0;
    --accent:       #3987e5;
    --accent-ink:   #86b6ef;
    --accent-soft:  #14243a;
    --ct:           #3987e5;
    --ai:           #d95926;
    --project:      #199e70;
    --ct-track:     #184f95;
    --ai-track:     #5a2711;
    --project-track:#0f4230;
    --shadow:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lg:    0 2px 4px rgba(0,0,0,.45), 0 18px 48px rgba(0,0,0,.45);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }
.narrow { width: min(760px, 100% - 3rem); margin-inline: auto; }

/* ---- type scale -------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -0.022em; line-height: 1.15; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.5rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.15rem); letter-spacing: -0.026em; }
h3 { font-size: 1.16rem; letter-spacing: -0.014em; }
h4 { font-size: .95rem; letter-spacing: 0; font-weight: 620; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lede { font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

/* A section label. Small caps done properly: tracked out, never just shrunk. */
.eyebrow {
  font-size: .74rem; font-weight: 680; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .7rem;
}
.eyebrow.on-deep { color: var(--on-deep-2); }

a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

/* ---- header ------------------------------------------------------------------------ */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--plane) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; height: 66px; }

.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 680; font-size: 1.12rem; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
}
.wordmark .glyph {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(145deg, var(--accent), var(--accent-ink));
  display: grid; place-items: center;
  color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: 0;
}
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 520; }
.site-nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .site-nav .hide-sm { display: none; } }

/* ---- buttons ----------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.15rem; border-radius: var(--radius); border: 1px solid transparent;
  font-size: .95rem; font-weight: 600; letter-spacing: -0.008em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.btn-primary:hover { background: var(--accent-ink); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink); }
.btn-on-deep { background: rgba(255,255,255,.09); color: var(--on-deep); border-color: rgba(255,255,255,.22); }
.btn-on-deep:hover { background: rgba(255,255,255,.16); color: #fff; }

/* ---- the deep hero band ------------------------------------------------------------ */

.hero {
  background: radial-gradient(120% 140% at 12% 0%, var(--deep-2) 0%, var(--deep) 62%);
  color: var(--on-deep);
  padding: clamp(3.5rem, 2rem + 7vw, 6.5rem) 0 clamp(3rem, 2rem + 5vw, 5rem);
  border-bottom: 1px solid var(--line);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede { color: var(--on-deep-2); max-width: 54ch; margin-top: 1.2rem; }
.hero-grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr .98fr; align-items: center; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }
.hero-note { margin-top: 1.5rem; font-size: .86rem; color: var(--on-deep-2); }

/* ---- sections ---------------------------------------------------------------------- */

section { padding: clamp(3.2rem, 2rem + 4.5vw, 5.5rem) 0; }
section.tint { background: var(--surface-2); border-block: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 2.6rem; }
.section-head p { color: var(--ink-2); margin-top: .85rem; }

/* ---- cards and grids --------------------------------------------------------------- */

.grid { display: grid; gap: 1.1rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.5rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-2); font-size: .96rem; }

.card-num {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: .82rem; font-weight: 700; margin-bottom: .9rem;
}

/* ---- stat tiles -------------------------------------------------------------------- *
 * Contract from the method: label in sentence case with no trailing colon, value in the
 * same sans at semibold, proportional figures (NOT tabular - tabular gives every digit the
 * width of a zero and a display number goes loose). */

.stats { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
         border-radius: var(--radius-lg); overflow: hidden;
         grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat { background: var(--surface); padding: 1.35rem 1.4rem; }
.stat .value {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 660;
  letter-spacing: -0.035em; line-height: 1.05; color: var(--ink);
}
.stat .label { font-size: .88rem; color: var(--ink-2); margin-top: .45rem; }
.stat .foot { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.stat.on-deep { background: rgba(255,255,255,.045); }
.stat.on-deep .value { color: #fff; }
.stat.on-deep .label { color: var(--on-deep-2); }
.stat.on-deep .foot { color: #7d92aa; }
.stats.on-deep { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); }

/* ---- the product screen ------------------------------------------------------------ *
 * A live render of the real interface rather than a screenshot. It cannot go stale
 * against the product the way an exported PNG does, and it stays legible at any width. */

.screen {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.screen-bar {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .85rem; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.screen-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.screen-bar .addr {
  margin-left: .5rem; font-family: var(--mono); font-size: .72rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.screen-body { padding: 1.25rem 1.3rem 1.4rem; }
.screen-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.screen-title h4 { font-size: 1rem; }
.screen-title .pct { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- meters ------------------------------------------------------------------------ *
 * Method rule: the unfilled track is a LIGHTER STEP OF THE FILL'S OWN RAMP, never a
 * neutral grey, so the state reads across the whole bar. The first version of this file
 * used one grey track for every component and lost exactly that. */

.meter-row { margin-top: 1.05rem; }
.meter-row:first-child { margin-top: .4rem; }
.meter-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: .87rem; margin-bottom: .4rem;
}
.meter-head .name { color: var(--ink-2); display: inline-flex; align-items: center; gap: .45rem; }
.meter-head .name::before {
  content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--accent));
}
/* The number is always present. It is the relief that licenses a sub-3:1 fill on the light
 * surface, so it is not optional styling. */
.meter-head .val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter {
  height: 9px; border-radius: 99px; overflow: hidden;
  background: var(--track, var(--ct-track));
}
.meter > span { display: block; height: 100%; border-radius: 99px; background: var(--c, var(--accent)); }

/* ---- pupil chips ------------------------------------------------------------------- */

.journal { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.entry { display: flex; gap: .8rem; padding: .55rem 0; }
.entry .ref {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font-size: .78rem; font-weight: 660;
}
.entry .body { min-width: 0; }
.entry .body p { font-size: .87rem; margin: 0; color: var(--ink-2); }
.entry .body .when { font-size: .74rem; color: var(--muted); }

.tag {
  display: inline-block; padding: .1rem .5rem; border-radius: 99px;
  font-size: .7rem; font-weight: 650; letter-spacing: .01em; vertical-align: 1px;
}
.tag-secure     { background: color-mix(in srgb, var(--good) 15%, transparent);     color: var(--good); }
.tag-developing { background: color-mix(in srgb, var(--accent) 15%, transparent);   color: var(--accent-ink); }
.tag-emerging   { background: color-mix(in srgb, var(--warning) 22%, transparent);  color: #8a5a00; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .tag-emerging { color: var(--warning); }
}

/* ---- quote / source ---------------------------------------------------------------- */

.source {
  border-left: 3px solid var(--accent); padding: .1rem 0 .1rem 1.15rem;
  color: var(--ink-2); font-size: 1rem;
}
.source cite { display: block; margin-top: .6rem; font-size: .82rem; color: var(--muted); font-style: normal; }

/* ---- tables ------------------------------------------------------------------------ */

table { width: 100%; border-collapse: collapse; font-size: .93rem; }
caption { text-align: left; font-size: .84rem; color: var(--muted); padding-bottom: .6rem; }
th, td { text-align: left; padding: .62rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .76rem; font-weight: 660; letter-spacing: .045em; text-transform: uppercase; color: var(--muted); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
.table-card { background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--radius-lg); padding: 1.35rem 1.4rem; overflow-x: auto; }

/* ---- checklist --------------------------------------------------------------------- */

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ticks li { display: flex; gap: .65rem; font-size: .96rem; color: var(--ink-2); }
.ticks li::before {
  content: ""; flex: none; margin-top: .42rem; width: 14px; height: 8px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---- call to action ---------------------------------------------------------------- */

.cta {
  background: radial-gradient(120% 160% at 85% 0%, var(--deep-2) 0%, var(--deep) 60%);
  color: var(--on-deep); border-radius: var(--radius-lg);
  padding: clamp(2rem, 1.2rem + 3vw, 3.2rem);
}
.cta h2 { color: #fff; max-width: 20ch; }
.cta p { color: var(--on-deep-2); margin-top: .9rem; max-width: 58ch; }
.cta .hero-actions { margin-top: 1.6rem; }

/* ---- footer ------------------------------------------------------------------------ */

.site-foot { background: var(--surface); border-top: 1px solid var(--line); padding: 3rem 0 2.5rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-foot h4 { color: var(--ink); margin-bottom: .7rem; }
.site-foot p, .site-foot li { color: var(--muted); font-size: .87rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.foot-bottom {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: space-between;
  font-size: .82rem; color: var(--muted);
}

/* ---- forms (the app pages) --------------------------------------------------------- */

label { display: block; font-size: .87rem; font-weight: 600; color: var(--ink-2); margin: 1rem 0 .35rem; }
input, select, textarea {
  font: inherit; font-size: .95rem; width: 100%; padding: .68rem .8rem; min-height: 44px;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
button { font: inherit; }

.err { background: color-mix(in srgb, var(--critical) 10%, var(--surface));
       border: 1px solid color-mix(in srgb, var(--critical) 35%, var(--surface));
       color: var(--critical); padding: .7rem .85rem; border-radius: var(--radius); margin: .8rem 0; font-size: .9rem; }
.ok  { background: color-mix(in srgb, var(--good) 10%, var(--surface));
       border: 1px solid color-mix(in srgb, var(--good) 30%, var(--surface));
       color: var(--good); padding: .7rem .85rem; border-radius: var(--radius); margin: .8rem 0; font-size: .9rem; }

.pupil { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; background: var(--surface); }
.pupil .ref { font-weight: 660; }
.levels { display: flex; gap: .4rem; margin-top: .5rem; }
.levels button {
  flex: 1; padding: .5rem .3rem; font-size: .84rem; font-weight: 570; cursor: pointer;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line-strong); border-radius: 8px; min-height: 40px;
}
.levels button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.roll { display: grid; gap: .5rem; }
.rows { display: grid; gap: .6rem; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.crumbs { font-size: .89rem; margin: 1.2rem 0; }
.pill { display: inline-block; padding: .12rem .55rem; border-radius: 99px; background: var(--accent-soft);
        color: var(--accent-ink); font-size: .78rem; font-weight: 640; }
.pill.warn { background: color-mix(in srgb, var(--warning) 22%, transparent); color: #8a5a00; }
.note { font-size: .89rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}