/* ŠVP JEDNODUŠE — design system
   Direction: "sešit" (a school exercise book), anchored on the blue of the
   institute that publishes the RVP (#3566FC). Ink on paper, a blue margin rule
   as the structural spine, monospace for curriculum codes, underline inputs you
   write "on the line".

   Hues: --blue is the brand (spine, focus, primary actions). --accent is
   "inkoustová tužka" — the indelible copying-pencil violet of Central-European
   officialdom — reserved for producing the filed artifact (export to PDF).
   --gap (red) / --covered (green) / --amber are coverage data only. */

:root {
    --paper: #faf9f6;
    --paper-raised: #ffffff;
    --ink: #17233b;
    --ink-soft: #5b6577;
    --ink-faint: #97a0af;

    --blue: #3566fc;           /* spine, focus, primary fill */
    --blue-hover: #2450e6;
    --blue-deep: #1e3eae;      /* text links / small text on paper (AA) */
    --blue-wash: rgba(53, 102, 252, 0.06);

    --accent: #574a94;         /* copying-pencil violet — the "export / file it" action */
    --accent-hover: #473b7f;
    --accent-wash: rgba(87, 74, 148, 0.09);

    --gap: #c0402f;            /* coverage: "chybí" / attention */
    --gap-wash: rgba(192, 64, 47, 0.07);
    --covered: #2f6d5b;        /* coverage: "pokryto" */
    --covered-wash: rgba(47, 109, 91, 0.08);
    --amber: #9a6a12;
    --amber-wash: rgba(154, 106, 18, 0.09);

    --hairline: #e5e2d9;
    --field-line: #c9c5b8;
    --grid: rgba(53, 102, 252, 0.045);

    --radius: 3px;
    --rule-w: 2px;
    --measure: 33rem;
    --shell-w: 78rem;   /* header, page and footer frame — wide enough that rail + content don't feel cramped */

    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --step--1: 0.8125rem;
    --step-0: 1rem;
    --step-1: 1.125rem;
    --step-2: 1.5rem;
    --step-3: clamp(1.95rem, 1.35rem + 2.4vw, 2.7rem);

    /* Brand (logo): navy ink, the notebook's red margin line, and faint ruled lines. */
    --brand-ink: #1c3d6e;
    --brand-red: #e2474b;
    --brand-faint: #cdd3dd;
    --font-brand: "Nunito", var(--font-body);

    /* The page spine — the light red margin line of a school exercise book. */
    --margin-line: #ec8f89;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #0f1216;
        --paper-raised: #161a20;
        --ink: #e7e9ee;
        --ink-soft: #9aa2af;
        --ink-faint: #6c7480;

        --blue: #5c82ff;
        --blue-hover: #7495ff;
        --blue-deep: #a8bcff;
        --blue-wash: rgba(92, 130, 255, 0.10);

        --accent: #a394e6;
        --accent-hover: #b6a9ef;
        --accent-wash: rgba(163, 148, 230, 0.13);

        --gap: #f0806e;
        --gap-wash: rgba(240, 128, 110, 0.12);
        --covered: #58b395;
        --covered-wash: rgba(88, 179, 149, 0.12);
        --amber: #d9a441;
        --amber-wash: rgba(217, 164, 65, 0.12);

        --hairline: #262b33;
        --field-line: #333a44;
        --grid: rgba(92, 130, 255, 0.06);

        --brand-ink: #dfe6f3;
        --brand-red: #f0716e;
        --brand-faint: #4a5260;
        --margin-line: #b8605b;
    }
}

/* ---------- reset / base ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    /* always reserve the scrollbar gutter so the centred column doesn't jump
       left between short pages and long, scrolling ones (e.g. Pokrytí RVP) */
    scrollbar-gutter: stable;
    /* keep in-page anchor targets clear of the sticky masthead. --bar-h is set
       from the bar's measured height by App.razor; 5rem is the pre-JS fallback
       and the height when the nav doesn't wrap. */
    scroll-padding-top: var(--bar-h, 5rem);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    font-optical-sizing: auto;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 0.5em;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); font-weight: 500; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--blue-deep);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    transition: color 0.12s ease;
}
a:hover { color: var(--blue); }

strong { font-weight: 600; }

hr, .divider {
    border: 0;
    height: 1px;
    background: var(--hairline);
    margin: 1.5rem 0;
}

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 1px;
}
/* <FocusOnNavigate> moves focus to the page's h1 (tabindex="-1") so screen readers
   announce the new page; that isn't a keyboard focus the user should see boxed. */
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- shell / masthead ----------
   Global, not scoped: the nav is <NavLink>, whose <a> never inherits a parent
   component's CSS-isolation attribute, so scoped .shell__link rules are inert.

   The header sits on --paper (no separate surface); its bottom edge is a 2px
   blue rule — the first ruled line of the squared exercise-book page the whole
   app is built on. Nav items are words on that line; the current section is
   inked in institute blue and its underline is a lit segment of the rule. */

.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.shell__bar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--paper);
    border-bottom: var(--rule-w) solid var(--hairline);   /* the ruled line — quiet */
}

.shell__bar-inner {
    max-width: var(--shell-w);
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    padding: 1.6rem clamp(1.15rem, 5vw, 2.5rem) 0;
}

.shell__brand {
    display: inline-flex;
    align-items: center;
    padding-bottom: 0.75rem;
    text-decoration: none;
    font-size: 1.45rem;   /* sizes the BrandLogo inside */
}
.shell__brand:hover .brand-logo__word { color: var(--blue-deep); }

/* ---------- logo (BrandLogo) ---------- */

.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    color: var(--brand-ink);
    line-height: 1;
    white-space: nowrap;
}
.brand-logo__mark { order: -1; width: 1.75em; height: auto; flex: none; overflow: visible; }
.brand-logo__mark .bl-ink { stroke: var(--brand-ink); }
.brand-logo__mark .bl-red { stroke: var(--brand-red); }
.brand-logo__mark .bl-faint { stroke: var(--brand-faint); }
.brand-logo__word {
    font-family: var(--font-brand);
    color: var(--brand-ink);
    letter-spacing: -0.01em;
    transition: color 0.12s ease;
}
.brand-logo__svp { font-weight: 800; }
.brand-logo__name { font-weight: 500; }
/* Stacked: the poster form of the logo — "ŠVP" + book on top, "jednoduše" under it. */
.brand-logo--stacked {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 0.3em;
    row-gap: 0.05em;
}
.brand-logo--stacked .brand-logo__word { display: contents; }
.brand-logo--stacked .brand-logo__svp { grid-column: 1; grid-row: 1; font-size: 1.55em; }
.brand-logo--stacked .brand-logo__mark { order: 0; grid-column: 2; grid-row: 1; width: 2.4em; }
.brand-logo--stacked .brand-logo__name { grid-column: 1 / span 2; grid-row: 2; font-size: 1.32em; }

.shell__nav {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0 1.9rem;
}

.shell__link {
    padding: 0.15rem 0 0.9rem;
    margin-bottom: calc(-1 * var(--rule-w));   /* land the underline on the masthead rule */
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: var(--rule-w) solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.shell__link:hover { color: var(--ink); border-bottom-color: var(--field-line); }
.shell__link.active {
    color: var(--blue-deep);
    font-weight: 600;
    border-bottom-color: var(--blue);   /* lights this segment of the ruled line */
}
.shell__nav .shell__link[href$="Register"] { color: var(--ink); }

.shell__main {
    flex: 1;
    width: 100%;
    max-width: var(--shell-w);
    margin: 0 auto;
    padding: clamp(1.75rem, 5vw, 3.25rem) clamp(1.15rem, 5vw, 2.5rem);
    align-self: stretch;
}

/* on wide screens the wordmark shares its left edge with the page's headings */
@media (min-width: 60rem) {
    .shell__main { padding-left: 2.25rem; }
    .shell__bar-inner { padding-left: 2.25rem; }
}

/* ---------- site footer ---------- */

.site-foot {
    border-top: var(--rule-w) solid var(--hairline);
    margin-top: 3rem;
}

.site-foot__inner {
    max-width: var(--shell-w);
    margin: 0 auto;
    padding: 2.25rem clamp(1.15rem, 5vw, 2.5rem) 2.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3.5rem;
}

.site-foot__brand { flex: 1 1 18rem; }

.site-foot__mark {
    font-size: 1.15rem;   /* sizes the BrandLogo inside */
    margin: 0 0 0.7rem;
}
.site-foot__tag {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0 0 0.9rem;
    max-width: 22rem;
}
.site-foot__copy {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--ink-faint);
    margin: 1.25rem 0 0;
}

.site-foot__links {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.site-foot__links a {
    font-size: 0.9rem;
    color: var(--ink-soft);
    text-decoration: none;
    width: max-content;
}
.site-foot__links a:hover { color: var(--blue-deep); }

.site-foot__head {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 0.5rem;
}

/* logged-in: a slim one-line bar, out of the way of the workspace */
.site-foot--app { margin-top: 2rem; }
.site-foot--app .site-foot__inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem 2rem;
}
.site-foot--app .site-foot__copy { margin: 0; }
.site-foot__applinks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
}
.site-foot__applinks a {
    font-size: 0.82rem;
    color: var(--ink-soft);
    text-decoration: none;
}
.site-foot__applinks a:hover { color: var(--blue-deep); }

/* ---------- contact form (footer + /kontakt page) ---------- */

.contact-form__intro,
.contact-form__done {
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 1rem;
}
.contact-form__intro a { color: var(--blue-deep); }
.contact-form__err {
    color: var(--gap);
    margin: 0 0 0.8rem;
}

.contact-form__fields {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-width: 32rem;
}
.contact-form__fields .field__input {
    border: 1px solid var(--field-line);
    border-radius: var(--radius);
    background: var(--paper-raised);
    padding: 0.5rem 0.65rem;
}
.contact-form__fields .field__input:focus { border-color: var(--blue); }
.contact-form__fields textarea.field__input { resize: vertical; line-height: 1.5; }
.contact-form__fields .btn { align-self: flex-start; }

.contact-form__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* compact = footer variant */
.contact-form--compact { flex: 1 1 20rem; max-width: 24rem; }
.contact-form--compact .contact-form__intro,
.contact-form--compact .contact-form__done { font-size: 0.88rem; margin-bottom: 0.9rem; }
.contact-form--compact .contact-form__err { font-size: 0.85rem; }
.contact-form--compact .contact-form__fields { gap: 0.6rem; }
.contact-form--compact .field__input { font-size: 0.9rem; padding: 0.4rem 0.55rem; }

.contact-page { max-width: 40rem; }
.contact-page__lead { margin: 0 0 2rem; }

@media (min-width: 60rem) {
    .site-foot__inner { padding-left: 2.25rem; }
}

/* account menu: a disc in the masthead that opens a small panel */
.usermenu {
    position: relative;
    margin-bottom: 0.4rem;
    margin-left: 0.35rem;
}
.usermenu__trigger {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--field-line);
    border-radius: 50%;
    color: var(--ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}
.usermenu__trigger::-webkit-details-marker { display: none; }
.usermenu__trigger:hover,
.usermenu[open] .usermenu__trigger { color: var(--blue-deep); border-color: var(--blue); }
.usermenu[open] .usermenu__trigger { background: var(--blue-wash); }

.usermenu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.6rem);
    z-index: 50;
    width: 15rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.9rem;
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(23, 35, 59, 0.14);
}
.usermenu__email {
    margin: 0 0 0.15rem;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--ink-soft);
    word-break: break-all;
}
.usermenu__panel form { display: block; }

@media (prefers-reduced-motion: no-preference) {
    .usermenu[open] .usermenu__panel { animation: usermenu-in 0.12s ease-out; }
}
@keyframes usermenu-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
}

/* ---------- structural spine ---------- */

.sheet {
    position: relative;
    padding-left: clamp(1.15rem, 5vw, 2.25rem);
}
.sheet::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--rule-w);
    background: var(--margin-line);
    transform-origin: top;
    animation: draw-rule 0.22s ease-out both;
}
@keyframes draw-rule { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- page action rail (margin actions, left of the spine) ---------- */

:root {
    --rail-w: 10.5rem;
    --rail-gap: 1.1rem;
    /* where the margin rail starts — the same inset as the header's logo, so the rail
       lines up under it and never touches the window edge */
    --rail-inset: clamp(1.15rem, 5vw, 2.5rem);
}
@media (min-width: 60rem) { :root { --rail-inset: 2.25rem; } }

/* The rail's column is reserved on every page, rail or not, so the margin line
   sits at the same x everywhere and doesn't jump between pages. A <PageRail>'s
   buttons fill that column; the content clears it. (0,2,0) outranks the plain
   `.shell__main` padding rules above. */
.shell__main.sheet {
    padding-left: calc(var(--rail-inset) + var(--rail-w) + var(--rail-gap) + 1.1rem);
}
.shell__main.sheet::before {
    left: calc(var(--rail-inset) + var(--rail-w) + var(--rail-gap) * 0.5);
}

/* The rail is a full-height track in the left margin; its contents (.page-rail__inner)
   stick under the masthead, so the menu stays put while the page scrolls. The sticky
   offset equals the starting position, so nothing shifts when it starts to stick. */
.page-rail {
    position: absolute;
    left: var(--rail-inset);
    top: 0;
    bottom: 0;
    width: var(--rail-w);
}
.page-rail__inner {
    position: sticky;
    top: calc(var(--bar-h, 5rem) + clamp(1.75rem, 5vw, 3.25rem));
    margin-top: clamp(1.75rem, 5vw, 3.25rem);   /* line up with .shell__main's padding-top */
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* same language as .btn, sized down for a stacked column */
.page-rail__item {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.page-rail__item:hover { background: var(--ink); color: var(--paper); }

.page-rail__item--primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.page-rail__item--primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }

.page-rail__item--danger { border-color: var(--gap); color: var(--gap); }
.page-rail__item--danger:hover { background: var(--gap); border-color: var(--gap); color: #fff; }

.page-rail__item--accent { border-color: var(--accent); color: var(--accent); }
.page-rail__item--accent:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* .is-current is set by the page; .active is what <NavLink> adds itself */
.page-rail__item.is-current,
.page-rail__item.active {
    background: var(--blue-wash);
    border-color: var(--blue);
    color: var(--blue-deep);
}
.page-rail__item.is-current:hover,
.page-rail__item.active:hover {
    background: var(--blue-wash);
    color: var(--blue-deep);
}
.page-rail__item.is-current { cursor: default; }

/* extra breathing room where the page groups actions */
.page-rail__sep { height: 0; margin: 0.3rem 0; }

/* page-specific action slot at the top of the rail. Holds one button's height
   even when the page has no such action, so the nav below never shifts.
   Its own items sit on the same 0.4rem rhythm as the nav buttons. */
.page-rail__lead {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 2.15rem;
    margin-bottom: 0.4rem;
}

/* Trial/read-only status (issue #65) — sits above the page action, same narrow
   column, so it needs to be denser than a full-width .notice. */
/* The one plan, on /cenik and the school's Předplatné page. */
.plan-card {
    max-width: 26rem;
    margin: 0 0 1.75rem;
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
    border-top: var(--rule-w) solid var(--blue);
    border-radius: 0 0 var(--radius) var(--radius);
}
.plan-card__name {
    margin: 0 0 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.plan-card__price {
    margin: 0 0 1rem;
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1.1;
    color: var(--ink);
}
.plan-card__price span { font-family: var(--font-body); font-size: var(--step-1); color: var(--ink-soft); }
.plan-card__note { margin: -0.6rem 0 1rem; font-size: 0.85rem; color: var(--ink-faint); }
.plan-card__list {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
}
.plan-card__list li { padding: 0.3rem 0 0.3rem 1.4rem; position: relative; }
.plan-card__list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--covered);
    font-weight: 600;
}

/* Trial / read-only prompt above every school page (BillingBanner). */
.billing-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.25rem;
}
.billing-banner__text { margin: 0; flex: 1 1 22rem; }
.billing-banner .btn { flex: none; }
.billing-banner__hint { font-size: 0.85rem; opacity: 0.85; }

/* narrow screens: spine back to the edge, rail becomes a row above the content */
@media (max-width: 48rem) {
    .shell__main.sheet { padding-left: clamp(1.15rem, 5vw, 2.25rem); }
    .shell__main.sheet::before { left: 0; }
    .page-rail {
        position: static;
        width: auto;
        margin-bottom: 1.5rem;
    }
    .page-rail__inner {
        position: static;
        margin-top: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.5rem 0.6rem;
    }
    .page-rail__item { width: auto; }
    .page-rail__sep { display: none; }
    .page-rail__lead {
        display: contents;   /* primary action just joins the wrapping row */
    }
}

/* ---------- typographic utilities ---------- */

.eyebrow {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    letter-spacing: 0.01em;
    color: var(--blue-deep);
}

.muted { color: var(--ink-soft); }
.lead { font-size: var(--step-1); color: var(--ink-soft); }

/* ---------- buttons ---------- */

.btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.72rem 1.15rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, transform 0.04s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn--primary {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}
.btn-primary:hover,
.btn--primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; }

.btn-danger,
.btn--danger { background: var(--gap); border-color: var(--gap); color: #fff; }
.btn-danger:hover,
.btn--danger:hover { background: #a5321f; border-color: #a5321f; color: #fff; }

/* export / "file it" — copying-pencil violet, outlined so it reads as a
   distinct kind of action next to the filled blue primary */
.btn--accent { border-color: var(--accent); color: var(--accent); }
.btn--accent:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn-lg { padding: 0.85rem 1.3rem; font-size: 1rem; }
.w-100, .btn--block { width: 100%; }

/* link-styled buttons (logout, "send verification", etc.) */
.btn-link,
.linklike {
    -webkit-appearance: none;
    appearance: none;
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;   /* a <button> centres its text by default — wrapped names would too */
    color: var(--blue-deep);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}
.btn-link:hover,
.linklike:hover { color: var(--blue); background: none; }

/* ---------- forms ---------- */

label, .form-label, .field__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.3rem;
}
/* "nepovinné" after a label, and a line of help between label and field. */
.field__opt { margin-left: 0.4rem; font-weight: 400; font-size: 0.85em; color: var(--ink-faint); }
.field__help { margin: 0 0 0.45rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 14rem)); column-gap: 1.5rem; }
@media (max-width: 30rem) { .field-row { grid-template-columns: minmax(0, 1fr); } }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
.form-control,
.field__input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--field-line);
    border-radius: 0;
    padding: 0.5rem 0.15rem;
    transition: border-color 0.12s ease;
}
input::placeholder, .form-control::placeholder { color: var(--ink-faint); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
.form-control:focus,
.field__input:focus {
    outline: none;
    border-bottom-color: var(--blue);
}

input:disabled, .form-control:disabled {
    color: var(--ink-soft);
    border-bottom-style: dashed;
}

/* Identity template markup is <input>, then <label>, then <ValidationMessage>.
   Reorder with flex so it reads label / input / error without touching markup. */
.form-floating {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2rem;
}
.form-floating > label { order: 1; margin: 0 0 0.4rem; }
.form-floating > .form-control { order: 2; }
.form-floating > .validation-message,
.form-floating > .text-danger { order: 3; }
.form-floating:focus-within > label { color: var(--blue-deep); }
.form-floating > .form-text { order: 4; margin-top: 0.4rem; }
.form-text { font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft); }
.form-floating > .form-control::placeholder { color: transparent; }
.form-floating > .form-control:focus::placeholder { color: var(--ink-faint); }

.field { margin-bottom: 1.2rem; }
.field:focus-within .field__label { color: var(--blue-deep); }

.mb-3 { margin-bottom: 1.2rem; }

/* checkbox row */
.checkbox, .field--check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.2rem;
}
.checkbox label, .field--check label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
input[type="checkbox"], .form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--blue);
    margin: 0;
}

/* validation */
.text-danger, .validation-message, .field__error {
    display: block;
    color: var(--gap);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    margin-top: 0.35rem;
}
.validation-summary-errors { margin: 0 0 1.2rem; }
.validation-summary-errors ul {
    list-style: none;
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--gap);
    background: var(--gap-wash);
    color: var(--gap);
    font-size: 0.92rem;
}
.valid.modified:not([type=checkbox]) { border-bottom-color: var(--covered); }
.invalid { border-bottom-color: var(--gap); }

/* ---------- notices / alerts ---------- */

.notice, .alert {
    padding: 0.8rem 1rem;
    margin-bottom: 1.25rem;
    border-left: 3px solid var(--ink-soft);
    background: var(--paper-raised);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 0.95rem;
}
.alert-danger, .notice--error { border-left-color: var(--gap); background: var(--gap-wash); color: var(--gap); }
.alert-success, .notice--ok { border-left-color: var(--covered); background: var(--covered-wash); color: var(--covered); }
.alert-warning, .notice--warn { border-left-color: var(--amber); background: var(--amber-wash); color: var(--amber); }
.alert-info, .notice--info { border-left-color: var(--blue); background: var(--blue-wash); color: var(--blue-deep); }

/* ---------- auth pages ---------- */

.auth-page-intro { margin-bottom: 1.75rem; }

/* "Jste tu poprvé? Zaregistrujte se" / "Už máte účet? Přihlaste se" — the switch
   between the two forms, right under the heading. */
.auth-switch { margin: -0.4rem 0 1.75rem; color: var(--ink-soft); }
.auth-switch a { font-weight: 600; }

.auth-or {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 1.1rem 0 0;
    font-size: 0.9rem;
}
.auth-or > span {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.auth-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.92rem;
}

/* ---------- layout helpers (replacing bootstrap grid) ---------- */

.row { display: block; }
[class*="col-"] { width: 100%; max-width: var(--measure); }
.input-group { display: flex; align-items: baseline; gap: 0.5rem; }
.input-group-text { color: var(--covered); font-weight: 600; }

/* ---------- account manage: side nav ---------- */

.nav.nav-pills {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.25rem;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 0.75rem;
}
.nav-pills .nav-link {
    display: inline-block;
    padding: 0.25rem 0;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
}
.nav-pills .nav-link:hover { color: var(--ink); }
.nav-pills .nav-link.active { color: var(--blue-deep); border-bottom-color: var(--blue); }

/* ---------- coverage dot (used from Home, later the gap tree) ---------- */

.dot {
    display: inline-block;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    flex: none;
}
.dot--covered { background: var(--covered); }
.dot--gap { background: transparent; box-shadow: inset 0 0 0 2px var(--gap); }

/* ---------- ŠVP: RVP výsledky covered by a školní výstup ---------- */

.rvp-links {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.rvp-links li {
    padding-left: 0.6rem;
    border-left: 2px solid var(--covered);
}
.rvp-links li.is-primary { border-left-width: 3px; color: var(--ink); }
.rvp-links__primary { color: var(--covered); margin-right: 0.15rem; }
.rvp-links--none {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--ink-faint);
}

/* výstup detail: the "navázané výsledky RVP" list with a primary toggle */
.rvp-linked__head { font-size: var(--step-1); margin: 1.5rem 0 0.3rem; }
.rvp-linked__hint { font-size: 0.85rem; margin: 0 0 0.6rem; }
.rvp-linked {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.rvp-linked li {
    display: grid;
    grid-template-columns: 1.2rem 1fr auto;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-left: 2px solid var(--hairline);
    background: var(--paper-raised);
}
.rvp-linked li.is-primary { border-left-color: var(--covered); background: var(--covered-wash); }
.rvp-linked__mark { color: var(--covered); text-align: center; }
.rvp-linked__text { font-size: 0.88rem; color: var(--ink-soft); }
.rvp-linked__set { font-size: 0.8rem; white-space: nowrap; }

.also-in {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

/* Checkbox list of subjects a školní výstup belongs to */
.subject-checklist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    padding: 0.15rem 0;
}
.subject-checklist__item {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.9rem;
}
.subject-checklist__item input { align-self: center; }

/* ---------- charakteristika předmětu (SubjectProfile) ---------- */

.profile-view__block { margin-top: 0.9rem; }
.profile-view__block:first-child { margin-top: 0.3rem; }
.profile-view .field__label { display: block; margin-bottom: 0.15rem; }
.profile-view__para { margin: 0 0 0.4rem; line-height: 1.55; }
.profile-view__hours { margin: 0.3rem 0 0; }
.profile-view__hours .field__label { display: inline; margin-right: 0.4rem; }
.profile-view__tags { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.profile-view__tag-area { font-weight: 600; margin-right: 0.3rem; }
.profile-view__empty { font-style: italic; }

.profile-form textarea.field__input { line-height: 1.5; resize: vertical; }

/* whole-document ŠVP text chapters (read-only view) */
.doc-section { margin: 1.25rem 0; }
.doc-section h2 { font-size: var(--step-1); margin-bottom: 0.35rem; }
.doc-section p { line-height: 1.55; }
.field__hint { font-weight: 400; color: var(--ink-faint); font-size: 0.85em; }

.profile-tags {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 0.5rem 0.8rem 0.7rem;
    margin: 0.2rem 0 0.4rem;
}
.profile-tags legend { font-size: 0.85rem; color: var(--ink-soft); padding: 0 0.3rem; }
.profile-tags__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.3rem 1rem;
}
.profile-tags__item { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.9rem; }
.profile-tags__item input { align-self: center; }

/* ---------- učební plán (hours matrix) ---------- */

.plan-wrap { overflow-x: auto; margin: 1rem 0; }
.plan-table {
    border-collapse: collapse;
    font-size: 0.85rem;
    min-width: 100%;
}
.plan-table th, .plan-table td {
    border: 1px solid var(--hairline);
    padding: 0.3rem 0.4rem;
    text-align: center;
    white-space: nowrap;
}
.plan-table thead th { background: var(--paper-sunk); font-weight: 600; }
.plan-table__subj { text-align: left; min-width: 12rem; position: sticky; left: 0; background: var(--paper); }
.plan-table thead .plan-table__subj { background: var(--paper-sunk); }
.plan-table__in {
    width: 3.2rem;
    text-align: center;
    font: inherit;
    font-family: var(--font-mono);
    border: 1px solid var(--field-line);
    border-radius: 2px;
    background: var(--paper-raised);
    padding: 0.15rem;
}
.plan-table__in:focus { border-color: var(--blue); outline: none; }
.plan-table__tot { font-weight: 600; font-variant-numeric: tabular-nums; background: var(--paper-sunk); }
.plan-table tfoot td { background: var(--paper-sunk); }
.plan-table__disp { font-weight: 400; color: var(--ink-soft); }

/* ---------- blazor error UI ---------- */

#blazor-error-ui {
    color-scheme: light only;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: none;
    z-index: 1000;
    padding: 0.7rem 1.25rem;
    background: #fbecea;
    border-top: 2px solid var(--gap);
    color: #7a2417;
    font-size: 0.9rem;
    box-sizing: border-box;
}
#blazor-error-ui .reload { color: #7a2417; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.6rem; }

.blazor-error-boundary {
    background: var(--gap);
    padding: 1rem 1.25rem;
    color: #fff;
}
.blazor-error-boundary::after { content: "Došlo k chybě."; }

/* ---------- RVP admin + browse ---------- */

.rvp-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.95rem;
}
/* narrow screens: a wide table scrolls inside itself instead of widening the page */
@media (max-width: 48rem) {
    .rvp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.rvp-table th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--hairline);
}
.rvp-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}
.rvp-table__actions {
    white-space: nowrap;
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
}
.rvp-table__okruh td {
    background: var(--paper-sunk);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-deep);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.rvp-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 1.5rem; }

.rvp-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 34rem;
    margin-bottom: 2rem;
}
.rvp-form textarea { resize: vertical; }
.rvp-form__actions { display: flex; align-items: baseline; gap: 1rem; margin-top: 1rem; }

/* admin: okruhy grouped by vzdělávací obor */
.rvp-group { margin-bottom: 1.75rem; }
.rvp-group__title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1rem;
    margin: 1.75rem 0 0;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--blue);
    color: var(--blue-deep);
}
.rvp-group__title--plain { color: var(--ink-soft); border-bottom-color: var(--hairline); }
.rvp-group__tag { margin-left: auto; font-size: 0.75rem; font-weight: 400; }
.rvp-group .rvp-table { margin-top: 0.4rem; }

.rvp-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}
.rvp-bulk .field__label { margin: 0; }

.tree__source {
    display: inline-block;
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.reorder { display: inline-flex; gap: 0.2rem; }
.reorder__btn {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--hairline);
    background: var(--paper-raised);
    color: var(--ink-soft);
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
}
.reorder__btn:hover:not(:disabled) { color: var(--blue-deep); border-color: var(--blue); }
.reorder__btn:disabled { opacity: 0.35; cursor: default; }

.confirm { display: inline-flex; gap: 0.6rem; align-items: baseline; }
.confirm__q { color: var(--gap); font-size: 0.9rem; }
.confirm__yes { color: var(--gap); }
.confirm__trigger { color: var(--gap); }

.badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: 2px;
}
.badge--ok { background: var(--covered-wash); color: var(--covered); }
.badge--partial { background: var(--amber-wash); color: var(--amber); }
.badge--gap { background: var(--gap-wash); color: var(--gap); }

/* ŠVP: pokrytí RVP (coverage report) */
.coverage-summary { margin: 1.25rem 0; }
.coverage-summary__num { margin: 0.5rem 0 0; color: var(--ink-soft); }
.coverage-split {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--hairline);
}
.coverage-split__item { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.9rem; }
.coverage-split__label { color: var(--ink-soft); }
.coverage-split__num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.coverage-node__kicker {
    margin-left: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
    text-transform: uppercase;
}
.rvp-picker__hint { font-size: 0.85rem; margin-top: -0.25rem; }
.coverage-bar {
    height: 0.5rem;
    background: var(--gap-wash);
    border-radius: 999px;
    overflow: hidden;
}
.coverage-bar--lg { height: 0.75rem; }
.coverage-bar__fill { display: block; height: 100%; background: var(--covered); }
.coverage-toggle { display: inline-flex; align-items: baseline; gap: 0.5rem; font-size: 0.95rem; }

.coverage-node { margin: 0.3rem 0; }
.coverage-node--oblast { margin-left: 1.4rem; }
.coverage-node--sub { margin-left: 2.6rem; }
.coverage-node__toggle {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}
.coverage-node__toggle::-webkit-details-marker { display: none; }
.coverage-node__caret { color: var(--ink-faint); width: 1rem; flex: none; }
.coverage-node__caret::before { content: "\25B8"; }               /* ▸ */
.coverage-node[open] > .coverage-node__toggle .coverage-node__caret::before { content: "\25BE"; } /* ▾ */

.coverage-list__covers-box { margin-top: 0.2rem; }
.coverage-list__covers-toggle {
    list-style: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-family: var(--font-mono);
    color: var(--covered);
}
.coverage-list__covers-toggle::-webkit-details-marker { display: none; }
.coverage-list__covers-toggle::before { content: "\25B8 "; }
.coverage-list__covers-box[open] > .coverage-list__covers-toggle::before { content: "\25BE "; }

.year-bar__opts { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin-left: 0.5rem; }
.coverage-node__title { flex: 1; }
.coverage-node--area > .coverage-node__toggle {
    font-weight: 600;
    border-bottom: 2px solid var(--blue);
    color: var(--blue-deep);
}
.coverage-node--oblast > .coverage-node__toggle {
    font-weight: 600;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.95rem;
}
.coverage-node--sub > .coverage-node__toggle { color: var(--ink-soft); font-size: 0.95rem; }

.coverage-list { list-style: none; margin: 0.2rem 0 0.75rem; padding: 0 0 0 1.4rem; }
.coverage-list__item {
    margin: 0.3rem 0;
    padding: 0.4rem 0 0.4rem 0.75rem;
    border-left: 2px solid var(--hairline);
}
.coverage-list__item.is-covered { border-left-color: var(--covered); }
.coverage-list__item.is-gap { border-left-color: var(--gap); background: var(--gap-wash); }
.coverage-list__grade {
    color: var(--ink-faint);
    font-size: 0.8rem;
    margin-left: 0.4rem;
    white-space: nowrap;
}
.coverage-list__covers { list-style: none; margin: 0.25rem 0 0; padding: 0 0 0 1rem; font-size: 0.9rem; }
.coverage-list__covers li { color: var(--ink-soft); }
.coverage-list__none { font-size: 0.85rem; color: var(--gap); font-family: var(--font-mono); }

.gsection {
    margin-left: calc(var(--depth, 0) * 1.5rem);
    border-left: 2px solid var(--hairline);
    padding-left: 0.9rem;
    margin-top: 0.5rem;
}
.gsection__row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.gsection__title { font-weight: 600; flex: 1; min-width: 12rem; }
.gsection__actions { display: inline-flex; gap: 0.75rem; align-items: baseline; }
.gsection__content, .gsection__add { margin-top: 0.5rem; }
.gsection__add { display: flex; gap: 0.5rem; align-items: baseline; }

/* browse: filter bar */
.rvp-filter { margin: 1.25rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.rvp-filter .field__input { max-width: 28rem; }
.rvp-filter__grades { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* ŠVP overview: filter row + inline edit */
.rvp-filter--row { flex-flow: row wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.rvp-filter__field { display: flex; flex-direction: column; gap: 0.2rem; }
.rvp-filter__field .field__input { max-width: none; min-width: 12rem; }
.rvp-filter__field--grow { flex: 1 1 16rem; }
.rvp-filter__field--grow .field__input { width: 100%; }
.rvp-filter__field--checkbox { flex-direction: row; align-items: center; gap: 0.4rem; }

/* RVP browser: the filter bar stays visible under the masthead while scrolling */
@media (min-width: 48rem) {
    .rvp-filter--sticky {
        position: sticky;
        top: var(--bar-h, 5rem);
        z-index: 20;
        margin-top: 0;
        padding: 0.75rem 0 0.9rem;
        background: var(--paper);
        border-bottom: 1px solid var(--hairline);
    }
}

.rvp-browse__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); margin-bottom: 0.75rem; }

.svp-overview__hint { margin: 0.5rem 0; }
.svp-overview__count { margin: 0.25rem 0 1rem; font-size: var(--step--1); }
.svp-overview__subjects {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.35rem 1.25rem;
}
/* plain inline flow, so the count follows the end of a name even when it wraps */
.svp-overview__subjects li { display: block; }
.svp-overview__subjects .badge { display: inline-block; margin-left: 0.5rem; color: var(--ink-soft); }
.nowrap { white-space: nowrap; }

.pill {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--hairline);
    background: var(--paper-raised);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
}
.pill.is-on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* browse: the tree */
.tree { border-top: 1px solid var(--hairline); }
/* jump targets for the "Části RVP" rail — small gap on top of the global
   scroll-padding-top (var(--bar-h)) that already clears the sticky masthead */
.tree__area[id], .tree__group[id] { scroll-margin-top: 0.75rem; }
.tree__area > .tree__toggle,
.tree__group > .tree__toggle,
.tree__sub > .tree__toggle {
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 0.6rem 0;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}
.tree__area > .tree__toggle { font-weight: 600; }
.tree__sub { margin-left: 1.4rem; }
.tree__sub > .tree__toggle { color: var(--ink-soft); font-size: 0.95rem; }
.tree__caret { color: var(--ink-faint); width: 1rem; flex: none; }
.tree__kind { margin-left: auto; font-size: 0.78rem; }
.tree__empty { margin: 0.5rem 0 0.75rem 1.4rem; }

/* vzdělávací oblast / obor — collapsible grouping headings inside "Vzdělávací oblasti" */
.tree__group > .tree__toggle--oblast {
    margin: 0.75rem 0 0 1.4rem;
    padding: 0.5rem 0 0.4rem;
    width: auto;
    border-bottom: 2px solid var(--blue);
    font-weight: 600;
    color: var(--blue-deep);
}
.tree__group > .tree__toggle--field {
    margin: 0.5rem 0 0 2.6rem;
    padding: 0.5rem 0 0.4rem;
    width: auto;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue-deep);
}

/* plain "Bez vzdělávací oblasti" heading — not collapsible, no matching group */
.tree__oblast {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.75rem 0 0 1.4rem;
    padding: 0.5rem 0 0.4rem;
    border-bottom: 2px solid var(--blue);
    font-weight: 600;
    color: var(--blue-deep);
}
.tree__oblast--plain { border-bottom-color: var(--hairline); color: var(--ink-soft); font-weight: 500; }

.tree__sub--in-oblast { margin-left: 2.6rem; }
.tree__sub--in-field { margin-left: 3.8rem; }

.tree__outcomes { list-style: none; margin: 0.25rem 0 0.75rem; padding: 0 0 0 2.8rem; }
.tree__outcome {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--hairline);
}
.tree__outcome.is-selected { background: var(--blue-wash); }
.tree__text { flex: 1; color: var(--ink-soft); }

/* rendered markdown (browse view) */
.md :is(h1, h2, h3) { font-family: var(--font-display); }
.md p { margin: 0 0 0.75rem; }
.md ul, .md ol { margin: 0 0 0.75rem 1.25rem; }
.md code { background: var(--blue-wash); padding: 0.05rem 0.3rem; border-radius: 2px; }

/* ---------- schools ---------- */

.school-list { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; }
.school-list li { border-top: 1px solid var(--hairline); }
.school-list li:last-child { border-bottom: 1px solid var(--hairline); }

.school-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.9rem 0;
    text-decoration: none;
    color: var(--ink);
}
.school-card__head { display: flex; align-items: baseline; gap: 0.75rem; }
.school-card__name { font-weight: 600; font-size: 1.05rem; }
.school-card:hover .school-card__name { color: var(--blue-deep); }
.school-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.school-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--ink-faint);
}

.school-bar {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin: 0 0 1.5rem;
}
.school-bar a { color: var(--ink-soft); }
.school-bar a:hover { color: var(--blue-deep); }
.school-bar .badge { margin-left: 0.5rem; }

.school-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 1rem 0 1.75rem;
    font-size: 0.95rem;
}
.school-facts dt { color: var(--ink-soft); }
.school-facts dd { margin: 0; }

/* ---------- admin portal ---------- */

.admin-tiles {
    display: grid;
    gap: 0.9rem;
    margin: 1.5rem 0;
    max-width: 36rem;
}
.admin-tile {
    display: block;
    padding: 1rem 1.15rem;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--blue);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--paper-raised);
    text-decoration: none;
    color: var(--ink);
    transition: border-left-color 0.12s ease;
}
.admin-tile:hover { border-left-color: var(--blue-hover); }
.admin-tile__title { display: block; font-weight: 600; }
.admin-tile__desc { display: block; margin-top: 0.25rem; font-size: 0.9rem; color: var(--ink-soft); }

.admin-comp-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

/* e-mail template editor: form + live preview side by side */
.email-tpl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}
.email-tpl__preview iframe {
    width: 100%;
    height: 640px;
    border: 1px solid var(--hairline);
    background: #fff;
}
@media (max-width: 60rem) {
    .email-tpl { grid-template-columns: 1fr; }
}

/* ---------- ŠVP readiness checklist ---------- */
.readiness__score { margin: 1rem 0 1.25rem; }
.readiness__mark { white-space: nowrap; width: 1%; }
.readiness td .muted { font-size: 0.85rem; margin-top: 0.15rem; }

/* ---------- RVP browser: section rail + filters ---------- */

/* The rail rides in the left margin, left of the blue spine — .page-rail
   (see "page action rail" above) reserves that column and shifts the spine.
   .page-rail anchors to the top; we span the page so the inner list can stick. */
.rvp-browse__rail {
    position: absolute;
    inset: 0 auto 0 var(--rail-inset);
    width: var(--rail-w);
}
.rvp-browse__rail-inner {
    position: sticky;
    top: calc(var(--bar-h, 5rem) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    max-height: calc(100vh - var(--bar-h, 5rem) - 2rem);
    overflow-y: auto;
}

/* narrow: .page-rail would fold into a horizontal row — a long section list
   doesn't work that way, so drop it (the filters still scope the tree) */
@media (max-width: 48rem) {
    .rvp-browse__rail { display: none; }
}

/* sub-areas (vzdělávací oblasti) under "Vzdělávací oblasti" */
.rvp-browse__rail .side-nav__link { font-size: 0.88rem; padding: 0.22rem 0; }

/* ---------- motion / a11y ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- legal pages (obchodní podmínky, ochrana osobních údajů) ---------- */

.legal {
    max-width: 42rem;
}

.legal h2 {
    font-size: 1.15rem;
    margin: 2rem 0 0.6rem;
}

.legal p {
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 0.9rem;
}

.legal__list {
    margin: 0 0 0.9rem;
    padding-left: 1.2rem;
    line-height: 1.6;
    color: var(--ink-soft);
}
.legal__list li {
    margin-bottom: 0.4rem;
}

.legal__meta { font-size: 0.9rem; color: var(--ink-faint); margin-bottom: 1.5rem; }
.legal__toc {
    margin: 0 0 2rem;
    padding: 0.9rem 1.1rem 0.9rem 2.2rem;
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    line-height: 1.7;
    columns: 2 14rem;
}
.legal__clause { display: flex; gap: 0.6rem; }
.legal__clause > span:first-child {
    flex: none;
    min-width: 2.2rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.85;
    color: var(--ink-faint);
}
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.92rem; }
.legal th, .legal td {
    text-align: left;
    vertical-align: top;
    padding: 0.55rem 0.6rem 0.55rem 0;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink-soft);
    line-height: 1.5;
}
.legal th { color: var(--ink); font-weight: 600; }
.legal-scroll { overflow-x: auto; }
.legal-todo { background: var(--amber-wash); color: var(--amber); padding: 0 0.2em; border-radius: 2px; }

/* Pointer from the RVP browser to the binding text on prohlednout.rvp.cz. */
.rvp-official {
    max-width: 40rem;
    margin: -0.25rem 0 1.5rem;
    padding-left: 0.9rem;
    border-left: var(--rule-w) solid var(--hairline);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* ---------- side navigation in the margin (school, RVP, profile, homepage) ---------- */

.side-nav .page-rail__inner { gap: 0; }
/* group headings are set like the page headings (Fraunces), so they read as
   chapter titles over the plain links beneath them */
.side-nav__group {
    display: block;
    margin: 1.6rem 0 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
    text-decoration: none;
}
.side-nav__group:first-child { margin-top: 0; }
a.side-nav__group:hover { color: var(--blue-deep); }
/* a heading with no links under it (e.g. RVP "Klíčové kompetence") doesn't need a
   whole group's worth of space before the next heading */
.side-nav__group + .side-nav__group { margin-top: 0.7rem; }
.side-nav__link {
    position: relative;
    display: block;
    padding: 0.32rem 0;
    font-size: 0.93rem;
    line-height: 1.3;
    color: var(--ink-soft);
    text-decoration: none;
}
.side-nav__link:hover { color: var(--ink); }
.side-nav__link.is-current,
.side-nav__link.active { color: var(--ink); font-weight: 600; }
/* the current page is marked where the link meets the red margin line */
.side-nav__link.is-current::after,
.side-nav__link.active::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% + var(--rail-gap) * 0.5 + var(--rule-w) * 0.5 - 0.25rem);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--brand-red);
    transform: translateY(-50%);
}

/* page actions ("Přidat výstup", "Stáhnout PDF"): top right, in the breadcrumb's row */
.school-actions {
    position: absolute;
    top: clamp(1.75rem, 5vw, 3.25rem);
    right: clamp(1.15rem, 5vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: 55%;
}
.school-actions:empty { display: none; }
.school-actions .page-rail__item { width: auto; padding: 0.45rem 0.9rem; }
.school-bar { min-height: 2.2rem; }

@media (max-width: 48rem) {
    .side-nav .page-rail__inner { flex-direction: row; flex-wrap: wrap; gap: 0.2rem 1rem; }
    .side-nav__group { display: none; }
    .side-nav__link.is-current { text-decoration: underline 2px var(--brand-red); text-underline-offset: 0.3em; }
    .side-nav__link.is-current::after,
.side-nav__link.active::after { display: none; }
    .school-actions { position: static; justify-content: flex-start; max-width: none; margin: 0 0 1.25rem; }
    .school-bar { min-height: 0; }
}

/* ---------- Obsah ŠVP (school home): the document's table of contents ---------- */

.svp-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 46rem;
    margin: 1.25rem 0 2rem;
}
.svp-progress__text { margin: 0; white-space: nowrap; }
.svp-progress__bar { flex: 1; height: 0.4rem; border-radius: 0.2rem; background: var(--hairline); overflow: hidden; }
.svp-progress__bar span { display: block; height: 100%; background: var(--covered); }

.svp-toc { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.svp-toc__chapter + .svp-toc__chapter { margin-top: 1.9rem; }
.svp-toc__heading {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin: 0 0 0.4rem;
    font-size: 1.3rem;
}
.svp-toc__num { min-width: 1.1rem; color: var(--ink-faint); }
.svp-toc__items { list-style: none; margin: 0; padding: 0 0 0 2rem; }
.svp-toc__row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0 -0.55rem;
    padding: 0.42rem 0.55rem;
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}
.svp-toc__row:hover { background: var(--blue-wash); }
.svp-toc__row:hover .svp-toc__title { color: var(--blue-deep); }
/* dotted leader from the title to its state, as in a printed contents page */
.svp-toc__title { flex: 1; display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; }
.svp-toc__title::after {
    content: "";
    flex: 1;
    min-width: 1.5rem;
    border-bottom: 2px dotted var(--field-line);
    transform: translateY(-0.28em);
}
.svp-toc__state { font-size: 0.88rem; white-space: nowrap; }
.svp-toc__state.is-done { color: var(--covered); }
.svp-toc__state.is-missing { color: var(--gap); }
.svp-toc__state.is-optional { color: var(--ink-faint); }
.svp-toc__note { margin: -0.15rem 0 0.35rem; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------- one ŠVP chapter (SvpChapter) ---------- */

.chapter-crumb { margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--ink-soft); }
.chapter-crumb a { color: var(--ink-soft); }
.chapter-crumb a:hover { color: var(--blue-deep); }
.chapter-title__opt {
    margin-left: 0.6rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-faint);
    vertical-align: middle;
}
.chapter-edit { max-width: 46rem; }
.chapter-edit__text.field__input {
    min-height: 24rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--field-line);
    border-radius: var(--radius);
    background: var(--paper-raised);
    font-size: 1rem;
    line-height: 1.65;
    resize: vertical;
}
.chapter-edit__text.field__input:focus { border-color: var(--blue); }
.chapter-edit__actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.chapter-edit__status { font-size: 0.88rem; color: var(--ink-soft); }
.chapter-read { max-width: 40rem; }
.chapter-read p { line-height: 1.7; }
.chapter-pager {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 46rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hairline);
}
.chapter-pager a { display: flex; flex-direction: column; gap: 0.15rem; max-width: 48%; color: var(--ink); text-decoration: none; }
.chapter-pager a:hover { color: var(--blue-deep); }
.chapter-pager__next { margin-left: auto; text-align: right; }
.chapter-pager__dir { font-size: 0.8rem; color: var(--ink-faint); }

/* ---------- destructive settings (Údaje školy → Smazat školu) ---------- */

.danger-zone {
    max-width: 40rem;
    margin-top: 3rem;
    padding: 1.1rem 1.25rem 1.25rem;
    border-left: 3px solid var(--gap);
    background: var(--gap-wash);
}
.danger-zone h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.danger-zone p { margin: 0 0 0.9rem; color: var(--ink-soft); }

/* ---------- admin: "view as a regular user" switch ---------- */

.test-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: 52rem;
    margin: 0 0 2rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--field-line);
    background: var(--paper-raised);
}
.test-mode.is-on { border-left-color: var(--amber); background: var(--amber-wash); }
.test-mode__text { flex: 1 1 28rem; }
.test-mode h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.test-mode p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.test-mode .test-mode__state { margin-top: 0.5rem; color: var(--amber); font-weight: 600; }
.test-mode-note a { margin-left: 0.35rem; }

/* ---------- minimální výstupy (SchoolOutcome.IsMinimum) ----------
   Their own colour — teal — kept apart from the coverage colours (green/red)
   so "minimální" never reads as "pokryto" or "chybí". The PDF uses the same hue. */

:root { --minimum: #0f6e80; --minimum-wash: rgba(15, 110, 128, 0.08); }
@media (prefers-color-scheme: dark) { :root { --minimum: #5cc3d6; --minimum-wash: rgba(92, 195, 214, 0.12); } }

.badge--minimum { background: var(--minimum-wash); color: var(--minimum); margin-right: 0.4rem; }
.rvp-table tr.is-minimum > td:first-child { box-shadow: inset 3px 0 0 var(--minimum); }
.rvp-table tr.is-minimum { background: var(--minimum-wash); }

/* a výstup's code sits right before its text in tables — keep a gap between them */
.rvp-table td > .code { margin-right: 0.45rem; }

/* ---------- výstup editor (/skoly/{id}/vystupy/{id}) ----------
   The výstup is written on the exercise book's ruled lines; the sheet's margin
   rule is the brand blue, and turns teal (--minimum) for a minimální výstup, so
   the kind being edited is visible at a glance. */

.oe-sheet {
    container-type: inline-size;
    margin: 1.25rem 0 2.5rem;
    padding: 1.1rem 1.4rem 1.25rem;
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.oe-sheet.is-minimum { border-left-color: var(--minimum); }

.oe-text {
    --line: 1.7em;
    display: block;
    width: 100%;
    min-height: calc(var(--line) * 3);
    margin: 0 0 1.1rem;
    padding: 0 0.2rem;
    border: 0;
    border-radius: 0;
    resize: vertical;
    font-family: var(--font-body);
    font-size: var(--step-1);
    line-height: var(--line);
    color: var(--ink);
    background-color: transparent;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent calc(var(--line) - 1px),
        var(--field-line) calc(var(--line) - 1px), var(--field-line) var(--line));
    background-attachment: local;
}
.oe-text:focus {
    outline: none;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent calc(var(--line) - 1px),
        var(--blue) calc(var(--line) - 1px), var(--blue) var(--line));
}
.oe-sheet.is-minimum .oe-text:focus {
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent calc(var(--line) - 1px),
        var(--minimum) calc(var(--line) - 1px), var(--minimum) var(--line));
}
.oe-text--read { min-height: 0; white-space: pre-line; }

.oe-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 2rem;
    margin-bottom: 1rem;
}
.oe-field { min-width: 0; }
.oe-field--code { max-width: 14rem; }
.oe-field--grade { grid-column: 1 / -1; }
/* A wide sheet takes ročník, druh and kód in one row. */
@container (min-width: 52rem) {
    .oe-meta { grid-template-columns: max-content minmax(0, 1fr) minmax(10rem, 14rem); }
    .oe-field--grade { grid-column: auto; }
    .oe-field--code { max-width: none; }
}
/* Předměty as an aligned grid — easier to scan than a ragged wrap of 30+ names. */
.oe-sheet .subject-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.35rem 1.25rem;
}
@media (max-width: 40rem) {
    .oe-sheet { padding: 0.9rem 1rem 1rem; }
    .oe-meta { grid-template-columns: minmax(0, 1fr); }
}

.oe-grades { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.oe-grades .pill { min-width: 2.4rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.pill:disabled { cursor: default; }
.pill:disabled:not(.is-on) { opacity: 0.55; }

/* Běžný / Minimální — a two-way switch, teal when minimální is on */
.oe-kind {
    display: inline-flex;
    border: 1px solid var(--field-line);
    border-radius: var(--radius);
    overflow: hidden;
}
.oe-kind__opt {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    padding: 0.45rem 0.95rem;
    background: transparent;
    font: 600 0.9rem var(--font-body);
    color: var(--ink-soft);
    cursor: pointer;
}
.oe-kind__opt + .oe-kind__opt { border-left: 1px solid var(--field-line); }
.oe-kind__opt:hover:not(:disabled):not(.is-on) { background: var(--blue-wash); color: var(--ink); }
.oe-kind__opt.is-on { background: var(--blue); color: #fff; }
.oe-kind__opt--minimum.is-on { background: var(--minimum); }
.oe-kind__opt:disabled { cursor: default; }
.oe-kind__help { margin: 0.4rem 0 0; font-size: 0.84rem; line-height: 1.45; color: var(--ink-soft); }
.oe-subjects-read { margin: 0; }

.oe-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--hairline);
}
.oe-actions .btn:disabled { opacity: 0.45; cursor: default; }
.oe-status { font-size: 0.86rem; }
.oe-status--dirty { color: var(--amber); }
.oe-status--saved { color: var(--covered); }
.oe-actions__delete { margin-left: auto; }

.oe-links { max-width: none; }
.oe-links h2 { margin-bottom: 0.3rem; }
.oe-links__hint { margin: 0 0 0.8rem; font-size: 0.9rem; }
.oe-links__empty { margin: 0 0 0.8rem; color: var(--gap); font-size: 0.92rem; }
.oe-links__ops { display: inline-flex; gap: 0.8rem; }
.oe-links__pick { font-size: var(--step-1); margin: 1.6rem 0 0.4rem; }

.rvp-links__add { margin-left: 0.5rem; font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
    .oe-sheet { transition: none; }
}

/* RVP picker opened on the výstup's obor */
.rvp-picker__scope {
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.7rem;
    border-left: 2px solid var(--blue);
    background: var(--blue-wash);
    font-size: 0.9rem;
}

/* editor: where this výstup sits in the list the teacher came from */
.oe-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.3rem 1.2rem;
    margin: 0.75rem 0 -0.5rem;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.oe-nav__where { margin: 0; }
.oe-nav__go { display: inline-flex; gap: 1.1rem; }
.linklike:disabled { opacity: 0.5; cursor: default; }

/* Pokrytí RVP: předměty that develop a PT / KK / ZG okruh per their charakteristika.
   Informational — shown in the neutral ink, apart from the green/red coverage data. */
.coverage-node__developed {
    margin: 0.2rem 0 0.5rem 1.6rem;
    padding: 0.35rem 0.6rem;
    border-left: 2px solid var(--blue);
    background: var(--blue-wash);
    font-size: 0.86rem;
    line-height: 1.5;
}
.coverage-node__developed-label { font-weight: 600; margin-right: 0.3rem; }
.coverage-node__developed-note { display: block; color: var(--ink-soft); }