/* The Candy design system, for the static guide pages under /guides.
   These pages live outside the Angular application, so they cannot link the hashed
   bundle that `outputHashing: "all"` produces. This file is copied from `public/`,
   so its name never changes, and all seven pages share one cached copy.
   The token values below must stay equal to `frontend/src/styles.css` and to
   `frontend/src/app/ui/palette.spec.ts`. Change a value in one place and change it
   in all three. */

/* ── Fonts ─────────────────────────────────────────────────────────────────── */
/* Self-hosted, so no request leaves the origin and no third party sees a reader. */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/fredoka-latin.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/fredoka-latin-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ── Tokens ────────────────────────────────────────────────────────────────── */

:root {
  --mt-page: #effaf6;
  --mt-surface: #fff;
  --mt-sunk: #f4fbf8;
  --mt-border: #cfe9e0;
  --mt-rule: #d8efe8;
  --mt-chip: #e4f2ed;

  --mt-ink: #12312a;
  --mt-prose: #1b3d36;
  --mt-muted: #4c6b64;

  --mt-coral: #ff5d5d;
  --mt-coral-deep: #d63f3f;
  --mt-coral-text: #cc3b3b;

  --mt-teal: #0f766e;
  --mt-teal-deep: #0a544e;

  --mt-amber: #ffd166;
  --mt-amber-deep: #f0c256;
  --mt-amber-bg: #fff8e6;
  --mt-amber-ink: #6b4c00;

  --mt-r-card: 26px;
  --mt-r-panel: 22px;
  --mt-r-row: 16px;
  --mt-border-w: 2px;
  --mt-lift: 0 4px 0 var(--mt-border);

  --mt-display: 'Fredoka', 'Figtree', system-ui, sans-serif;
  --mt-body: 'Figtree', system-ui, sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--mt-page);
  color: var(--mt-ink);
  font-family: var(--mt-body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--mt-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--mt-ink);
}

a {
  color: var(--mt-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--mt-teal);
  outline-offset: 2px;
}

/* ── The page header ───────────────────────────────────────────────────────── */
/* A guide leaves the Angular application, so it carries its own bar. The bar
   always offers a way back into the application. */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px 16px;
  background: var(--mt-surface);
  border-bottom: var(--mt-border-w) solid var(--mt-rule);
  flex-wrap: wrap;
}
.bar__mark {
  font-family: var(--mt-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--mt-ink);
  text-decoration: none;
}
.bar__nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
}
.bar__cta {
  padding: 9px 16px;
  border: var(--mt-border-w) solid var(--mt-coral-deep);
  border-radius: var(--mt-r-row);
  background: var(--mt-coral);
  box-shadow: 0 4px 0 var(--mt-coral-deep);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.bar__cta:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--mt-coral-deep);
}

/* ── Layout ────────────────────────────────────────────────────────────────── */

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

.crumb {
  font-size: 14px;
  color: var(--mt-muted);
  margin: 0 0 20px;
}

h1 {
  font-size: clamp(30px, 6vw, 40px);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(23px, 4.5vw, 28px);
  margin: 44px 0 14px;
  scroll-margin-top: 20px;
  text-wrap: balance;
}

h3 {
  font-size: 19px;
  margin: 28px 0 10px;
}

p,
li {
  color: var(--mt-prose);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

p {
  margin: 0 0 16px;
}

ul,
ol {
  margin: 0 0 16px;
  padding-left: 22px;
}
li {
  margin-bottom: 8px;
}

/* ── The answer block ──────────────────────────────────────────────────────── */
/* The first paragraph answers the question of the title. An answer engine quotes
   this block, so it stays short and it holds no link. */

.answer {
  font-size: 20px;
  line-height: 1.6;
  color: var(--mt-prose);
  margin: 18px 0 24px;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */

.card {
  background: var(--mt-surface);
  border: var(--mt-border-w) solid var(--mt-border);
  border-radius: var(--mt-r-panel);
  box-shadow: var(--mt-lift);
  padding: 20px 22px;
  margin: 0 0 28px;
}
.card > :last-child {
  margin-bottom: 0;
}
.card__title {
  font-family: var(--mt-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--mt-ink);
  margin: 0 0 12px;
}

.card--amber {
  background: var(--mt-amber-bg);
  border-color: var(--mt-amber);
  box-shadow: 0 4px 0 var(--mt-amber-deep);
}
.card--amber .card__title {
  color: var(--mt-amber-ink);
}

.card--sunk {
  background: var(--mt-sunk);
  box-shadow: none;
}

/* The definition block. One term, one sentence. A model reads it as a fact. */
.define {
  margin: 0;
}
.define dt {
  font-family: var(--mt-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--mt-ink);
  margin-bottom: 6px;
}
.define dd {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--mt-prose);
}

/* ── The table of contents ─────────────────────────────────────────────────── */

.toc ol {
  margin: 0;
  padding-left: 20px;
}
.toc li {
  font-size: 16px;
  margin-bottom: 6px;
}

/* ── Tables ────────────────────────────────────────────────────────────────── */

.tablewrap {
  overflow-x: auto;
  margin: 0 0 28px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  background: var(--mt-surface);
  border: var(--mt-border-w) solid var(--mt-border);
  border-radius: var(--mt-r-row);
}
caption {
  caption-side: top;
  text-align: left;
  font-size: 14px;
  color: var(--mt-muted);
  padding-bottom: 8px;
}
th,
td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--mt-rule);
  color: var(--mt-prose);
  vertical-align: top;
}
th {
  font-family: var(--mt-display);
  font-weight: 600;
  color: var(--mt-ink);
  background: var(--mt-chip);
}
tbody tr:last-child td {
  border-bottom: none;
}

/* ── The source list ───────────────────────────────────────────────────────── */

.sources {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sources li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--mt-muted);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--mt-rule);
}
.sources li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ── The questions ─────────────────────────────────────────────────────────── */

.qa {
  margin: 0 0 20px;
}
.qa:last-child {
  margin-bottom: 0;
}
.qa h3 {
  margin: 0 0 8px;
}
.qa p {
  margin: 0;
}

/* ── The start block ───────────────────────────────────────────────────────── */

.start {
  background: var(--mt-surface);
  border: var(--mt-border-w) solid var(--mt-border);
  border-radius: var(--mt-r-card);
  box-shadow: 0 5px 0 var(--mt-border);
  padding: 24px;
  margin: 40px 0 0;
}
.start h2 {
  margin: 0 0 10px;
  font-size: 24px;
}
.start__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}
.start__list a {
  display: block;
  padding: 12px 14px;
  background: var(--mt-sunk);
  border: var(--mt-border-w) solid var(--mt-border);
  border-radius: var(--mt-r-row);
  color: var(--mt-ink);
  font-weight: 600;
  text-decoration: none;
}
.start__list a:hover {
  background: var(--mt-chip);
}
.start__list span {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: var(--mt-muted);
  margin-top: 3px;
}
.start__cta {
  display: inline-block;
  padding: 13px 22px;
  border: var(--mt-border-w) solid var(--mt-coral-deep);
  border-radius: var(--mt-r-row);
  background: var(--mt-coral);
  box-shadow: 0 4px 0 var(--mt-coral-deep);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.start__cta:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--mt-coral-deep);
}

/* ── The guide index on the hub ────────────────────────────────────────────── */

.index {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.index a {
  display: block;
  background: var(--mt-surface);
  border: var(--mt-border-w) solid var(--mt-border);
  border-radius: var(--mt-r-panel);
  box-shadow: var(--mt-lift);
  padding: 20px 22px;
  text-decoration: none;
}
.index a:hover {
  background: var(--mt-sunk);
}
.index h2 {
  margin: 0 0 6px;
  font-size: 21px;
  color: var(--mt-teal-deep);
}
.index p {
  margin: 0;
  font-size: 16px;
  color: var(--mt-muted);
}

/* ── The page footer ───────────────────────────────────────────────────────── */

.foot {
  border-top: var(--mt-border-w) solid var(--mt-rule);
  background: var(--mt-surface);
  padding: 24px 16px 32px;
}
.foot__inner {
  max-width: 760px;
  margin: 0 auto;
}
.foot__meta {
  font-size: 14px;
  color: var(--mt-muted);
  margin: 0 0 12px;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 14px;
}

@media (min-width: 640px) {
  .wrap {
    padding: 44px 24px 80px;
  }
  .bar {
    padding: 10px 32px;
  }
  .start__list {
    grid-template-columns: repeat(3, 1fr);
  }
}