/* ============================================================
   Competence@Work product site (CA-432, redesigned in CA-439)
   ============================================================

   The one stylesheet of the static site under site/public, served by its own assets-only Worker. There is no build
   step and no framework: the pages are plain HTML, and the Content-Security-Policy in _headers allows styles from this
   origin only, so there is no `style` attribute anywhere and none may be added — it would be blocked, not applied.
   That is also why every figure a close-up draws is a class or an SVG attribute: a bar's height is `.w6`, a bar's
   length is the width of an SVG <rect>, and a heatmap cell's tint is `.mix-21`.

   The page and the application it shows read as one product, so the tokens below are the application's own: the
   Vellum theme's values (competence-theme-vellum.css), and the Claret theme's for the closing band and the footer.

   Fonts: the application's files, byte for byte, under /assets/fonts/ — test/product-site.test.js holds them identical
   to bin/static/fonts/. Nothing loads from another origin: a third-party font request hands every visitor's IP address
   to that origin, which is why the application dropped Google Fonts (CA-181). Each file name carries the font's own
   version, so _headers can serve them `immutable` as honestly as the application does. The rules are
   competence-fonts.css's with /static/fonts/ read as /assets/fonts/; its header lists the families and the licence
   (SIL OFL 1.1, whose text ships beside each family). */

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/onest/onest-2.001-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: "Onest";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/onest/onest-2.001-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Spectral";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/spectral/spectral-2.005-latin-400.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: "Spectral";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/spectral/spectral-2.005-cyrillic-400.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Spectral";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/spectral/spectral-2.005-latin-400-italic.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: "Spectral";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/spectral/spectral-2.005-cyrillic-400-italic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Spectral";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/spectral/spectral-2.005-latin-500.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: "Spectral";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/spectral/spectral-2.005-cyrillic-500.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Spectral";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/spectral/spectral-2.005-latin-500-italic.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: "Spectral";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/assets/fonts/spectral/spectral-2.005-cyrillic-500-italic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/cormorant-garamond/cormorant-garamond-4.001-latin-600-italic.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-2.211-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/assets/fonts/jetbrains-mono/jetbrains-mono-2.211-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;
}


/* ---------- Tokens: the app's Vellum theme, and Claret for the closing band ---------- */
:root {
    color-scheme: light;
    --bg: #F7F3EC;
    --bg-elevated: #FBF8F2;
    --bg-sunken: #EFE8DC;
    --fg: #1E1715;
    --fg-secondary: #5A4F49;
    --fg-tertiary: #6F635C;
    --fg-on-grade: #FFFFFF;
    --border: #D9CDBA;
    --border-soft: #E6DCCD;
    --border-strong: #C4B59E;
    --accent: #6E1F2E;
    --accent-hover: #5A1825;
    --accent-soft: #F1E3E0;
    --accent-ring: rgba(110, 31, 46, 0.35);
    --brass: #A8864B;
    --brass-ink: #7A5F2E;
    --brass-soft: #EFE4CF;
    --success: #2E6B55;
    --warn: #8F5B16;
    --info: #2F4A5E;
    --info-soft: #E1E7EC;
    --cat-e: #6E1F2E;
    --cat-e-soft: #F1E3E0;
    --cat-i: #765B28;
    --cat-i-soft: #F1E8D6;
    --cat-c: #2F4A5E;
    --cat-c-soft: #E1E7EC;
    --grade-u: #A0522D;
    --grade-r: #2F4A5E;
    --grade-s: #2E6B55;
    --grade-n: #7B706A;
    /* The application's --role-* colours (Vellum): the employee's own (self), peers, manager and Supervisor. */
    --role-self: #4B4A93;
    --role-peers: #5E6B1F;
    --role-manager: #1D6670;
    --role-supervisor: #8B2C66;
    --level-n: #8C8078;
    --level-j: #2E6B55;
    --level-r: #2F4A5E;
    --level-s: #6E1F2E;
    --level-x: #5E3A5A;
    --level-t: #2F6466;
    --dark-bg: #140F0E;
    --dark-fg: #F3EAE2;
    --dark-fg-secondary: #BBAEA5;
    --dark-fg-tertiary: #9A8C83;
    --dark-border: #4E3F3B;
    --dark-rule: #2A211F;
    --dark-accent: #D98C9A;
    --dark-accent-hover: #E3A1AD;
    --dark-brass: #C9A96A;
    --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Spectral", Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    --font-brand: "Cormorant Garamond", "Spectral", Georgia, serif;
    --gutter: clamp(20px, 4vw, 48px);
    --section-space: clamp(64px, 8vw, 120px);
}

/* ---------- Page ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* The header stays on screen, so an in-page link stops below it rather than under it. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}
svg {
    display: block;
}
a {
    color: var(--accent);
}
a:hover {
    color: var(--accent-hover);
}
a:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--accent-ring);
    outline-offset: 3px;
    border-radius: 3px;
}
h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ol,
ul {
    margin: 0;
}
h1,
h2,
h3,
h4 {
    font-weight: inherit;
}
ol,
ul {
    padding: 0;
    list-style: none;
}
em {
    font-style: italic;
}
strong {
    font-weight: 600;
    color: var(--fg);
}
abbr[title] {
    text-decoration: none;
}
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
/* A hyphenated name or figure kept on one line: "ti-" ending one line and "engine" starting the next reads as two
   words. */
.nobreak {
    white-space: nowrap;
}

/* The first stop for a keyboard: hidden until it has focus. */
.skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 30;
    padding: 12px 16px;
    background: var(--accent);
    color: var(--bg);
    border-radius: 3px;
    text-decoration: none;
}
.skip:focus {
    top: 16px;
    color: var(--bg);
}

/* ---------- Type ---------- */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.eyebrow-num {
    font-family: var(--font-mono);
    letter-spacing: 0;
    color: var(--brass-ink);
}
.title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(34px, 3.6vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.lede {
    font-size: clamp(17px, 1.3vw, 18px);
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
}
.btn-primary {
    background: var(--accent);
    color: var(--bg);
}
.btn-primary:hover {
    background: var(--accent-hover);
    color: var(--bg);
}
.btn-secondary {
    border-color: var(--border-strong);
    background: var(--bg);
    color: var(--fg);
}
.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- Header ---------- */
/* It stays at the top as the page scrolls, on a translucent vellum so the page shows faintly through it. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    color: var(--fg);
    text-decoration: none;
}
.brand:hover {
    color: var(--fg);
}
.brand-mark {
    flex: none;
}
/* The wordmark as the app draws it: Cormorant Garamond italic, the "@" brass and upright (CA-327). */
.wordmark {
    font-family: var(--font-brand);
    font-style: italic;
    font-weight: 600;
    font-size: 25px;
    line-height: 1;
}
.wordmark .at {
    color: var(--brass);
    font-style: normal;
    padding: 0 1px;
}
.site-nav {
    flex: 1;
    min-width: 0;
}
.site-nav ul {
    display: flex;
    justify-content: center;
    gap: 22px;
}
.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 14px;
    white-space: nowrap;
    color: var(--fg-secondary);
    text-decoration: none;
}
.site-nav a:hover {
    color: var(--accent);
}
.lang {
    display: flex;
    flex: none;
    margin-left: auto;
    border: 1px solid var(--border-strong);
    border-radius: 3px;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 12.5px;
}
.lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 36px;
    color: var(--fg-secondary);
    text-decoration: none;
}
.lang a:hover {
    color: var(--accent);
}
.lang a:focus-visible {
    outline-offset: -3px;
}
.lang [aria-current] {
    background: var(--accent);
    color: var(--bg);
}
.lang [aria-current]:hover {
    color: var(--bg);
}

/* ---------- The guilloché seal ----------
   The brand's engraved rosette, as a mask over a brass fill, faded toward its rim. */
.seal {
    position: absolute;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    background: var(--brass);
    -webkit-mask: url("/assets/img/guilloche.svg") center / contain no-repeat, radial-gradient(closest-side, #000 62%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask: url("/assets/img/guilloche.svg") center / contain no-repeat, radial-gradient(closest-side, #000 62%, transparent 100%);
    mask-composite: intersect;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.hero .seal {
    left: 50%;
    top: 50%;
    width: min(1100px, 110vw);
    transform: translate(-8%, -50%);
    opacity: 0.55;
}
.hero .wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding-top: clamp(72px, 10vw, 150px);
    padding-bottom: clamp(64px, 8vw, 120px);
}
.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.hero-eyebrow::before {
    content: "";
    flex: none;
    width: 24px;
    height: 1px;
    background: var(--brass);
}
.hero-title {
    max-width: 980px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 7.4vw, 108px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.hero-title em {
    color: var(--accent);
}
.hero-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 28px 64px;
    align-items: end;
    max-width: 1100px;
    padding-top: 28px;
    border-top: 1px solid var(--border-strong);
}
.hero-lede {
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
.hero-act {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.hero-note {
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-tertiary);
}
.hero-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    max-width: 1100px;
}
.hero-figures > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 14px;
    border-top: 2px solid var(--brass);
}
.hero-figures dt {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
}
.hero-figures dd {
    font-size: 14px;
    line-height: 1.45;
    color: var(--fg-secondary);
}

/* ---------- Sections ---------- */
.section {
    border-bottom: 1px solid var(--border);
}
.section > .wrap {
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}
.sunken {
    background: var(--bg-sunken);
}
.section-head {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 800px;
}
.stack {
    display: flex;
    flex-direction: column;
    gap: 48px;
}
.stack.wide {
    gap: 56px;
}
/* Heading beside its content: two columns from about 830px of content, one below. */
.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: 40px 72px;
    align-items: start;
}
/* The eyebrow over both columns: what sits beside the heading starts level with its title, not with the eyebrow. */
.split-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* A head whose lede sits beside the heading rather than under it. */
.split-head {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 28px 64px;
    align-items: end;
    max-width: none;
}
.head-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- 01 Why ---------- */
.why-list li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--border);
}
.why-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 28px;
    line-height: 1;
    color: var(--accent);
}
.why-list h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}
.why-list p {
    margin-top: 6px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}

/* ---------- 02 The model ---------- */
.formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin: -24px 0 -28px;
    font-family: var(--font-display);
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.3;
    color: var(--fg);
}
.formula .op {
    color: var(--brass);
}
.formula em {
    color: var(--accent);
}
/* The three dimensions as one card. Each cell and separator is a "Holy Albatross" flex item: its basis is
   (760px − the card's width) × 999, which is hugely negative on a wide card (so every basis clamps to 0 and the cells
   share the row) and hugely positive on a narrow one (so each takes the whole row). The card switches between three
   across and one per row at 760px of width, and never shows two beside one. Design drew it at 660px; at that width a
   cell holds 178px of text and "Специализация" needs 185px, so the Bulgarian title ran into the separator. */
.dims {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated);
}
.dim {
    flex: 1 1 calc((760px - 100%) * 999);
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px 30px;
}
/* A separator is a vertical line in a row and a horizontal one in a stack: it carries both borders, and only the one
   along its length shows. Its × sits on the line either way: 26px down a tall separator, or centred on a flat one. */
.dim-sep {
    position: relative;
    flex: 0 1 calc((760px - 100%) * 999);
    min-width: 0;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
.dim-sep > span {
    position: absolute;
    z-index: 1;
    left: calc(50% - 19px);
    top: min(26px, calc(50% - 19px));
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brass);
    border-radius: 50%;
    background: var(--bg);
    color: var(--brass-ink);
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
}
.dim-title {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1.2;
}
.dim p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
}
.codes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}
.codes li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--bg);
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--fg-secondary);
}
.codes abbr {
    cursor: help;
}
.ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    margin-top: 6px;
}
.ladder li {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ladder-steps {
    display: flex;
    gap: 3px;
}
.ladder-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--lv);
    background: color-mix(in oklab, var(--lv) 12%, var(--bg-elevated));
}
.ladder-name {
    font-size: 11.5px;
    color: var(--fg-tertiary);
}
.n {
    --lv: var(--level-n);
}
.j {
    --lv: var(--level-j);
}
.r {
    --lv: var(--level-r);
}
.s {
    --lv: var(--level-s);
}
.x {
    --lv: var(--level-x);
}
.t {
    --lv: var(--level-t);
}

/* ---------- Close-ups ----------
   Copies of one component of the application each, drawn in HTML with the demo data and hidden from assistive
   technology; the caption under each says what it shows. Two side by side share their rows (subgrid), so the panels
   are the same height and the captions start on one line. */
.closeups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
    column-gap: 24px;
    row-gap: 14px;
}
.closeup {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 14px;
    min-width: 0;
}
/* The scores' two close-ups differ too much in height to share rows: each keeps its own, with its caption under it. */
.closeups.hug {
    align-items: start;
}
.closeups.hug .closeup {
    display: flex;
    flex-direction: column;
    gap: 14px;
    grid-row: auto;
}
.closeup figcaption {
    padding-bottom: 10px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg-tertiary);
}
.panel {
    --panel: var(--bg-elevated);
    min-width: 0;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--panel);
    overflow: hidden;
}
.sunken .panel {
    --panel: var(--bg);
}

/* My Evaluation: the competency, then a column per source. */
.ev-head,
.ev-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 92px);
}
.ev-head {
    border-bottom: 1px solid var(--border);
    background: var(--bg-sunken);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.ev-head > span {
    padding: 9px 16px;
}
.ev-head > span + span {
    padding: 9px 0;
    border-left: 1px solid var(--border);
    text-align: center;
}
.ev-head .self {
    color: var(--role-self);
}
.ev-head .peers {
    color: var(--role-peers);
}
.ev-head .manager {
    color: var(--role-manager);
}
.ev-row + .ev-row {
    border-top: 1px solid var(--border-soft);
}
.ev-comp {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
}
.ev-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}
.ev-id {
    margin-right: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 400;
    color: var(--fg-tertiary);
}
.ev-anchor {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
/* The level pip the form puts before the anchor, in the level's colours. */
.pip {
    display: inline-block;
    margin-right: 7px;
    padding: 0 5px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
}
.pip.r {
    background: var(--info-soft);
    color: var(--info);
}
.ev-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border-soft);
    color: var(--fg-tertiary);
}
.ev-grades {
    display: grid;
    grid-template-columns: repeat(2, 22px);
    gap: 4px;
}
/* A grade chip: outlined until chosen, filled once it is. */
.g {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid color-mix(in oklab, var(--gc) 45%, transparent);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--gc);
}
.g.on {
    border-color: var(--gc);
    background: var(--gc);
    color: var(--fg-on-grade);
}
.g.u,
.chip.u {
    --gc: var(--grade-u);
}
.g.r,
.chip.r {
    --gc: var(--grade-r);
}
.g.s,
.chip.s {
    --gc: var(--grade-s);
}
.g.n,
.chip.n {
    --gc: var(--grade-n);
}

/* Relevancy archetypes: one curve, a bar per stage-level, the person's own ringed. */
.curve {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 14px;
}
.curve-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.arch-chip {
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--fg-secondary);
}
.curve-name {
    font-family: var(--font-display);
    font-size: 19px;
}
.curve-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--fg-tertiary);
}
.curve-plot,
.curve-levels {
    display: grid;
    grid-template-columns: 22px repeat(13, minmax(0, 1fr));
    gap: 5px;
}
/* The plot takes whatever height the panel has beside My Evaluation, so the bars stand on their labels rather than
   above a gap. */
.curve-plot {
    flex: 1 1 auto;
    min-height: 150px;
    align-items: end;
}
.curve-axis {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--fg-tertiary);
}
.bar {
    border-radius: 2px 2px 0 0;
    background: color-mix(in oklab, var(--accent) 76%, var(--bg));
}
.bar.is-level {
    background: var(--accent);
    outline: 1px solid var(--brass);
    outline-offset: 2px;
}
/* A curve's weight runs 1 to 10, and the bar is that many tenths of the plot. */
.w1 { height: 10%; }
.w2 { height: 20%; }
.w3 { height: 30%; }
.w4 { height: 40%; }
.w5 { height: 50%; }
.w6 { height: 60%; }
.w7 { height: 70%; }
.w8 { height: 80%; }
.w9 { height: 90%; }
.w10 { height: 100%; }
.curve-levels span {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    color: var(--lv);
}

/* What a competency is (Boris, 2026-10-06, CA-451): the word, headed as a dictionary heads an entry, with what the
   model means by it, and the four principles every competency is audited against. The row is built as the
   dictionary's under it is, the word where the count stands, so the two read as one entry and its numbers. */
.competency {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 56px;
    padding-top: 36px;
    border-top: 1px solid var(--border);
}
.comp-intro {
    flex: 1 1 240px;
    max-width: 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.comp-word {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1;
}
.comp-def {
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
.comp-principles {
    flex: 2.6 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.comp-lede {
    font-size: 16px;
    font-weight: 600;
}
/* Two by two, each under a rule of its own, and one under another where half the column would be under 260px: a plain
   auto-fit put three in a row and the fourth alone under them. Each ring hangs left of its word, and the text keeps
   the word's edge, as a dictionary indents what follows a headword. */
.principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(260px, calc((100% - 40px) / 2))), 1fr));
    gap: 0 40px;
}
.principles > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 0 22px;
    border-top: 1px solid var(--border);
}
.principles dt {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.2;
}
.principles dd {
    padding-left: 58px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}

/* The dictionary: the count, then the three categories. */
.dictionary {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 56px;
    padding-top: 36px;
    border-top: 1px solid var(--border);
}
.dict-figure {
    flex: 1 1 240px;
    max-width: 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dict-num {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1;
}
.dict-text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg-secondary);
}
.dict-cats {
    flex: 2.6 1 560px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.dict-title {
    font-size: 16px;
    font-weight: 600;
}
.dict-lede {
    margin-top: -16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
.categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: 24px 28px;
}
.category {
    display: flex;
    gap: 14px;
}
.category > div {
    min-width: 0;
}
.cat-tile {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 3px;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
}
.cat-name {
    font-weight: 600;
}
.cat-kind {
    font-size: 12.5px;
    font-weight: 500;
}
.cat-subs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.cat-subs li {
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--fg-secondary);
}
/* A category's colours, wherever its letter or name appears: the tile, the chip, the label, the heatmap's rows. */
.cat-tile.e,
.cat-chip.e {
    color: var(--cat-e);
    background: var(--cat-e-soft);
}
.cat-tile.i,
.cat-chip.i {
    color: var(--cat-i);
    background: var(--cat-i-soft);
}
.cat-tile.c,
.cat-chip.c {
    color: var(--cat-c);
    background: var(--cat-c-soft);
}
.cat-kind.e,
.heat-row.e {
    color: var(--cat-e);
}
.cat-kind.i,
.heat-row.i {
    color: var(--cat-i);
}
.cat-kind.c,
.heat-row.c {
    color: var(--cat-c);
}
.spectrum {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.spectrum-line {
    flex: 1;
    height: 2px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--cat-e), var(--cat-i) 50%, var(--cat-c));
}
/* The ring stands level with the title: beside the four rules, centred, it floated halfway down the block. */
.note {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-sunken);
}
/* The ring and its icon are one SVG, so they cannot drift apart (CA-440). */
.note-icon,
.gdpr-icon,
.ring {
    flex: none;
    display: block;
    color: var(--brass-ink);
}
.note-icon circle,
.gdpr-icon circle,
.ring circle {
    fill: none;
    stroke: var(--brass);
    stroke-width: 1px;
}
.gdpr-icon circle {
    fill: var(--brass-soft);
}
.note-title {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.note p {
    margin-top: 4px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}

/* ---------- 03 Scores ---------- */
/* The grade scale as one bar of four cells. The 1px gaps show the list's own background, which is the hairline, so
   the dividers follow the cells into two rows on a narrower screen and into one column on a phone. */
.grade-scale {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
}
.grade-scale li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: var(--bg);
}
.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 2px;
    background: var(--gc);
    color: var(--fg-on-grade);
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 600;
}
.grade-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.grade-name {
    font-size: 14.5px;
    font-weight: 500;
}
.grade-weight {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--fg-tertiary);
}

/* A bar on the scale the results share. The SVG draws the track, the value and the line at the reference; its
   rectangles are sized in percentages of its width, so the bar's length is a number in the markup beside the value. */
.meter {
    width: 100%;
    overflow: visible;
}
.meter .track {
    fill: var(--bg-sunken);
}
/* Ringed in the panel's colour: a dark bar under it hid its middle, so the line looked shorter wherever a bar
   crossed it than wherever it did not (CA-440). */
.meter .tick {
    fill: var(--fg);
    stroke: var(--panel);
    stroke-width: 2px;
    paint-order: stroke;
}
.meter .e {
    fill: var(--cat-e);
}
.meter .i {
    fill: var(--cat-i);
}
.meter .c {
    fill: var(--cat-c);
}
.meter .self {
    fill: var(--role-self);
}
.meter .peers {
    fill: var(--role-peers);
}
.meter .manager {
    fill: var(--role-manager);
}
.cat-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
}

/* My Scores: the final score card. */
.score-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 26px;
}
.final {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px;
}
.final-figure {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.final-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.final-score {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.final-num {
    font-family: var(--font-display);
    font-size: 72px;
    line-height: 0.92;
}
.final-max {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-tertiary);
}
.band-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    margin-bottom: 6px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
}
.band-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brass);
}
.cat-rows {
    display: grid;
    grid-template-columns: 22px max-content minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}
.cat-row-name {
    font-size: 14px;
    font-weight: 500;
}
.cat-row-value {
    font-family: var(--font-display);
    font-size: 20px;
    text-align: right;
}

/* My Scores: self, peers and manager per category. */
.sources {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
}
.src-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12.5px;
    color: var(--fg-secondary);
}
.src-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.sw {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.sw.self {
    background: var(--role-self);
}
.sw.peers {
    background: var(--role-peers);
}
.sw.manager {
    background: var(--role-manager);
}
.src-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
/* The note keeps one line and wraps under the name where both do not fit, as My Scores' does (CA-523). */
.src-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}
.src-name {
    font-size: 13.5px;
    font-weight: 500;
}
.src-note {
    margin-left: auto;
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--fg-tertiary);
}
.src-note.wide {
    color: var(--warn);
}
.src-bars {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 34px;
    gap: 7px 10px;
    align-items: center;
}
.src-label {
    min-width: 62px;
    font-size: 12px;
    color: var(--fg-tertiary);
}
.src-value {
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-align: right;
}
.points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 40px;
}
.points > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 18px;
    border-top: 1px solid var(--border-strong);
}
.points dt {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.25;
}
.points dd {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}

/* The organization: its heading with its copy under it, then the heatmap and Self and manager in the grid the score
   card and the sources use, so each is as wide as the one above it (CA-440). The note on hatched groups is the
   heatmap's own, so it is in the heatmap's caption. */
.org {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-top: 44px;
    border-top: 1px solid var(--border-strong);
}
/* The paragraph runs the row's full width, as Boris asked on 2026-10-06; CA-442 had held it to 560px. */
.org-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.org-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.4vw, 34px);
    line-height: 1.15;
}
.org-copy p {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
.heat {
    padding: 18px 20px;
}
.heat-grid {
    display: grid;
    grid-template-columns: 34px repeat(4, minmax(0, 1fr));
    gap: 3px;
}
.heat-col {
    padding-bottom: 3px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--fg-secondary);
}
.heat-row {
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
}
/* As Cycle analytics draws it (CA-383): claret below the expected weight and green above, up to half the colour,
   plain within 0.015 of it, and hatched with no figure for fewer than three people. */
.cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    border-radius: 2px;
    background: var(--bg-sunken);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--fg);
}
.cell.below {
    background: color-mix(in oklab, var(--accent) var(--mix), var(--bg));
}
.cell.above {
    background: color-mix(in oklab, var(--success) var(--mix), var(--bg));
}
.cell.fewer,
.hatch {
    background: repeating-linear-gradient(135deg, var(--border-strong) 0 1px, transparent 1px 5px);
    outline: 1px solid var(--border-soft);
    outline-offset: -1px;
}
.mix-7 { --mix: 7%; }
.mix-11 { --mix: 11%; }
.mix-14 { --mix: 14%; }
.mix-18 { --mix: 18%; }
.mix-21 { --mix: 21%; }
.mix-25 { --mix: 25%; }
.mix-29 { --mix: 29%; }
.mix-32 { --mix: 32%; }
.mix-36 { --mix: 36%; }
.mix-43 { --mix: 43%; }
.mix-50 { --mix: 50%; }
.heat-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding-top: 12px;
    font-size: 11.5px;
    color: var(--fg-secondary);
}
.heat-strip {
    flex: 1;
    min-width: 48px;
    max-width: 160px;
    height: 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in oklab, var(--accent) 50%, var(--bg)), var(--bg-sunken), color-mix(in oklab, var(--success) 50%, var(--bg)));
}
.heat-fewer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
.hatch {
    width: 12px;
    height: 9px;
}

/* Self and manager, as Cycle analytics draws it (CA-383): each evaluation by its manager (across) and self (up)
   averages, at 45% in the colour of the source that graded higher, ringed so overlapping dots stay countable. The
   square keeps its proportions, and its strokes their width in pixels however wide it is drawn. */
.align {
    padding: 16px 20px 14px;
}
.align-plot {
    position: relative;
    padding: 18px 0 20px;
}
.align-axis {
    position: absolute;
    font-size: 11px;
    color: var(--fg-tertiary);
}
.align-axis.y {
    top: 0;
    left: 0;
}
.align-axis.x {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.align-chart {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    overflow: visible;
}
.align-chart line,
.align-chart circle {
    vector-effect: non-scaling-stroke;
}
.align-chart .mid {
    stroke: var(--border-soft);
    stroke-width: 1px;
}
.align-chart .diag {
    stroke: var(--border);
    stroke-width: 1.5px;
    stroke-dasharray: 4 4;
}
.align-chart .pt {
    fill-opacity: 0.45;
    stroke-width: 1px;
}
.align-chart .self {
    fill: var(--role-self);
    stroke: var(--role-self);
}
.align-chart .manager {
    fill: var(--role-manager);
    stroke: var(--role-manager);
}
.align-chart .agree {
    fill: var(--fg-tertiary);
    stroke: var(--fg-tertiary);
}
.align-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--fg-secondary);
}
.align-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tone);
}
.dot.self,
.align-gap.self {
    --tone: var(--role-self);
}
.dot.manager,
.align-gap.manager {
    --tone: var(--role-manager);
}
.dot.agree,
.align-gap.agree {
    --tone: var(--fg-tertiary);
}
.align-note {
    margin-top: 8px;
    font-size: 11px;
    color: var(--fg-tertiary);
}
.align-gaps {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}
.align-gaps-title {
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.align-gaps li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
}
.align-gaps li:last-child {
    border-bottom: 0;
}
/* The figure in ink; the dot before it carries the side, in the role's colour. */
.align-gap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
}
.align-gap::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tone);
}

/* ---------- 04 The cycle ---------- */
/* The cycle's figures as one strip, divided the way the grade scale is. */
.cycle-figures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--border);
    overflow: hidden;
}
.cycle-figures > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    background: var(--bg-elevated);
}
.cycle-figures > .lead {
    background: var(--accent-soft);
}
.cycle-figures dt {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 1;
}
.cycle-figures .lead dt {
    font-size: 48px;
    color: var(--accent);
}
.cycle-figures dd {
    font-size: 14px;
    line-height: 1.45;
    color: var(--fg-secondary);
}
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    gap: 32px 20px;
}
.step {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.step-mark {
    display: flex;
    align-items: center;
    gap: 10px;
}
.step-mark::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-strong);
}
.step-num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--brass);
    border-radius: 50%;
    background: var(--bg);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--accent);
}
.step h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}
.step p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
.step .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
/* Who acts at a step, in the application's role colours. */
.tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--rc);
    background: color-mix(in oklab, var(--rc) 12%, var(--bg));
}
.tag.supervisor {
    --rc: var(--role-supervisor);
}
.tag.employee {
    --rc: var(--role-self);
}
.tag.peers {
    --rc: var(--role-peers);
}
.tag.manager {
    --rc: var(--role-manager);
}

/* ---------- 05 Who it's for ---------- */
/* Each card's three parts are rows of the grid the cards share (subgrid), so the lists start on one line. */
.who {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    column-gap: 20px;
    row-gap: 14px;
}
.who-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 14px;
    margin-bottom: 6px;
    padding: 26px 26px 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-elevated);
}
.who-card h3 {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1.2;
}
.who-card > p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
.who-points {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
.who-points li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--fg-secondary);
}
.who-points li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-top: 7px;
    transform: rotate(45deg);
    background: var(--brass);
}

/* ---------- 06 Security ---------- */
.gdpr {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 22px 24px 24px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg);
}
.gdpr-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
}
.gdpr p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
.security-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0 32px;
    align-content: start;
}
.security-points > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 0 22px;
    border-top: 1px solid var(--border-strong);
}
.security-points dt {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}
.security-points dd {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}

/* ---------- 07 Configuration, hosting and license ---------- */
.hosting-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 20px;
}
.hosting-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 28px 28px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg-elevated);
}
.card-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.hosting-card h3 {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.15;
}
.hosting-card p:last-child {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
/* Each fact under its own rule, with a gap between the columns, as the security points are (CA-440). */
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 0 32px;
}
.fact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 0 26px;
    border-top: 1px solid var(--border-strong);
}
.fact h3 {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.25;
}
.fact p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}

/* ---------- 08 Questions ---------- */
.faq-layout {
    display: grid;
    gap: 40px 72px;
    align-items: start;
}
.faq {
    border-top: 1px solid var(--border-strong);
}
.faq details {
    border-bottom: 1px solid var(--border);
}
.faq summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.3;
}
.faq summary::-webkit-details-marker {
    display: none;
}
.faq-q {
    flex: 1;
}
/* The ring and its plus are one SVG, as the security icons' are (CA-440), so neither can sit apart from the other. A
   typed "+" in a CSS ring sat where each rasterizer put the glyph: 0.5px low at 1x, 0.33px high at 1.5x and 0.25px low
   at 2x in Chromium on Linux, and a whole device pixel high on Windows at 1.5x. A drawn plus in the CSS ring still
   came out up to 0.4px off at 1.25x and 1.5x, where the border snapped to the device grid and the drawing did not. */
.faq-icon {
    flex: none;
    color: var(--fg-secondary);
    transition: transform 0.2s, color 0.2s;
}
.faq-icon circle {
    fill: none;
    stroke: var(--border-strong);
    stroke-width: 1px;
    transition: fill 0.2s, stroke 0.2s;
}
.faq-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5px;
}
.faq summary:hover .faq-icon {
    color: var(--accent);
}
.faq summary:hover .faq-icon circle {
    stroke: var(--accent);
}
.faq details[open] .faq-icon {
    transform: rotate(45deg);
    color: var(--bg);
}
.faq details[open] .faq-icon circle {
    fill: var(--accent);
    stroke: var(--accent);
}
.faq details > p {
    padding: 0 44px 22px 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) {
    .faq-icon {
        transition: none;
    }
}

/* ---------- The closing band, in the Claret theme ---------- */
.band {
    position: relative;
    overflow: hidden;
    background: var(--dark-bg);
    color: var(--dark-fg);
}
.band .seal {
    right: -180px;
    top: 50%;
    width: 620px;
    transform: translateY(-50%);
    background: var(--dark-brass);
    opacity: 0.22;
}
.band .wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding-top: clamp(72px, 9vw, 128px);
    padding-bottom: clamp(72px, 9vw, 128px);
}
.band-copy {
    flex: 1 1 460px;
    min-width: 0;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.band .title {
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1.05;
    color: var(--dark-fg);
}
.band .title em {
    color: var(--dark-accent-hover);
}
.band .lede {
    font-size: 18px;
    color: var(--dark-fg-secondary);
}
.band .lede a {
    color: var(--dark-fg);
}
.band a:focus-visible,
.site-footer a:focus-visible {
    outline-color: rgba(217, 140, 154, 0.55);
}
.band-actions {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.band .btn {
    min-height: 50px;
    padding: 0 24px;
}
.btn-light {
    background: var(--dark-accent);
    color: var(--dark-bg);
    font-weight: 600;
}
.btn-light:hover {
    background: var(--dark-accent-hover);
    color: var(--dark-bg);
}
.btn-outline-light {
    border-color: var(--dark-border);
    color: var(--dark-fg);
}
.btn-outline-light:hover {
    border-color: var(--dark-accent);
    color: var(--dark-fg);
}

/* ---------- Footer, on the band's colour ---------- */
.site-footer {
    border-top: 1px solid var(--dark-rule);
    background: var(--dark-bg);
    color: var(--dark-fg-tertiary);
}
.site-footer .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 32px;
    padding-top: 26px;
    padding-bottom: 26px;
    font-size: 13.5px;
}
.site-footer .wordmark {
    font-size: 20px;
    color: var(--dark-fg);
}
.site-footer .wordmark .at {
    color: var(--dark-brass);
}
.site-footer a {
    color: var(--dark-accent-hover);
}

/* ---------- The 404 page ---------- */
.notfound .wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: var(--section-space);
    padding-bottom: var(--section-space);
}
.notfound .hero-actions {
    margin-top: 16px;
}

/* ---------- Narrower screens ---------- */
/* The six section links need the header's whole width beside the wordmark and the language switch. Below 1080px they
   would push it onto a second row, so they go; the sections follow one another on the page, and the switch stays. */
@media (max-width: 1080px) {
    .site-nav {
        display: none;
    }
}
@media (min-width: 1000px) {
    .faq-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}
@media (max-width: 1000px) {
    .points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .grade-scale,
    .cycle-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* On a phone, My Evaluation stacks each competency above its three cells, as the form itself does. */
@media (max-width: 560px) {
    .ev-head,
    .ev-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ev-head > span:first-child,
    .ev-comp {
        grid-column: 1 / -1;
    }
    .ev-head > span:first-child {
        border-bottom: 1px solid var(--border);
    }
    .ev-head > span:nth-child(2),
    .ev-cell:nth-child(2) {
        border-left: 0;
    }
    .ev-cell {
        padding: 10px 0;
        border-top: 1px solid var(--border-soft);
    }
    .dim {
        padding: 26px 22px 24px;
    }
    .score-card,
    .sources {
        padding: 20px 18px;
    }
    .cat-rows {
        grid-template-columns: 22px max-content minmax(0, 1fr) 32px;
        gap: 10px 8px;
    }
    .curve-plot,
    .curve-levels {
        grid-template-columns: 18px repeat(13, minmax(0, 1fr));
        gap: 3px;
    }
    .curve-levels span {
        font-size: 8.5px;
    }
    .curve-count {
        margin-left: 0;
        flex-basis: 100%;
    }
    .faq details > p {
        padding-right: 0;
    }
    .points {
        grid-template-columns: minmax(0, 1fr);
    }
    /* The ring above the text, which then has the note's whole width. */
    .note {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    /* A principle's text under its word and ring, at the column's full width: indented, it had 54px less. */
    .principles dd {
        padding-left: 0;
    }
    .hero-actions .btn {
        flex: 1 1 100%;
    }
}
@media (max-width: 480px) {
    .grade-scale,
    .cycle-figures {
        grid-template-columns: minmax(0, 1fr);
    }
    .wordmark {
        font-size: 23px;
    }
    .site-header .brand-mark {
        width: 32px;
        height: 32px;
    }
    /* The headline's longest words have to fit a phone's line: "Оценявайте" is 5.5em in Spectral. */
    .hero-title {
        font-size: clamp(40px, 11vw, 48px);
    }
    .hero-title:lang(bg) {
        font-size: clamp(34px, 9.6vw, 44px);
    }
}
/* The wordmark and the language switch keep one row down to a 320px screen. */
@media (max-width: 380px) {
    .site-header .wrap {
        gap: 12px;
    }
    .brand {
        gap: 8px;
    }
    .site-header .brand-mark {
        width: 28px;
        height: 28px;
    }
    .wordmark {
        font-size: 20px;
    }
    .lang a {
        min-width: 34px;
    }
}