/*
 * Chalmers Design System — components/bundle.css   (THE stylesheet)
 * ----------------------------------------------------------------------------
 * The single source of truth for every component's look and behaviour.
 * Token VALUES are not here: they live in tokens.json and reach this file as
 * custom properties through the generated tokens.css, which loads before it
 * (:root for light, [data-theme="dark"] for dark). This file only ever writes
 * var(--name). No colour, size or duration is ever written literally.
 *
 * Consumers link, in this order:   tokens.css   then   components/bundle.css
 * and paste a snippet from components/snippets.js. Nothing else is needed.
 *
 * The one geometric constant of the brand, the Avancez diagonal, is 34.4° from
 * vertical (OFFICIAL: 55.6° to the horizontal): run = height × var(--tan-avancez). Every cut in this
 * file is that expression. The default cut DEPTH is one third of the height
 * (var(--cut-frac)). BUTTONS: a cut is either a full diagonal side (edge cuts) or
 * exactly one third (corner cuts) — there is no other depth, by design. The sixth
 * (var(--cut-frac-sixth)) exists only for image thumbnails and
 * small icon buttons — the rule the old README and Card.jsx carried.
 *
 * Sections
 *   1 Base type   2 Buttons   3 Cards + cut cards   4 Image cut   6 Grids
 *   7 Forms       8 Badges, chips, links, alerts   9 Progress + slider
 *   10 Slides     11 Surfaces + utilities   12 Foundation specimens
 *   13 Brand elements: lockup, diagonal split, name tag
 * ----------------------------------------------------------------------------
 */

/* theme-dependent image (e.g. the purple vs the white wordmark) */
.only-dark { display: none !important; }
[data-theme="dark"] .only-dark { display: inline-block !important; }
[data-theme="dark"] .only-light { display: none !important; }

/* ═══ 1 · BASE TYPE ═════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
    color: var(--fg); background: var(--bg); margin: 0;
    font-feature-settings: "ss01", "ss02"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
/* surface-relative roles: each surface (page, card, purple band…) re-declares
   these, so a component reads correctly on whatever it is dropped on */
body { --surface: var(--bg); --on-surface: var(--fg); --on-surface-muted: var(--fg-muted); --on-surface-border: var(--border); --on-surface-link: var(--link); }

.display, h1.display { font-weight: var(--fw-medium); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); margin: 0; }
h1 { font-weight: var(--fw-medium); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: -0.01em; margin: 0 0 var(--sp-4); }
h2 { font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-heading); margin: 0 0 var(--sp-3); }
h3 { font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0 0 var(--sp-3); }
h4 { font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-heading); margin: 0 0 var(--sp-2); }
.lead { font-family: var(--font-serif); font-weight: var(--fw-regular); font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.005em; }
p { margin: 0 0 1em; max-width: 62ch; }
.eyebrow { display: inline-block; font-weight: var(--fw-bold); font-size: var(--fs-small); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.body-serif { font-family: var(--font-serif); font-size: 1.0625rem; line-height: var(--lh-loose); }
.muted { color: var(--on-surface-muted); }
.small { font-size: var(--fs-small); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-alt); color: var(--fg); padding: 0.1em 0.35em; border-radius: var(--radius-sm); }
a { color: var(--on-surface-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
hr { border: 0; border-top: 1px solid var(--on-surface-border); margin: var(--sp-6) 0; }

/* ═══ 2 · BUTTONS — the cut family ════════════════════════════════════════
   Fill-only; the cut is real transparency (clip-path). Two layers, like the
   cut card: the element paints the BORDER colour (or the fill when unbordered)
   and ::before paints the fill inset by --bw, both clipped by the same 34.4°
   polygon (the inner one offset by --bw perpendicular to every edge, so the
   border is uniform on the diagonal too). Focus = a 2px accent border layer,
   so the ring follows the cut as well. */
.btn {
    --cut:  calc(var(--btn-h) * var(--tan-avancez));
    --frac: var(--cut-frac) !important;   /* fixed: ⅓ — see the note above */
    --run:  calc(var(--btn-h) * var(--frac) * var(--tan-avancez));
    --bw: 0px;                       /* border width; roles that need one set it */
    --focus: var(--accent);          /* focus ring colour; promo uses the text colour so it shows on purple */
    --btn-bg: var(--btn-primary-bg);
    --clip: none; --clip-in: none;
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: var(--btn-h); padding-inline: 1rem; box-sizing: border-box;
    font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: 0.875rem; line-height: 1; white-space: nowrap;
    border: 0; border-radius: 0; cursor: pointer; user-select: none; text-decoration: none;
    background: var(--btn-bg); color: var(--btn-primary-fg);
    clip-path: var(--clip);
    transition: filter var(--motion-quick) var(--ease-brand), transform var(--motion-quick) var(--ease-brand);
}
.btn::before { content: ""; position: absolute; inset: var(--bw); z-index: -1; background: var(--btn-bg); clip-path: var(--clip-in); }
.btn:hover, .btn.is-hover { filter: brightness(0.93); }
.btn:active, .btn.is-active { transform: translateY(0.5px); }
.btn:focus-visible, .btn.is-focus { outline: none; --bw: 2px; background: var(--focus); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }
.btn-sm   { --btn-h: 2rem;   padding-inline: 0.75rem; font-size: 0.8125rem; }
.btn-lg   { --btn-h: 2.5rem; padding-inline: 2rem; }
.btn-icon { width: var(--btn-h); padding: 0; }
/* roles — keyed to the card they sit on; hover keeps the label colour on <a> */
.btn-primary   { --btn-bg: var(--btn-primary-bg);   color: var(--btn-primary-fg); }
.btn-promo     { --btn-bg: var(--fill-brand);           color: var(--on-fill-brand); --focus: var(--fg); }
.btn-secondary { --btn-bg: var(--btn-secondary-bg); color: var(--btn-secondary-fg); --bw: 1px; background: currentColor; }
.btn-inverse   { --btn-bg: var(--btn-primary-fg);   color: var(--btn-primary-bg); }
.btn-ghost     { --btn-bg: var(--surface);          color: currentColor; --bw: 1px; background: currentColor; }
.btn-ghost:hover::before { background: color-mix(in srgb, var(--surface) 88%, currentColor); }
.btn-primary:hover { color: var(--btn-primary-fg); } .btn-promo:hover { color: var(--on-fill-brand); } .btn-secondary:hover { color: var(--btn-secondary-fg); } .btn-inverse:hover { color: var(--btn-primary-bg); }
.cut-bordered { --bw: 1px; background: currentColor; }
.btn:focus-visible, .btn.is-focus { background: var(--focus); }   /* after roles: the ring wins */
/* corner depth is fixed at one third (var(--cut-frac)). There is deliberately no
   class for a shallower cut: a cut that is barely visible is not worth adding. */
/* cut shapes: --clip is the silhouette, --clip-in the same offset inward by --bw
   (perpendicular offset on the 34.4° edge: the cut-k-* tokens, derived from
   tan and sec of the angle — the same constants as the cut card) */
.cut-right-edge {
    --clip: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
    --clip-in: polygon(0 0, calc(100% - var(--cut-k-top) * var(--bw)) 0, calc(100% - var(--cut) + var(--cut-k-bottom) * var(--bw)) 100%, 0 100%);
    padding-inline: 1.25rem calc(1.25rem + var(--cut));
}
.cut-left-edge {
    --clip: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
    --clip-in: polygon(calc(var(--cut) - var(--cut-k-bottom) * var(--bw)) 0, 100% 0, 100% 100%, calc(var(--cut-k-top) * var(--bw)) 100%);
    padding-inline: calc(1.25rem + var(--cut)) 1.25rem;
}
.cut-corner-tl {
    --clip: polygon(var(--run) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--frac) * 100%));
    --clip-in: polygon(calc(var(--run) - var(--cut-k-bottom) * var(--bw)) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--frac) * 100% + (2 * var(--frac) - var(--cut-k-corner)) * var(--bw)));
}
.cut-corner-br {
    --clip: polygon(0 0, 100% 0, 100% calc((1 - var(--frac)) * 100%), calc(100% - var(--run)) 100%, 0 100%);
    --clip-in: polygon(0 0, 100% 0, 100% calc((1 - var(--frac)) * 100% - (2 * var(--frac) - var(--cut-k-corner)) * var(--bw)), calc(100% - var(--run) + var(--cut-k-bottom) * var(--bw)) 100%, 0 100%);
}
.btn .ic { width: 1.125rem; height: 1.125rem; display: block; flex: none; }

/* ═══ 3 · CARDS + CUT CARDS ═════════════════════════════════════════════ */
/* Card (spec §5): sharp edges, fill only. White is the default; cream needs
   a hairline on beige pages; purple promo carries white type. */
.card {
    background: var(--surface-card); color: var(--fg);
    padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2);
    --on-surface-muted: var(--fg-muted); --on-surface-link: var(--link); --on-surface-border: var(--border);
}
.card > :last-child { margin-bottom: 0; }
.card-cream  { background: var(--surface-card-alt); }
.card-bordered { box-shadow: inset 0 0 0 1px var(--border); }
.card-purple { background: var(--bg-brand); color: var(--c-white); --on-surface-muted: rgba(255,255,255,0.82); --on-surface-link: var(--c-white); }
.card-dark   { background: var(--c-black);  color: var(--c-white); --on-surface-muted: rgba(255,255,255,0.78); --on-surface-link: var(--c-white); }
.card-title { font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-heading); margin: 0; }
.card-meta  { font-size: var(--fs-small); color: var(--on-surface-muted); }
.card-body  { font-size: var(--fs-body); color: inherit; }
.card-body p { max-width: none; }
.card-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-2); }
.card-link { color: inherit; text-decoration: none; }
.card-link:hover .card-title { text-decoration: underline; text-underline-offset: 4px; }
/* CutCard: the cut is REAL transparency, and the border follows the diagonal.
   Two layers: the element paints the border colour, ::before paints the fill
   inset by --bw, both clipped by the same 34.4° polygon. */
.cut-card {
    --cut: var(--cut-card); --bw: 1px; --bdc: var(--fg); --fill: var(--surface-card); --pad: var(--sp-5);
    position: relative; isolation: isolate;
    background: var(--bdc); color: var(--fg);
    /* the SAFE AREA is baked in: content never enters the cut band */
    padding: var(--pad) var(--pad) calc(var(--pad) + var(--cut)) var(--pad);
    display: flex; flex-direction: column; gap: var(--sp-2);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) * var(--tan-avancez)) 100%, 0 100%);
    --on-surface-muted: var(--fg-muted); --on-surface-link: var(--link); --on-surface-border: var(--border);
}
.cut-card::before {
    content: ""; position: absolute; inset: var(--bw); z-index: -1; background: var(--fill);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - (var(--cut) - var(--cut-k-corner) * var(--bw))), calc(100% - (var(--cut) * var(--tan-avancez) - var(--cut-k-bottom) * var(--bw))) 100%, 0 100%);
}
.cut-card.cut-tl { clip-path: polygon(calc(var(--cut) * var(--tan-avancez)) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut)); padding: calc(var(--pad) + var(--cut)) var(--pad) var(--pad) var(--pad); }
.cut-card.cut-tl::before { clip-path: polygon(calc(var(--cut) * var(--tan-avancez) - var(--cut-k-bottom) * var(--bw)) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--cut) - var(--cut-k-corner) * var(--bw))); }
.cut-card.cut-lg { --cut: 56px; }
.cut-card.cut-sm { --cut: 22px; }
/* safe-area guide (review aid): outline the content box */
.show-safe .cut-card::after { content: ""; position: absolute; inset: var(--pad) var(--pad) calc(var(--pad) + var(--cut)) var(--pad); outline: 1px dashed currentColor; opacity: 0.55; pointer-events: none; }
.show-safe .cut-card.cut-tl::after { inset: calc(var(--pad) + var(--cut)) var(--pad) var(--pad) var(--pad); }
.cut-card.no-border { --bw: 0px; --bdc: var(--fill); background: var(--fill); }
.cut-card.no-border::before { display: none; }
.cut-card.fill-cream  { --fill: var(--surface-card-alt); }
.cut-card.fill-purple { --fill: var(--bg-brand); --bdc: var(--c-white); color: var(--c-white); --on-surface-muted: rgba(255,255,255,0.82); --on-surface-link: var(--c-white); }
.cut-card.fill-dark   { --fill: var(--c-black); --bdc: var(--c-white); color: var(--c-white); --on-surface-muted: rgba(255,255,255,0.78); --on-surface-link: var(--c-white); }
.cut-card.border-purple { --bdc: var(--accent); }
.cut-card.border-3 { --bw: 3px; }

/* ═══ 4 · IMAGE CUT ═════════════════════════════════════════════════════ */
/* The Avancez diagonal slices the bottom-right corner of photography. The cut
   is REAL: the media inside is clipped (nothing painted over it, so no sliver
   at the edge whatever the background). Depth = --cut-frac of the HEIGHT
   (default one third; .img-cut-6 = one sixth for thumbnails); the run is
   height × tan-avancez, so the slope is 34.4° at any size. The wrapper is a size
   container so the clip can read its height (cqh). Give the wrapper its size
   (aspect-ratio, or a height). */
.img-cut, .img-cut-3, .img-cut-6 { position: relative; display: block; overflow: hidden; container-type: size; --frac: var(--cut-frac); }
.img-cut-6 { --frac: var(--cut-frac-sixth); }
.img-cut > *, .img-cut-3 > *, .img-cut-6 > * {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--frac) * 100cqh), calc(100% - var(--frac) * 100cqh * var(--tan-avancez)) 100%, 0 100%);
}
/* placeholder for photography (the brand uses warm documentary photos) */
.ph { background: linear-gradient(160deg, #6B5E52 0%, #3E342D 55%, #241E1A 100%); }
.ph-purple { background: var(--bg-brand); }
.ph-light { background: linear-gradient(160deg, #D7D2C8, #B9B2A5); }

/* ═══ 6 · GRIDS ═════════════════════════════════════════════════════════ */
/* grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }

/* ═══ 7 · FORMS ═════════════════════════════════════════════════════════ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > .label { font-weight: var(--fw-bold); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; }
.field .help { font-size: var(--fs-small); color: var(--on-surface-muted); }
.input, .select, .textarea {
    font-family: inherit; font-size: 0.9375rem; color: var(--fg); background: var(--surface-input);
    padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; width: 100%;
    transition: border-color var(--motion-quick) var(--ease-brand), box-shadow var(--motion-quick) var(--ease-brand);
}
.input::placeholder, .textarea::placeholder { color: var(--fg-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field.is-error .label { color: var(--c-red); }
.field.is-error .input, .field.is-error .select { border-color: var(--c-red); box-shadow: 0 0 0 1px var(--c-red); }
.field.is-error .help { color: var(--c-red); }
/* background-color, not the shorthand: the shorthand would reset the .select chevron and the .input-search magnifier (image, repeat, position, size) */
.input:disabled, .select:disabled { background-color: var(--bg-alt); color: var(--fg-subtle); cursor: not-allowed; }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
[data-theme="dark"] .select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.textarea { min-height: 96px; resize: vertical; }
.input-search { padding-left: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/></svg>"); background-repeat: no-repeat; background-position: 10px center; background-size: 16px; }
[data-theme="dark"] .input-search { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/></svg>"); }
/* check + radio: square (brand has square edges); the check tick is a mask */
.check, .radio { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; cursor: pointer; }
.check input, .radio input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--border-strong); background: var(--surface-input); flex: none; display: grid; place-content: center; cursor: pointer; transition: background var(--motion-quick) var(--ease-brand), border-color var(--motion-quick) var(--ease-brand); }
.radio input { border-radius: 50%; }
.check input:hover, .radio input:hover { border-color: var(--fg); }
.check input:focus-visible, .radio input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check input:checked, .radio input:checked { background: var(--fill-brand); border-color: var(--fill-brand); }
.check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--motion-quick) var(--ease-brand); background: var(--on-fill-brand); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.check input:checked::before { transform: scale(1); }
.radio input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-fill-brand); transform: scale(0); transition: transform var(--motion-quick) var(--ease-brand); }
.radio input:checked::before { transform: scale(1); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; cursor: pointer; }
.switch input { appearance: none; width: 36px; height: 20px; margin: 0; background: var(--border-strong); position: relative; cursor: pointer; transition: background var(--motion-quick) var(--ease-brand); flex: none; }
.switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--c-white); transition: transform var(--motion-quick) var(--ease-brand); }
.switch input:checked { background: var(--fill-brand); }
.switch input:checked::before { transform: translateX(16px); }
.switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-actions { display: flex; gap: var(--sp-3); align-items: center; margin-top: var(--sp-4); }

/* ═══ 8 · BADGES, CHIPS, LINKS, ALERTS ══════════════════════════════════ */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; }
.badge-purple { background: var(--fill-brand); color: var(--on-fill-brand); }   /* the brand fill: Dark Purple in light, Light Purple in dark (D10) */
.badge-lilac  { background: var(--c-purple); color: var(--c-white); }        /* Purple (official secondary) */
.badge-cream  { background: var(--bg-alt);  color: var(--fg); }
.badge-ink    { background: var(--btn-primary-bg);  color: var(--btn-primary-fg); }
.badge-outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.badge .dot { width: 8px; height: 8px; flex: none; background: currentColor; }   /* status: a square accent dot — accents are never a background (official) */
.badge .dot-success { background: var(--success); } .badge .dot-warning { background: var(--warning); } .badge .dot-danger { background: var(--danger); } .badge .dot-info { background: var(--info); }
.badge-cut    { --run: calc(var(--tan-avancez) * (1.4em + 6px));   /* run = full badge height (line 1.4em + 2 × 3px padding) × tan 34.4° */
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--run)) 100%, 0 100%); padding-right: calc(9px + var(--run)); }
/* outline + cut: the inset outline is clipped away on the diagonal, so the diagonal side is drawn as a 1.2px line just inside the cut */
.badge-outline.badge-cut { background: linear-gradient(to bottom right, transparent calc(50% - 1.2px), currentColor calc(50% - 1.2px) 50%, transparent 50%) right top / var(--run) 100% no-repeat; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 0.8125rem; background: var(--surface-input); color: var(--fg); border: 1px solid var(--border-strong); cursor: pointer; font-family: inherit; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-on { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.chip .x { opacity: 0.6; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); text-decoration: none; color: var(--on-surface-link); }
.link-arrow::after { content: ""; width: 0.6em; height: 0.6em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--motion-quick) var(--ease-brand); }
.link-arrow:hover::after { transform: translateX(3px) rotate(45deg); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; }
.link-inline { color: var(--on-surface-link); }
.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { text-decoration: underline; color: var(--accent); }
.alert { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding: var(--sp-4); background: var(--bg-alt); color: var(--fg); border-left: 0; }
.alert b { display: block; margin-bottom: 2px; }
.alert .dot { width: 10px; height: 10px; margin-top: 7px; background: var(--accent); }
.alert-success .dot { background: var(--c-green); }
.alert-warning .dot { background: var(--c-yellow); }
.alert-danger .dot { background: var(--c-red); }
.alert-danger { box-shadow: inset 0 0 0 1px var(--c-red); background: var(--surface-card); }

/* ═══ 9 · PROGRESS + SLIDER (Avancez edge) ═════════════════════════════ */
/* Progress: square track, square fill, and the ONLY diagonal is the leading
   edge of the fill, at 34.4° (top pokes out, like a right-edge button).
   --value is 0–100. The fill is widened by one run and clipped by the track,
   so at 100 the end is square (the track's end), and at 0 nothing shows. */
.progress {
    --h: 12px; --value: 0; --run: calc(var(--h) * var(--tan-avancez));
    --track: var(--track-bg); --fill: var(--fill-brand);
    position: relative; height: var(--h); width: 100%; background: var(--track); overflow: hidden;
}
.progress > .fill {
    position: absolute; inset: 0 auto 0 0; background: var(--fill);
    width: clamp(0px, calc(var(--value) * 1000%), calc(var(--value) * 1% + var(--run)));
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--run)) 100%, 0 100%);
    transition: width var(--motion-fill) var(--ease-brand);
}
.progress.no-motion > .fill { transition: none; }
.progress-sm { --h: 6px; }  .progress-lg { --h: 20px; }
.progress.fill-ink { --fill: var(--fg); }  .progress.fill-white { --fill: var(--c-white); }
.progress.track-line { --track: transparent; box-shadow: inset 0 0 0 1px var(--on-surface-border); }
.progress-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.progress-row > .val { min-width: 3ch; text-align: right; font-weight: var(--fw-bold); }
@media (prefers-reduced-motion: reduce) { .progress > .fill { transition: none; } }

/* the knob width, shared by the slider and its filled track */
:root { --knob-w: 26px; }
/* Slider: a 2px ink line, and a parallelogram handle — both edges at 34.4°
   ("double inclination"). Native <input type=range>, restyled. */
.slider { --h: 22px; --w: var(--knob-w); --run: calc(var(--h) * var(--tan-avancez)); --line: currentColor; --knob: var(--fill-brand);
    appearance: none; width: 100%; height: var(--h); margin: 0; cursor: pointer; display: block; }
.slider:focus-visible { outline: none; }
.slider::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.slider::-moz-range-track { height: 2px; background: transparent; }
/* the line is drawn on the input itself, from the knob's centre at 0 to its centre at 100 — it never sticks out past the knob at either end */
.slider { background: linear-gradient(var(--line), var(--line)) no-repeat center / calc(100% - var(--knob-w)) 2px; }
.slider::-webkit-slider-thumb { appearance: none; width: var(--w); height: var(--h); margin-top: calc((var(--h) - 2px) / -2); background: var(--knob);
    clip-path: polygon(var(--run) 0, 100% 0, calc(100% - var(--run)) 100%, 0 100%); transition: transform var(--motion-quick) var(--ease-brand); }
.slider::-moz-range-thumb { width: var(--w); height: var(--h); border: 0; border-radius: 0; background: var(--knob);
    clip-path: polygon(var(--run) 0, 100% 0, calc(100% - var(--run)) 100%, 0 100%); }
.slider:hover::-webkit-slider-thumb, .slider:focus-visible::-webkit-slider-thumb { transform: scaleY(1.15); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--knob); }
.slider.knob-ink { --knob: var(--fg); } .slider.knob-white { --knob: var(--c-white); }
.slider-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.slider-row > .val { min-width: 3ch; text-align: right; font-weight: var(--fw-bold); }
/* slider with the travelled part filled: a progress bar underneath the input */
.slider-filled { position: relative; height: 22px; display: grid; align-items: center; }
/* the filled track runs between the knob's centre at 0 and at 100, so the fill always ends under the
   knob's centre (a range thumb travels over width − knob width) — no gap, no overshoot at any value */
.slider-filled > .progress { position: absolute; left: calc(var(--knob-w) / 2); right: calc(var(--knob-w) / 2); width: auto; --h: 4px; }
.slider-filled > .slider { position: relative; --line: transparent; }

/* ═══ 10 · SLIDES (16:9 stage, 1280×720 design units, scaled by container) ═
   Rebuilt from the OFFICIAL PowerPoint template (Chalmers v0.9, EN). Every
   position below is the template's, converted to the 1280×720 grid (1 pt =
   1.333 px): margins 54/57 px, eyebrow 14 pt bold, title 32 pt, body 16 pt,
   the wordmark bottom-right (x 1104, y 683, 120 px wide). Content slides are
   Beige ("bright") or Black ("dark"); covers and end screens are Dark Purple.
   Titles are Matter Medium (D3); the template itself is set in Arial. */
.deck { display: flex; flex-direction: column; gap: var(--sp-4); }
.deck-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-black); }
.slide {
    --mx: var(--slide-margin-x); --my: var(--slide-margin-y); --run: calc(720px * var(--tan-avancez));
    --s-fg: var(--c-black); --s-brand: var(--c-purple-dark); --s-muted: #4a4a4a;
    position: absolute; inset: 0; width: 1280px; height: 720px; transform-origin: top left; overflow: hidden;
    background: var(--c-beige); color: var(--s-fg); font-family: var(--font-sans); font-size: 21px; line-height: 1.3; display: none;
    --on-surface-muted: var(--s-muted); --on-surface-link: var(--s-brand);
}
.slide.is-active { display: block; }
.slide.bg-white  { background: var(--c-white); }
.slide.bg-dark   { background: var(--c-black); --s-fg: var(--c-white); --s-brand: var(--c-purple-light); --s-muted: rgba(255,255,255,0.78); --on-surface-link: var(--c-white); }
.slide.bg-purple { background: var(--c-purple-dark); --s-fg: var(--c-white); --s-brand: var(--c-white); --s-muted: rgba(255,255,255,0.85); --on-surface-link: var(--c-white); }
.slide > * { position: absolute; margin: 0; }
/* slide text always takes the slide's own ink (White on Dark Purple and Black, Black on Beige), whatever the page around the deck sets for p, b or li */
.slide :is(p, li, b, strong, em, a, div, ul, ol) { color: inherit; }
.slide .s-body, .slide .s-col, .slide .s-card, .slide .s-sub, .slide .s-meta { color: var(--s-fg); }
.slide h1, .slide h2, .slide h3 { font-weight: var(--fw-medium); color: var(--s-fg); letter-spacing: -0.01em; }
.slide p { max-width: none; margin: 0 0 0.6em; }
/* parts, at the template's positions */
.slide .s-eyebrow { left: var(--mx); top: 60px; width: 373px; font-size: 19px; font-weight: var(--fw-bold); line-height: 1.2; color: var(--s-brand); }
.slide .s-title   { left: var(--mx); top: 107px; width: 798px; font-size: 43px; line-height: 1.05; }
.slide .s-body    { left: var(--mx); top: 227px; width: 1171px; }
.slide .s-mark    { left: 1104px; top: 683px; width: 120px; height: auto; display: block; }
.slide .s-num     { left: var(--mx); top: 680px; font-size: 13px; color: var(--s-muted); font-variant-numeric: tabular-nums; }
.slide .s-logo    { left: var(--mx); top: var(--my); width: 264px; height: auto; display: block; }
.slide .s-media   { overflow: hidden; }
.slide .s-media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide .s-crop    { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-frac-sixth) * 100%), calc(100% - var(--cut-frac-sixth) * var(--h) * var(--tan-avancez)) 100%, 0 100%); }  /* the official cropped corner, ⅙ (as the template's photo frames) */
.slide ul { margin: 0; padding-left: 1.1em; } .slide li { margin-bottom: 0.35em; } .slide li::marker { color: var(--s-brand); }
/* Header + 1 part (the default content slide): title at the top margin */
.slide.l-header .s-title { top: var(--my); width: 1051px; }
.slide.l-header .s-body  { top: 190px; }
/* Header + 2 parts */
.slide.l-two .s-title { top: var(--my); width: 1051px; }
.slide.l-header .s-eyebrow + .s-title, .slide.l-two .s-eyebrow + .s-title { top: 107px; }
.slide.l-two .s-eyebrow ~ .s-col { top: 227px; }
.slide .s-col p + h3 { margin-top: 36px; }
.slide.l-two .s-col { top: 189px; width: 554px; }
.slide.l-two .s-col:nth-of-type(1) { left: 55px; } .slide.l-two .s-col:nth-of-type(2) { left: 671px; }
.slide .s-col h3 { font-size: 24px; font-weight: var(--fw-bold); color: var(--s-brand); line-height: 1.2; margin: 0 0 30px; }
/* Text + photo (right) */
.slide.l-photo .s-title { width: 495px; } .slide.l-photo .s-body { width: 495px; }
.slide.l-photo .s-media { left: 640px; top: var(--my); width: 585px; height: 567px; --h: 567px; }
.slide.l-photo.photo-left .s-media { left: var(--mx); } .slide.l-photo.photo-left .s-title, .slide.l-photo.photo-left .s-body, .slide.l-photo.photo-left .s-eyebrow { left: 730px; }
/* 3 columns */
.slide.l-three .s-card { top: 249px; width: 373px; height: 375px; }
.slide.l-three .s-card:nth-of-type(1) { left: 55px; } .slide.l-three .s-card:nth-of-type(2) { left: 453px; } .slide.l-three .s-card:nth-of-type(3) { left: 852px; }
.slide.l-three .s-card .s-media { position: relative; height: 245px; --h: 245px; margin-bottom: 2px; }
.slide.l-three .s-card h3 { font-size: 27px; font-weight: var(--fw-bold); color: var(--s-brand); margin: 0 0 6px; line-height: 1.6; }
.slide.l-three .s-card p { font-size: 16px; }
/* Big header (section) */
.slide.l-big .s-eyebrow { left: 0; width: 100%; top: 189px; text-align: center; }
.slide.l-big .s-title { left: var(--mx); width: 1171px; top: 244px; font-size: 80px; text-align: center; line-height: 1; }
/* Cover (diagonal): Dark Purple block with the Avancez diagonal over a photo */
.slide.l-cover-diagonal { background: var(--c-black); --s-fg: var(--c-white); }
.slide.l-cover-diagonal .s-media { left: 136px; top: 0; width: 1144px; height: 720px; }
.slide.l-cover-diagonal .s-block { inset: 0 auto 0 0; width: 640px; background: var(--c-purple-dark); clip-path: polygon(0 0, 100% 0, calc(100% - var(--run)) 100%, 0 100%); }
.slide.l-cover-diagonal .s-title { top: 455px; width: 1051px; font-size: 80px; line-height: 1; color: var(--c-white); }
/* Cover (purple) */
.slide.l-cover { background: var(--c-purple-dark); --s-fg: var(--c-white); --s-brand: var(--c-white); }
.slide.l-cover .s-title { left: 495px; top: 189px; width: 730px; font-size: 53px; line-height: 1.05; }
.slide.l-cover .s-sub   { left: 495px; top: 400px; width: 730px; font-size: 24px; }
.slide.l-cover .s-meta  { left: 495px; top: 504px; width: 730px; font-size: 19px; }
/* Purple diagonal + photo: the Purple block (official secondary) with white text */
.slide.l-diagonal { --s-fg: var(--c-white); --s-brand: var(--c-white); --s-muted: rgba(255,255,255,0.85); background: var(--c-black); }
.slide.l-diagonal .s-media { inset: 0; }
.slide.l-diagonal .s-block { inset: 0 auto 0 0; width: 916px; background: var(--c-purple); clip-path: polygon(0 0, 100% 0, calc(100% - var(--run)) 100%, 0 100%); }
.slide.l-diagonal .s-title { width: 585px; } .slide.l-diagonal .s-body { top: 273px; width: 374px; }
/* Text + diagonal photo: the photo's left edge is the diagonal */
.slide.l-diag-photo .s-media { left: 545px; top: 0; width: 735px; height: 720px; clip-path: polygon(var(--run) 0, 100% 0, 100% 100%, 0 100%); }
.slide.l-diag-photo .s-title { font-size: 53px; width: 782px; } .slide.l-diag-photo .s-body { top: 277px; width: 555px; font-size: 24px; }
/* Figures (SED layer: not in the template) */
.slide .s-stats { left: var(--mx); right: var(--mx); top: 260px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.slide .stat b { display: block; font-size: 96px; line-height: 1; font-weight: var(--fw-medium); letter-spacing: -0.03em; color: var(--s-brand); margin-bottom: 12px; }
.slide .stat span { font-size: 19px; color: var(--s-muted); }
/* End (logo): the official end screen — Dark Purple, the white wordmark centred */
.slide.l-end { background: var(--c-purple-dark); }
.slide.l-end .s-end-mark { left: 316px; top: 317px; width: 647px; height: auto; display: block; }
/* End (purple): logo top-left, contact text */
.slide.l-end-text { background: var(--c-purple-dark); --s-fg: var(--c-white); --s-brand: var(--c-white); }
.slide.l-end-text .s-body { top: 179px; width: 555px; font-size: 19px; }
.slide .s-pattern { position: absolute; top: 0; right: 0; left: auto; width: 697px; height: 720px; clip-path: polygon(var(--run) 0, 100% 0, 100% 100%, 0 100%); }  /* the template's pattern block, its left edge on the diagonal */
.slide .diag { position: absolute; inset: 0; pointer-events: none; }
.deck-nav { display: flex; align-items: center; gap: var(--sp-3); }
.deck-nav .pos { font-size: var(--fs-small); color: var(--on-surface-muted); font-variant-numeric: tabular-nums; margin-left: var(--sp-2); }
.deck-nav .dots { display: flex; gap: 6px; margin-left: auto; }
.deck-nav .dots button { width: 10px; height: 10px; padding: 0; border: 0; background: var(--border-strong); cursor: pointer; }
.deck-nav .dots button[aria-current="true"] { background: var(--fill-brand); }

/* ═══ 12 · FOUNDATION SPECIMENS (the generated Colours/Typography/… pages) ═
/* foundation specimens (generated; used by the previews and the app) */
.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.fd-grid-8 { grid-template-columns: repeat(4, 1fr); }
.fd-swatch { display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 0; }
.fd-swatch b { font-weight: 700; } .fd-swatch code { font-size: 10px; background: none; padding: 0; color: var(--on-surface-muted); white-space: normal; } .fd-swatch small { color: var(--on-surface-muted); line-height: 1.35; }
.fd-chip { height: 48px; box-shadow: inset 0 0 0 1px var(--border); display: flex; align-items: flex-end; padding: 6px 8px; font-size: 11px; font-weight: 700; color: transparent; }
.fd-chip-lg { height: 84px; }
.fd-pair { padding: 10px 12px; margin-bottom: 6px; font-size: 14px; }
.fd-type { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--on-surface-border); }
.fd-type-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; } .fd-type-meta code { font-size: 10px; background: none; padding: 0; color: var(--on-surface-muted); white-space: normal; } .fd-type-meta small { color: var(--on-surface-muted); }
.fd-sps { display: flex; flex-direction: column; gap: 8px; }
.fd-kv { display: grid; grid-template-columns: 150px 110px 1fr; gap: 12px; align-items: baseline; font-size: 12px; } .fd-kv code { font-size: 11px; background: none; padding: 0; } .fd-kv small { color: var(--on-surface-muted); }
.fd-sp { display: grid; grid-template-columns: 140px 110px 60px 1fr; gap: 12px; align-items: center; font-size: 12px; } .fd-sp .fd-bar { height: 12px; background: var(--fill-brand); } .fd-sp code { font-size: 11px; background: none; padding: 0; } .fd-sp small { color: var(--on-surface-muted); }
.fd-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; box-shadow: inset 0 0 0 1px var(--border); } .fd-logo code { font-size: 10px; background: none; padding: 0; }
@media (max-width: 700px) { .fd-type { grid-template-columns: 1fr; } .fd-sp { grid-template-columns: 100px 1fr; } }

/* ═══ 11 · SURFACES + UTILITIES ════════════════════════════════════════════════════ */
.wrap { width: min(1180px, 100% - 2 * var(--sp-6)); margin-inline: auto; }
.surface { padding: var(--sp-6); }
.surface-white  { background: var(--bg);  color: var(--fg); --surface: var(--bg); --on-surface-muted: var(--fg-muted); --on-surface-border: var(--border); --on-surface-link: var(--link); }  /* = the page background of the current theme */
.surface-beige  { background: var(--bg-alt);  color: var(--fg); --surface: var(--bg-alt); --on-surface-muted: var(--fg-muted); --on-surface-border: var(--border-strong); --on-surface-link: var(--link); }  /* = the alt background of the current theme */
.surface-purple { background: var(--bg-brand); color: var(--c-white); --surface: var(--bg-brand); --on-surface-muted: rgba(255,255,255,0.85); --on-surface-border: rgba(255,255,255,0.3); --on-surface-link: var(--c-white); }
.surface-dark   { background: var(--c-black);  color: var(--c-white); --surface: var(--c-black); --on-surface-muted: rgba(255,255,255,0.78); --on-surface-border: var(--border-invert); --on-surface-link: var(--c-white); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.row-lg { gap: var(--sp-5); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) {
    .grid-3, .grid-4, .form-row, .slide .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .grid-3, .grid-4, .grid-2, .form-row { grid-template-columns: 1fr; }

}

/* ═══ 13 · BRAND ELEMENTS (from the official portal) ═══════════════════════ */
/* Lockup: the Chalmers wordmark with the Department of Mechanical Engineering
   identifier under it, left-aligned — composed from the two official files.
   The identifier SVG (554×264) reserves its top band for the logo; the
   wordmark is scaled so the identifier's cap height is ⅓ of CHALMERS' cap
   height (official rule). Set the width on .lockup; min 160 px (official). */
.lockup { position: relative; display: block; width: 280px; aspect-ratio: 554 / 264; }
.lockup > img { position: absolute; display: block; height: auto; }
.lockup > .lockup-mark { left: 0; top: 0; width: 95.5%; }
.lockup > .lockup-id { left: 0; top: 0; width: 100%; }
/* Diagonal split: the Avancez diagonal dividing a surface edge to edge
   (official): photo + colour block, two photos or two blocks. The split
   leans forward like the A; --at is where it crosses the middle. */
.diag-split { position: relative; overflow: hidden; container-type: size; --at: 55%; min-height: 240px; }
.diag-split > .ds-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.diag-split > .ds-block {
    position: absolute; inset: 0; background: var(--bg-brand); color: var(--c-white);
    --half: calc(50cqh * var(--tan-avancez));
    clip-path: polygon(0 0, calc(var(--at) + var(--half)) 0, calc(var(--at) - var(--half)) 100%, 0 100%);
    padding: var(--sp-6); --on-surface-muted: rgba(255,255,255,0.85); --on-surface-link: var(--c-white);
}
.diag-split > .ds-block > * { max-width: calc(var(--at) - 2 * var(--sp-6)); }
.diag-split > .ds-block > h2, .diag-split > .ds-block > h3 { margin-top: var(--sp-2); }
.diag-split .ds-purple { background: var(--c-purple); }
.diag-split .ds-black  { background: var(--c-black); }
.diag-split .ds-beige  { background: var(--c-beige); color: var(--c-black); --on-surface-muted: var(--fg-muted); --on-surface-link: var(--c-purple-dark); }
/* Name tag (video, official): a box in a Chalmers colour, the LOWER-LEFT
   corner cropped at the A's angle; name, role, institution, Chalmers. */
.name-tag {
    --h: 108px; --run: calc(var(--h) * var(--cut-frac) * var(--tan-avancez));
    display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--h); box-sizing: border-box;
    padding: 12px 24px 12px calc(20px + var(--run)); background: var(--bg-brand); color: var(--c-white); line-height: 1.25;
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--run) 100%, 0 calc((1 - var(--cut-frac)) * 100%));
}
.name-tag b { font-weight: var(--fw-bold); font-size: 20px; }
.name-tag span { font-size: 15px; opacity: 0.9; }
.name-tag.nt-black { background: var(--c-black); } .name-tag.nt-purple { background: var(--c-purple); }
.name-tag.nt-white { background: var(--c-white); color: var(--c-black); }

/* Pattern (official): the logo pattern (primary) and the Avancez pattern
   (sparingly), supplied files only — never custom. Light Purple on White or
   Dark Purple at 100 % or 50 %; White on photographs at 30 % or 15 %.
   4–12 rows vertically (--rows; the supplied files hold 11), repeat freely
   sideways. The pattern is a layer behind the content: it never competes
   with it and is never read as a logo. */
.pattern { position: relative; isolation: isolate; --rows: 11; --pat-o: 1; }
.pattern::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: var(--pat-img); background-repeat: repeat; background-position: 0 0;
    background-size: auto calc(100% * 11 / var(--rows)); opacity: var(--pat-o); }
.pattern-logo    { --pat-img: url("/_blob/57f208d0a804420f70d2a7d202fd7806"); }
.pattern-logo.pat-white    { --pat-img: url("/_blob/c623fc152a696a1423bd2701800211a6"); }
.pattern-avancez { --pat-img: url("/_blob/86e998057438fe7920fb4d904c8c0223"); }
.pattern-avancez.pat-white { --pat-img: url("/_blob/4869cb337af038efc0fbca390d412b20"); }
.pat-50 { --pat-o: 0.5; } .pat-30 { --pat-o: 0.3; } .pat-15 { --pat-o: 0.15; }
.pat-rows-4 { --rows: 4; } .pat-rows-6 { --rows: 6; } .pat-rows-8 { --rows: 8; } .pat-rows-12 { --rows: 12; }

/* Logo clear space (official): an H-sized margin on every side — H width left/right, H height top/bottom —
   computed from the logo's width (--logo-w, never under --logo-min). Nothing else may enter it. */
.logo-clear { --logo-w: var(--logo-min); display: inline-block; box-sizing: content-box;
    padding: calc(var(--logo-w) * var(--logo-clear-y)) calc(var(--logo-w) * var(--logo-clear-x)); }
.logo-clear > img { display: block; width: var(--logo-w); min-width: var(--logo-min); height: auto; }
.show-safe .logo-clear, .logo-clear.show-clear { outline: 1px dashed var(--accent); outline-offset: 0; }
.show-safe .logo-clear > img, .logo-clear.show-clear > img { outline: 1px dotted var(--border-strong); }

/* Chart (SED layer on the official infographic rules): series colours in the portal's order. */
.chart { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.chart .axis { stroke: var(--border-strong); stroke-width: 1; }
.chart text { fill: var(--fg-muted); font-size: 12px; }
.chart .s1 { fill: var(--chart-cat-1); } .chart .s2 { fill: var(--chart-cat-2); } .chart .s3 { fill: var(--chart-cat-3); }
.chart .s4 { fill: var(--chart-cat-4); } .chart .s5 { fill: var(--chart-cat-5); } .chart .s6 { fill: var(--chart-cat-6); }
.chart .b1 { fill: var(--chart-brand-1); } .chart .b2 { fill: var(--chart-brand-2); } .chart .b3 { fill: var(--chart-brand-3); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-small); color: var(--fg-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; display: inline-block; }