/*
 * The Axis brand book on the website, over the landing-page design:
 * square edges, thin Forest rules, no soft shadows. Headlines keep the landing
 * page's Bricolage Grotesque; everything else is Archivo, codes and labels are
 * IBM Plex Mono, and handwriting (Caveat) appears only inside example student work.
 * The marker yellow (--hl) has one job: underlining a headline's key words.
 */

:root {
  --radius: 0;
  --radius-lg: 0;
  --shadow: none;
  --shadow-lg: none;
  --line: rgba(0, 37, 0, 0.16);
  --line-2: rgba(0, 37, 0, 0.3);
  --ink-3: #646b63;
  --grid: rgba(0, 37, 0, 0.055);
}

/* square and flat: roundness reads soft, and depth comes from rules, not blur */
*,
*::before,
*::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* what really is round stays round: dots, answer bubbles, a child's circled answer */
.eyebrow .dot,
.mc span::before,
.slide .sl-bar i,
.tick,
[style*="border-radius:50%"] {
  border-radius: 50% !important;
}

/* a printed sheet: a Forest rule, and a second sheet behind it, offset, never a shadow */
.pp,
.slide,
.sheet {
  border: 1px solid var(--ink) !important;
  box-shadow: 5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--ink) !important;
}

/* cards and panels are ruled boxes */
.tier,
.sch2-why > div {
  border-color: var(--ink) !important;
}
/* a gallery tile only holds a sheet: a faint hairline, so the sheet carries the rule */
.tile {
  border-color: var(--line) !important;
}
.tier.pop {
  border-width: 2px !important;
}

/* buttons: Forest Black, the brand's primary action */
.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover {
  background: #001400;
}
.btn-ghost {
  border-color: var(--ink);
}

/* labels and tags in the mono signal type */
.tier .badge,
.tag-ver,
.sk {
  font-family: var(--f-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* the five states, fixed: mastered, developing, not assessed (ready and another approach join them in the app) */
.sk-m { background: #e4eae3; color: #002500; }
.sk-d { background: #f0e8ee; color: #4a2140; }
.sk-n { background: #eef0ec; color: #646b63; }

:focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px;
}

/* The Axis mark (brand book cover), as in the app: Forest Black on paper, never on a coloured ground.
   On the dark footer it sits in its own paper square. The wordmark is Archivo, as in the app. */
.logo {
  font-family: var(--f-body);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.logo-mark.logo-axis {
  background: none;
  width: auto;
  height: auto;
}
.logo-mark.logo-on-dark {
  background: var(--paper);
  width: 32px;
  height: 32px;
}
.cycle-center .logo-mark.logo-axis {
  background: var(--paper);
}