/* ---------------------------------------------------------------------------
   Biroko stylesheet (redesign, October 2026)

   Plain CSS served as a static file, no build step (TECHNICAL_PLAN.md §18.3).
   Sections, in order: 1. font  2. tokens  3. base  4. layout  5. components
   6. pages  7. motion  8. print.

   Visual rules (docs/design handoff):
   - the ground is white; soft grey bands only on top of the event page and
     the questionnaire;
   - cobalt blue means action: buttons, links, the next step, questionnaire
     progress, the logo;
   - green means only verified or done, never decoration or a button;
   - amber means not verified yet: draft content never looks verified;
   - no decorative gradients, no heavy shadows, no emoji; line icons only.
   Mobile first: base rules are the phone; 720px and 1024px are the
   breakpoints. Touch targets are at least 44px; focus is always visible.
   --------------------------------------------------------------------------- */

/* 1. Font: Geist, self-hosted (the CSP allows only this site's files) ------ */

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/geist-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/geist-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;
}

/* 2. Tokens ---------------------------------------------------------------- */

:root {
    --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

    --bg: #ffffff;
    --bg-soft: #f9fafb;
    --bg-muted: #f3f4f6;
    --bg-subtle: #f7f8fa;
    --bg-done: #fafbfb;
    --bg-hover: #f5f6f8;

    /* Brand (the logo): navy #08265C for text, blue #0879F9 for action.
       --primary is the logo blue one step deeper, so white on it and it on
       white read at 5:1 (WCAG AA); the exact logo blue is the hover. */
    --ink: #08265c;
    --text-2: #2a3752;
    --text-3: #45516b;
    --text-4: #5a6680;
    --text-off: #8a94a8;

    --line: #e4e8ef;
    --line-soft: #edf0f5;
    --line-strong: #d3d9e3;
    --line-mark: #c3cad7;

    --primary: #066bdf;
    --primary-hover: #0879f9;
    --primary-50: #eaf3fe;
    --primary-100: #d2e5fd;
    --primary-tint: #f3f8ff;
    --primary-ink: #08265c;

    --ok: #0b6e4f;
    --ok-bg: #e7f3ee;

    --wip: #7a4e00;
    --wip-bg: #fff4db;
    --wip-soft: #fff8e8;
    --wip-line: #f3e1b5;

    --old: #59616d;
    --old-bg: #f1f2f4;

    --error: #b42318;

    --ev-rose: #b3264f;   --ev-rose-bg: #fdecef;   --ev-rose-photo: #f7d9e0;
    --ev-green: #0b6e4f;  --ev-green-bg: #e7f3ee;  --ev-green-photo: #d3eadf;
    --ev-amber: #9a5600;  --ev-amber-bg: #fff1d9;  --ev-amber-photo: #fbe5bf;
    --ev-coral: #b23c17;  --ev-coral-bg: #fdebe4;  --ev-coral-photo: #f9d8cb;

    --radius-sm: 10px;
    --radius: 12px;
    --radius-md: 14px;
    --radius-card: 18px;
    --radius-lg: 24px;
    --shadow-card: 0 18px 40px -30px rgba(8, 38, 92, 0.45);
    --shadow-float: 0 20px 40px -24px rgba(8, 38, 92, 0.35);
    --focus: 0 0 0 3px #ffffff, 0 0 0 5px var(--primary);

    --container: 1200px;
    --gutter: 16px;
    --tap: 44px;
}

@media (min-width: 720px) {
    :root {
        --gutter: 32px;
    }
}

/* 3. Base ------------------------------------------------------------------ */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
    margin: 0;
}

h1,
h2,
h3 {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1 {
    font-size: 30px;
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
    letter-spacing: -0.015em;
}

@media (min-width: 720px) {
    h1 {
        font-size: 40px;
        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 19px;
    }
}

a {
    color: var(--primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--primary-hover);
}

img,
svg {
    display: block;
    max-width: 100%;
}

svg.icon {
    flex: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
    border-radius: 6px;
}

/* Text-only for screen readers. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.muted {
    color: var(--text-4);
    font-size: 14px;
}

/* 4. Layout ---------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.container-narrow {
    max-width: calc(760px + 2 * var(--gutter));
    padding-top: 32px;
}

.container-quiz {
    max-width: calc(720px + 2 * var(--gutter));
}

.site-main {
    flex: 1 0 auto;
}

.beta-banner {
    padding: 9px 16px;
    background: var(--ink);
    color: #d6e0f2;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.beta-banner strong {
    color: #ffffff;
    font-weight: 600;
}

.site-header {
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--tap);
    color: var(--ink);
    font-size: 21px;
    font-weight: 650;
    letter-spacing: -0.04em;
    text-decoration: none;
}

.logo:hover {
    color: var(--ink);
}

.logo img {
    display: block;
    width: 108px;
    height: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 15px;
    font-weight: 550;
    text-decoration: none;
}

.nav-link:hover {
    background: var(--bg-hover);
    color: var(--ink);
}

.nav-form {
    margin: 0;
}

/* Main navigation: inline from 960px, a <details> menu below that. */

.site-header {
    position: relative;
    z-index: 20;
}

.main-nav {
    display: none;
}

.menu {
    position: static;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.menu-toggle::-webkit-details-marker {
    display: none;
}

.menu-toggle:hover {
    background: var(--bg-hover);
}

.menu-icon-close,
.menu[open] .menu-icon-open {
    display: none;
}

.menu[open] .menu-icon-close {
    display: block;
}

.menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 8px var(--gutter) 20px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow-float);
}

.menu-links {
    display: grid;
}

.menu-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: 17px;
    font-weight: 550;
    text-decoration: none;
}

.menu-links a .icon {
    color: var(--text-off);
}

.menu-links a:hover {
    color: var(--primary);
}

.menu-account {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.menu-account form {
    margin: 0;
}

.site-header-inner > .site-nav {
    margin-left: auto;
}

/* "Registracija" sits in the header from 600px; below that, in the menu. */
.nav-register {
    display: none;
}

.menu-register {
    margin-top: 16px;
}

@media (min-width: 600px) {
    .nav-register {
        display: inline-flex;
    }

    .menu-register {
        display: none;
    }
}

/* On a phone a signed-in account's links live in the menu. */
.site-nav.is-signed-in {
    display: none;
}

@media (min-width: 960px) {
    .main-nav {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: 24px;
    }

    .site-nav.is-signed-in {
        display: flex;
    }

    .menu {
        display: none;
    }
}

@media (min-width: 720px) {
    .site-header-inner {
        min-height: 72px;
    }

    .logo img {
        width: 120px;
    }
}

.site-footer {
    margin-top: 80px;
    padding: 36px 0 48px;
    border-top: 1px solid var(--line-soft);
    color: var(--text-4);
    font-size: 14px;
    line-height: 1.6;
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px 40px;
}

.footer-note {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.footer-logo {
    width: 140px;
    height: auto;
}

/* The logo's tagline, as text so it stays sharp and readable. */
.footer-tagline {
    color: var(--ink);
    font-size: 14px;
    font-weight: 550;
    letter-spacing: 0.01em;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 56px;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-title {
    color: var(--ink);
    font-weight: 600;
}

.footer-nav a {
    color: var(--text-3);
    text-decoration: none;
}

.footer-nav a:hover {
    color: var(--primary);
    text-decoration: underline;
}

@media (min-width: 720px) {
    .site-footer {
        margin-top: 112px;
    }
}

/* Two columns from 1024px: the content and a sticky side column. */
.with-aside {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (min-width: 1024px) {
    .with-aside {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
        gap: 72px;
        align-items: start;
    }

    .side-column {
        position: sticky;
        top: 24px;
    }
}

/* 5. Components ------------------------------------------------------------ */

/* Text styles */

.display {
    font-size: 40px;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

@media (min-width: 720px) {
    .display {
        font-size: 56px;
    }
}

@media (min-width: 1024px) {
    .display {
        font-size: 62px;
        line-height: 1.02;
    }
}

.lead {
    color: var(--text-3);
    font-size: 17px;
    line-height: 1.6;
}

@media (min-width: 720px) {
    .lead {
        font-size: 19px;
    }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--text-4);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.eyebrow-primary {
    color: var(--primary);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 20px;
}

.section-head-center {
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
    text-align: center;
}

.section-aside {
    color: var(--text-4);
    font-size: 14px;
}

.section-lead {
    margin-bottom: 18px;
    color: var(--text-4);
    font-size: 15px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink);
    font-size: 16px;
    font-weight: 550;
}

.text-link:hover {
    color: var(--primary);
}

.back-link,
p.back-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap);
    color: var(--text-3);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
}

.back-link:hover,
p.back-link a:hover {
    color: var(--ink);
}

.empty-state {
    padding: 24px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    color: var(--text-3);
    background: var(--bg-done);
}

/* Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    font-size: 16px;
    font-weight: 550;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:focus-visible {
    border-radius: var(--radius);
}

.btn-primary {
    background: var(--ink);
    color: #ffffff;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* A gentle hover: a touch lighter navy, lifted by a soft shadow. */
.btn-primary:hover {
    background: #0e3577;
    box-shadow: 0 8px 20px -10px rgba(8, 38, 92, 0.6);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: none;
    box-shadow: none;
}

.btn-secondary {
    border-color: var(--line-strong);
    background: #ffffff;
    color: var(--ink);
}

.btn-secondary:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.btn-ghost {
    padding: 0 14px;
    color: var(--text-2);
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--ink);
}

.btn-lg {
    min-height: 52px;
    padding: 0 26px;
    font-size: 17px;
}

@media (min-width: 720px) {
    .btn-lg {
        min-height: 56px;
        padding: 0 28px;
        border-radius: var(--radius-md);
    }
}

.btn-sm {
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    font-size: 15px;
}

.btn-block {
    width: 100%;
}

.btn[disabled] {
    background: var(--line-soft);
    color: var(--text-off);
    cursor: not-allowed;
}

/* Round arrow buttons on step cards: › opens, ⌄ unfolds. */
.chev {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid #e1e4e8;
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
}

.chev:hover {
    border-color: var(--primary);
    background: #f5f8fe;
    color: var(--primary);
}

.chev-soft {
    border-color: transparent;
    background: var(--bg-muted);
}

/* Badges: trust state, always an icon and words */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.35;
}

.badge-verified {
    background: var(--ok-bg);
    color: var(--ok);
}

.badge-draft {
    background: var(--wip-bg);
    color: var(--wip);
}

.badge-archived {
    background: var(--old-bg);
    color: var(--old);
}

.badge-next {
    background: var(--primary);
    color: #ffffff;
}

.badge .icon {
    stroke-width: 2;
}

/* One quiet trust line under a step on the checklist. */
.trust-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    color: var(--text-4);
    font-size: 13.5px;
    line-height: 1.45;
}

.trust-line .icon {
    margin-top: 2px;
}

.trust-line-verified {
    color: var(--ok);
}

.trust-line-draft .icon {
    color: var(--wip);
}

/* Chips */

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--old-bg);
    color: var(--text-3);
    font-size: 12.5px;
    font-weight: 550;
}

.chip-outline {
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #e1e4e8;
    background: #ffffff;
    color: var(--text-2);
    font-size: 13.5px;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Benefit lists: a check, then the words */

.benefit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-2);
    font-size: 14.5px;
}

.benefit-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefit-list .icon {
    color: var(--ok);
    stroke-width: 2;
}

.benefit-list-row {
    flex-flow: row wrap;
    gap: 10px 22px;
}

.benefit-list-row li {
    gap: 8px;
}

/* The hero's three points stay on one line wherever they fit. */
@media (min-width: 720px) {
    .home-hero .benefit-list-row {
        flex-wrap: nowrap;
        gap: 18px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* Event icons: a line drawing on a soft tile in the event's colour */

.event-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--ink);
}

/* Tiles are neutral: grey base, graphite drawing, green accent. The tone
   classes only pick the photo placeholder colour (.event-card:has(...)). */
.event-icon[class*="tone-"] { background: var(--bg-muted); color: var(--ink); }

/* Two-tone icons (components/duo-icon.php, generated by bin/icons/duo.py):
   body = text colour (14 % tint + outline), one accent in --duo-accent. */
.duo-icon {
    color: var(--text-2);
}

.duo-icon .d-tint {
    fill: currentColor;
    stroke: none;
    opacity: 0.14;
}

.duo-icon .d-line {
    fill: none;
    stroke: currentColor;
}

.duo-icon .d-acc {
    fill: var(--duo-accent, var(--primary));
    stroke: none;
}

.duo-icon .d-acc-line {
    fill: none;
    stroke: var(--duo-accent, var(--primary));
}

.event-icon {
    box-shadow: inset 0 0 0 1px rgba(8, 38, 92, 0.05);
}

/* Step kind: a filled square must, a ring may, a dashed ring good to know. */

.step-kind {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.step-kind::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
}

.step-kind[data-kind="entitlement"] {
    color: var(--ok);
}

.step-kind[data-kind="entitlement"]::before {
    width: 9px;
    height: 9px;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: none;
}

.step-kind[data-kind="information"] {
    color: var(--text-4);
}

.step-kind[data-kind="information"]::before {
    width: 9px;
    height: 9px;
    border: 1.5px dashed currentColor;
    border-radius: 50%;
    background: none;
}

/* Notices: info (grey), warning (amber), needs a check (dashed) */

.notice,
.step-notice,
.trust-banner,
.page-notice {
    margin: 0 0 20px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: #2b313a;
    font-size: 15px;
    line-height: 1.55;
}

.notice p + p,
.step-notice p + p {
    margin-top: 8px;
}

.with-icon,
.trust-banner {
    display: flex;
    gap: 14px;
}

.with-icon > .icon,
.trust-banner > .icon {
    margin-top: 2px;
}

.notice b,
.trust-banner b {
    font-weight: 600;
}

.notice-warn,
.trust-banner-draft {
    border: 1px solid var(--wip-line);
    background: var(--wip-soft);
    color: #5c3b00;
}

.notice-check {
    border: 1px dashed #b9bfc8;
    background: #ffffff;
}

.trust-banner-verified {
    background: var(--ok-bg);
    color: #0a4a36;
}

.notice h2 {
    font-size: 17px;
    letter-spacing: -0.01em;
}

.notice h2 + .section-lead {
    margin: 4px 0 0;
    color: inherit;
}

.step-notice-title {
    font-weight: 600;
}

.page-notice {
    border: 1px solid var(--wip-line);
    background: var(--wip-soft);
    color: #5c3b00;
}

/* Forms */

.form-field {
    margin: 0 0 22px;
}

.field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 550;
}

.field-optional,
.optional-tag {
    color: var(--text-4);
    font-weight: 400;
}

.field-hint {
    margin: -2px 0 10px;
    color: var(--text-4);
    font-size: 14px;
    line-height: 1.5;
}

.text-input {
    display: block;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.4;
}

textarea.text-input {
    min-height: 120px;
    resize: vertical;
}

.text-input:hover {
    border-color: var(--text-off);
}

.text-input:focus-visible {
    border-color: var(--primary);
    border-radius: var(--radius);
}

.text-input[aria-invalid="true"] {
    border-color: var(--error);
    box-shadow: inset 0 0 0 1px var(--error);
}

.text-input[aria-invalid="true"]:focus-visible {
    box-shadow: inset 0 0 0 1px var(--error), var(--focus);
}

.number-input {
    max-width: 240px;
}

.field-error {
    margin: 0 0 12px;
    color: var(--error);
    font-size: 14px;
    font-weight: 500;
}

.field-error p {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.field-error .icon {
    margin-top: 3px;
}

.form-alert {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid #f1c5c0;
    border-radius: var(--radius);
    background: #fdf1f0;
    color: var(--error);
    font-size: 15px;
    font-weight: 500;
}

.form-actions {
    margin-top: 28px;
}

/* Answer cards: radios and checkboxes as large tappable cards. */

.choices {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.choice {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 14px 18px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: #ffffff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.choice:hover {
    border-color: var(--text-off);
}

.choice input {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid var(--text-off);
    background: #ffffff;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.choice input[type="radio"] {
    border-radius: 50%;
}

.choice input[type="checkbox"] {
    border-radius: 6px;
}

.choice input[type="radio"]:checked {
    border: 7px solid var(--primary);
}

.choice input[type="checkbox"]:checked {
    border-color: var(--primary);
    background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.choice input:focus-visible {
    box-shadow: var(--focus);
}

.choice:has(input:checked) {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    background: var(--primary-tint);
}

.choice-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.choice-help {
    margin-top: 3px;
    color: var(--text-4);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

@media (min-width: 720px) {
    .choice {
        min-height: 68px;
        padding: 16px 20px;
        font-size: 17px;
    }

    .choices-pair {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Progress bars */

.progress-bar {
    display: block;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: 99px;
    background: #e3e6ea;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

.progress-bar::-webkit-progress-bar {
    border-radius: 99px;
    background: #e3e6ea;
}

.progress-bar::-webkit-progress-value {
    border-radius: 99px;
    background: var(--ok);
}

.progress-bar::-moz-progress-bar {
    border-radius: 99px;
    background: var(--ok);
}

.checklist-progress .progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.checklist-progress .progress-step {
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.progress-percent {
    color: var(--text-4);
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

.checklist-progress.is-complete .progress-step {
    color: var(--ok);
}

/* Status control: three real submit buttons as one segmented control. */

.step-status {
    margin: 0;
}

.step-status-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.step-status-legend {
    padding: 0;
}

.status-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border-radius: var(--radius);
    background: var(--bg-muted);
}

.status-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 6px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-3);
    font-size: 14px;
    font-weight: 550;
    line-height: 1.2;
    cursor: pointer;
}

.status-option:hover {
    color: var(--ink);
}

.status-option:focus-visible {
    border-radius: 9px;
}

.status-option[aria-pressed="true"] {
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(8, 38, 92, 0.08), 0 0 0 1px var(--line);
}

.status-option-completed[aria-pressed="true"] {
    background: var(--ok);
    color: #ffffff;
    box-shadow: none;
}

.status-option .icon {
    stroke-width: 2;
}

.step-status.is-compact .status-option {
    min-height: 36px;
    font-size: 13px;
}

[aria-busy="true"] .status-option {
    cursor: progress;
}

/* Prose: content fields rendered by format_text() */

.prose {
    color: var(--text-2);
    font-size: 16.5px;
    line-height: 1.7;
}

.prose p + p,
.prose p + ul,
.prose ul + p {
    margin-top: 12px;
}

.prose ul {
    padding-left: 22px;
}

.prose li + li {
    margin-top: 6px;
}

.prose h2 {
    margin: 36px 0 12px;
    font-size: 22px;
}

.prose-lead {
    color: var(--text-3);
    font-size: 17px;
}

/* Side cards */

.side-card {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #ffffff;
}

.side-help {
    margin-top: 14px;
    color: var(--text-4);
    font-size: 14px;
    line-height: 1.5;
}

.side-note {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text-3);
    font-size: 14px;
    line-height: 1.5;
}

/* 6. Pages ----------------------------------------------------------------- */

/* Shared grey band on top of the event page and the questionnaire. */
.band-soft {
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg-soft);
}

/* Homepage ----------------------------------------------------------------- */

.home-hero {
    position: relative;
    overflow: hidden;
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    padding-bottom: 48px;
}

/* On a phone the photo sits above the title. */
.home-hero-inner::before {
    content: "";
    display: block;
    height: 230px;
    margin: 0 calc(-1 * var(--gutter)) 28px;
    background: var(--primary-50) url("../images/hero-domov.jpg") 62% 28% / cover no-repeat;
}

.home-hero .lead {
    max-width: 540px;
    margin-top: 18px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 28px;
}

.hero-actions .btn-lg {
    flex: 1 1 100%;
}

.home-hero .benefit-list {
    margin-top: 24px;
}

.hero-demo {
    display: none;
}

@media (min-width: 720px) {
    .hero-actions .btn-lg {
        flex: none;
    }
}

@media (min-width: 900px) {
    .home-hero {
        border-bottom: 1px solid var(--primary-100);
        background: var(--primary-50) url("../images/hero-domov.jpg") right 22% / auto 125% no-repeat;
    }

    /* Fade the photo into white on the left, so the text stays readable. */
    .home-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.96) 30%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 62%);
    }

    .home-hero-inner::before {
        display: none;
    }

    .home-hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 72px;
        align-items: center;
        min-height: 600px;
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .home-hero .lead {
        margin-top: 24px;
    }

    .hero-actions {
        margin-top: 32px;
    }

    .home-hero .benefit-list {
        margin-top: 28px;
    }

    .hero-demo {
        display: block;
        position: relative;
        justify-self: end;
        width: 100%;
        max-width: 380px;
        padding-bottom: 44px;
    }
}

.demo-card {
    padding: 26px 26px 12px;
    border: 1px solid var(--primary-100);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 24px 48px -28px rgba(8, 38, 92, 0.3);
}

.demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.demo-head .eyebrow {
    margin: 0;
}

.demo-count {
    margin: 14px 0 12px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.demo-num {
    display: inline-grid;
    font-variant-numeric: tabular-nums;
}

.demo-num span {
    grid-area: 1 / 1;
}

.demo-bar {
    height: 6px;
    border-radius: 99px;
    background: var(--line-soft);
    overflow: hidden;
}

.demo-bar span {
    display: block;
    width: 33%;
    height: 100%;
    border-radius: 99px;
    background: var(--ok);
}

.demo-steps {
    margin-top: 18px;
}

.demo-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 15px;
}

.demo-done {
    color: var(--text-4);
    text-decoration: line-through;
}

.demo-title {
    flex: 1;
}

.demo-when {
    color: var(--text-4);
    font-size: 13px;
}

.mini-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--line-mark);
    border-radius: 50%;
}

.mini-check.is-done {
    border: 0;
    background: var(--ok);
    color: #ffffff;
}

.mini-check.is-done .icon {
    stroke-width: 2.6;
}

.mini-check.is-progress {
    border-color: var(--ink);
    background: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
}

.mini-check.is-bright {
    background: #2fa67a;
}

.mini-stack {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
}

.mini-stack .mini-check {
    position: absolute;
    inset: 0;
}

.pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.demo-toast {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: -6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 10px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #ffffff;
    font-size: 14px;
    font-weight: 550;
    box-shadow: 0 16px 32px -16px rgba(8, 38, 92, 0.5);
    opacity: 0;
}

.home-section {
    padding-top: 64px;
    scroll-margin-top: 16px;
}

@media (min-width: 720px) {
    .home-section {
        padding-top: 88px;
    }
}

/* Event cards */

.event-grid {
    display: grid;
    gap: 16px;
}

@media (min-width: 640px) {
    .event-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (min-width: 1024px) {
    .event-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.event-grid > li {
    display: flex;
}

.event-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 20px 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.event-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    color: var(--ink);
}

.event-card:focus-visible {
    border-radius: var(--radius-card);
}

.event-photo {
    display: block;
    width: calc(100% + 40px);
    max-width: none;
    height: 140px;
    margin: 0 -20px;
    object-fit: cover;
    background: var(--bg-muted);
}

/* The last item: more events are coming. A low band across the whole grid,
   not a link. */
.event-grid > .coming-item {
    grid-column: 1 / -1;
}

.coming-card {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 18px 20px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-card);
    background: var(--bg-soft);
}

.coming-text {
    flex: 1 1 280px;
}

.coming-text h3 {
    margin-bottom: 4px;
    font-size: 18px;
}

.coming-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.coming-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 550;
}

.event-photo-empty {
    background: var(--bg-muted);
}

.event-card .event-icon {
    position: relative;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 2px;
    border: 3px solid #ffffff;
    border-radius: var(--radius);
    box-sizing: content-box;
}

.event-card:has(.tone-rose) .event-photo-empty { background: var(--ev-rose-photo); }
.event-card:has(.tone-green) .event-photo-empty { background: var(--ev-green-photo); }
.event-card:has(.tone-amber) .event-photo-empty { background: var(--ev-amber-photo); }
.event-card:has(.tone-coral) .event-photo-empty { background: var(--ev-coral-photo); }
.event-card:has(.tone-blue) .event-photo-empty { background: var(--primary-100); }

.event-card h3 {
    margin: 14px 0 6px;
    font-size: 19px;
}

.event-description {
    color: var(--text-3);
    font-size: 15px;
    line-height: 1.55;
}

.event-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--primary);
    font-size: 15px;
    font-weight: 550;
}

@media (min-width: 720px) {
    .event-card {
        min-height: 270px;
        padding: 0 28px 28px;
    }

    .event-photo {
        width: calc(100% + 56px);
        height: 176px;
        margin: 0 -28px;
    }

    .event-card .event-icon {
        width: 52px;
        height: 52px;
        margin-top: -26px;
        border-radius: var(--radius-md);
    }

    .event-card h3 {
        margin: 22px 0 8px;
        font-size: 21px;
    }

    .event-description {
        font-size: 15.5px;
        line-height: 1.6;
    }

    .event-link {
        padding-top: 24px;
    }
}

/* Homepage sections below the events: shared heading */

.section-title {
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

@media (min-width: 720px) {
    .section-title {
        font-size: 40px;
    }
}

/* How it works: four rows, text and a small drawing of the screen */

.how-head {
    max-width: 720px;
}

.how-head .lead {
    margin-top: 14px;
}

.how-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 44px;
}

.how-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.how-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-50);
    color: var(--primary);
    font-size: 16px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.how-text h3 {
    margin: 14px 0 8px;
    font-size: 22px;
}

.how-text > p {
    color: var(--text-3);
    font-size: 16px;
    line-height: 1.6;
}

.how-points {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    color: var(--text-2);
    font-size: 15px;
}

.how-points li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.how-points .icon {
    color: var(--primary);
}

.how-visual {
    padding: 28px 20px;
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
}

@media (min-width: 900px) {
    .how-steps {
        gap: 72px;
    }

    .how-step {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 64px;
    }

    .how-step:nth-child(even) .how-text {
        order: 2;
    }

    .how-visual {
        padding: 40px;
    }
}

/* The drawings: simplified cards, never real content controls */

.mock {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #ffffff;
    box-shadow: var(--shadow-card);
    font-size: 14px;
}

.mock-kicker {
    margin-bottom: 10px;
    color: var(--text-4);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mock-events {
    display: grid;
    gap: 10px;
}

.mock-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-2);
    font-weight: 550;
}

.mock-pill.is-picked,
.mock-choice.is-picked {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    background: var(--primary-tint);
    color: var(--primary-ink);
}

.mock-bar {
    height: 6px;
    border-radius: 99px;
    background: var(--line-soft);
    overflow: hidden;
}

.mock-bar span {
    display: block;
    width: 25%;
    height: 100%;
    border-radius: 99px;
    background: var(--primary);
}

.mock-bar-ok span {
    width: 67%;
    background: var(--ok);
}

.mock-q {
    margin: 18px 0 14px;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.mock-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-2);
}

.mock-choice + .mock-choice {
    margin-top: 8px;
}

.mock-radio {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--line-mark);
    border-radius: 50%;
}

.is-picked .mock-radio {
    border: 5px solid var(--primary);
}

.mock-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line-soft);
}

.mock-kicker + .mock-item {
    border-top: 0;
}

.mock-n {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
}

.mock-item:nth-of-type(1) .mock-n {
    background: var(--primary);
    color: #ffffff;
}

.mock-item-text b,
.mock-doc b {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

.mock-item-text small,
.mock-doc small {
    display: block;
    margin-top: 2px;
    color: var(--text-4);
    font-size: 13px;
}

.mock-progress-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-4);
}

.mock-progress-head b {
    color: var(--ink);
    font-size: 16px;
}

.mock-progress .mock-bar {
    margin-bottom: 8px;
}

.mock-progress .mock-item.is-done span:last-child {
    color: var(--text-4);
    text-decoration: line-through;
}

.mock-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(--primary-tint);
    color: var(--primary);
}

/* About */

.about-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 32px 22px;
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
}

.about-intro .lead {
    margin-top: 14px;
}

.about-intro p + p {
    margin-top: 14px;
    color: var(--text-3);
    font-size: 16px;
    line-height: 1.65;
}

.about-values {
    display: grid;
    gap: 14px;
}

.about-values li {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #ffffff;
}

.about-icon,
.security-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--ink);
}

.about-values h3 {
    margin: 14px 0 6px;
    font-size: 17px;
}

.about-values p {
    color: var(--text-3);
    font-size: 15px;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .about-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .about-panel {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 56px;
        padding: 56px;
        align-items: center;
    }
}

/* FAQ: native <details>, no JavaScript needed */

.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.faq-head .lead {
    margin-top: 14px;
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--tap);
    padding: 18px 0;
    color: var(--ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary .icon {
    color: var(--text-4);
    transition: transform 0.15s ease;
}

.faq-item[open] summary .icon {
    transform: rotate(180deg);
}

.faq-item summary:hover {
    color: var(--primary);
}

.faq-item p {
    max-width: 680px;
    padding: 0 0 20px;
    color: var(--text-3);
    font-size: 16px;
    line-height: 1.65;
}

@media (min-width: 1024px) {
    .faq-layout {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: 64px;
        align-items: start;
    }

    .faq-head {
        position: sticky;
        top: 24px;
    }
}

/* Event page -------------------------------------------------------------- */

.event-hero .container {
    padding-top: 16px;
    padding-bottom: 40px;
}

.event-hero-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
    margin-top: 12px;
}

.event-hero .display {
    margin-top: 2px;
    font-size: 38px;
}

.event-hero .lead {
    margin-top: 16px;
    color: var(--text-2);
}

.event-hero .hero-actions {
    margin-top: 28px;
}

.hero-note {
    color: var(--text-3);
    font-size: 14.5px;
}

.event-hero .chip-list {
    margin-top: 24px;
}

.event-visual {
    position: relative;
}

.event-hero-photo {
    display: block;
    width: 100%;
    height: 220px;
    border-radius: 20px;
    object-fit: cover;
    object-position: 62% center;
    background: var(--primary-50);
}

.event-hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    background: #ffffff;
}

.event-hero-empty .event-icon {
    width: 88px;
    height: 88px;
    border-radius: 24px;
}

.float-card {
    display: none;
}

@media (min-width: 720px) {
    .event-hero .container {
        padding-top: 28px;
        padding-bottom: 64px;
    }

    .event-hero .display {
        font-size: 52px;
    }

    .event-hero .lead {
        font-size: 20px;
        line-height: 1.55;
    }
}

@media (min-width: 1024px) {
    .event-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 56px;
        align-items: center;
        margin-top: 24px;
    }

    .event-hero .display {
        font-size: 60px;
    }

    .event-hero-photo {
        height: 480px;
        border-radius: var(--radius-lg);
    }

    .float-card {
        position: absolute;
        left: -28px;
        bottom: 28px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #ffffff;
        box-shadow: var(--shadow-float);
    }

    .float-card .event-icon {
        width: 44px;
        height: 44px;
        border-radius: var(--radius);
    }

    .float-card b {
        display: block;
        font-size: 15px;
        font-weight: 600;
    }

    .float-card span {
        color: var(--text-4);
        font-size: 13.5px;
    }
}

.event-body {
    padding-top: 40px;
}

.procedures {
    margin-top: 48px;
}

.procedure-list {
    border-bottom: 1px solid var(--line-soft);
}

.procedure-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
    border-top: 1px solid var(--line-soft);
}

.step-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: #ffffff;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.procedure-item h3 {
    margin: 3px 0 6px;
    font-size: 17px;
    line-height: 1.35;
}

.procedure-summary {
    color: var(--text-3);
    font-size: 15.5px;
    line-height: 1.6;
}

.procedure-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 12px;
    color: var(--text-4);
    font-size: 13.5px;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cta-panel {
    padding: 24px;
    border: 1px solid var(--primary-100);
    border-radius: 20px;
    background: var(--primary-50);
}

.cta-panel .eyebrow {
    margin-bottom: 10px;
}

.cta-panel h2 {
    margin-bottom: 10px;
    font-size: 24px;
}

.cta-panel > p {
    color: var(--text-3);
    font-size: 15.5px;
}

.cta-form {
    margin-top: 22px;
}

.cta-note {
    margin-top: 10px;
    color: var(--text-3);
    font-size: 14px;
    text-align: center;
}

.cta-panel .benefit-list {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--primary-100);
    font-size: 14px;
}

@media (min-width: 720px) {
    .procedure-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 16px;
        padding: 26px 0;
    }

    .procedure-item h3 {
        font-size: 18px;
    }

    .cta-panel {
        padding: 28px;
        box-shadow: 0 24px 48px -32px rgba(8, 38, 92, 0.3);
    }
}

/* Questionnaire ------------------------------------------------------------ */

.quiz-band .container {
    padding-top: 18px;
    padding-bottom: 20px;
}

.quiz-band .progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.progress-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.progress-heading .event-icon {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #ffffff;
}

.progress-kicker {
    display: block;
    color: var(--text-4);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.07em;
    line-height: 1.3;
    text-transform: uppercase;
}

.progress-event {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.progress-step {
    flex: none;
    color: var(--text-2);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.progress-step b {
    color: var(--ink);
    font-weight: 600;
}

.quiz-bar {
    display: flex;
    gap: 6px;
}

.quiz-bar span {
    flex: 1;
    height: 6px;
    border-radius: 99px;
    background: #e3e6ea;
}

.quiz-bar .is-filled {
    background: var(--primary);
}

.questionnaire {
    padding-top: 32px;
}

.question-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.question-legend {
    padding: 0;
}

.question-title {
    font-size: 28px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.question-title label {
    cursor: pointer;
}

.question-help {
    margin: 14px 0 0;
    color: var(--text-3);
    font-size: 16px;
    line-height: 1.6;
}

.question-note {
    margin-top: 6px;
    color: var(--text-4);
    font-size: 14px;
}

.question-field > .choices,
.question-field > .text-input {
    margin-top: 24px;
}

.question-field > .field-error {
    margin: 16px 0 0;
}

.question-field > .field-error + .choices,
.question-field > .field-error + .text-input {
    margin-top: 14px;
}

/* "Naprej" is first in the markup (Enter submits it); "Nazaj" shows left. */
.question-actions {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.question-actions .btn-primary {
    flex: 1;
}

.question-actions .btn-ghost {
    flex: none;
    width: 52px;
    padding: 0;
    font-size: 0;
    border: 1px solid var(--line-strong);
}

.question-actions .btn-ghost .icon {
    width: 18px;
    height: 18px;
}

.questionnaire-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line-soft);
    color: var(--text-4);
    font-size: 14px;
    line-height: 1.55;
}

.questionnaire-note .icon {
    margin-top: 2px;
}

@media (min-width: 720px) {
    .quiz-band .container {
        padding-top: 22px;
        padding-bottom: 24px;
    }

    .progress-step {
        font-size: 14.5px;
    }

    .questionnaire {
        padding-top: 48px;
    }

    .question-title {
        font-size: 38px;
    }

    .question-help {
        margin-top: 18px;
        font-size: 17px;
    }

    .question-field > .choices,
    .question-field > .text-input {
        margin-top: 32px;
    }

    .question-actions {
        justify-content: space-between;
        margin-top: 40px;
    }

    .question-actions .btn-primary {
        flex: none;
    }

    .question-actions .btn-ghost {
        width: auto;
        padding: 0 14px;
        border-color: transparent;
        font-size: 17px;
    }

    .questionnaire-note {
        margin-top: 48px;
    }
}

/* Checklist ---------------------------------------------------------------- */

.case-container {
    padding-top: 20px;
}

.case-head h1 {
    margin-top: 8px;
}

.checklist-summary {
    margin-top: 8px;
    color: var(--text-3);
    font-size: 16.5px;
}

.checklist-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 4px;
}

.checklist-counts {
    color: var(--text-4);
    font-size: 14px;
}

.checklist-layout {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

/* On a phone the side column dissolves: the tracker becomes a sticky strip
   on top, the rest goes below the steps. */
.checklist-side {
    display: contents;
}

.tracker {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 calc(-1 * var(--gutter)) 16px;
    padding: 12px var(--gutter) 10px;
    border-bottom: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.97);
}

.tracker .checklist-progress .progress-meta {
    margin-bottom: 8px;
}

.tracker .checklist-progress .progress-step {
    font-size: 15px;
}

.tracker .progress-bar {
    height: 6px;
}

.side-extras {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.checklist-main {
    min-width: 0;
}

.case-completed {
    margin-bottom: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--ok-bg);
    color: #0a4a36;
    font-size: 15px;
}

.case-completed-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ok);
    font-weight: 600;
}

.case-completed-title .icon {
    stroke-width: 2.2;
}

.checklist-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checklist-review {
    margin-top: 36px;
}

.checklist-review .notice {
    margin-bottom: 14px;
}

/* A step card: number, title, badge, arrow; the body and the status below. */
.step-card {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #ffffff;
    scroll-margin-top: 112px;
}

.step-card > .step-num {
    grid-column: 1;
    grid-row: 1;
    width: 30px;
    height: 30px;
}

.step-card > h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
    line-height: 1.3;
    text-wrap: pretty;
}

/* On a phone the badge sits under the title, so the title keeps its width. */
.step-card > .badge-next {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: -6px;
}

.step-card > .step-open-link {
    grid-column: 3;
    grid-row: 1;
}

.step-card > .step-body,
.step-card > .step-status {
    grid-column: 1 / -1;
}

.step-card > .step-status {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

.step-link {
    color: var(--ink);
    text-decoration: none;
}

.step-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.step-body > .step-kind {
    margin-bottom: 8px;
}

.step-body > .procedure-summary {
    color: var(--text-2);
    font-size: 15.5px;
}

/* Deadline and place: two tiles with an icon, side by side when there is room. */
.step-facts {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

@media (min-width: 640px) {
    .step-facts {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

.fact {
    position: relative;
    padding: 14px 16px 14px 60px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
}

.fact-icon {
    position: absolute;
    top: 14px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--text-3);
}

.fact-deadline .fact-icon {
    background: var(--primary-50);
    box-shadow: inset 0 0 0 1px var(--primary-100);
    color: var(--primary);
}

.step-facts dt {
    color: var(--text-4);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.step-facts dd {
    margin-top: 3px;
    color: var(--ink);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.5;
}

/* How the step gets done: a quiet pill, not a sentence lost under the facts. */
.step-mode {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.45;
}

.step-mode .icon {
    margin-top: 2px;
    color: var(--text-4);
}

.step-documents {
    margin-top: 14px;
    font-size: 14.5px;
}

.step-documents a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: var(--tap);
    color: var(--ink);
    font-weight: 550;
}

.doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--primary-50);
    color: var(--primary);
}

/* The next step: blue number, blue frame. */
.step-card.is-next {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow-card);
}

.step-card.is-next > .step-num {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.step-num.is-done {
    border-color: var(--ok);
    background: var(--ok);
    color: #ffffff;
}

.step-num.is-done .icon {
    stroke-width: 2.4;
}

.step-num.is-review {
    border-style: dashed;
    color: var(--text-4);
}

.step-card.is-archived {
    background: var(--bg-done);
}

.step-card.is-archived h3,
.step-card.is-archived .step-link {
    color: var(--text-4);
}

/* A completed step, folded into one row. */
.step-card.is-completed {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 12px 14px;
    background: var(--bg-done);
}

.step-card.is-completed > .step-fold {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
}

.step-card.is-completed > .step-status {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    padding: 0;
    border: 0;
}

.step-card.is-completed > .step-open-link {
    display: none;
}

.step-fold > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--tap);
    list-style: none;
    cursor: pointer;
}

.step-fold > summary::-webkit-details-marker {
    display: none;
}

.step-fold > summary:focus-visible {
    border-radius: var(--radius-sm);
}

.step-fold h3 {
    flex: 1;
    text-wrap: pretty;
    min-width: 0;
    color: var(--text-3);
    font-size: 16px;
    font-weight: 550;
    letter-spacing: -0.01em;
}

.fold-number {
    margin-right: -8px;
    color: var(--text-3);
    font-size: 16px;
    font-weight: 550;
}

.step-fold .step-num {
    width: 28px;
    height: 28px;
}

.step-fold-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
}

.step-fold-toggle .icon {
    transition: transform 0.15s ease;
}

.step-fold[open] .step-fold-toggle .icon {
    transform: rotate(180deg);
}

.step-fold > .step-body {
    padding: 8px 0 4px 40px;
}

.step-card.is-completed > .step-fold[open] {
    grid-column: 1;
}

.step-fold[open] ~ .step-open-link {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}

@media (min-width: 720px) {
    .step-card {
        grid-template-columns: 30px minmax(0, 1fr) auto auto;
        gap: 12px 14px;
        padding: 22px 24px 20px;
    }

    .step-card > h3 {
        font-size: 19px;
    }

    .step-card > .badge-next {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
    }

    .step-card > .step-open-link {
        grid-column: 4;
    }

    .step-card > .step-body,
    .step-card > .step-status {
        grid-column: 2 / -1;
    }

    .step-card > .step-status .status-options {
        max-width: 420px;
    }

    .step-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .step-card.is-completed {
        grid-template-columns: minmax(0, 1fr) 300px auto;
        padding: 12px 20px;
    }

    .step-card.is-completed > .step-fold {
        grid-column: 1;
    }

    .step-card.is-completed > .step-status {
        grid-column: 2;
        grid-row: 1;
    }

    .step-card.is-completed > .step-fold[open] ~ .step-status {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 420px;
        margin-left: 40px;
    }

    .step-fold[open] ~ .step-open-link {
        grid-column: 3;
    }
}

/* Timeline (in the tracker). On a phone: a row of numbers. */
.timeline {
    margin-top: 10px;
}

.timeline-list {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}

.timeline-list::-webkit-scrollbar {
    display: none;
}

.timeline-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    color: var(--text-2);
    text-decoration: none;
}

.timeline-mark {
    position: relative;
    z-index: 1;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--line-mark);
    border-radius: 50%;
    background: #ffffff;
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.timeline-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.timeline .is-done .timeline-mark {
    border-color: var(--ok);
    background: var(--ok);
    color: #ffffff;
}

.timeline .is-done .timeline-mark .icon {
    stroke-width: 2.4;
}

.timeline .is-progress .timeline-mark {
    border-color: var(--primary);
    color: var(--primary);
}

.timeline .is-next .timeline-mark {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.timeline .is-archived .timeline-mark {
    border-style: dashed;
    color: var(--text-off);
}

/* Side extras */

.save-case {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--primary-50);
}

.save-case h2 {
    font-size: 15px;
    letter-spacing: -0.01em;
}

.save-case > p {
    margin: 4px 0 12px;
    color: #233b6e;
    font-size: 13.5px;
    line-height: 1.5;
}

.save-case .save-case-login {
    margin: 8px 0 0;
    font-size: 13.5px;
    text-align: center;
}

.edit-answers {
    margin: 0;
}

.answers {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.answers-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 18px;
    list-style: none;
    cursor: pointer;
}

.answers-fold > summary::-webkit-details-marker {
    display: none;
}

.answers-fold > summary h2 {
    font-size: 14.5px;
    font-weight: 550;
    letter-spacing: 0;
}

.answers-fold[open] > summary .icon {
    transform: rotate(180deg);
}

.answers-fold > .muted {
    padding: 0 18px 8px;
    font-size: 13px;
}

.answer-list {
    padding: 0 18px 6px;
}

.answer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 12px 0;
    border-top: 1px solid var(--line-soft);
    font-size: 14px;
}

.answer-row dt {
    grid-column: 1;
    color: var(--text-4);
    line-height: 1.45;
}

.answer-value {
    grid-column: 1;
    color: var(--ink);
    font-weight: 550;
}

.answer-edit {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.answer-edit a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 550;
}

@media (min-width: 1024px) {
    .case-container {
        padding-top: 28px;
    }

    .checklist-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 56px;
        align-items: start;
        margin-top: 24px;
    }

    .checklist-side {
        position: sticky;
        top: 24px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .tracker {
        position: static;
        margin: 0;
        padding: 22px 22px 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-card);
        background: #ffffff;
    }

    .tracker .checklist-progress .progress-step {
        font-size: 17px;
    }

    .tracker .progress-bar {
        height: 8px;
    }

    .side-extras {
        margin-top: 0;
    }

    .step-card {
        scroll-margin-top: 24px;
    }

    .timeline {
        margin-top: 22px;
    }

    .timeline-list {
        flex-direction: column;
        gap: 0;
        overflow: visible;
    }

    .timeline-list li {
        position: relative;
        padding-bottom: 6px;
    }

    .timeline-list li::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 34px;
        bottom: -4px;
        width: 2px;
        background: var(--line);
    }

    .timeline-list li:last-child::before {
        display: none;
    }

    .timeline-list li.is-done::before {
        background: var(--ok);
    }

    .timeline-list a {
        justify-content: flex-start;
        gap: 12px;
        min-height: 36px;
        padding: 2px 0;
        font-size: 14.5px;
    }

    .timeline-mark {
        width: 30px;
        height: 30px;
    }

    .timeline-title {
        position: static;
        width: auto;
        height: auto;
        overflow: hidden;
        clip: auto;
        text-overflow: ellipsis;
        line-height: 1.35;
    }

    .timeline-list a:hover .timeline-title {
        color: var(--primary);
    }

    .timeline .is-done .timeline-title {
        color: var(--text-4);
        text-decoration: line-through;
    }

    .timeline .is-next .timeline-title {
        color: var(--ink);
        font-weight: 600;
    }
}

/* Step page ---------------------------------------------------------------- */

.step-page {
    padding-top: 20px;
}

.step-head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 16px;
}

.step-position {
    color: var(--text-4);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.step-head h1 {
    max-width: 820px;
    margin-top: 14px;
}

.step-head .lead {
    max-width: 760px;
    margin-top: 14px;
    color: var(--text-2);
}

.step-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 28px;
}

.step-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.step-side .toc,
.step-side .side-next {
    display: none;
}

.step-progress-card .eyebrow {
    margin-bottom: 14px;
}

.step-progress-card .status-option {
    min-height: var(--tap);
}

.step-main {
    min-width: 0;
}

.step-reason {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 28px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--primary-50);
    color: var(--primary-ink);
    font-size: 15.5px;
    line-height: 1.55;
}

.step-reason .icon {
    margin-top: 2px;
}

.step-reason-label {
    font-weight: 600;
}

.step-main > .step-mode {
    margin: -12px 0 24px;
}

.step-section {
    padding: 32px 0;
    border-top: 1px solid var(--line-soft);
    scroll-margin-top: 16px;
}

.step-main > .step-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.step-section h2 {
    margin-bottom: 14px;
    font-size: 22px;
}

/* "Kako urediti": a list in the how-to becomes numbered steps. */
.prose-steps ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    list-style: none;
    counter-reset: how;
}

.prose-steps li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    counter-increment: how;
}

.prose-steps li + li {
    margin-top: 0;
}

.prose-steps li::before {
    content: counter(how);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--primary-50);
    color: var(--primary);
    font-size: 13px;
    font-weight: 650;
}

.requirement-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.requirement-list li {
    position: relative;
    padding: 14px 16px 14px 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.5;
}

.requirement-list li::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 17px;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230B6E4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.requirement-label {
    display: block;
    font-weight: 550;
}

.requirement-description {
    display: block;
    margin-top: 2px;
    color: var(--text-4);
    font-size: 14px;
}

.deadline {
    display: flex;
    align-items: center;
    gap: 16px;
}

.deadline p {
    color: var(--ink);
    font-size: 17px;
    font-weight: 500;
}

.tile-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--bg-muted);
    color: var(--ink);
}

.tile-icon .icon {
    stroke-width: 1.4;
}

.where-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.where-institution {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.where-institution .tile-icon {
    width: 44px;
    height: 44px;
}

.step-institution {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.4;
}

.where-label {
    display: block;
    color: var(--text-4);
    font-size: 13px;
}

.step-institution a,
.step-institution b {
    font-weight: 600;
}

.where-card .step-action {
    flex: 1 1 100%;
}

@media (min-width: 720px) {
    .where-card .step-action {
        flex: none;
    }
}

.document-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.document-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 22px;
    padding: 22px;
    border-radius: 16px;
    background: var(--primary-50);
}

.paper-preview {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 64px;
    height: 82px;
    padding: 11px 9px;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 8px 20px -12px rgba(8, 38, 92, 0.35);
}

.paper-preview i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--line-strong);
}

.paper-preview i:first-child {
    width: 60%;
    height: 4px;
    background: var(--primary);
}

.paper-preview i:nth-child(4) {
    width: 80%;
}

.paper-preview i:nth-child(5) {
    margin-top: 6px;
}

.paper-preview i:last-child {
    width: 50%;
}

.document-item-text {
    flex: 1 1 240px;
    min-width: 0;
}

.document-official {
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.document-official a {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.document-item-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.document-item-description {
    margin-top: 4px;
    color: #233b6e;
    font-size: 14.5px;
    line-height: 1.5;
}

.document-item .btn {
    flex: 1 1 100%;
}

@media (min-width: 720px) {
    .document-item .btn {
        flex: none;
    }
}

.source-list {
    border-bottom: 1px solid var(--line-soft);
}

.source-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
}

.source-type {
    flex: none;
    width: 118px;
    white-space: nowrap;
    margin-top: 2px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--old-bg);
    color: var(--text-3);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.source-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.source-text a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.source-text a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.source-meta {
    margin-top: 2px;
    color: var(--text-4);
    font-size: 13.5px;
}

.step-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
}

.step-foot .btn-ghost {
    padding-left: 0;
}

@media (min-width: 720px) {
    .step-page {
        padding-top: 32px;
    }

    .step-head h1 {
        font-size: 44px;
    }

    .step-section {
        padding: 36px 0;
    }

    .requirement-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .step-head h1 {
        font-size: 48px;
    }

    .step-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 64px;
        align-items: start;
        margin-top: 40px;
    }

    .step-side {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 24px;
    }

    .step-main {
        grid-column: 1;
        grid-row: 1;
    }

    .step-side .toc,
    .step-side .side-next {
        display: block;
    }

    .step-foot .foot-next {
        display: none;
    }
}

.toc ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toc .eyebrow {
    margin-bottom: 8px;
}

.toc a {
    display: flex;
    align-items: center;
    min-height: 34px;
    color: var(--ink);
    font-size: 15px;
    text-decoration: none;
}

.toc a:hover {
    color: var(--primary);
}

/* Document page ------------------------------------------------------------ */

.document-page .page-head .badge {
    margin-top: 14px;
}

.document-page .step-notice {
    margin-top: 24px;
}

.document-result {
    margin-top: 32px;
}

.document-result h2 {
    margin-bottom: 14px;
}

.document-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.document-tools[hidden] {
    display: none;
}

/* The document itself: a sheet of paper with the text's own line breaks. */
.document-paper {
    margin-bottom: 16px;
    padding: 28px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-card);
}

.document-edit {
    margin: 20px 0;
}

.document-edit summary {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    margin-bottom: 12px;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
}

.document-form {
    margin-top: 28px;
}

.document-form fieldset.form-field {
    min-width: 0;
    padding: 0;
    border: 0;
}

.document-form legend.field-label {
    padding: 0;
}

.document-form .choices {
    margin-top: 4px;
}

.document-form .choice {
    min-height: 56px;
    font-size: 16px;
}

.document-form > .muted {
    margin-top: 14px;
}

/* Shared simple pages: header, card ------------------------------------------ */

.page-head .eyebrow {
    margin-top: 8px;
}

.page-head h1 {
    margin-top: 4px;
}

.page-head .lead {
    margin-top: 12px;
}

.card,
.not-saved {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: #ffffff;
}

.card > * + *,
.not-saved > * + * {
    margin-top: 14px;
}

.not-saved .lead {
    font-size: 17px;
}

@media (min-width: 720px) {
    .card,
    .not-saved {
        padding: 32px;
    }
}

/* Account ------------------------------------------------------------------ */

.account-email {
    margin-top: 10px;
}

.account-cases {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
}

.account-case {
    margin-top: 0;
}

.account-case-title {
    font-size: 20px;
}

.account-case-title a {
    color: var(--ink);
    text-decoration: none;
}

.account-case-title a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.account-case-meta {
    color: var(--text-4);
    font-size: 14px;
}

.account-case-state {
    color: var(--text-3);
    font-size: 15px;
}

.account-case-done {
    color: var(--ok);
    font-weight: 600;
}

.account-new {
    margin-top: 24px;
}

.account-empty {
    margin-top: 28px;
}

.account-empty > * + * {
    margin-top: 14px;
}

/* Sign-in, registration and "Pozabljeno geslo" (layouts/auth.php) -------- */

/* A dark brand panel beside the form from 960px; below that only the form.
   The panel's pattern is a field of faint checklist cards, the one place
   where the site's ground is not white. */

.auth-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.auth-brand {
    display: none;
}

.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px var(--gutter) 28px;
}

.auth-mobile-logo {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: var(--tap);
}

.auth-panel {
    width: 100%;
    max-width: 440px;
    margin: 36px 0 auto;
}

.auth-head {
    margin-bottom: 30px;
}

.auth-title {
    font-size: 30px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.auth-lead {
    margin-top: 8px;
    color: var(--text-3);
    font-size: 16.5px;
}

.auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: var(--radius-md);
    background: var(--primary-50);
    color: var(--primary);
}

.auth-form .form-field {
    margin-bottom: 20px;
}

.auth-form .field-label {
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-form .field-hint {
    margin-top: -4px;
}

.auth-form .text-input {
    border-color: var(--line);
    background: var(--bg-soft);
}

.auth-form .text-input::placeholder {
    color: var(--text-off);
    opacity: 1;
}

.auth-form .text-input:hover {
    border-color: var(--line-strong);
}

.auth-form .text-input:focus-visible {
    border-color: var(--primary);
    background: #ffffff;
}

.password-input {
    position: relative;
}

.password-input .text-input {
    padding-right: 54px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-4);
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover {
    color: var(--ink);
}

.password-toggle[hidden],
.password-toggle .icon-eye-off,
.password-toggle[aria-pressed="true"] .icon-eye {
    display: none;
}

.password-toggle[aria-pressed="true"] .icon-eye-off {
    display: block;
}

.auth-forgot {
    margin-top: 6px;
    text-align: right;
}

.auth-forgot a {
    display: inline-block;
    padding: 8px 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 550;
    text-decoration: none;
}

.auth-forgot a:hover {
    color: var(--primary);
}

.auth-submit {
    min-height: 52px;
    margin-top: 8px;
}

.auth-switch {
    margin-top: 28px;
    color: var(--text-4);
    font-size: 15.5px;
    text-align: center;
}

.auth-switch a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.auth-switch a:hover {
    color: var(--primary);
}

.auth-note,
.auth-privacy {
    margin-top: 14px;
    color: var(--text-4);
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
}

.auth-privacy {
    margin-top: 18px;
}

.auth-head + .auth-note {
    margin: -10px 0 26px;
    text-align: left;
}

.form-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid #bcdccd;
    border-radius: var(--radius);
    background: var(--ok-bg);
    color: var(--ok);
    font-size: 15px;
    font-weight: 500;
}

.form-notice .icon {
    flex: none;
    margin-top: 4px;
}

.auth-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 20px;
    margin-top: 40px;
    font-size: 13.5px;
}

.auth-legal a {
    color: var(--text-4);
    text-decoration: none;
}

.auth-legal a:hover {
    color: var(--ink);
}

@media (min-width: 720px) {
    .auth-title {
        font-size: 34px;
    }
}

@media (min-width: 960px) {
    .auth-shell {
        display: grid;
        grid-template-columns: minmax(420px, 40%) minmax(0, 1fr);
    }

    .auth-brand {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        align-self: start;
        height: 100vh;
        min-height: 640px;
        padding: 56px clamp(40px, 5vw, 80px) 40px;
        overflow: hidden;
        background: var(--ink);
        color: #ffffff;
        isolation: isolate;
    }

    .auth-brand::before {
        content: "";
        position: absolute;
        inset: -25% -30% -25% 40%;
        z-index: -1;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='168'%3E%3Crect x='12.5' y='12.5' width='215' height='143' rx='14' fill='%23fff' fill-opacity='.025' stroke='%23fff' stroke-opacity='.07'/%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Ccircle cx='38' cy='42' r='9'/%3E%3Crect x='56' y='35' width='96' height='7' rx='3.5'/%3E%3Crect x='56' y='47' width='60' height='5' rx='2.5' fill-opacity='.6'/%3E%3Crect x='30' y='72' width='180' height='1' fill-opacity='.6'/%3E%3Ccircle cx='36' cy='94' r='5'/%3E%3Crect x='50' y='91' width='120' height='5' rx='2.5' fill-opacity='.7'/%3E%3Ccircle cx='36' cy='114' r='5'/%3E%3Crect x='50' y='111' width='88' height='5' rx='2.5' fill-opacity='.7'/%3E%3Ccircle cx='36' cy='134' r='5'/%3E%3Crect x='50' y='131' width='140' height='5' rx='2.5' fill-opacity='.7'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 240px 168px repeat;
        transform: rotate(-14deg);
        -webkit-mask-image: linear-gradient(100deg, transparent 15%, #000000 70%);
        mask-image: linear-gradient(100deg, transparent 15%, #000000 70%);
    }

    .auth-brand-logo {
        display: inline-flex;
        align-self: flex-start;
    }

    .auth-pitch {
        margin: auto 0;
        padding: 48px 0;
    }

    .auth-pitch-title {
        color: #ffffff;
        font-size: clamp(38px, 3.6vw, 54px);
        font-weight: 650;
        line-height: 1.04;
        letter-spacing: -0.035em;
    }

    .auth-pitch-lead {
        max-width: 30em;
        margin-top: 22px;
        color: rgba(255, 255, 255, 0.74);
        font-size: 18px;
        line-height: 1.6;
    }

    .auth-benefits {
        margin: 34px 0 42px;
        padding: 0;
        list-style: none;
    }

    .auth-benefits li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 16.5px;
    }

    .auth-benefits li + li {
        margin-top: 14px;
    }

    .auth-benefits .icon {
        flex: none;
        margin-top: 4px;
        color: var(--primary-100);
    }

    .auth-brand-link {
        min-height: 54px;
        padding: 0 26px;
        border-color: rgba(255, 255, 255, 0.34);
        color: #ffffff;
    }

    .auth-brand-link:hover {
        border-color: rgba(255, 255, 255, 0.7);
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    .auth-brand-foot {
        color: rgba(255, 255, 255, 0.5);
        font-size: 13px;
        letter-spacing: 0.02em;
    }

    .auth-main {
        justify-content: center;
        padding: 48px clamp(32px, 6vw, 96px) 32px;
    }

    .auth-mobile-logo {
        display: none;
    }

    .auth-panel {
        margin: auto 0;
    }
}

/* Text pages ------------------------------------------------------------------ */

.text-page .prose {
    margin-top: 28px;
}

.text-page .page-notice {
    margin-top: 24px;
}

/* Legal pages: links between them, security cards, cookie table */

.legal-operator {
    margin-top: 10px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text-2);
    font-style: normal;
    line-height: 1.6;
}


.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 28px 0 16px;
}

.legal-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-3);
    font-size: 14px;
    font-weight: 550;
    text-decoration: none;
}

.legal-nav a:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.legal-nav a[aria-current="page"] {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary-ink);
}

.text-page .prose h3 {
    margin: 22px 0 6px;
    font-size: 17px;
}

.prose em {
    color: var(--text-4);
    font-style: normal;
    font-weight: 550;
}

.security-grid {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.security-grid li {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

.security-grid h2 {
    margin: 14px 0 6px;
    font-size: 17px;
}

.security-grid p {
    color: var(--text-3);
    font-size: 15px;
    line-height: 1.55;
}

@media (min-width: 640px) {
    .security-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.table-wrap {
    margin-top: 28px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.cookie-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}

.cookie-table th,
.cookie-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
}

.cookie-table th {
    background: var(--bg-soft);
    color: var(--text-4);
    font-size: 13px;
    font-weight: 600;
}

.cookie-table td {
    border-top: 1px solid var(--line-soft);
    color: var(--text-2);
}

.cookie-table code {
    font-size: 13.5px;
    color: var(--ink);
}

/* Error details in development */

.debug {
    margin-top: 24px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--bg-muted);
    font-size: 13px;
}

.debug pre {
    margin: 8px 0 0;
    overflow-x: auto;
    white-space: pre-wrap;
}

/* 7. Motion: the homepage example list ------------------------------------- */

.pulse { animation: pulse 1.8s ease-out infinite; }
.a-bar { animation: demo-bar 9s ease-in-out infinite; }
.a-c2 { animation: demo-c2 9s ease infinite; }
.a-c3 { opacity: 0; animation: demo-c3 9s ease infinite; }
.a-c4 { opacity: 0; animation: demo-c4 9s ease infinite; }
.a-r3 { opacity: 0; animation: demo-r3 9s ease infinite; }
.a-r4 { opacity: 0; animation: demo-r4 9s ease infinite; }
.a-t3 { text-decoration: line-through; text-decoration-color: transparent; animation: demo-t3 9s ease infinite; }
.a-t4 { text-decoration: line-through; text-decoration-color: transparent; animation: demo-t4 9s ease infinite; }
.a-d3 { animation: demo-d3 9s ease infinite; }
.a-d4 { animation: demo-d4 9s ease infinite; }
.demo-toast { animation: demo-toast 9s ease infinite; }

@keyframes demo-bar { 0%, 25% { width: 33%; } 32%, 57% { width: 50%; } 64%, 90% { width: 67%; } 97%, 100% { width: 33%; } }
@keyframes demo-c2 { 0%, 25% { opacity: 1; transform: none; } 29%, 93% { opacity: 0; transform: translateY(-8px); } 97%, 100% { opacity: 1; transform: none; } }
@keyframes demo-c3 { 0%, 26% { opacity: 0; transform: translateY(8px); } 31%, 57% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes demo-c4 { 0%, 58% { opacity: 0; transform: translateY(8px); } 63%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes demo-r3 { 0%, 27% { opacity: 0; transform: scale(0.5); } 31%, 90% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(0.5); } }
@keyframes demo-r4 { 0%, 58% { opacity: 0; transform: scale(0.5); } 62%, 90% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; transform: scale(0.5); } }
@keyframes demo-t3 { 0%, 27% { color: var(--ink); text-decoration-color: transparent; } 31%, 90% { color: var(--text-4); text-decoration-color: var(--text-4); } 95%, 100% { color: var(--ink); text-decoration-color: transparent; } }
@keyframes demo-t4 { 0%, 58% { color: var(--ink); text-decoration-color: transparent; } 62%, 90% { color: var(--text-4); text-decoration-color: var(--text-4); } 95%, 100% { color: var(--ink); text-decoration-color: transparent; } }
@keyframes demo-d3 { 0%, 27% { opacity: 1; } 31%, 90% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes demo-d4 { 0%, 58% { opacity: 1; } 62%, 90% { opacity: 0; } 95%, 100% { opacity: 1; } }
@keyframes demo-toast { 0%, 28% { opacity: 0; transform: translateY(10px); } 32%, 44% { opacity: 1; transform: none; } 48%, 59% { opacity: 0; transform: translateY(10px); } 63%, 75% { opacity: 1; transform: none; } 79%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(6, 107, 223, 0.45); } 100% { box-shadow: 0 0 0 9px rgba(6, 107, 223, 0); } }

/* Without motion: the example stands still at "2 od 6", nothing blinks. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
    }

    .pulse,
    .a-bar,
    .a-c2,
    .a-c3,
    .a-c4,
    .a-r3,
    .a-r4,
    .a-t3,
    .a-t4,
    .a-d3,
    .a-d4,
    .demo-toast {
        animation: none;
    }
}

/* 8. Print: the prepared document alone ------------------------------------ */

@media print {
    .no-print,
    .site-header,
    .site-footer,
    .beta-banner {
        display: none !important;
    }

    body,
    .site-main {
        background: #ffffff;
    }

    .document-paper {
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        font-size: 12pt;
        color: #000000;
    }
}

/* Deadlines as dates (Deadline): the date on a step and the hint to give the date. */
.deadline-hint {
    display: flex;
    gap: 14px;
    margin: 0 0 20px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: var(--primary-tint);
    color: var(--primary-ink);
    font-size: 15px;
    line-height: 1.55;
}

.deadline-hint > .icon {
    flex: none;
    margin-top: 2px;
}

.deadline-hint a {
    font-weight: 600;
    white-space: nowrap;
}

.deadline-date {
    font-weight: 600;
    color: var(--ink);
}

.deadline-left {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--old);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.deadline-left.is-soon {
    background: var(--wip-bg);
    color: var(--wip);
}

.deadline-left.is-overdue {
    background: var(--bg-muted);
    color: var(--error);
}

.deadline-rule {
    display: block;
    margin-top: 2px;
    color: var(--text-off);
    font-size: 13px;
}

/* A document form filled from the previous one (app.js, data-remember-fields). */
.form-remembered {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    background: var(--primary-tint);
    color: var(--primary-ink);
    font-size: 15px;
    line-height: 1.5;
}

.form-remembered p {
    margin: 0;
}

.form-remembered .btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   AI assistant (AssistantController): "Opišite s svojimi besedami" in the
   homepage hero, its result page, and "Preberi dokument".
   --------------------------------------------------------------------------- */

.hero-search {
    margin-top: 24px;
    max-width: 560px;
}

.hero-search-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.hero-search-row .text-input {
    flex: 1;
    min-width: 0;
}

.hero-search .field-hint {
    margin-top: 8px;
}

.assistant-match {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    color: var(--ink);
    text-decoration: none;
}

.assistant-match:hover {
    border-color: var(--line-strong);
}

.card.assistant-match > * + * {
    margin-top: 0;
}

.assistant-match-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
}

.assistant-match-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.assistant-events {
    margin-top: 40px;
}

.assistant-event-list {
    margin-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.assistant-event {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    text-decoration: none;
}

.assistant-event span:not(.event-icon) {
    flex: 1;
}

.assistant-event:hover {
    background: var(--bg-hover);
}

.assistant-reading h3 {
    margin-top: 22px;
    font-size: 1rem;
}

.assistant-list {
    padding-left: 20px;
}

.assistant-list li + li {
    margin-top: 6px;
}

.assistant-deadlines li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}

.assistant-deadline-when {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.assistant-again {
    margin-top: 24px;
}