/* Fonts, design tokens, element defaults, utilities, buttons and links. */
@font-face {
    font-family: Team;
    src: url(/text.woff2);
    font-display: swap;
}
@font-face {
    font-family: Display;
    src: url(/display.woff2);
    font-weight: 700;
    font-display: swap;
}
:root {
    --ink: #16352f;
    --muted: #4c5f59;
    --canvas: #eef3f1;
    --surface: #ffffff;
    --line: #dbe5e1;
    --brand: #1d6352;
    --brand-dark: #154a3d;
    --brand-soft: #dff0e9;
    --hero: #16473d;
    --hero-accent: #ffd27a;
    --cream: #fdf4e1;
    --warm: #fde9da;
    --warm-ink: #6d2f0d;
    --warm-solid: #b5440e;
    --focus: #b5440e;
    --danger: #a1260f;
    --radius: 1.25rem;
    --radius-small: .85rem;
    --radius-large: 1.6rem;
    --shadow: 0 1px 2px rgb(22 53 47 / 5%), 0 6px 20px rgb(22 53 47 / 6%);
    --shadow-raised: 0 8px 30px rgb(22 53 47 / 14%);

    /* Sizes that several rules must agree on. */
    --touch-target: 2.75rem;
    --bubble: 2.6rem;
    --content-width: 44rem;
    --sidebar-width: 10rem;
    --sidebar-inset: 1rem;
    /* Used until site.js has measured the real header and navigation height. */
    --header-fallback: 4rem;
    --nav-fallback: 4.5rem;

    /* Status colors: soft background, readable text, solid icon bubble. */
    --bezig-bg: #e3effa;
    --bezig-ink: #14456f;
    --bezig-solid: #2b77bd;
    --toegezegd-bg: #e1f4e6;
    --toegezegd-ink: #1a5a2e;
    --toegezegd-solid: #2a8a4a;
    --afgerond-bg: #fff0cc;
    --afgerond-ink: #5f3d00;
    --afgerond-solid: #f0b429;
    --afgerond-on-solid: #4a3000;
    --ideeen-bg: #eee7fb;
    --ideeen-ink: #47278a;
    --ideeen-solid: #7b4fd0;
    --afgewezen-bg: #eceeed;
    --afgewezen-ink: #464e4b;
    --afgewezen-solid: #7a8480;
}
* {
    box-sizing: border-box;
}
html {
    scroll-padding-top: calc(var(--header-space, var(--header-fallback)) + 1rem);
}
body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 1rem/1.55 Team, system-ui, sans-serif;
}
a {
    color: inherit;
    text-underline-offset: .2em;
}
button, input {
    font: inherit;
}
button, a, summary {
    touch-action: manipulation;
}
h1, h2, h3, h4, p {
    margin: 0;
}
h1 {
    font: 700 1.75rem/1.2 Display, system-ui, sans-serif;
    letter-spacing: -.01em;
}
h2, h3, h4 {
    line-height: 1.3;
}
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}
img, video {
    max-width: 100%;
}
.icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}
.muted {
    color: var(--muted);
}
.small {
    font-size: .8rem;
}
.skip {
    position: fixed;
    left: 1rem;
    top: -6rem;
    z-index: 10;
    background: var(--surface);
    padding: 1rem;
    border-radius: var(--radius-small);
}
.skip:focus {
    top: 1rem;
}

/* Buttons and links */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: var(--touch-target);
    padding: .7rem 1.2rem;
    border: 0;
    background: var(--brand);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
}
.button:hover {
    background: var(--brand-dark);
    color: #fff;
}
.button:active {
    transform: scale(.98);
}
.button-small {
    min-height: var(--touch-target);
    padding: .55rem 1rem;
    font-size: .875rem;
}
.button-quiet {
    background: transparent;
    color: var(--muted);
}
.button-quiet:hover {
    background: var(--line);
    color: var(--ink);
}
.text-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: var(--touch-target);
    color: var(--brand);
    font-size: .9rem;
    font-weight: 700;
}
.text-link:hover {
    color: var(--brand-dark);
}
.text-link .icon {
    width: 1rem;
    height: 1rem;
}
.link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
}

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

/* App frame: header, navigation, content column and footer. */
.team-app {
    padding-top: var(--header-space, calc(var(--header-fallback) + env(safe-area-inset-top)));
    padding-bottom: calc(var(--nav-space, var(--nav-fallback)) + 1.5rem + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
}
.app-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    padding: calc(.7rem + env(safe-area-inset-top)) 1.25rem .7rem;
    background: var(--hero);
    color: #fff;
}
.app-brand,
.app-back {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    font: 700 1.05rem/1.2 Display, system-ui, sans-serif;
}
/* The shoe has dark green parts, so it sits on a light badge to stay visible on the green bar. */
.app-brand img {
    box-sizing: content-box;
    width: 1.6rem;
    height: 1.6rem;
    padding: .35rem;
    border-radius: 50%;
    background: var(--cream);
    object-fit: contain;
}
.app-back {
    min-height: var(--touch-target);
    gap: .35rem;
    font: 700 .95rem/1.2 Team, system-ui, sans-serif;
}
.app-back .icon {
    width: 1.4rem;
    height: 1.4rem;
}
.app-actions {
    position: relative;
    display: flex;
    gap: .5rem;
    margin-left: auto;
}
.icon-button {
    display: grid;
    place-items: center;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 14%);
    color: #fff;
    cursor: pointer;
    transition: background-color 160ms ease;
}
.icon-button:hover {
    background: rgb(255 255 255 / 24%);
}
/* Short confirmation under the share button after copying. */
.app-status {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    padding: .35rem .7rem;
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-raised);
    font-size: .8rem;
    white-space: nowrap;
}
.app-status:empty {
    display: none;
}
.app-brand small {
    display: block;
    font: .75rem/1.4 Team, system-ui, sans-serif;
    color: var(--hero-accent);
}
.app-nav {
    position: fixed;
    bottom: calc(.6rem + env(safe-area-inset-bottom));
    inset-inline: .6rem;
    z-index: 7;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .25rem;
    padding: .4rem;
    background: var(--surface);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-raised);
}
.app-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-height: 3.3rem;
    min-width: 0;
    border-radius: 1.2rem;
    color: var(--muted);
    font-size: .75rem;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}
.app-nav .icon {
    width: 1.4rem;
    height: 1.4rem;
}
.app-nav a[aria-current] {
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-weight: 700;
}
.app-content {
    --content-pad-top: .5rem;
    --content-pad-x: 1rem;
    width: min(100%, var(--content-width));
    margin-inline: auto;
    padding: var(--content-pad-top) var(--content-pad-x) 0;
}
.app-footer {
    width: min(100%, var(--content-width));
    margin: 2rem auto 0;
    padding-inline: 1rem;
    color: var(--muted);
    font-size: .75rem;
}

@media (min-width: 48rem) {
    .team-app {
        padding-left: calc(var(--sidebar-width) + 2 * var(--sidebar-inset));
        padding-bottom: 0;
    }
    /* The bar spans the full width; the sidebar sits below it, lined up with the logo. */
    .app-header {
        padding-inline: var(--sidebar-inset);
    }
    .app-nav {
        top: calc(var(--header-space, var(--header-fallback)) + var(--sidebar-inset));
        bottom: auto;
        left: var(--sidebar-inset);
        right: auto;
        width: var(--sidebar-width);
        grid-template-columns: 1fr;
        padding: .6rem;
    }
    .app-nav a {
        flex-direction: row;
        justify-content: flex-start;
        gap: .65rem;
        padding: .7rem .8rem;
        font-size: .9rem;
    }
    .app-content {
        --content-pad-x: 2rem;
    }
    .app-footer {
        padding-inline: 2rem;
    }
}

/* Reusable parts used on more than one page. */

/* Shared looks: white cards with a soft shadow, and fully rounded pills */
.goal-card,
.steps li,
.event-card,
.agenda-item,
.fact-grid li,
.topic,
.menu-list a,
.file-grid a,
.story,
.gatebox {
    background: var(--surface);
    box-shadow: var(--shadow);
}
.button,
.countdown,
.goal-percentage,
.count,
.tag,
.chip,
progress {
    border-radius: 99rem;
}

/* Page structure */
.stack {
    display: grid;
    gap: 1.75rem;
}
.stack > section {
    display: grid;
    gap: .75rem;
}
.page-head {
    display: grid;
    gap: .4rem;
}
.page-head p {
    color: var(--muted);
}
.section-title {
    font-size: 1.15rem;
}
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.eyebrow {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.empty {
    padding: .9rem 1rem;
    border: 2px dashed var(--line);
    border-radius: var(--radius-small);
    color: var(--muted);
    font-size: .9rem;
}
.rule-note {
    display: flex;
    gap: .6rem;
    padding: .9rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-small);
    color: var(--muted);
    font-size: .875rem;
}
.rule-note .icon {
    color: var(--brand);
    margin-top: .1rem;
}

/* Progress bar and numbered steps */
progress {
    width: 100%;
    height: .75rem;
    appearance: none;
    border: 0;
    background: var(--brand-soft);
    overflow: hidden;
}
progress::-webkit-progress-bar {
    background: var(--brand-soft);
    border-radius: 99rem;
}
progress::-webkit-progress-value {
    background: var(--brand);
    border-radius: 99rem;
}
progress::-moz-progress-bar {
    background: var(--brand);
    border-radius: 99rem;
}
.steps {
    counter-reset: step;
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: var(--bubble) minmax(0, 1fr);
    column-gap: .85rem;
    align-items: center;
    padding: .85rem 1rem;
    border-radius: var(--radius-small);
}
.steps li::before {
    content: counter(step);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: var(--bubble);
    height: var(--bubble);
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font: 700 1.1rem/1 Display, system-ui, sans-serif;
}
.steps span {
    color: var(--muted);
    font-size: .875rem;
}
.fee-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--muted);
    font-size: .875rem;
}
.fee-note .icon {
    color: var(--brand);
}

/* Event cards and date badge */
.event-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    border-radius: var(--radius);
    text-decoration: none;
}
.event-card > span:nth-child(2) {
    display: grid;
    flex: 1;
    min-width: 0;
}
.event-card .eyebrow {
    color: var(--warm-solid);
}
.event-card > .icon {
    color: var(--muted);
}
.date-badge {
    display: grid;
    flex: 0 0 3.4rem;
    justify-items: center;
    padding: .4rem 0 .5rem;
    border-radius: var(--radius-small);
    background: var(--warm);
    color: var(--warm-ink);
    line-height: 1.1;
}
.date-badge span {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.date-badge b {
    font: 700 1.6rem/1.1 Display, system-ui, sans-serif;
}

/* Status board and action groups */
.status-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.status-tile {
    display: grid;
    justify-items: center;
    gap: .15rem;
    padding: .7rem .25rem;
    border-radius: var(--radius-small);
    text-align: center;
    text-decoration: none;
    transition: transform 160ms ease;
}
.status-tile:hover {
    transform: translateY(-2px);
}
.status-tile b {
    font: 700 1.4rem/1.1 Display, system-ui, sans-serif;
}
.status-tile > span:last-child {
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.2;
}
.status-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #fff;
}
.status-icon .icon {
    width: 1.1rem;
    height: 1.1rem;
}
[data-group] {
    --group-bg: var(--bezig-bg);
    --group-ink: var(--bezig-ink);
    --group-solid: var(--bezig-solid);
    --group-on-solid: #fff;
}
[data-group=toegezegd] {
    --group-bg: var(--toegezegd-bg);
    --group-ink: var(--toegezegd-ink);
    --group-solid: var(--toegezegd-solid);
}
[data-group=afgerond] {
    --group-bg: var(--afgerond-bg);
    --group-ink: var(--afgerond-ink);
    --group-solid: var(--afgerond-solid);
    --group-on-solid: var(--afgerond-on-solid);
}
[data-group=ideeen] {
    --group-bg: var(--ideeen-bg);
    --group-ink: var(--ideeen-ink);
    --group-solid: var(--ideeen-solid);
}
[data-group=afgewezen] {
    --group-bg: var(--afgewezen-bg);
    --group-ink: var(--afgewezen-ink);
    --group-solid: var(--afgewezen-solid);
}
.status-tile, .action-card {
    background: var(--group-bg);
    color: var(--group-ink);
}
.status-icon, .action-icon, .group-dot {
    background: var(--group-solid);
    color: var(--group-on-solid);
}
.group-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.15rem;
}
.group-dot {
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
}
.count {
    padding: .05rem .55rem;
    background: var(--surface);
    color: var(--muted);
    font-size: .8rem;
}
.action-list {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.action-card {
    border-radius: var(--radius);
}
.action-card summary {
    display: grid;
    grid-template-columns: var(--bubble) minmax(0, 1fr) 1.25rem;
    gap: .85rem;
    align-items: start;
    padding: 1rem;
    list-style: none;
    cursor: pointer;
}
.action-card summary::-webkit-details-marker {
    display: none;
}
.action-card summary::after {
    content: '+';
    font-size: 1.3rem;
    line-height: 1.2;
    text-align: center;
}
.action-card details[open] summary::after {
    content: '−';
}
.action-icon {
    display: grid;
    place-items: center;
    width: var(--bubble);
    height: var(--bubble);
    border-radius: 50%;
}
.action-heading {
    display: grid;
    gap: .2rem;
    min-width: 0;
}
.action-heading b {
    font-size: 1.02rem;
    color: var(--ink);
}
.action-summary {
    font-size: .875rem;
}
.action-amount {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
}
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.tag {
    padding: .1rem .5rem;
    background: rgb(255 255 255 / 70%);
    font-size: .7rem;
    font-weight: 700;
}
.action-body {
    display: grid;
    gap: .45rem;
    margin: 0 .6rem .6rem;
    padding: 1rem;
    border-radius: var(--radius-small);
    background: var(--surface);
    color: var(--ink);
    font-size: .9rem;
}
.action-body h3 {
    margin-top: .35rem;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--muted);
}
.action-body h3:first-child {
    margin-top: 0;
}
.updates {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0 0 0 1rem;
    list-style: none;
    border-left: 3px solid var(--group-bg);
}
.updates time {
    color: var(--muted);
    font-size: .75rem;
}
.action-help {
    display: grid;
    gap: .45rem;
    justify-items: start;
    margin-top: .4rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}
.idea-card {
    display: flex;
    gap: .85rem;
    padding: 1.1rem;
    border: 2px dashed var(--ideeen-solid);
    border-radius: var(--radius);
    background: var(--surface);
}
.idea-card > .icon {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--ideeen-solid);
}
.idea-card div {
    display: grid;
    gap: .4rem;
    justify-items: start;
}
.idea-card h3 {
    font-size: 1rem;
}
.idea-card p {
    color: var(--muted);
    font-size: .875rem;
}
.idea-card .button {
    background: var(--ideeen-solid);
}
.idea-card .button:hover {
    background: var(--ideeen-ink);
}

/* News */
.news-list {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.news-list a {
    display: grid;
    gap: .1rem;
    padding: .9rem 1rem .9rem 1.1rem;
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--radius-small) var(--radius-small) 0;
    background: var(--surface);
    text-decoration: none;
}
.news-list [data-status=afgewezen] {
    border-left-color: var(--afgewezen-solid);
}
.news-list time {
    color: var(--muted);
    font-size: .75rem;
}
.news-list span {
    color: var(--muted);
    font-size: .875rem;
}

/* Accordions */
.topic {
    --topic-pad: 1.1rem;
    border-radius: var(--radius-small);
}
.topic summary, .topic-questions summary {
    position: relative;
    min-height: var(--touch-target);
    padding: .95rem 2.5rem .95rem var(--topic-pad);
    list-style: none;
    cursor: pointer;
}
.topic > summary {
    font-weight: 700;
}
.topic summary::-webkit-details-marker {
    display: none;
}
.topic summary::after {
    content: '+';
    position: absolute;
    right: var(--topic-pad);
    top: .85rem;
    font-size: 1.2rem;
    color: var(--brand);
}
.topic details[open] > summary::after, .topic[open] > summary::after {
    content: '−';
}
.topic-questions {
    padding: 0 0 .4rem;
}
.topic-questions > p, .topic-questions > ol, .topic-questions > button {
    margin: 0 var(--topic-pad) .8rem;
}
.topic-questions details {
    border-top: 1px solid var(--line);
}
.topic-questions details summary {
    font-size: .925rem;
}
.topic-questions details p {
    padding: 0 var(--topic-pad) 1rem;
    color: var(--muted);
    font-size: .9rem;
}
.topic-questions > p {
    color: var(--muted);
    font-size: .9rem;
}

/* Link lists, file lists and chips */
.menu-list, .file-grid {
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-list a, .file-grid a {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 4rem;
    padding: .9rem 1rem;
    border-radius: var(--radius-small);
    text-decoration: none;
}
.menu-list a > span:nth-child(2), .file-grid a > span:last-child {
    display: grid;
    flex: 1;
    min-width: 0;
}
.menu-list small, .file-grid small {
    color: var(--muted);
    font-size: .825rem;
}
.menu-list a > .icon {
    color: var(--muted);
}
.menu-icon, .file-icon {
    display: grid;
    place-items: center;
    flex: 0 0 var(--bubble);
    height: var(--bubble);
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
}
.file-format {
    color: var(--warm-solid);
    font-size: .75rem;
    font-weight: 700;
}
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    padding: .5rem 1rem;
    background: var(--surface);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}
.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.share span:empty {
    display: none;
}

@media (min-width: 48rem) {
    .status-tile > span:last-child {
        font-size: .8rem;
    }
    .file-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Page-specific parts: start, agenda, info, more and login. */

/* Start: hero */
.hero {
    position: relative;
    overflow: hidden;
    display: grid;
    --hero-pad: 1.4rem;
    gap: .45rem;
    padding: var(--hero-pad) var(--hero-pad) 0;
    /* On phones the hero runs on from the green app bar, edge to edge. */
    margin: calc(-1 * var(--content-pad-top)) calc(-1 * var(--content-pad-x)) 0;
    border-radius: 0 0 var(--radius-large) var(--radius-large);
    background: var(--hero);
    color: #fff;
}
.hero h1 {
    font-size: 1.65rem;
    max-width: 18ch;
}
.hero-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
}
.hero-meta .icon {
    color: var(--hero-accent);
}
.countdown {
    justify-self: start;
    margin-top: .5rem;
    padding: .35rem .85rem;
    background: var(--hero-accent);
    color: var(--hero);
    font-size: .85rem;
    font-weight: 700;
}
.countdown b {
    font-size: 1.05rem;
}
.hero-art {
    display: block;
    /* Bleeds to the hero edges, past its padding. */
    width: calc(100% + 2 * var(--hero-pad));
    max-width: none;
    height: auto;
    margin: .75rem calc(-1 * var(--hero-pad)) 0;
}

/* Start: task, goal, steps */
.task-card {
    display: grid;
    gap: .45rem;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--warm);
    color: var(--warm-ink);
}
.task-card h2 {
    font-size: 1.2rem;
}
.task-card .text-link {
    color: var(--warm-ink);
}
.task-channel {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-small);
    background: var(--surface);
    font-weight: 700;
}
.task-channel .icon {
    color: var(--warm-solid);
}
.goal-card {
    display: grid;
    gap: .4rem;
    padding: 1.25rem;
    border-radius: var(--radius);
}
.goal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.goal-head h2 {
    font-size: 1rem;
    color: var(--muted);
    font-weight: 400;
}
.goal-percentage {
    padding: .15rem .6rem;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: .8rem;
    font-weight: 700;
}
.goal-amount {
    color: var(--muted);
}
.goal-amount b {
    font: 700 1.8rem/1.2 Display, system-ui, sans-serif;
    color: var(--ink);
}

/* Agenda */
.agenda-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.2rem;
    border-radius: var(--radius);
}
.agenda-highlight {
    outline: 2px solid var(--brand);
}
.agenda-highlight .date-badge {
    background: var(--brand);
    color: #fff;
}
.agenda-body {
    display: grid;
    gap: .35rem;
    min-width: 0;
}
.agenda-body .eyebrow {
    color: var(--warm-solid);
}
.agenda-body h3 {
    font-size: 1.1rem;
}
.meta {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    color: var(--muted);
    font-size: .9rem;
}
.meta .icon {
    margin-top: .1rem;
    color: var(--brand);
}
.agenda-note {
    padding-top: .6rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
}
.agenda-body .link-row {
    margin-top: .4rem;
}

/* Info */
.fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fact-grid li {
    display: grid;
    gap: .2rem;
    align-content: start;
    padding: 1rem;
    border-radius: var(--radius-small);
}
.fact-grid .icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: .2rem;
    color: var(--brand);
}
.fact-grid b {
    font-size: .95rem;
    line-height: 1.3;
}
.fact-grid span {
    color: var(--muted);
    font-size: .8rem;
}
.role-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}
.role-card {
    display: grid;
    gap: .3rem;
    align-content: start;
    padding: 1.1rem;
    border-radius: var(--radius);
}
.role-card[data-role=wandelen] {
    background: var(--bezig-bg);
    color: var(--bezig-ink);
}
.role-card[data-role=begeleiden] {
    background: var(--warm);
    color: var(--warm-ink);
}
.role-card .icon {
    width: 1.8rem;
    height: 1.8rem;
}
.role-card h3 {
    font-size: 1.05rem;
}
.role-card p {
    font-size: .875rem;
}
.route {
    display: grid;
    gap: .3rem;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}
.route li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--line);
}
.video-stage {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--hero);
}
.video-stage iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--hero);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}
.play-symbol {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--hero-accent);
    color: var(--hero);
    transition: transform 160ms ease;
}
.video-start:hover .play-symbol {
    transform: scale(1.08);
}

/* More, tips and story */
.account-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.install-panel[hidden] {
    display: none;
}
.install-button:not([hidden]) {
    display: inline-flex;
}
.tips-group {
    gap: .6rem;
}
.story {
    --story-video-width: 13.5rem;
    display: grid;
    gap: 1.5rem;
    align-items: center;
    padding: 1.5rem;
    border-radius: var(--radius);
}
.story video {
    justify-self: center;
    width: min(100%, var(--story-video-width));
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius);
    background: var(--hero);
}
.story div {
    display: grid;
    gap: .75rem;
}
.story p {
    color: var(--muted);
}

/* Login */
.gate {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: 1.25rem;
}
.gatebox {
    display: grid;
    gap: .75rem;
    width: min(100%, 26rem);
    padding: 2rem;
    border-radius: var(--radius-large);
}
.gatebox > img {
    width: 4.5rem;
    height: auto;
}
.gatebox .eyebrow {
    color: var(--warm-solid);
}
.gatebox p {
    color: var(--muted);
}
.gatebox form {
    display: grid;
    gap: .5rem;
    margin-top: .5rem;
}
.gatebox label {
    font-weight: 700;
}
.gatebox input[type=password] {
    width: 100%;
    min-height: 3rem;
    padding: .7rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--canvas);
}
.gatebox .check {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: var(--touch-target);
    font-weight: 400;
}
.form-error {
    color: var(--danger);
    font-weight: 700;
}

@media (min-width: 48rem) {
    /* On wider screens the content column is narrower than the bar, so the hero is a card again. */
    .hero {
        --hero-pad: 2rem;
        margin: 0;
        border-radius: var(--radius-large);
    }
    .hero h1 {
        font-size: 2.2rem;
    }
    .fact-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .story {
        grid-template-columns: var(--story-video-width) 1fr;
    }
}