/* /Components/Controls/DeliveryRoster.razor.rz.scp.css */
.dr[b-9rtelwizis] { margin: 0 0 1rem; }

.dr__h[b-9rtelwizis] {
    margin: 0 0 0.4rem; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--kc-muted, #666); font-weight: 700;
}

.dr__sum[b-9rtelwizis] { text-transform: none; letter-spacing: 0; font-weight: 500; color: #9ca3af; }

.dr__list[b-9rtelwizis] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; }

.dr__row[b-9rtelwizis] {
    display: flex; align-items: center; gap: 0.5rem; min-width: 0;
    padding: 0.3rem 0.4rem; border-radius: 6px; background: #f9fafb; font-size: 0.8rem;
}

/* The address is the long part: let it shrink and ellipsize so the state chip is never pushed out. */
.dr__addr[b-9rtelwizis] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dr__chan[b-9rtelwizis], .dr__meta[b-9rtelwizis] { flex: none; font-size: 0.68rem; color: #6b7280; }

.dr__why[b-9rtelwizis] {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.68rem; color: #b91c1c;
}

.dr__state[b-9rtelwizis] {
    flex: none; padding: 0.1rem 0.45rem; border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.65rem; font-weight: 700;
}

.dr__state--sent[b-9rtelwizis] { background: #d1fae5; color: #065f46; }
.dr__state--captured[b-9rtelwizis] { background: #e0f2fe; color: #075985; }
.dr__state--dropped[b-9rtelwizis] { background: #f3f4f6; color: #6b7280; }
.dr__state--failed[b-9rtelwizis] { background: #fee2e2; color: #991b1b; }
.dr__state--pending[b-9rtelwizis] { background: #fef3c7; color: #92400e; }
.dr__state--suppressed[b-9rtelwizis] { background: #ffedd5; color: #9a3412; }
/* /Components/Controls/KcCertificate.razor.rz.scp.css */
/* The certificate itself. Deliberately plain: a border, a lot of white, and one typographic step down
   from the person's name to the course. Anything more decorative reads as a template rather than a
   record, which is the opposite of what somebody hands an inspector. */
.in-cert[b-mb3vzdgb7r] {
    position: relative; overflow: hidden;
    padding: 3rem 3.5rem; border: 1px solid #d1d5db; border-radius: 4px; background: #fff;
    text-align: center; color: #1f2937;
}

.in-cert__head[b-mb3vzdgb7r] { margin-bottom: 2.5rem; }
.in-cert__brand[b-mb3vzdgb7r] {
    display: block; margin-bottom: 0.6rem;
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    color: #6b7280;
}
.in-cert__head h1[b-mb3vzdgb7r],
.in-cert__head h2[b-mb3vzdgb7r] {
    margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.02em;
}

.in-cert__lead[b-mb3vzdgb7r] { margin: 0; font-size: 0.9rem; color: #6b7280; }
.in-cert__person[b-mb3vzdgb7r] { margin: 0.5rem 0 1.6rem; font-size: 1.9rem; font-weight: 600; }
.in-cert__course[b-mb3vzdgb7r] { margin: 0.5rem 0 2.5rem; font-size: 1.3rem; font-weight: 600; }

.in-cert__facts[b-mb3vzdgb7r] {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem;
    margin: 0 0 2.5rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; text-align: left;
}
.in-cert__facts dt[b-mb3vzdgb7r] {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280;
}
.in-cert__facts dd[b-mb3vzdgb7r] { margin: 0.15rem 0 0; font-size: 0.95rem; font-variant-numeric: tabular-nums; }

.in-cert__foot[b-mb3vzdgb7r] { display: flex; flex-direction: column; gap: 0.4rem; }
.in-cert__ref[b-mb3vzdgb7r] {
    font-family: ui-monospace, monospace; font-size: 0.78rem; letter-spacing: 0.08em; color: #6b7280;
}
/* The small print in the grey of the reference above it: #9ca3af was 2.5:1 on the white sheet (axe, 2026-10-11). */
.in-cert__note[b-mb3vzdgb7r] { font-size: 0.72rem; color: #6b7280; }

/* ---- a certificate that is not one ----
   Across the sheet, not in a corner: a cropped screenshot of a preview must still say what it is. */
.in-cert--preview[b-mb3vzdgb7r] { border-style: dashed; border-color: #f59e0b; }
.in-cert--preview .in-cert__person[b-mb3vzdgb7r] { color: #9ca3af; font-style: italic; }
.in-cert__watermark[b-mb3vzdgb7r] {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.in-cert__watermark span[b-mb3vzdgb7r] {
    transform: rotate(-16deg);
    padding: 0.4rem 1.2rem; border: 3px solid rgba(217, 119, 6, 0.35); border-radius: 6px;
    font-size: clamp(1.1rem, 3.4vw, 2.2rem); font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; white-space: nowrap; color: rgba(217, 119, 6, 0.35);
}

@media print {
    .in-cert[b-mb3vzdgb7r] { border: 0; padding: 2rem 0; }
}
/* /Components/Controls/KcContentReport.razor.rz.scp.css */
/* "Säg till" (LE-10). Quiet until it is wanted: a small link at the end of a block or question, opening into
   a sheet in the page — not a modal, so the paper stays where the learner left it. Touch targets are 44 px
   on a phone (Visual-Guidelines §10, --kc-touch-min). */

.kcr[b-selfov2078] {
    display: flex; flex-direction: column; align-items: flex-end;
    margin-top: 0.45rem;
}

.kcr-open[b-selfov2078] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    min-height: 2.25rem; padding: 0 0.4rem;
    border: 0; border-radius: 6px; background: none; cursor: pointer;
    color: #6b7280; font-size: 0.78rem;
}
.kcr-open:hover[b-selfov2078], .kcr-open:focus-visible[b-selfov2078] { color: #1f2937; background: #f3f4f6; }

.kcr-sheet[b-selfov2078] {
    align-self: stretch;
    display: flex; flex-direction: column; gap: 0.6rem;
    padding: 0.8rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb;
}

.kcr-head[b-selfov2078] { margin: 0; font-size: 0.9rem; font-weight: 600; color: #1f2937; outline: none; }

.kcr-reasons[b-selfov2078] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }

.kcr-reason[b-selfov2078] {
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 2.75rem; padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff; cursor: pointer;
    font-size: 0.84rem; color: #1f2937;
}
.kcr-reason.is-picked[b-selfov2078] { border-color: var(--kc-navy, #324158); background: #eef2ff; }
.kcr-reason input[b-selfov2078] { flex: none; margin: 0; }
.kcr-reason small[b-selfov2078] { display: block; color: #6b7280; font-size: 0.74rem; }

.kcr-note[b-selfov2078] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.84rem; color: #374151; }
.kcr-note small[b-selfov2078] { color: #6b7280; }
.kcr-note textarea[b-selfov2078] {
    width: 100%; box-sizing: border-box; resize: vertical;
    padding: 0.45rem 0.55rem; border: 1px solid #d1d5db; border-radius: 8px;
    font: inherit; font-size: 0.88rem; background: #fff;
}
.kcr-count[b-selfov2078] { align-self: flex-end; }

.kcr-privacy[b-selfov2078] { margin: 0; font-size: 0.76rem; color: #6b7280; line-height: 1.45; }

.kcr-error[b-selfov2078] { margin: 0; padding: 0.45rem 0.6rem; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 0.82rem; }
.kcr-error:focus[b-selfov2078] { outline: none; }
.kcr-error:focus-visible[b-selfov2078] { outline: 2px solid #991b1b; outline-offset: 2px; }

.kcr-actions[b-selfov2078] { display: flex; gap: 0.5rem; justify-content: flex-end; }

.kcr-send[b-selfov2078], .kcr-cancel[b-selfov2078] {
    min-height: 2.5rem; padding: 0 1rem; border-radius: 8px; cursor: pointer;
    font-size: 0.84rem; font-weight: 600;
}
.kcr-send[b-selfov2078] { border: 0; background: var(--kc-navy, #324158); color: #fff; }
.kcr-send:disabled[b-selfov2078] { opacity: 0.5; cursor: default; }
.kcr-cancel[b-selfov2078] { border: 1px solid #d1d5db; background: #fff; color: #374151; }

/* The live region the thanks is written into. Always in the page — empty, it takes no room — because one
   inserted already holding its words is not reliably read out. Never display:none: that takes it out of the
   accessibility tree, which is the same as inserting it. */
.kcr-status[b-selfov2078] { display: flex; justify-content: flex-end; }

.kcr-thanks[b-selfov2078] {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem;
    margin: 0; padding: 0.3rem 0.55rem; border-radius: 8px;
    background: #dcfce7; color: #166534; font-size: 0.8rem;
}
.kcr-thanks small[b-selfov2078] { color: #166534; opacity: 0.85; }
/* Focus lands here after sending (the button that had it is gone): visible to a keyboard user, quiet to a
   finger. */
.kcr-thanks:focus[b-selfov2078] { outline: none; }
.kcr-thanks:focus-visible[b-selfov2078] { outline: 2px solid #166534; outline-offset: 2px; }

@media (max-width: 640px) {
    .kcr-open[b-selfov2078] { min-height: 2.75rem; }
    .kcr-reasons[b-selfov2078] { grid-template-columns: 1fr; }
    .kcr-actions[b-selfov2078] { flex-direction: column-reverse; align-items: stretch; }
    .kcr-send[b-selfov2078], .kcr-cancel[b-selfov2078] { min-height: 2.75rem; }
}
/* /Components/Controls/KcContentReportInbox.razor.rz.scp.css */
/* "Learner reports" (LE-10) in the course editor: the same card as the editor's own sections, so it reads as
   part of the page, and a list that fills the width (Visual-Guidelines §12: density follows the viewport). */

.kcri[b-cn4mr0vt4l] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    overflow: hidden; margin-bottom: 0.9rem;
    scroll-margin-top: 5rem;
}

.kcri-sec[b-cn4mr0vt4l] {
    padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.kcri-sec h2[b-cn4mr0vt4l] {
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158);
    display: flex; align-items: center; gap: 0.6rem;
}
/* Focus lands on the heading when the last row under the filter was handled. */
.kcri-sec h2:focus[b-cn4mr0vt4l] { outline: none; }
.kcri-sec h2:focus-visible[b-cn4mr0vt4l] { outline: 2px solid var(--kc-navy, #324158); outline-offset: 3px; border-radius: 4px; }
.kcri-hint[b-cn4mr0vt4l] { margin: 0.35rem 0 0; font-size: 0.82rem; color: #6b7280; max-width: 70ch; }

.kcri-count[b-cn4mr0vt4l] {
    padding: 0.1rem 0.5rem; border-radius: 999px; background: #e5e7eb; color: #374151;
    font-size: 0.72rem; font-weight: 600;
}
.kcri-count.is-new[b-cn4mr0vt4l] { background: #fef3c7; color: #92400e; }

.kcri-body[b-cn4mr0vt4l] { padding: 0.9rem 1.1rem; }
.kcri-muted[b-cn4mr0vt4l] { margin: 0; font-size: 0.84rem; color: #6b7280; }
.kcri-error[b-cn4mr0vt4l] {
    margin: 0 0 0.7rem; padding: 0.5rem 0.7rem; border-radius: 8px; background: #fef2f2; color: #991b1b;
    font-size: 0.84rem;
}

.kcri-filter[b-cn4mr0vt4l] { display: flex; gap: 0.35rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.kcri-tab[b-cn4mr0vt4l] {
    padding: 0.3rem 0.75rem; border: 1px solid #d1d5db; border-radius: 999px; background: #fff;
    color: #374151; font-size: 0.8rem; cursor: pointer;
}
.kcri-tab.is-on[b-cn4mr0vt4l] { border-color: var(--kc-navy, #324158); background: var(--kc-navy, #324158); color: #fff; }

.kcri-list[b-cn4mr0vt4l] { list-style: none; margin: 0; padding: 0; }
.kcri-item[b-cn4mr0vt4l] {
    display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: start;
    padding: 0.7rem 0; border-top: 1px solid #f3f4f6;
}
.kcri-item:first-child[b-cn4mr0vt4l] { border-top: 0; }
.kcri-item.is-handled[b-cn4mr0vt4l] { opacity: 0.75; }

.kcri-meta[b-cn4mr0vt4l] { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; color: #6b7280; }
.kcri-reason[b-cn4mr0vt4l] {
    align-self: flex-start; padding: 0.1rem 0.5rem; border-radius: 999px; font-weight: 600; font-size: 0.76rem;
}
.kcri-reason--wrong[b-cn4mr0vt4l] { background: #fee2e2; color: #991b1b; }
.kcri-reason--unclear[b-cn4mr0vt4l] { background: #fef3c7; color: #92400e; }
.kcri-reason--broken[b-cn4mr0vt4l] { background: #e0e7ff; color: #3730a3; }

.kcri-main[b-cn4mr0vt4l] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.kcri-where[b-cn4mr0vt4l] { font-size: 0.88rem; color: #1f2937; }
.kcri-what[b-cn4mr0vt4l] { font-size: 0.82rem; color: #4b5563; overflow-wrap: anywhere; }
.kcri-comment[b-cn4mr0vt4l] {
    margin: 0.25rem 0 0; padding: 0.35rem 0.6rem; border-left: 3px solid #d1d5db; background: #f9fafb;
    font-size: 0.84rem; color: #1f2937; white-space: pre-wrap; overflow-wrap: anywhere;
}
.kcri-from[b-cn4mr0vt4l] { font-size: 0.78rem; color: #6b7280; }

.kcri-act[b-cn4mr0vt4l] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.kcri-done[b-cn4mr0vt4l] { font-size: 0.78rem; color: #166534; text-align: right; }
.kcri-btn[b-cn4mr0vt4l] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #324158); color: #fff;
    padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kcri-btn--ghost[b-cn4mr0vt4l] { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.kcri-btn:disabled[b-cn4mr0vt4l] { opacity: 0.5; cursor: default; }

@media (max-width: 760px) {
    .kcri-item[b-cn4mr0vt4l] { grid-template-columns: minmax(0, 1fr); }
    .kcri-meta[b-cn4mr0vt4l] { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
    .kcri-act[b-cn4mr0vt4l] { align-items: flex-start; }
}
/* /Components/Controls/KcCourseList.razor.rz.scp.css */
.ub-h2[b-uliu66m2rl] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

/* A white sheet of the blue page frame (kc-blueframe__sheet): its own background, radius and shadow, and the frame's
   gap between it and the next block. */
.ub-courses[b-uliu66m2rl] { padding: 1rem; }
.ub-course[b-uliu66m2rl] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.6rem 0; border-bottom: 1px solid #f3f4f6;
}
.ub-course:last-of-type[b-uliu66m2rl] { border-bottom: 0; }
/* A finished course is a record, so its words step back — but not its links, which are why it is still
   listed and must stay readable (TR-69). */
.ub-course.is-done .ub-course__main[b-uliu66m2rl] { opacity: 0.7; }
.ub-course__main[b-uliu66m2rl] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ub-course__title[b-uliu66m2rl] { font-size: 0.95rem; font-weight: 600; color: #1f2937; }
.ub-course__meta[b-uliu66m2rl] { font-size: 0.78rem; color: #6b7280; }
.ub-course__right[b-uliu66m2rl] { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.ub-btn[b-uliu66m2rl] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    display: inline-block; text-decoration: none; /* "Fortsätt" is a link dressed as a button */
}
.ub-btn:disabled[b-uliu66m2rl] { opacity: 0.5; cursor: default; }

/* The three below are also the shelf's, on /utbildning. Scoped CSS reaches only the component that
   declares it, so the card carries its own copy rather than rendering unstyled. */
.ub-badge[b-uliu66m2rl] {
    padding: 0.15rem 0.55rem; border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.ub-badge.is-ok[b-uliu66m2rl] { background: #ecfdf5; color: #065f46; }
.ub-badge.is-open[b-uliu66m2rl] { background: #f1f5f9; color: #334155; }

/* Not ThemeBlue: #7AC0DA on white is 2:1, and these links are the way back to a finished course and its
   certificate. A deep blue reads at better than 6:1. */
.ub-link[b-uliu66m2rl] { font-size: 0.8rem; color: #1d4ed8; text-decoration: none; white-space: nowrap; }
.ub-link:hover[b-uliu66m2rl] { text-decoration: underline; }

.ub-note[b-uliu66m2rl] { margin-top: 1rem; font-size: 0.78rem; color: #9ca3af; max-width: 62ch; line-height: 1.5; }

/* ---- where the learner stands (TR-69) ---- */

.ub-course__state[b-uliu66m2rl] { font-size: 0.78rem; color: #374151; font-variant-numeric: tabular-nums; }

/* A bar beside the words, never instead of them: "Del 2 av 3 klar" is the signal, the bar repeats it. */
.ub-progress[b-uliu66m2rl] {
    display: block; width: min(14rem, 100%); height: 6px; margin-top: 0.2rem;
    border-radius: 999px; background: #e5e7eb; overflow: hidden;
}
.ub-progress__fill[b-uliu66m2rl] { display: block; height: 100%; border-radius: 999px; background: var(--kc-navy, #1f2937); }

/* Stuck: amber ("needs attention"), with a glyph and the words, never the colour alone. */
.ub-badge.is-blocked[b-uliu66m2rl] { background: #fef3c7; color: #92400e; }
.ub-course__why[b-uliu66m2rl] { font-size: 0.78rem; color: #92400e; max-width: 60ch; line-height: 1.45; }

/* A phone: the actions go under the course rather than squeezing it, and wrap rather than push the page
   sideways. */
@media (max-width: 600px) {
    .ub-course[b-uliu66m2rl] { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .ub-course__right[b-uliu66m2rl] { flex-wrap: wrap; flex: initial; gap: 0.5rem 0.9rem; }
    .ub-course__right .ub-btn[b-uliu66m2rl] { padding: 0.55rem 1.1rem; }
    .ub-link[b-uliu66m2rl] { padding: 0.35rem 0; }

    /* TR-50: every action on a course a finger wide — the buttons, and the links dressed as text. */
    .ub-btn[b-uliu66m2rl] {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: var(--kc-touch-min, 44px); min-width: var(--kc-touch-min, 44px);
    }
    .ub-link[b-uliu66m2rl] {
        display: inline-flex; align-items: center; min-height: var(--kc-touch-min, 44px);
        min-width: var(--kc-touch-min, 44px); font-size: 0.88rem;
    }
}

/* ---- the due day (TR-47) ---- */

/* "Klar senast 2026-11-01 · 3 dagar kvar": the date and the words carry it. Late adds a marked badge and a
   darker red line — the colour repeats what the words say. */
.ub-course__due[b-uliu66m2rl] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: #374151; font-variant-numeric: tabular-nums;
}
.ub-course__due.is-late[b-uliu66m2rl] { color: #991b1b; font-weight: 600; }
.ub-badge.is-late[b-uliu66m2rl] { background: #fee2e2; color: #991b1b; }
/* /Components/Controls/KcCoursePlayer.razor.rz.scp.css */
/* ---- ON THE BLUE PAGE FRAME (owner, 2026-10-15) ----
   The page is drawn on .kc-blueframe (kitcheck-design.css), a flex column that spaces its blocks 14px apart; the white
   blocks (.kc-blueframe__sheet) are the frame's own card, and what said something on the grey band says it in the
   frame's notice card. So nothing directly in the frame keeps the margin or the 1180px it had on the band. */

.kr-alert[b-jzyqb4x2v2] {
    padding: 0.6rem 0.8rem; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 0.9rem;
}

/* A page-level fault is the frame's red-edged notice; the pink box above stays for what is said inside the sheets. */
.kr-frame > .kr-alert[b-jzyqb4x2v2] {
    margin: 0; background: var(--kc-surface); font-size: 0.875rem;
    box-shadow: inset 3px 0 0 var(--kc-stop-edge), var(--kc-shadow-card);
}
/* What was pastel on the band is a pastel card on the blue: the frame's card shadow lifts it off the gradient. */
.kr-frame > .kr-result[b-jzyqb4x2v2], .kr-frame > .kr-resume[b-jzyqb4x2v2], .kr-frame > .kr-newer[b-jzyqb4x2v2], .kr-frame > .kr-done[b-jzyqb4x2v2] {
    margin: 0; max-width: none; box-shadow: var(--kc-shadow-card);
}

/* The way back: a link in the frame's notice card, as small and as far left as the words in it. */
.kr-back[b-jzyqb4x2v2] {
    align-self: flex-start; font-size: 0.875rem; color: #1d4ed8; text-decoration: none;
}
.kr-back:hover[b-jzyqb4x2v2] { text-decoration: underline; }

/* ---- ONE PART AT A TIME (owner, 2026-10-14) ----
   The list of parts and the part beside it. A computer shows the list as a column beside the part; below that width
   (a phone, a narrow window) one "Del 2 av 5" control opens it. There is one list in the page either way. */

.kr-course[b-jzyqb4x2v2] { margin: 0; scroll-margin-top: 5rem; }
.kr-pane[b-jzyqb4x2v2] { min-width: 0; }

.kr-steps[b-jzyqb4x2v2] { margin-bottom: 0.9rem; }
/* The control and the list are the frame's white sheets (kc-blueframe__sheet): its background, radius and shadow. */
.kr-steps__toggle[b-jzyqb4x2v2] {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    min-height: var(--kc-touch-min, 44px); padding: 0.3rem 1.1rem; border: 0;
    font: inherit; font-size: 0.95rem; font-weight: 600; color: #1f2937; text-align: left; cursor: pointer;
}
.kr-steps__all[b-jzyqb4x2v2] { margin-left: auto; font-size: 0.8rem; font-weight: 500; color: #4b5563; }
.kr-steps__chev[b-jzyqb4x2v2] { flex: none; color: #4b5563; transition: transform 0.15s; }
.kr-steps.is-open .kr-steps__chev[b-jzyqb4x2v2] { transform: rotate(180deg); }

.kr-steps__list[b-jzyqb4x2v2] {
    display: none; list-style: none; margin: 0.4rem 0 0; padding: 0; overflow: hidden;
}
.kr-steps.is-open .kr-steps__list[b-jzyqb4x2v2] { display: block; }
.kr-steps__list li + li[b-jzyqb4x2v2] { border-top: 1px solid #f1f5f9; }

.kr-step[b-jzyqb4x2v2] {
    display: flex; align-items: center; gap: 0.7rem;
    min-height: var(--kc-touch-min, 44px); padding: 0.45rem 0.9rem;
    font-size: 0.9rem; color: #1f2937; text-decoration: none;
}
a.kr-step:hover[b-jzyqb4x2v2] { background: #f8fafc; }
.kr-step__n[b-jzyqb4x2v2] {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid #cbd5e1;
    font-size: 0.78rem; font-weight: 700; color: #475569;
}
/* The title and how the part is doing: side by side where the row is wide (a phone's list), stacked in the column
   beside the part, where a long title would otherwise be squeezed into half of it. */
.kr-step__body[b-jzyqb4x2v2] { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.2rem 0.7rem; }
.kr-step__title[b-jzyqb4x2v2] { min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.kr-step .kr-badge[b-jzyqb4x2v2] { flex: none; }
.kr-step.is-done .kr-step__n[b-jzyqb4x2v2] { border-color: #16a34a; background: #dcfce7; color: #166534; }
.kr-step.is-locked[b-jzyqb4x2v2] { color: #6b7280; }
/* Where the learner is: a filled number and a wash behind the row — never colour alone, the row also says
   aria-current and the part's heading says "Del 2 av 5". */
.kr-step.is-here[b-jzyqb4x2v2] { background: #eff6ff; font-weight: 600; }
.kr-step.is-here .kr-step__n[b-jzyqb4x2v2] { border-color: var(--kc-navy, #1f2937); background: var(--kc-navy, #1f2937); color: #fff; }

.kr-section__of[b-jzyqb4x2v2] { font-weight: 500; color: #6b7280; }
.kr-section__head h3:focus:not(:focus-visible)[b-jzyqb4x2v2] { outline: none; }

/* The way to the part before and the part after: a white strip of its own, the frame's sheet, under the part. */
.kr-pager[b-jzyqb4x2v2] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: 0 0 0.9rem; padding: 0.6rem 0.8rem;
}
.kr-pager .kr-btn[b-jzyqb4x2v2] {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    min-height: var(--kc-touch-min, 44px); padding-inline: 1.1rem; text-decoration: none; color: #fff;
}
.kr-pager .kr-btn--ghost[b-jzyqb4x2v2] { background: #fff; color: #1f2937; box-shadow: inset 0 0 0 1px #cbd5e1; }
.kr-pager__next[b-jzyqb4x2v2] { margin-left: auto; }
.kr-pager__why[b-jzyqb4x2v2] { flex: 1 1 100%; margin: 0; text-align: right; font-size: 0.82rem; color: #4b5563; }

/* ---- IN SHORT STEPS (owner, 2026-10-15) ----
   A part is read one topic to a screen. "Steg 3 av 6" and what the step is about, with a thin strip under it that
   shows the same thing as a picture (the words say it; the strip is only for the eye). */
.kr-stephead-wrap[b-jzyqb4x2v2] { margin: 0.8rem 0 0; }
.kr-stephead[b-jzyqb4x2v2] { margin: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.kr-stephead:focus:not(:focus-visible)[b-jzyqb4x2v2] { outline: none; }
.kr-stephead__n[b-jzyqb4x2v2] { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #475569; }
.kr-stephead__title[b-jzyqb4x2v2] { font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: #1f2937; overflow-wrap: anywhere; }
.kr-stepbar[b-jzyqb4x2v2] { display: flex; gap: 3px; margin-top: 0.55rem; }
.kr-stepbar__seg[b-jzyqb4x2v2] { flex: 1 1 0; min-width: 0; height: 5px; border-radius: 3px; background: #e5e7eb; }
.kr-stepbar__seg.is-past[b-jzyqb4x2v2] { background: #93c5fd; }
.kr-stepbar__seg.is-here[b-jzyqb4x2v2] { background: var(--kc-navy, #1f2937); }

/* What is left of the part, on its last step: one line, each step that waits a link a finger wide. */
.kr-left[b-jzyqb4x2v2] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem;
    margin: 0 0 0.9rem; padding: 0.4rem 0.8rem; font-size: 0.86rem; color: #374151;
}
.kr-left__what[b-jzyqb4x2v2] { font-weight: 600; }
.kr-left__step[b-jzyqb4x2v2] {
    display: inline-flex; align-items: center; min-height: var(--kc-touch-min, 44px); padding: 0.2rem 0.85rem;
    border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #cbd5e1;
    color: #1d4ed8; text-decoration: none; line-height: 1.25;
}
a.kr-left__step:hover[b-jzyqb4x2v2] { background: #eff6ff; }
.kr-left__step.is-here[b-jzyqb4x2v2] { background: #f8fafc; color: #374151; }
.kr-left__here[b-jzyqb4x2v2] { margin-left: 0.3rem; color: #4b5563; }

/* A computer: the list beside the part, kept in view while the part is read. */
@media (min-width: 960px) {
    .kr-course[b-jzyqb4x2v2] { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
    /* 4px of room all round, taken back with a negative margin, so the list's sheet keeps its shadow: the column scrolls
       (overflow), and an overflow clips at its padding box. */
    .kr-steps[b-jzyqb4x2v2] { position: sticky; top: 5rem; margin: -4px; padding: 4px; max-height: calc(100vh - 6rem); overflow-y: auto; }
    .kr-steps__toggle[b-jzyqb4x2v2] { display: none; }
    .kr-steps__list[b-jzyqb4x2v2] { display: block; margin: 0; }
    .kr-step[b-jzyqb4x2v2] { padding-block: 0.6rem; }
    .kr-step__body[b-jzyqb4x2v2] { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
}

/* Narrower than that the "Del 2 av 5" control says where the learner is, so the heading says it to a screen reader only. */
@media (max-width: 959.98px) {
    .kr-section__of[b-jzyqb4x2v2] {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* ---- the course outline ---- */

/* The part is the frame's white sheet (kc-blueframe__sheet). --kr-pad is its side padding, which "Prova på" steps out of
   on a phone (below). A part that is done carries the frame's green edge, as an all-clear notice does; the words say it too. */
.kr-section[b-jzyqb4x2v2] { --kr-pad: 1.1rem; margin: 0 0 0.9rem; padding: 1rem var(--kr-pad); }
.kr-section.is-done[b-jzyqb4x2v2] { box-shadow: inset 3px 0 0 var(--kc-go-ink), var(--kc-shadow-card); }
.kr-section.is-locked[b-jzyqb4x2v2] { background: #fafafa; }

.kr-section__head[b-jzyqb4x2v2] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.kr-section__head h3[b-jzyqb4x2v2] { margin: 0; font-size: 1rem; font-weight: 600; color: #1f2937; }

.kr-badge[b-jzyqb4x2v2] {
    flex: none; padding: 0.15rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.kr-badge.is-ok[b-jzyqb4x2v2] { background: #dcfce7; color: #166534; }
.kr-badge.is-lock[b-jzyqb4x2v2] { background: #f3f4f6; color: #4b5563; }
/* How far a part has come, in words first: begun (blue, the one hue the verdict colours leave alone) and not begun. */
.kr-badge.is-started[b-jzyqb4x2v2] { background: #dbeafe; color: #1e40af; }
.kr-badge.is-todo[b-jzyqb4x2v2] { background: #fff; color: #475569; box-shadow: inset 0 0 0 1px #cbd5e1; }

.kr-block[b-jzyqb4x2v2] { margin-top: 0.9rem; }

.kr-prose[b-jzyqb4x2v2] { font-size: 0.92rem; line-height: 1.55; color: #374151; }
.kr-prose :first-child[b-jzyqb4x2v2] { margin-top: 0; }
.kr-prose :last-child[b-jzyqb4x2v2] { margin-bottom: 0; }
.kr-prose table[b-jzyqb4x2v2] { border-collapse: collapse; width: 100%; margin: 0.6rem 0; }
.kr-prose th[b-jzyqb4x2v2], .kr-prose td[b-jzyqb4x2v2] { border: 1px solid #e5e7eb; padding: 0.35rem 0.5rem; text-align: left; }

.kr-video[b-jzyqb4x2v2] { width: 100%; max-height: 70vh; border-radius: 8px; background: #000; }
.kr-image[b-jzyqb4x2v2] { max-width: 100%; height: auto; border-radius: 8px; }
/* TR-44: a picture with its caption under it. The figure's default 40px side margins would squeeze it on a phone. */
.kr-figure[b-jzyqb4x2v2] { margin: 0; }
.kr-caption[b-jzyqb4x2v2] { margin-top: 0.35rem; font-size: 0.85rem; line-height: 1.45; color: #475569; }

.kr-link[b-jzyqb4x2v2] { font-size: 0.85rem; color: #1d4ed8; text-decoration: none; }
.kr-link:hover[b-jzyqb4x2v2] { text-decoration: underline; }

.kr-ack[b-jzyqb4x2v2] {
    display: flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem;
    font-size: 0.83rem; color: #4b5563; cursor: pointer;
}
.kr-ack:has(input:disabled)[b-jzyqb4x2v2] { cursor: default; }

/* Why the tick is not offered yet (LE-04) — under it, in words, rather than a dead box. */
.kr-ack__need[b-jzyqb4x2v2] { margin: 0.25rem 0 0 1.45rem; font-size: 0.78rem; color: #92400e; }

/* Wraps: a button too wide to sit beside the title on a phone ("Nytt försök 16 oktober kl. 07:15") drops below it
   instead of squeezing the title and the rules into a column one word wide. */
.kr-quiz[b-jzyqb4x2v2] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem;
    padding: 0.7rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb;
}
.kr-quiz__main[b-jzyqb4x2v2] { display: flex; flex: 1 1 6rem; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kr-quiz__title[b-jzyqb4x2v2] { font-size: 0.92rem; font-weight: 600; color: #1f2937; }
.kr-quiz__meta[b-jzyqb4x2v2] { font-size: 0.78rem; color: #6b7280; }
.kr-quiz__intro[b-jzyqb4x2v2] { margin-top: 0.35rem; font-size: 0.84rem; color: #374151; line-height: 1.5; }
.kr-quiz__intro > :first-child[b-jzyqb4x2v2] { margin-top: 0; }
.kr-quiz__intro > :last-child[b-jzyqb4x2v2] { margin-bottom: 0; }

/* Why a dead button is dead. Sits under it rather than in a title attribute, which a disabled
   control does not reliably show. */
.kr-quiz__why[b-jzyqb4x2v2] { margin: 0.35rem 0 0; font-size: 0.78rem; color: #92400e; }

.kr-btn[b-jzyqb4x2v2] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.42rem 0.95rem; font-size: 0.83rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kr-btn:disabled[b-jzyqb4x2v2] { opacity: 0.5; cursor: default; }

/* ---- sitting a paper ---- */

/* The questions themselves, the strip and the overview are KcQuizPaper's (LE-01). The frame, the clock above
   them and the preview's tools stay here. */
.kr-paper[b-jzyqb4x2v2] {
    width: 100%; margin: 0 auto; max-width: 780px; padding: 1.2rem;
}

.kr-deadline[b-jzyqb4x2v2] {
    /* Stays in view down a long paper: the time left is what a learner needs at the last question. */
    position: sticky; top: 0; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
    margin: 0 0 1rem; padding: 0.5rem 0.7rem; border-radius: 8px;
    background: #fff7ed; color: #9a3412; font-size: 0.83rem;
}
.kr-deadline__left strong[b-jzyqb4x2v2] { font-size: 1rem; font-variant-numeric: tabular-nums; }
.kr-deadline__at[b-jzyqb4x2v2] { opacity: 0.85; }
/* The last minute: red AND the same words, never colour alone. */
.kr-deadline.is-low[b-jzyqb4x2v2] { background: #fef2f2; color: #991b1b; }

@media (max-width: 640px) {
    /* A phone's width is the paper's: no frame inside the page frame eating 40 px of it. */
    .kr-paper[b-jzyqb4x2v2] { padding: 0.9rem 0.75rem; }
}

/* ---- results ---- */

.kr-result[b-jzyqb4x2v2] {
    display: flex; flex-direction: column; gap: 0.15rem;
    margin: 0 auto 1rem; max-width: 1180px; padding: 0.8rem 1rem; border-radius: 10px; font-size: 0.88rem;
}
.kr-result.is-ok[b-jzyqb4x2v2] { background: #dcfce7; color: #166534; }
.kr-result.is-no[b-jzyqb4x2v2] { background: #fef2f2; color: #991b1b; }
.kr-result strong[b-jzyqb4x2v2] { font-size: 0.95rem; }
.kr-result__hint[b-jzyqb4x2v2] { opacity: 0.85; }

/* ---- where to pick up ---- */
.kr-resume[b-jzyqb4x2v2] {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.9rem;
    margin: 0 auto 1rem; max-width: 1180px; padding: 0.8rem 1rem;
    border-radius: 10px; background: #eff6ff; color: #1e3a8a;
}
.kr-resume__main[b-jzyqb4x2v2] { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.kr-resume .kr-btn[b-jzyqb4x2v2] { background: #1d4ed8; text-decoration: none; }

/* The anchor the resume link jumps to. Without the margin the heading lands under the sticky header. */
.kr-section[b-jzyqb4x2v2] { scroll-margin-top: 5rem; }

/* ---- the road to a pass ---- */
.kr-tries[b-jzyqb4x2v2] { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.kr-try[b-jzyqb4x2v2] {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem;
    padding: 0.32rem 0.55rem; border-left: 3px solid #e5e7eb;
    font-size: 0.79rem; color: #6b7280;
}
.kr-try.is-ok[b-jzyqb4x2v2] { border-left-color: #16a34a; }
.kr-try__n[b-jzyqb4x2v2] { font-weight: 600; color: #374151; min-width: 5.2rem; }
.kr-try__score[b-jzyqb4x2v2] { font-variant-numeric: tabular-nums; color: #374151; }
.kr-try.is-ok .kr-try__verdict[b-jzyqb4x2v2] { color: #166534; font-weight: 600; }
.kr-try__auto[b-jzyqb4x2v2] { font-style: italic; }
.kr-try__btn[b-jzyqb4x2v2] {
    margin-left: auto; border: 0; background: none; padding: 0;
    font-size: 0.78rem; color: #1d4ed8; text-decoration: underline; cursor: pointer;
}
.kr-try__btn:disabled[b-jzyqb4x2v2] { opacity: 0.5; cursor: default; }

/* ---- the answer key, shown only when the quiz allows one ---- */
.kr-review[b-jzyqb4x2v2] {
    margin: 0.6rem 0 0.3rem; padding: 0.9rem 1rem;
    border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
}
.kr-review__head[b-jzyqb4x2v2] { margin: 0 0 0.7rem; font-size: 0.95rem; font-weight: 600; color: #1f2937; }
.kr-review__q[b-jzyqb4x2v2] { padding: 0.6rem 0.75rem; border-left: 3px solid #e5e7eb; margin-bottom: 0.6rem; }
.kr-review__q.is-ok[b-jzyqb4x2v2] { border-left-color: #16a34a; background: #f0fdf4; }
.kr-review__q.is-no[b-jzyqb4x2v2] { border-left-color: #dc2626; background: #fef2f2; }
.kr-review__prompt[b-jzyqb4x2v2] {
    display: flex; align-items: baseline; gap: 0.5rem;
    font-size: 0.88rem; color: #1f2937; line-height: 1.5;
}
.kr-review__prompt > :first-child[b-jzyqb4x2v2] { margin-top: 0; }
.kr-review__mark[b-jzyqb4x2v2] { font-weight: 700; }
.kr-review__q.is-ok .kr-review__mark[b-jzyqb4x2v2] { color: #166534; }
.kr-review__q.is-no .kr-review__mark[b-jzyqb4x2v2] { color: #b91c1c; }
.kr-review__opts[b-jzyqb4x2v2] { list-style: none; margin: 0.45rem 0 0; padding: 0 0 0 1.45rem; }
.kr-review__opts li[b-jzyqb4x2v2] {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.5rem;
    padding: 0.2rem 0; font-size: 0.84rem; color: #4b5563;
}
.kr-review__opts li.is-ok[b-jzyqb4x2v2] { color: #166534; font-weight: 600; }
.kr-review__opts li.is-missed[b-jzyqb4x2v2] { color: #166534; }
/* TR-50: the learner's wrong answer says so in words beside it ("✕ fel – ditt svar") and in colour — never struck
   through, which made their own words hard to read and carried the mark by decoration alone. */
.kr-review__opts li.is-no[b-jzyqb4x2v2] { color: #991b1b; font-weight: 600; }
.kr-review__fb[b-jzyqb4x2v2] { display: block; margin-top: 0.15rem; font-size: 0.79rem; opacity: 0.85; }
/* The key's prompts and answers are the author's HTML, rendered as markup: ::deep reaches inside it. A paragraph's
   own margins made every answer three lines tall — on a phone the key for three questions ran past a screen. */
.kr-review__prompt[b-jzyqb4x2v2]  p, .kr-review__opts[b-jzyqb4x2v2]  p { margin: 0; }
/* TR-06 S4: how a multi-answer question's score was reached — beside its answers, in the learner's words. */
.kr-review__score[b-jzyqb4x2v2] { margin: 0.35rem 0 0 1.45rem; font-size: 0.8rem; line-height: 1.45; color: #374151; }
.kr-review__general[b-jzyqb4x2v2] {
    margin: 0.4rem 0 0 1.45rem; padding: 0.45rem 0.65rem;
    border-left: 2px solid #d1d5db; font-size: 0.82rem; color: #374151; line-height: 1.55;
}
.kr-review__general > :first-child[b-jzyqb4x2v2] { margin-top: 0; }
.kr-review__general > :last-child[b-jzyqb4x2v2] { margin-bottom: 0; }
.kr-review__tag[b-jzyqb4x2v2] {
    flex: 0 0 auto; min-width: 5.2rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
    font-weight: 600;
}

.kr-done[b-jzyqb4x2v2] {
    display: flex; flex-direction: column; gap: 0.15rem;
    margin: 0 auto; max-width: 1180px; padding: 0.9rem 1rem; border-radius: 10px;
    background: #dcfce7; color: #166534; font-size: 0.88rem;
}

/* Said at the top of the part the course was finished on: a gap before the part, as the pager has after it. */
.kr-pane > .kr-done:first-child[b-jzyqb4x2v2] { margin-bottom: 0.9rem; }

/* The certificate, once there is one — a link for a participant (the record is theirs to open). */
.kr-done__link[b-jzyqb4x2v2] { align-self: flex-start; margin-top: 0.3rem; color: inherit; font-weight: 600; }

/* A newer edition exists, and the learner is finishing the one they began (D3). Information, not a warning. */
.kr-newer[b-jzyqb4x2v2] {
    margin: 0 auto 1rem; max-width: 1180px; padding: 0.7rem 1rem;
    border-radius: 10px; background: #f1f5f9; color: #334155; font-size: 0.85rem;
}

/* An error beside the course rather than instead of it: the parts are still there to go back to. In the frame it is
   spaced by the frame's own gap (see the top of this file). */
.kr-alert--inline[b-jzyqb4x2v2] { margin: 0 auto 1rem; max-width: 1180px; }

/* A part's own header: its title on the left, what it is (and, in a preview, the way to edit it) on the
   right. */
.kr-section__aside[b-jzyqb4x2v2] { display: flex; align-items: center; gap: 0.7rem; flex: none; }

/* ---- what only an author's preview has ----
   Amber and dashed, never the course's own navy: anything here is a tool for the person writing the
   course, and must not be mistaken for something a participant will see. */
.kr-edit[b-jzyqb4x2v2] {
    font-size: 0.78rem; font-weight: 600; color: #92400e; text-decoration: none; white-space: nowrap;
}
.kr-edit:hover[b-jzyqb4x2v2] { text-decoration: underline; }

.kr-tool[b-jzyqb4x2v2] {
    margin-left: 0.5rem; border: 1px dashed #d97706; border-radius: 8px; background: #fffbeb;
    padding: 0.22rem 0.65rem; font-size: 0.76rem; font-weight: 600; color: #92400e; cursor: pointer;
}
.kr-tool small[b-jzyqb4x2v2] { font-weight: 400; opacity: 0.85; }
.kr-tool:disabled[b-jzyqb4x2v2] { opacity: 0.5; cursor: default; }


.kr-review__note[b-jzyqb4x2v2] {
    margin: 0 0 0.7rem; padding: 0.45rem 0.65rem; border: 1px dashed #d97706; border-radius: 8px;
    background: #fffbeb; color: #92400e; font-size: 0.8rem;
}

.kr-cert[b-jzyqb4x2v2] { margin: 1rem auto 0; max-width: 900px; }

/* The preview's watermark is sized to the column the certificate sits in: the part is narrower than it was now that the
   list of parts is beside it, and "FÖRHANDSVISNING — INGET INTYG" was cut at both ends. The certificate itself — what
   a participant gets, and what is printed — is KcCertificate's, and is not touched. */
@supports (width: 1cqw) {
    .kr-cert[b-jzyqb4x2v2] { container-type: inline-size; }
    .kr-cert[b-jzyqb4x2v2]  .in-cert__watermark span { font-size: clamp(0.7rem, 3.2cqw, 2.2rem); }
}

/* TR-30: the verdict beside the quiz it belongs to, not a page-wide banner. */
.kr-block .kr-result[b-jzyqb4x2v2] { margin: 0.5rem 0 0; max-width: none; }

/* LE-10 after a hand-in: "Säg till" on the paper's questions, beside the verdict. Folded away unless a sheet was
   left unsent when the paper went; the summary is a full touch target (Visual-Guidelines §10). */
.kr-askq[b-jzyqb4x2v2] {
    margin: 0.5rem 0 0; padding: 0 0.75rem;
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
}
.kr-askq > summary[b-jzyqb4x2v2] {
    display: flex; align-items: center; min-height: var(--kc-touch-min, 44px);
    cursor: pointer; font-size: 0.84rem; font-weight: 600; color: #374151;
}
.kr-askq[open] > summary[b-jzyqb4x2v2] { border-bottom: 1px solid #f3f4f6; }
.kr-askq__kept[b-jzyqb4x2v2] {
    margin: 0.6rem 0 0; padding: 0.45rem 0.65rem; border: 1px dashed #d97706; border-radius: 8px;
    background: #fffbeb; color: #92400e; font-size: 0.8rem;
}
.kr-askq__q[b-jzyqb4x2v2] { padding: 0.6rem 0; border-bottom: 1px solid #f3f4f6; }
.kr-askq__q:last-child[b-jzyqb4x2v2] { border-bottom: 0; }
.kr-askq__n[b-jzyqb4x2v2] { display: block; font-size: 0.74rem; font-weight: 600; color: #6b7280; }
.kr-askq__q .kr-prose[b-jzyqb4x2v2] { font-size: 0.86rem; overflow-wrap: anywhere; }
.kr-askq__q .kr-prose > :first-child[b-jzyqb4x2v2] { margin-top: 0.15rem; }
.kr-askq__q .kr-prose > :last-child[b-jzyqb4x2v2] { margin-bottom: 0; }

/* ---- TR-32: an error where the action was — its words, its retry, and "Stäng" ---- */
.kr-err[b-jzyqb4x2v2] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem;
    margin: 0.5rem 0 0;
}
.kr-paper > .kr-err:first-child[b-jzyqb4x2v2] { margin: 0 0 0.9rem; }
.kr-err__text[b-jzyqb4x2v2] { min-width: 0; flex: 1 1 12rem; }
.kr-err__actions[b-jzyqb4x2v2] { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.kr-err__retry[b-jzyqb4x2v2], .kr-err__close[b-jzyqb4x2v2] {
    min-height: 2rem; min-width: 2rem; padding: 0 0.7rem; border: 1px solid #b91c1c; border-radius: 8px;
    background: #fff; font: inherit; font-size: 0.82rem; font-weight: 600; color: #991b1b; cursor: pointer;
}
.kr-err__close[b-jzyqb4x2v2] { padding: 0 0.5rem; border-color: transparent; background: transparent; }
.kr-err__close:hover[b-jzyqb4x2v2] { border-color: #b91c1c; }
.kr-err__retry:disabled[b-jzyqb4x2v2] { opacity: 0.5; cursor: default; }

/* ---- TR-50: why a part is locked, as text on the part ---- */
.kr-section__why[b-jzyqb4x2v2] { margin: 0.4rem 0 0; font-size: 0.82rem; color: #4b5563; }

/* ---- TR-57: every paper left open, each with its own way back in ---- */
.kr-resume__papers[b-jzyqb4x2v2] {
    flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none;
}
.kr-resume__paper[b-jzyqb4x2v2] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.9rem;
    padding: 0.55rem 0.7rem; border-radius: 8px; background: #fff;
}
.kr-resume__what[b-jzyqb4x2v2] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.84rem; }
.kr-resume__quiz[b-jzyqb4x2v2] { font-weight: 600; color: #1e3a8a; }
.kr-resume__due[b-jzyqb4x2v2] { color: #9a3412; }
.kr-resume:focus:not(:focus-visible)[b-jzyqb4x2v2] { outline: none; }
/* Focus brought back from code after a message went (TR-32) — to a block whose box is disabled, or a quiz's card. */
.kr-block:focus:not(:focus-visible)[b-jzyqb4x2v2], .kr-quiz:focus:not(:focus-visible)[b-jzyqb4x2v2] { outline: none; }

/* Another paper open while this one is written: its own clock, said above the paper. */
.kr-other[b-jzyqb4x2v2] {
    margin: 0 0 0.8rem; padding: 0.5rem 0.7rem; border-radius: 8px;
    background: #eff6ff; color: #1e3a8a; font-size: 0.84rem;
}

/* TR-50 at a computer: no target under WCAG's 24 px floor — the link-styled "visa rättning" was 14 px high. */
.kr-try__btn[b-jzyqb4x2v2] { min-height: 1.5rem; }

/* ---- TR-50: a phone — every target a finger wide (Visual-Guidelines §10, --kc-touch-min) ---- */
@media (max-width: 640px) {
    .kr-btn[b-jzyqb4x2v2], .kr-tool[b-jzyqb4x2v2], .kr-err__retry[b-jzyqb4x2v2], .kr-err__close[b-jzyqb4x2v2] {
        min-height: var(--kc-touch-min, 44px); min-width: var(--kc-touch-min, 44px);
        padding-inline: 1rem; font-size: 0.92rem;
    }
    .kr-btn[b-jzyqb4x2v2] { display: inline-flex; align-items: center; justify-content: center; }
    .kr-try__btn[b-jzyqb4x2v2] {
        display: inline-flex; align-items: center; min-height: var(--kc-touch-min, 44px);
        min-width: var(--kc-touch-min, 44px); padding: 0 0.4rem; font-size: 0.86rem;
    }

    /* The confirmation: the whole line is the target, with a box a thumb can see. */
    .kr-ack[b-jzyqb4x2v2] { min-height: var(--kc-touch-min, 44px); gap: 0.6rem; font-size: 0.9rem; }
    .kr-ack input[b-jzyqb4x2v2] { width: 1.35rem; height: 1.35rem; flex: none; }
    .kr-ack__need[b-jzyqb4x2v2] { margin-left: 1.95rem; }

    .kr-link[b-jzyqb4x2v2], .kr-back[b-jzyqb4x2v2], .kr-done__link[b-jzyqb4x2v2], .kr-edit[b-jzyqb4x2v2] {
        display: inline-flex; align-items: center; min-height: var(--kc-touch-min, 44px);
    }
    .kr-resume__paper .kr-btn[b-jzyqb4x2v2] { flex: 1 1 auto; }

    /* The way between the parts: one thumb-wide button each, side by side. */
    .kr-pager .kr-btn[b-jzyqb4x2v2] { flex: 1 1 0; }
}

/* ---- A phone: the course gets the screen's width, and "Prova på" the real card full width (owner, 2026-10-13) ----
   "Mobile users have less room to train in." Inside the part's own side padding and the block's own padding the card
   had 245 px of a 375 px screen and its points broke mid-word ("Arbetsbän|kar"). So on a phone the part gives a little of
   its side padding back (--kr-pad, 0.9rem: the page frame already keeps 16 px of gutter on each side, as the day board
   has), and the practice block steps out of what is left, so the card in it is as wide as the day board's. The block
   stays INSIDE its part card, never across its edge: its "Säg till" and any error under it keep the part's padding, and
   axe can still read every line of it against one background. A computer keeps the mockup's frame. ProvaPaTests
   measures the result. */
@media (max-width: 699.98px) {
    .kr-section[b-jzyqb4x2v2] { --kr-pad: 0.9rem; }

    .kr-block--practice[b-jzyqb4x2v2] { margin-inline: calc(-1 * var(--kr-pad)); }
    .kr-block--practice > .kr-err[b-jzyqb4x2v2], .kr-block--practice[b-jzyqb4x2v2]  .kcr { margin-inline: var(--kr-pad); }
}
/* /Components/Controls/KcCourseTextEditor.razor.rz.scp.css */
/* A refused picture (TR-26): said right under the box it was pasted into, in the editor's warning colours. */
.kc-crsedit__notice[b-uv238tey41] {
    display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 0.4rem; padding: 0.5rem 0.7rem; border-radius: 8px;
    background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; border-left: 4px solid #ea580c;
    font-size: 0.84rem; line-height: 1.45;
}
.kc-crsedit__notice span[b-uv238tey41] { flex: 1 1 16rem; min-width: 0; }
.kc-crsedit__dismiss[b-uv238tey41] {
    flex: none; border: 1px solid #fed7aa; border-radius: 6px; background: #fff; color: #9a3412;
    padding: 0.15rem 0.6rem; font-size: 0.8rem; cursor: pointer;
}
.kc-crsedit__dismiss:hover[b-uv238tey41] { background: #ffedd5; }
/* /Components/Controls/KcCourseVideo.razor.rz.scp.css */
/* One course film (LE-04). The film itself as the player drew it; under it, where to pick up and how much
   has been seen. Text carries every state — the bar is a picture of the number beside it, never the only
   signal. */

.kv-video[b-x0f34e263f] { display: block; width: 100%; max-height: 70vh; border-radius: 8px; background: #000; }

/* TR-44: the root is a figure now (the film and its caption); without this it takes 40px side margins. */
.kv[b-x0f34e263f] { margin: 0; }
.kv-caption[b-x0f34e263f] { margin-top: 0.35rem; font-size: 0.85rem; line-height: 1.45; color: #475569; }

/* Where to pick up. Wraps under the sentence on a phone rather than squeezing two buttons beside it. */
.kv-resume[b-x0f34e263f] {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 0.9rem;
    margin-top: 0.55rem; padding: 0.6rem 0.8rem; border-radius: 10px;
    background: #eff6ff; color: #1e3a8a; font-size: 0.85rem;
}
.kv-resume__actions[b-x0f34e263f] { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.8rem; }

/* Both answers are a full touch target (Visual Guidelines: 44 px) — "Börja om" is the one a thumb on a phone
   reaches for under the big button, and a 31 px underlined word is easy to miss. */
.kv-btn[b-x0f34e263f] {
    display: inline-flex; align-items: center; min-height: var(--kc-touch-min, 44px);
    border: 0; border-radius: 8px; background: #1d4ed8; color: #fff;
    padding: 0.5rem 0.95rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.kv-btn:focus-visible[b-x0f34e263f], .kv-link:focus-visible[b-x0f34e263f] { outline: 2px solid #1e3a8a; outline-offset: 2px; }

.kv-link[b-x0f34e263f] {
    display: inline-flex; align-items: center; min-height: var(--kc-touch-min, 44px);
    border: 0; background: none; padding: 0.5rem 0.6rem;
    font-size: 0.85rem; color: #1d4ed8; text-decoration: underline; cursor: pointer;
}

/* Where the keyboard lands after an answer: the film itself. */
.kv-video:focus-visible[b-x0f34e263f] { outline: 2px solid #1d4ed8; outline-offset: 2px; }

/* How much has been seen. */
.kv-progress[b-x0f34e263f] { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.kv-progress__bar[b-x0f34e263f] {
    flex: 0 1 14rem; height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden;
}
.kv-progress__bar span[b-x0f34e263f] { display: block; height: 100%; background: #16a34a; }
.kv-progress__text[b-x0f34e263f] {
    font-size: 0.8rem; color: #4b5563; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Before the first play: the file's size, because on a phone it is somebody's data. */
.kv-note[b-x0f34e263f] { margin: 0.45rem 0 0; font-size: 0.8rem; color: #6b7280; }
/* /Components/Controls/KcEditionChanges.razor.rz.scp.css */
/* What one edition changes against another (TR-52): the editor's card shape, so it reads as part of the page it sits
   on. Every change carries its kind in words; the colours only repeat it (Visual-Guidelines §3.4). */

.kec[b-c6dy5jqns5] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    overflow: hidden; margin-bottom: 0.9rem;
    scroll-margin-top: 5rem;
}

.kec-sec[b-c6dy5jqns5] {
    padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.kec-sec h2[b-c6dy5jqns5] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158); }
.kec-hint[b-c6dy5jqns5] { margin: 0.35rem 0 0; font-size: 0.82rem; color: #6b7280; max-width: 72ch; }

.kec-body[b-c6dy5jqns5] { padding: 0.9rem 1.1rem; }
.kec-muted[b-c6dy5jqns5] { margin: 0; font-size: 0.84rem; color: #6b7280; }
.kec-error[b-c6dy5jqns5] {
    margin: 0; padding: 0.5rem 0.7rem; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 0.84rem;
}

.kec-group[b-c6dy5jqns5] { margin-bottom: 0.9rem; }
.kec-h3[b-c6dy5jqns5] {
    margin: 0 0 0.4rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280;
}

.kec-parts[b-c6dy5jqns5] { list-style: none; margin: 0; padding: 0; }
.kec-part[b-c6dy5jqns5] { padding: 0.55rem 0; border-top: 1px solid #f3f4f6; }
.kec-part:first-child[b-c6dy5jqns5] { border-top: 0; }
.kec-parthead[b-c6dy5jqns5] { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.kec-parttitle[b-c6dy5jqns5] { font-weight: 600; color: #1f2937; overflow-wrap: anywhere; }
.kec-part--unchanged .kec-parttitle[b-c6dy5jqns5] { font-weight: 400; color: #6b7280; }

.kec-badge[b-c6dy5jqns5] {
    display: inline-block; flex: none; padding: 0.05rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.kec-badge--unchanged[b-c6dy5jqns5] { background: #f3f4f6; color: #6b7280; }
.kec-badge--added[b-c6dy5jqns5] { background: #dcfce7; color: #166534; }
.kec-badge--removed[b-c6dy5jqns5] { background: #fee2e2; color: #991b1b; }
.kec-badge--changed[b-c6dy5jqns5] { background: #fef3c7; color: #92400e; }
.kec-badge--moved[b-c6dy5jqns5] { background: #dbeafe; color: #1e40af; }

.kec-blocks[b-c6dy5jqns5], .kec-places[b-c6dy5jqns5] { list-style: none; margin: 0.45rem 0 0; padding: 0 0 0 1rem; }
.kec-block[b-c6dy5jqns5] { padding: 0.35rem 0; }
.kec-blockhead[b-c6dy5jqns5] { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: 0.86rem; }
.kec-kind[b-c6dy5jqns5] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.kec-blocklabel[b-c6dy5jqns5] { color: #1f2937; min-width: 0; overflow-wrap: anywhere; }
.kec-block--removed .kec-blocklabel[b-c6dy5jqns5] { color: #6b7280; }

.kec-details[b-c6dy5jqns5] { margin: 0.35rem 0 0; display: flex; flex-direction: column; gap: 0.3rem; }
.kec-detail[b-c6dy5jqns5] { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: 0.15rem 0.8rem; }
.kec-detail dt[b-c6dy5jqns5] { font-size: 0.8rem; color: #4b5563; font-weight: 600; }
.kec-detail dd[b-c6dy5jqns5] { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; min-width: 0; }

.kec-was[b-c6dy5jqns5], .kec-now[b-c6dy5jqns5] { overflow-wrap: anywhere; line-height: 1.4; }
.kec-was[b-c6dy5jqns5] { color: #6b7280; }
.kec-now[b-c6dy5jqns5] { color: #111827; }
.kec-label[b-c6dy5jqns5] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #9ca3af; }

.kec-place[b-c6dy5jqns5] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; padding: 0.2rem 0; font-size: 0.82rem; }

@media (max-width: 640px) {
    .kec-detail[b-c6dy5jqns5] { grid-template-columns: minmax(0, 1fr); }
    .kec-blocks[b-c6dy5jqns5], .kec-places[b-c6dy5jqns5] { padding-left: 0.5rem; }
}
/* /Components/Controls/KcInviteLink.razor.rz.scp.css */
.kc-invlink[b-66zullva9n] { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; min-width: 0; }

.kc-invlink__issue[b-66zullva9n],
.kc-invlink__copy[b-66zullva9n] {
    flex: none; padding: 0.4rem 0.8rem; border-radius: 6px; border: 1px solid #1f2937;
    background: #1f2937; color: #fff; font: inherit; font-size: 0.82rem; cursor: pointer;
}

.kc-invlink__copy[b-66zullva9n] { background: #fff; color: #1f2937; }

.kc-invlink__issue:disabled[b-66zullva9n] { opacity: 0.6; cursor: default; }

/* The link is long and the whole of it matters: let the field take the row and scroll inside itself
   rather than push the copy button off the panel. */
.kc-invlink__row[b-66zullva9n] { display: flex; gap: 0.4rem; width: 100%; min-width: 0; }

.kc-invlink__value[b-66zullva9n] {
    flex: 1 1 auto; min-width: 0; padding: 0.4rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem;
    background: #f9fafb; color: #111827;
}

.kc-invlink__note[b-66zullva9n] { margin: 0; font-size: 0.8rem; font-weight: 600; color: #92400e; }

.kc-invlink__fine[b-66zullva9n] { font-size: 0.75rem; color: #6b7280; }

.kc-invlink__error[b-66zullva9n] { margin: 0; font-size: 0.8rem; color: #b91c1c; }
/* /Components/Controls/KcKitchenReadiness.razor.rz.scp.css */
/* A kitchen's readiness. The card borrows the startup card's frame (kc-controls.css) because it is the same
   message about one kitchen; what is its own is the step list, marked per state in the colours the board
   already uses — done is the done green, todo and waiting the amber of "a state to deal with", never the
   error red: nothing here is anybody's mistake. */

.kc-ready__steps[b-oio0faiy1k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.kc-ready__step[b-oio0faiy1k] {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.6rem;
    align-items: start;
    padding: 0.5rem 0.7rem;
    border-radius: 0.45rem;
    background: var(--kc-surface-alt, #f7f7f8);
}

.kc-ready__mark[b-oio0faiy1k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    background: #e5e7eb;
    color: #374151;
}

.kc-ready__step--done .kc-ready__mark[b-oio0faiy1k] {
    background: var(--kc-status-ok);
    color: #12693A;
}

.kc-ready__step--todo .kc-ready__mark[b-oio0faiy1k],
.kc-ready__step--waiting .kc-ready__mark[b-oio0faiy1k] {
    background: var(--kc-status-missed);
    color: #7A5B12;
}

.kc-ready__body[b-oio0faiy1k] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.kc-ready__name[b-oio0faiy1k] {
    color: var(--kc-navy, #324158);
    font-size: 0.92rem;
}

.kc-ready__detail[b-oio0faiy1k] {
    font-size: 0.85rem;
    color: var(--kc-ink, #333);
    overflow-wrap: anywhere;
}

.kc-ready__acts[b-oio0faiy1k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1rem;
    margin-top: 0.2rem;
    font-size: 0.88rem;
}

.kc-ready__acts a[b-oio0faiy1k] {
    font-weight: 700;
    color: var(--kc-navy, #324158);
    text-decoration-color: var(--kc-blue-light, #7AC0DA);
    text-underline-offset: 3px;
}

.kc-ready__from[b-oio0faiy1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.kc-ready__from .kc-select[b-oio0faiy1k] {
    min-height: 2rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.85rem;
}

.kc-ready__summary[b-oio0faiy1k] {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--kc-status-missed);
    color: #7A5B12;
    white-space: nowrap;
}

.kc-ready__summary.is-ready[b-oio0faiy1k] {
    background: var(--kc-status-ok);
    color: #12693A;
}

.kc-ready__fresh[b-oio0faiy1k] {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    color: var(--kc-navy, #324158);
}

/* The equipment gaps on the board of a kitchen whose programme is in force: above the gauges, in the same
   amber as the setup dialog's flags, so it reads as something to deal with rather than a fault. A column:
   each gap is its own line and the link its own line below them — wrapped in a row, the sentences ran into
   each other. No outer margin: the board sits it in its frame's column, which does the spacing. Its size and
   spacing are the approved mockup's (14px text, 9px 12px inside, 2px between the lines); its colours are the
   ones it always had (owner, 2026-10-09). */
.kc-ready__gaps[b-oio0faiy1k] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0.5625rem 0.75rem;
    border-left: 4px solid var(--kc-status-missed-edge);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--kc-status-missed) 35%, white);
    color: var(--kc-warn-text, #7A5B12);
    font-size: 0.875rem;
    line-height: 1.5;
}

.kc-ready__gaps a[b-oio0faiy1k] {
    align-self: flex-start;
    font-weight: 700;
    color: inherit;
}

/* A phone wraps each gap over two lines, so the lines need air between them to stay one gap each. */
@media (max-width: 760px) {
    .kc-ready__gaps[b-oio0faiy1k] {
        gap: 0.375rem;
        line-height: 1.45;
    }
}

/* Above the kitchens: the ones with something left to do, each with the way into it. */
.kc-notready[b-oio0faiy1k] {
    margin-top: 1rem;
    max-width: 46rem;
}

.kc-notready__title[b-oio0faiy1k] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--kc-navy, #324158);
}

.kc-notready__list[b-oio0faiy1k] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.kc-notready__item[b-oio0faiy1k] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem 1rem;
    align-items: center;
    padding: 0.55rem 0.8rem;
    border: 1.5px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-radius: var(--kc-radius-card, 0.5rem);
    background: var(--kc-surface, #fff);
}

.kc-notready__id[b-oio0faiy1k] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.kc-notready__name[b-oio0faiy1k] {
    color: var(--kc-navy, #324158);
}

.kc-notready__left[b-oio0faiy1k] {
    grid-column: 1;
    font-size: 0.82rem;
    color: var(--kc-muted, #64748b);
}

.kc-notready__acts[b-oio0faiy1k] {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 560px) {
    .kc-notready__item[b-oio0faiy1k] {
        grid-template-columns: 1fr;
    }

    .kc-notready__acts[b-oio0faiy1k] {
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
    }
}
/* /Components/Controls/KcLibraryDefinitionNote.razor.rz.scp.css */
/* "Delivered with the software": a note in the page's own card shape, so it reads as part of the page it sits on. */
.kdn[b-scjko0apzu] {
    margin: 0.7rem 0; padding: 0.7rem 0.95rem; max-width: 80ch;
    background: var(--kc-surface, #fff); color: var(--kc-navy, #324158);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1)); border-left: 4px solid var(--kc-blue, #2d92bd);
    border-radius: var(--kc-radius-card, 0.5rem);
    font-size: 0.85rem; line-height: 1.5;
}
.kdn code[b-scjko0apzu] { font-size: 0.8rem; }
/* /Components/Controls/KcModuleLocked.razor.rz.scp.css */
.kc-modlock[b-gk280fbqa0] {
    align-items: flex-start;
    max-width: 44rem;
    margin: 1rem 0;
}

.kc-modlock__ask[b-gk280fbqa0] {
    margin: 0.55rem 0 0;
    font-size: 0.9rem;
    color: var(--kc-navy);
}

.kc-modlock__ask a[b-gk280fbqa0] {
    font-weight: 700;
}
/* /Components/Controls/KcOpeningEditor.razor.rz.scp.css */
/* Öppettider: the weekly pattern, the month it produces, and the exceptions — one surface. */

.kc-open[b-95vdp9mvmf] { display: flex; flex-direction: column; gap: 0.5rem; }

/* Three fixed rows (öppning / dagen / stängning) filled column by column, so every day's times line up
   with its neighbours' no matter how wide the column gets. */
.kc-open__week[b-95vdp9mvmf] {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto auto auto;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.25rem 0.3rem;
    align-items: center;
    padding: 0.35rem 0;
}

.kc-open__cap[b-95vdp9mvmf] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kc-muted, #64748b);
    text-align: right;
    padding-right: 0.4rem;
    white-space: nowrap;
}

.kc-open__cap--mid[b-95vdp9mvmf] { min-height: 1.75rem; }

.kc-open__cell[b-95vdp9mvmf] { display: flex; justify-content: center; }
.kc-open__cell.is-off[b-95vdp9mvmf] { opacity: 0.35; }

/* The day name IS the switch — one target, and its pressed state is the whole answer. */
.kc-open__day[b-95vdp9mvmf] {
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-height: 1.75rem;
    padding: 0.2rem 0.3rem;
    border-radius: 0.375rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    background: var(--kc-surface-alt, #f1f5f9);
    color: var(--kc-muted, #64748b);
    cursor: pointer;
}

.kc-open__day[aria-pressed="true"][b-95vdp9mvmf] {
    background: var(--kc-blue, #7AC0DA);
    border-color: var(--kc-navy, #324158);
    color: #08313f;
}

.kc-open__day:not(:disabled):hover[b-95vdp9mvmf] { border-color: var(--kc-navy, #324158); }

/* Shown, not offered: a kitchen beside or above the reader. The pressed state still says which days are open. */
.kc-open__day:disabled[b-95vdp9mvmf] { cursor: default; }

.kc-open__hint[b-95vdp9mvmf] { margin: 0; font-size: 0.75rem; color: var(--kc-muted, #64748b); }

/* --- The month it produces ------------------------------------------------------------------ */

.kc-open__calhead[b-95vdp9mvmf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    text-transform: capitalize;
}

.kc-open__cal[b-95vdp9mvmf] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.kc-open__dayhead[b-95vdp9mvmf] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kc-muted, #64748b);
    text-align: center;
    padding-bottom: 0.15rem;
}

.kc-open__cell-day[b-95vdp9mvmf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    min-height: 2.6rem;
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: 0.3rem;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kc-open__cell-day:not(:disabled):hover[b-95vdp9mvmf] { border-color: var(--kc-navy, #324158); }

/* Shown, not offered, as the week's days above. The colour is the one a live cell gets (the browser's ButtonText):
   a disabled button is otherwise greyed, and the month must read exactly as it does for whoever may change it. */
.kc-open__cell-day:disabled[b-95vdp9mvmf] { cursor: default; color: ButtonText; }
.kc-open__cell-day.is-other[b-95vdp9mvmf] { opacity: 0.4; }
.kc-open__cell-day.is-open[b-95vdp9mvmf] { background: color-mix(in srgb, var(--kc-status-ok, #BBF7D0) 30%, #fff); }
.kc-open__cell-day.is-closed[b-95vdp9mvmf] { background: var(--kc-surface-alt, #f1f5f9); }

/* An exception is the point of the calendar, so it is drawn as a change, not as a shade. */
.kc-open__cell-day.is-ex-closed[b-95vdp9mvmf] {
    background: color-mix(in srgb, var(--kc-status-failed, #FECACA) 55%, #fff);
    border-color: var(--kc-status-failed-edge, #F0A0A0);
}

.kc-open__cell-day.is-ex-open[b-95vdp9mvmf] {
    background: color-mix(in srgb, var(--kc-status-ok, #BBF7D0) 65%, #fff);
    border-color: var(--kc-status-ok-edge, #86D3A3);
}

.kc-open__cell-day.is-today[b-95vdp9mvmf] { box-shadow: inset 0 0 0 2px var(--kc-blue-deep, #2E93BC); }

.kc-open__num[b-95vdp9mvmf] { font-size: 0.75rem; font-weight: 700; line-height: 1; }
.kc-open__hrs[b-95vdp9mvmf] { font-size: 0.625rem; color: var(--kc-muted, #64748b); line-height: 1; }

.kc-open__actions[b-95vdp9mvmf] { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }

.kc-open__form[b-95vdp9mvmf] { margin-top: 0.4rem; }

.kc-open__exhours[b-95vdp9mvmf] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; }
.kc-open__exhours .kc-label[b-95vdp9mvmf] { margin-right: 0.3rem; }

.kc-open__list[b-95vdp9mvmf] { margin-top: 0.5rem; }

@media (max-width: 640px) {
    /* The caption column costs a seventh of a phone's width; the day names carry it alone there. */
    .kc-open__cap[b-95vdp9mvmf] { display: none; }
    .kc-open__week[b-95vdp9mvmf] { grid-auto-columns: minmax(0, 1fr); }
    .kc-open__hrs[b-95vdp9mvmf] { display: none; }
}
/* /Components/Controls/KcOrgTree.razor.rz.scp.css */

/* ---- The org chart, drawn wide -----------------------------------------------------------------
   Top-down, the way an organisation chart is always drawn: the root centred at the top, each level a
   ROW beneath its parent, siblings side by side (owner, 2026-08-17). "Wide" means parallel units next
   to each other — an earlier pass read it as left-to-right and put the siblings in a column, which is
   the same tall list the tree was meant to replace, merely rotated.

   Pure CSS connectors: every node draws the half-bar above itself, so the horizontal rule across a row
   of siblings is the sum of their halves and needs no extra elements. */
.kc-orgwide[b-u46goyro36] {
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: .75rem;
    padding: .9rem .8rem 1rem;
    margin: 0 0 1rem;
    background: #fff;

    /* A kommun with twenty kitchens is wider than the page. Scroll it rather than wrap a chart into a
       shape that no longer says who reports to whom. */
    overflow-x: auto;
}

.kc-wtree[b-u46goyro36] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;

    /* Never squeezed narrower than its contents — that is what the scrollbar above is for. */
    width: max-content;
    min-width: 100%;
}

/* A node is its chip with its children's row underneath. The side padding is the gap between siblings —
   without it two boxes on the same row share an edge and read as one wide box. */
.kc-wtree__node[b-u46goyro36] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 1.1rem .55rem 0;
}

/* The two halves of the bar joining a row of siblings, plus the stem down into this node. */
.kc-wtree__node[b-u46goyro36]::before,
.kc-wtree__node[b-u46goyro36]::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 1.1rem;
    border-top: 2px solid var(--kc-line, #e5e7eb);
}

.kc-wtree__node[b-u46goyro36]::before { right: 50%; }

.kc-wtree__node[b-u46goyro36]::after {
    left: 50%;
    border-left: 2px solid var(--kc-line, #e5e7eb);
}

/* An only child needs no bar at all — the stem from its parent reaches it directly. */
.kc-wtree__node:only-child[b-u46goyro36] { padding-top: 1.1rem; }
.kc-wtree__node:only-child[b-u46goyro36]::before { display: none; }
.kc-wtree__node:only-child[b-u46goyro36]::after { width: 0; border-top: 0; left: 50%; }

/* The ends of the row: the bar stops at the outermost siblings rather than running off into nothing. */
.kc-wtree__node:first-child[b-u46goyro36]::before { border: 0; }
.kc-wtree__node:last-child[b-u46goyro36]::after { border-top: 0; }

/* The root row hangs from nothing, so it draws no connectors of its own. */
.kc-orgwide > .kc-wtree > .kc-wtree__node[b-u46goyro36] { padding-top: 0; }
.kc-orgwide > .kc-wtree > .kc-wtree__node[b-u46goyro36]::before,
.kc-orgwide > .kc-wtree > .kc-wtree__node[b-u46goyro36]::after { display: none; }

/* Children hang BELOW their parent, with a stem down from it into their row. */
.kc-wtree__node > .kc-wtree[b-u46goyro36] {
    padding-top: 1.1rem;
    margin-top: .5rem;
    width: auto;
    min-width: 0;
}

.kc-wtree__node > .kc-wtree[b-u46goyro36]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 1.1rem;
    border-left: 2px solid var(--kc-line, #e5e7eb);
}

.kc-wtree__chip[b-u46goyro36] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .35rem .8rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: .4rem;
    background: var(--kc-surface, #fff);
    cursor: pointer;
    font: inherit;
    text-align: center;
    white-space: nowrap;
}

.kc-wtree__chip:hover[b-u46goyro36] { border-color: var(--kc-accent, #4a6b8a); }

.kc-wtree__chip.is-on[b-u46goyro36] {
    border-color: var(--kc-accent, #4a6b8a);
    box-shadow: inset 0 0 0 1px var(--kc-accent, #4a6b8a);
}

/* No programme at all, its own or inherited. Dimmed rather than hidden — that a kostenhet above you has
   published nothing is worth seeing. */
.kc-wtree__chip.is-bare[b-u46goyro36] { opacity: .5; }

.kc-wtree__name[b-u46goyro36] { font-size: .85rem; font-weight: 600; }

.kc-wtree__meta[b-u46goyro36] { font-size: .7rem; opacity: .65; }

/* A proposal waiting here. Marked in the TREE because "is there anything for me to approve" is a question
   about the organisation, not about the kitchen that happens to be open. */
.kc-wtree__draft[b-u46goyro36] {
    margin-left: .35rem;
    padding: 0 .35rem;
    border-radius: 1rem;
    background: var(--kc-accent, #4a6b8a);
    color: #fff;
    opacity: 1;
}
/* /Components/Controls/KcPackagingEvidence.razor.rz.scp.css */
/* The packaging evidence: plain, dense, and complete. The polished review screen comes from a mockup with the
   owner; until then the rule is that every fact is on the page and readable at a glance. */

.kc-pack[b-q4dd69qtm1] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.kc-pack__verdict[b-q4dd69qtm1] {
    border: 1px solid var(--kc-border-soft);
    border-left: 5px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-card);
    padding: 0.7rem 0.9rem;
    background: var(--kc-surface);
}

.kc-pack__off[b-q4dd69qtm1] {
    margin: 0;
    padding: 0.5rem 0.8rem;
    border: 1px solid #f59e0b;
    border-radius: var(--kc-radius-card);
    background: #fffbeb;
}

.kc-pack__verdict--stop[b-q4dd69qtm1] { border-left-color: #dc2626; background: #fff7f7; }
.kc-pack__verdict--ok[b-q4dd69qtm1] { border-left-color: #16a34a; }
.kc-pack__verdict--neutral[b-q4dd69qtm1] { border-left-color: #94a3b8; }

.kc-pack__badges[b-q4dd69qtm1] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }

.kc-pack__badge[b-q4dd69qtm1] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--kc-navy, #1e3a5f);
    color: #fff;
}

.kc-pack__badge--muted[b-q4dd69qtm1] { background: #eef2f7; color: var(--kc-navy, #1e3a5f); font-weight: 500; }

.kc-pack__headline[b-q4dd69qtm1] { font-weight: 600; margin: 0.2rem 0; }
.kc-pack__explanation[b-q4dd69qtm1] { margin: 0.2rem 0 0.4rem; line-height: 1.45; }
.kc-pack__checklist[b-q4dd69qtm1] { margin: 0.2rem 0 0.4rem; padding-left: 1.3rem; line-height: 1.45; }
.kc-pack__source[b-q4dd69qtm1] { margin: 0.3rem 0 0; font-size: 0.8rem; }

.kc-pack__block[b-q4dd69qtm1] { min-width: 0; }

.kc-pack__label[b-q4dd69qtm1] {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--kc-subtle);
    margin: 0 0 0.3rem;
}

.kc-pack__facts[b-q4dd69qtm1] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.15rem 0.8rem;
    margin: 0;
    font-size: 0.88rem;
}

.kc-pack__facts dt[b-q4dd69qtm1] { color: var(--kc-subtle); }
.kc-pack__facts dd[b-q4dd69qtm1] { margin: 0; overflow-wrap: anywhere; }

/* The tree: nested, every node one line of identity and one line of facts, the article itself marked. */
.kc-pack__tree[b-q4dd69qtm1], .kc-pack__tree ul[b-q4dd69qtm1] {
    list-style: none;
    margin: 0;
    padding-left: 1.1rem;
    border-left: 1px dashed var(--kc-border-soft);
}

.kc-pack__tree[b-q4dd69qtm1] { padding-left: 0.4rem; border-left: none; margin-bottom: 0.5rem; }

.kc-pack__node[b-q4dd69qtm1] { margin: 0.25rem 0; }

.kc-pack__nodehead[b-q4dd69qtm1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    font-size: 0.9rem;
}

.kc-pack__node--focus > .kc-pack__nodehead[b-q4dd69qtm1] {
    background: #fff8db;
    border-radius: 4px;
    padding: 0 0.3rem;
    font-weight: 600;
}

.kc-pack__node--absent > .kc-pack__nodehead[b-q4dd69qtm1] { color: var(--kc-subtle); }

.kc-pack__count[b-q4dd69qtm1] { color: var(--kc-navy, #1e3a5f); font-variant-numeric: tabular-nums; }
.kc-pack__level[b-q4dd69qtm1] { font-size: 0.78rem; text-transform: uppercase; color: var(--kc-subtle); }

.kc-pack__nodefacts[b-q4dd69qtm1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.7rem;
    font-size: 0.8rem;
    color: var(--kc-subtle);
    padding-left: 0.2rem;
}

.kc-pack__table[b-q4dd69qtm1] { display: block; overflow-x: auto; width: 100%; font-size: 0.86rem; }
.kc-pack__table td[b-q4dd69qtm1], .kc-pack__table th[b-q4dd69qtm1] { vertical-align: top; }
.kc-pack__row--inforce > td[b-q4dd69qtm1] { background: #f0fdf4; font-weight: 600; }

.kc-pack__lines[b-q4dd69qtm1] { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; line-height: 1.45; }

.kc-pack__raw[b-q4dd69qtm1] { max-height: 20rem; overflow: auto; font-size: 0.78rem; }
/* /Components/Controls/KcPayloadTree.razor.rz.scp.css */
.kc-ftree[b-xw0df0mh83] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Nested levels get their own box + rule so a branch reads as one thing, rather than as indentation
   the eye has to measure. */
.kc-ftree .kc-ftree[b-xw0df0mh83] {
    margin: 0.2rem 0 0.35rem 0.9rem;
    padding-left: 0.6rem;
    border-left: 2px solid var(--kc-border-soft);
}

.kc-ftree__item[b-xw0df0mh83] {
    border-radius: 6px;
}

.kc-ftree__row[b-xw0df0mh83] {
    display: grid;
    grid-template-columns: minmax(11rem, 22fr) 5rem minmax(6rem, 30fr) 7.5rem;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.22rem 0.45rem;
    border-radius: 6px;
    font-size: 0.84rem;
}

.kc-ftree__name[b-xw0df0mh83] {
    font-weight: 600;
    color: var(--kc-navy);
    overflow-wrap: anywhere;
}

.kc-ftree__kind[b-xw0df0mh83] {
    color: var(--kc-muted);
    font-size: 0.75rem;
}

.kc-ftree__value[b-xw0df0mh83] {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.kc-ftree__empty[b-xw0df0mh83] {
    color: var(--kc-muted);
    font-style: italic;
}

.kc-ftree__tag[b-xw0df0mh83] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kc-muted);
    text-align: right;
    white-space: nowrap;
}

/* The hover explanation — our best current understanding of the field. */
.kc-ftree__info[b-xw0df0mh83] {
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.3rem;
    border-radius: 50%;
    background: var(--kc-info-bg);
    color: var(--kc-info-text);
    font-size: 0.68rem;
    font-weight: 700;
    font-style: italic;
    cursor: help;
    vertical-align: 1px;
}

.kc-ftree__info:hover[b-xw0df0mh83],
.kc-ftree__info:focus[b-xw0df0mh83] {
    background: var(--kc-blue-deep);
    color: #fff;
    outline: none;
}

/* ---- the two questions the colours answer ---------------------------------------------------- */

/* Data that arrived and nothing reads — every gap we have chased had this shape. */
.kc-ftree__item--unused > .kc-ftree__row[b-xw0df0mh83] {
    background: #fdf3e3;
    box-shadow: inset 3px 0 0 #b45309;
}

.kc-ftree__item--unused .kc-ftree__tag[b-xw0df0mh83] {
    color: #b45309;
    font-weight: 700;
}

/* A field we depend on, that arrived empty. */
.kc-ftree__item--missing > .kc-ftree__row[b-xw0df0mh83] {
    background: #fee2e2;
    box-shadow: inset 3px 0 0 #b91c1c;
}

.kc-ftree__item--missing .kc-ftree__tag[b-xw0df0mh83] {
    color: #b91c1c;
    font-weight: 700;
}

/* A field we are actively mining for the quantity, and it has something. */
.kc-ftree__item--target > .kc-ftree__row[b-xw0df0mh83] {
    background: #e0f2fe;
    box-shadow: inset 3px 0 0 var(--kc-blue-deep);
}

.kc-ftree__item--target .kc-ftree__tag[b-xw0df0mh83] {
    color: var(--kc-info-text);
    font-weight: 700;
}

.kc-ftree__item--mapped > .kc-ftree__row:hover[b-xw0df0mh83],
.kc-ftree__item--idle > .kc-ftree__row:hover[b-xw0df0mh83] {
    background: var(--kc-surface-alt);
}

/* Present but empty and unread: visible, but it must not compete for attention. */
.kc-ftree__item--idle > .kc-ftree__row[b-xw0df0mh83] {
    opacity: 0.62;
}

/* Collapsible branches: the summary IS the row, so a container reads like any other field until opened. */
.kc-ftree details > summary[b-xw0df0mh83] {
    display: grid;
    grid-template-columns: minmax(11rem, 22fr) 5rem minmax(6rem, 30fr) 7.5rem;
    gap: 0.6rem;
    align-items: baseline;
    cursor: pointer;
    list-style: none;
}

.kc-ftree details > summary[b-xw0df0mh83]::-webkit-details-marker {
    display: none;
}

/* A twisty on the name, so a container is distinguishable from a leaf at a glance. */
.kc-ftree details > summary .kc-ftree__name[b-xw0df0mh83]::before {
    content: "▸ ";
    color: var(--kc-muted);
    font-size: 0.8em;
}

.kc-ftree details[open] > summary .kc-ftree__name[b-xw0df0mh83]::before {
    content: "▾ ";
}

/* The explanation itself: shown on hover AND keyboard focus, positioned over the row rather than pushing
   it around. */
.kc-ftree__info[b-xw0df0mh83] {
    position: relative;
}

.kc-ftree__tip[b-xw0df0mh83] {
    position: absolute;
    left: 0;
    top: calc(100% + 0.35rem);
    z-index: 40;
    display: none;
    width: max-content;
    max-width: 32rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--kc-navy);
    color: #fff;
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: var(--kc-shadow-lift);
    white-space: normal;
    cursor: default;
}

.kc-ftree__info:hover .kc-ftree__tip[b-xw0df0mh83],
.kc-ftree__info:focus .kc-ftree__tip[b-xw0df0mh83],
.kc-ftree__info:focus-visible .kc-ftree__tip[b-xw0df0mh83] {
    display: block;
}
/* /Components/Controls/KcPersonTrainingData.razor.rz.scp.css */
.kc-ptd[b-yady3efij7] {
    margin-top: 1rem; padding: 0.85rem 1rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.kc-ptd__row[b-yady3efij7] { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kc-ptd__state[b-yady3efij7] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kc-ptd__label[b-yady3efij7] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.kc-ptd__active[b-yady3efij7] { font-size: 0.9rem; color: #1f2937; font-weight: 600; }
.kc-ptd__left[b-yady3efij7] { font-size: 0.9rem; color: #92400e; font-weight: 700; }
.kc-ptd__fine[b-yady3efij7] { font-size: 0.75rem; color: #6b7280; max-width: 60ch; }
.kc-ptd__actions[b-yady3efij7] { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.kc-ptd__fld[b-yady3efij7] { display: flex; flex-direction: column; gap: 0.2rem; }
.kc-ptd__fld--grow[b-yady3efij7] { width: 100%; max-width: 24rem; }
.kc-ptd__fld > span[b-yady3efij7] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.kc-ptd__input[b-yady3efij7] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem; font-size: 0.85rem;
    background: #fff; font-family: inherit; min-width: 0;
}
.kc-ptd__btn[b-yady3efij7] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 0.95rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.kc-ptd__btn:disabled[b-yady3efij7] { opacity: 0.5; cursor: default; }
.kc-ptd__btn--ghost[b-yady3efij7] { background: #f3f4f6; color: #1f2937; }
.kc-ptd__btn--danger[b-yady3efij7] { background: #b91c1c; }
.kc-ptd__link[b-yady3efij7] {
    align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 0.82rem;
    color: #b91c1c; text-decoration: underline; cursor: pointer;
}
.kc-ptd__link:disabled[b-yady3efij7] { opacity: 0.5; cursor: default; }
.kc-ptd__confirm[b-yady3efij7] {
    display: flex; flex-direction: column; gap: 0.55rem; padding: 0.75rem 0.85rem; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca;
}
.kc-ptd__h3[b-yady3efij7] { margin: 0; font-size: 0.95rem; color: #7f1d1d; }
.kc-ptd__list[b-yady3efij7] { margin: 0; padding-left: 1.1rem; font-size: 0.82rem; color: #1f2937; line-height: 1.5; }
.kc-ptd__erased[b-yady3efij7] { margin: 0; font-size: 0.85rem; color: #374151; }
.kc-ptd__error[b-yady3efij7] { margin: 0; font-size: 0.82rem; color: #991b1b; }
.kc-ptd__warn[b-yady3efij7] { font-size: 0.78rem; color: #92400e; max-width: 60ch; }
.kc-ptd__oldcheck[b-yady3efij7] {
    display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.5rem 0.65rem; border-radius: 8px;
    background: #fffbeb; border: 1px solid #fde68a; cursor: pointer;
}
.kc-ptd__oldcheck input[b-yady3efij7] { margin-top: 0.15rem; }
/* /Components/Controls/KcPlatformChecklist.razor.rz.scp.css */
/* The installation checklist — the platform pages' own language (PlatformSettings.razor.css), with one
   colour per status. Class names are its own (pc-), so a style meant for the settings forms never reaches
   a checklist row. */

.pc[b-ferkcqfteh] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-left: 4px solid #d97706;
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0,0,0,.1));
    padding: 0.2rem 1.1rem 0.9rem;
}

.pc--ready[b-ferkcqfteh] { border-left-color: #059669; }

.pc-head[b-ferkcqfteh] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 0.7rem 0 0.3rem; cursor: pointer; list-style: none;
}
.pc-head[b-ferkcqfteh]::-webkit-details-marker { display: none; }
.pc-title[b-ferkcqfteh] { font-size: 1.1rem; font-weight: 700; color: var(--kc-navy, #324158); }
.pc-progress[b-ferkcqfteh] { font-size: 0.85rem; color: var(--kc-muted, #666); }

.pc-group[b-ferkcqfteh] {
    margin: 0.9rem 0 0.4rem;
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--kc-muted, #666);
}

.pc-list[b-ferkcqfteh] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }

.pc-item[b-ferkcqfteh] {
    display: grid; grid-template-columns: 1.6rem 1fr auto; gap: 0.6rem; align-items: start;
    padding: 0.55rem 0.7rem; border-radius: 0.45rem; background: var(--kc-surface-alt, #f7f7f8);
}

.pc-mark[b-ferkcqfteh] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4rem; height: 1.4rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800;
    background: #e5e7eb; color: #374151;
}
.pc-item--done .pc-mark[b-ferkcqfteh] { background: #d1fae5; color: #065f46; }
.pc-item--todo .pc-mark[b-ferkcqfteh] { background: #fee2e2; color: #b91c1c; }
.pc-item--warning .pc-mark[b-ferkcqfteh] { background: #fef3c7; color: #92400e; }
.pc-item--unknown .pc-mark[b-ferkcqfteh] { background: #fef3c7; color: #92400e; }

.pc-body[b-ferkcqfteh] { min-width: 0; }
.pc-line[b-ferkcqfteh] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pc-name[b-ferkcqfteh] { color: var(--kc-navy, #324158); font-size: 0.92rem; }

.pc-badge[b-ferkcqfteh] {
    display: inline-flex; padding: 0.05rem 0.45rem; border-radius: 999px;
    font-size: 0.66rem; font-weight: 700; background: #f3f4f6; color: #6b7280;
}
.pc-badge--done[b-ferkcqfteh] { background: #d1fae5; color: #065f46; }
.pc-badge--todo[b-ferkcqfteh] { background: #fee2e2; color: #b91c1c; }
.pc-badge--warning[b-ferkcqfteh], .pc-badge--unknown[b-ferkcqfteh] { background: #fef3c7; color: #92400e; }

.pc-state[b-ferkcqfteh] { margin: 0.15rem 0 0; font-size: 0.84rem; color: var(--kc-ink, #333); overflow-wrap: anywhere; }
.pc-why[b-ferkcqfteh] { margin: 0.1rem 0 0; font-size: 0.75rem; color: var(--kc-muted, #888); }

.pc-actions[b-ferkcqfteh] { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; align-items: center; }

.pc-btn[b-ferkcqfteh] {
    padding: 0.35rem 0.75rem; border-radius: 0.4rem; border: 1px solid transparent;
    background: var(--kc-navy, #324158); color: #fff; font: inherit; font-size: 0.8rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.pc-btn--ghost[b-ferkcqfteh] { background: #fff; color: var(--kc-navy, #324158); border-color: var(--kc-border-soft, rgba(0,0,0,.18)); }
.pc-btn:hover:not(:disabled)[b-ferkcqfteh] { filter: brightness(1.12); }
.pc-btn:disabled[b-ferkcqfteh] { opacity: 0.55; cursor: default; }

.pc-link[b-ferkcqfteh] { font-size: 0.8rem; font-weight: 600; color: var(--kc-navy, #324158); white-space: nowrap; }

.pc-linkbtn[b-ferkcqfteh] {
    border: 0; background: none; padding: 0; margin-left: 0.4rem; cursor: pointer;
    font: inherit; color: var(--kc-navy, #324158); text-decoration: underline;
}
.pc-linkbtn:disabled[b-ferkcqfteh] { opacity: 0.55; cursor: default; }

.pc-note[b-ferkcqfteh] { margin: 0.4rem 0 0; padding: 0.45rem 0.7rem; border-radius: 0.45rem; background: #eff6ff; color: #1e3a8a; font-size: 0.85rem; }
.pc-error[b-ferkcqfteh] { margin: 0.4rem 0 0; padding: 0.45rem 0.7rem; border-radius: 0.45rem; background: #fef2f2; color: #b91c1c; font-size: 0.85rem; }
.pc-asof[b-ferkcqfteh] { margin: 0.7rem 0 0; font-size: 0.74rem; color: var(--kc-muted, #888); }

/* On a phone the actions drop under the text rather than squeezing it to a column of single words. */
@media (max-width: 640px) {
    .pc-item[b-ferkcqfteh] { grid-template-columns: 1.6rem 1fr; }
    .pc-actions[b-ferkcqfteh] { grid-column: 2; justify-content: flex-start; }
}
/* /Components/Controls/KcPracticeBlock.razor.rz.scp.css */
/* "Prova på" (owner, 2026-10-13; mockups kurs-ovning.png and kurs-ovning-375.png). The real card is styled by
   kc-controls.css as everywhere; this file lays the block out around it. PHONE FIRST: the base rules are the
   phone's — card full width, the verdict one short line under it, the band its tag alone — and a screen wide
   enough puts card and verdict side by side, as the mockup shows on a computer. */

/* On a phone the course player lets the block span its part card from border to border (KcCoursePlayer.razor.css,
   .kr-block--practice): a band across the card, its top and bottom edges drawn, its sides the part's own — a side
   border would only put a second line against the card's. */
.kc-try[b-295y8aqkl5] {
    margin: 0.4rem 0 0.2rem;
    border: 1.5px solid var(--kc-border-soft);
    border-inline-width: 0;
    border-radius: 0;
    background: var(--kc-surface);
    overflow: hidden;
    min-width: 0;
}

.kc-try.is-done[b-295y8aqkl5] {
    border-color: var(--kc-status-ok-edge);
}

/* The band: what this is, before anything else — nothing is saved. Light stripes, so it never reads as a
   real card's state colour. */
.kc-try__band[b-295y8aqkl5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
    padding: 0.5rem 0.75rem;
    background: repeating-linear-gradient(-45deg, #e6f2f8 0, #e6f2f8 12px, #f3f9fc 12px, #f3f9fc 24px);
    border-bottom: 1px solid var(--kc-border-soft);
}

.kc-try__tag[b-295y8aqkl5] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: var(--kc-navy);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* A phone shows the tag alone: it says the one thing that matters, and the room is the card's. */
.kc-try__bandtext[b-295y8aqkl5] {
    display: none;
    font-size: 0.85rem;
    color: #374151;
}

.kc-try__body[b-295y8aqkl5] {
    padding: 0.8rem 0.75rem 0.9rem;
    min-width: 0;
}

.kc-try__example[b-295y8aqkl5] {
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.65rem;
    border-radius: 9px;
    background: #fff7e0;
    border: 1px solid #f0d58a;
    color: #5c4407;
    font-size: 0.88rem;
}

.kc-try__title[b-295y8aqkl5] {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--kc-navy);
}

.kc-try__hint[b-295y8aqkl5] {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    line-height: 1.45;
    color: #4b5563;
}

.kc-try__instr[b-295y8aqkl5] {
    margin: -0.3rem 0 0.75rem;
    font-size: 0.86rem;
    color: #374151;
}

.kc-try__instr summary[b-295y8aqkl5] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    cursor: pointer;
    font-weight: 700;
    color: #1e3a5f;
}

.kc-try__instr summary:focus-visible[b-295y8aqkl5] {
    outline: 3px solid color-mix(in srgb, var(--kc-blue) 60%, transparent);
    outline-offset: 2px;
}

.kc-try__instr p[b-295y8aqkl5] {
    margin: 0 0 0.2rem;
    padding: 0.5rem 0.7rem;
    border-radius: 9px;
    border: 1px solid var(--kc-border-soft);
    background: var(--kc-surface-alt);
    white-space: pre-line;
    line-height: 1.45;
}

.kc-try__stage[b-295y8aqkl5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    min-width: 0;
}

/* The card itself takes the block's whole width on a phone: the words around it keep their padding, the card does not
   need it — it has its own. */
.kc-try__card[b-295y8aqkl5] {
    min-width: 0;
    margin-inline: -0.75rem;
}

/* Inside a course part a phone's card is narrower than on the board: the card's name and its verdict pill share a
   line when they fit, and otherwise the pill goes under the name instead of over it. */
.kc-try__card[b-295y8aqkl5]  .kc-card__head {
    flex-wrap: wrap;
}

/* The verdict on a phone: one short line under the card. Before there is one, the line is not drawn — the hint
   above already says what to do — but its words stay for a screen reader, in the live region they are said in. */
.kc-try__verdict[b-295y8aqkl5] {
    min-width: 0;
}

.kc-try__headline[b-295y8aqkl5] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--kc-ink);
}

.kc-try__headline strong[b-295y8aqkl5] {
    margin-right: 0.3rem;
}

.kc-try__verdict.is-ok .kc-try__headline strong[b-295y8aqkl5],
.kc-try__verdict.is-ok .kc-try__headline > span[aria-hidden][b-295y8aqkl5] {
    color: #12693A;
}

.kc-try__verdict.is-handled .kc-try__headline strong[b-295y8aqkl5],
.kc-try__verdict.is-handled .kc-try__headline > span[aria-hidden][b-295y8aqkl5] {
    color: #7A5B12;
}

.kc-try__more p[b-295y8aqkl5] {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--kc-ink);
}

.kc-try__waiting[b-295y8aqkl5] {
    margin: 0;
    font-size: 0.9rem;
    color: #4b5563;
}

.kc-try__source[b-295y8aqkl5] {
    margin: 0.8rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--kc-border-soft);
    font-size: 0.78rem;
    color: #4b5563;
}

/* Phone: the details, the waiting words and the provenance are read out, not drawn. */
.kc-try__more[b-295y8aqkl5],
.kc-try__waiting[b-295y8aqkl5],
.kc-try__source[b-295y8aqkl5] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.kc-try__foot[b-295y8aqkl5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--kc-status-ok-edge);
    background: color-mix(in srgb, var(--kc-status-ok) 35%, var(--kc-surface));
}

.kc-try__done[b-295y8aqkl5] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--kc-status-ok);
    border: 1px solid var(--kc-status-ok-edge);
    color: #12693A;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kc-try__again[b-295y8aqkl5] {
    flex: 1 1 12rem;
    font-size: 0.82rem;
    color: #374151;
}

.kc-try__redo[b-295y8aqkl5] {
    margin-left: auto;
    min-height: 44px;
    min-width: 88px;
    padding: 0.45rem 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--kc-navy);
    background: var(--kc-surface);
    color: var(--kc-navy);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.kc-try__redo:disabled[b-295y8aqkl5] {
    opacity: 0.6;
    cursor: default;
}

.kc-try__redo:focus-visible[b-295y8aqkl5] {
    outline: 3px solid color-mix(in srgb, var(--kc-blue) 60%, transparent);
    outline-offset: 2px;
}

.kc-try__loading[b-295y8aqkl5],
.kc-try__missing[b-295y8aqkl5] {
    margin: 0.4rem 0;
    font-size: 0.9rem;
    color: #4b5563;
}

/* A computer screen: the mockup's layout. The band says what this is in full, and the verdict is a panel beside
   the card — the compact temperature tile gets a narrow column, the rich cards (checklist, delivery) a wide one. */
@media (min-width: 700px) {
    .kc-try[b-295y8aqkl5] {
        border-inline-width: 1.5px;
        border-radius: 14px;
    }

    .kc-try__card[b-295y8aqkl5] {
        margin-inline: 0;
    }

    .kc-try__band[b-295y8aqkl5] {
        padding: 0.55rem 1rem;
    }

    .kc-try__bandtext[b-295y8aqkl5] {
        display: inline;
    }

    .kc-try__body[b-295y8aqkl5] {
        padding: 1rem 1.1rem 1.1rem;
    }

    .kc-try__title[b-295y8aqkl5] {
        font-size: 1.25rem;
    }

    .kc-try__stage[b-295y8aqkl5] {
        gap: 1rem;
    }

    .kc-try__stage--tile[b-295y8aqkl5] {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    }

    .kc-try__stage--rich[b-295y8aqkl5] {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }

    .kc-try__verdict[b-295y8aqkl5] {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        padding: 0.9rem 1rem;
        border-radius: 12px;
        border: 1.5px solid var(--kc-border-soft);
        background: var(--kc-surface-alt);
    }

    .kc-try__verdict.is-ok[b-295y8aqkl5] {
        border-color: var(--kc-status-ok-edge);
        background: color-mix(in srgb, var(--kc-status-ok) 40%, var(--kc-surface));
    }

    .kc-try__verdict.is-handled[b-295y8aqkl5] {
        border-color: var(--kc-status-missed-edge);
        background: color-mix(in srgb, var(--kc-status-missed) 40%, var(--kc-surface));
    }

    .kc-try__headline[b-295y8aqkl5] {
        font-size: 1.2rem;
    }

    .kc-try__line[b-295y8aqkl5] {
        display: block;
        margin-top: 0.35rem;
        font-size: 1rem;
    }

    .kc-try__more[b-295y8aqkl5],
    .kc-try__waiting[b-295y8aqkl5],
    .kc-try__source[b-295y8aqkl5] {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }

    .kc-try__source[b-295y8aqkl5] {
        margin-top: auto;
        padding-top: 0.5rem;
        border-top: 1px dashed var(--kc-border-soft);
    }

    .kc-try__more[b-295y8aqkl5] {
        margin: 0.2rem 0 0.8rem;
    }

    .kc-try__waiting[b-295y8aqkl5] {
        margin-bottom: 0.8rem;
    }

    .kc-try__foot[b-295y8aqkl5] {
        padding: 0.6rem 1rem;
    }
}
/* /Components/Controls/KcProcessSteps.razor.rz.scp.css */
/* The setup flow. Numbered, left to right, current step marked by weight and a filled numeral rather than
   colour alone — a step you cannot tell you are on is worse than no stepper. */

.kc-steps[b-t5qy113j9a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.kc-steps__step[b-t5qy113j9a] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1 1 18rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: 0.5rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
}

.kc-steps__step:hover[b-t5qy113j9a] { border-color: var(--kc-navy, #1f3a5f); }

.kc-steps__step.is-now[b-t5qy113j9a] {
    border-color: var(--kc-navy, #1f3a5f);
    box-shadow: inset 0 0 0 1px var(--kc-navy, #1f3a5f);
}

.kc-steps__step.is-done[b-t5qy113j9a] { background: #f6faf8; }

.kc-steps__num[b-t5qy113j9a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--kc-line, #e5e7eb);
    font-size: 0.8125rem;
    font-weight: 700;
}

.kc-steps__step.is-now .kc-steps__num[b-t5qy113j9a] {
    background: var(--kc-navy, #1f3a5f);
    border-color: var(--kc-navy, #1f3a5f);
    color: #fff;
}

.kc-steps__step.is-done .kc-steps__num[b-t5qy113j9a] {
    background: #8bc7a6;
    border-color: #8bc7a6;
    color: #143024;
}

.kc-steps__label[b-t5qy113j9a] { display: flex; flex-direction: column; line-height: 1.25; }
.kc-steps__sub[b-t5qy113j9a] { font-size: 0.75rem; color: var(--kc-ink-muted, #6b7280); }
/* /Components/Controls/KcProfileMatrix.razor.rz.scp.css */

/* ---- The questionnaire as a sheet ---------------------------------------------------------------
   One row per question, one column per alternative. The alternatives sit in a fixed four-column grid,
   so a question with four or fewer answers is a single line and a longer one wraps onto a second —
   the wrap IS the signal that this question has many alternatives, without a word saying so. */
.kc-pmx[b-kby1ylaals] {
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: .75rem;
    background: var(--kc-surface, #fff);
    padding: 1rem 1.1rem 1.1rem;
    margin: 1rem 0;
}

.kc-pmx__head[b-kby1ylaals] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

/* How far the sheet has drifted from what the programme was built from. */
.kc-pmx__dirty[b-kby1ylaals] {
    flex: none;
    padding: .2rem .6rem;
    border-radius: 1rem;
    background: var(--kc-warn-bg, #fdf0d5);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.kc-pmx__saved[b-kby1ylaals] {
    padding: .5rem .7rem;
    border-radius: .5rem;
    background: var(--kc-ok-bg, #e7f3ec);
    font-size: .85rem;
}

.kc-pmx__grid[b-kby1ylaals] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--kc-line, #e5e7eb);
}

/* Question on the left at a fixed width, answers filling what is left — so every question's
   alternatives start on the same vertical line and the sheet can be read down a column. */
.kc-pmx__row[b-kby1ylaals] {
    display: grid;
    grid-template-columns: minmax(15rem, 22rem) 1fr;
    gap: .8rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--kc-line, #e5e7eb);
    align-items: start;
}

.kc-pmx__row:nth-child(even)[b-kby1ylaals] { background: var(--kc-zebra, #fafafa); }

/* Never answered — not the same as "none of these", and it must look different from both a filled row
   and a refused one, because it is the only state the generator treats as "nobody has been asked". */
.kc-pmx__row.is-unanswered .kc-pmx__text[b-kby1ylaals] { opacity: .55; }

.kc-pmx__q[b-kby1ylaals] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-left: .5rem;
}

.kc-pmx__num[b-kby1ylaals] {
    font-size: .7rem;
    font-weight: 700;
    opacity: .5;
    letter-spacing: .04em;
}

.kc-pmx__text[b-kby1ylaals] { font-size: .85rem; font-weight: 600; line-height: 1.25; }

.kc-pmx__multi[b-kby1ylaals] { font-size: .7rem; opacity: .6; }

.kc-pmx__why[b-kby1ylaals] { font-size: .72rem; opacity: .7; }
.kc-pmx__why > summary[b-kby1ylaals] { cursor: pointer; }
.kc-pmx__why > p[b-kby1ylaals] { margin: .3rem 0 0; line-height: 1.35; }

/* The columns. Four across; a fifth alternative starts the second line. */
.kc-pmx__opts[b-kby1ylaals] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .3rem;
    padding-right: .5rem;
}

.kc-pmx__opt[b-kby1ylaals] {
    padding: .3rem .55rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: .4rem;
    background: var(--kc-surface, #fff);
    font: inherit;
    font-size: .78rem;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.kc-pmx__opt:hover:not(:disabled)[b-kby1ylaals] { border-color: var(--kc-accent, #4a6b8a); }

.kc-pmx__opt:disabled[b-kby1ylaals] { cursor: default; opacity: .8; }

.kc-pmx__opt.is-on[b-kby1ylaals] {
    border-color: var(--kc-accent, #4a6b8a);
    box-shadow: inset 0 0 0 1px var(--kc-accent, #4a6b8a);
    font-weight: 600;
}

/* "None of these" is an answer and reads as one, but it is not the same KIND of answer as picking an
   activity, so it does not wear the accent. */
.kc-pmx__opt--none[b-kby1ylaals] { font-style: italic; opacity: .85; }

.kc-pmx__opt--none.is-on[b-kby1ylaals] {
    border-color: var(--kc-ink, #1f2937);
    box-shadow: inset 0 0 0 1px var(--kc-ink, #1f2937);
    font-style: normal;
    opacity: 1;
}

.kc-pmx__foot[b-kby1ylaals] { margin-top: .9rem; }

.kc-pmx__none[b-kby1ylaals] { margin: 1rem 0; }

/* Narrow: the answers drop under their question and go two across. Four tiny columns on a phone is
   four unreadable ones. */
@media (max-width: 900px) {
    .kc-pmx__row[b-kby1ylaals] { grid-template-columns: 1fr; gap: .4rem; }
    .kc-pmx__opts[b-kby1ylaals] { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-left: .5rem; }
}
/* /Components/Controls/KcProgramDocument.razor.rz.scp.css */
/* The approved programme as a read-only document. The job is the same one the editor's document has —
   making a long compliance text READABLE: a measure the eye can track, a number the eye can find, and a
   visible break between the prose a kitchen follows and the controls that prove it followed it.

   Its own class prefix (kc-pdoc) rather than the editor page's kc-doc, because these rules are scoped to
   this component and reusing the names would read as though the two shared a stylesheet. */

.kc-pdoc[b-1v41657vpf] {
    color: var(--kc-ink);
}

/* --- Which utgåva this is ------------------------------------------------- */

.kc-pdoc__meta[b-1v41657vpf] {
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--kc-border-soft);
}

.kc-pdoc__unit[b-1v41657vpf] {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-muted);
}

.kc-pdoc__stamp[b-1v41657vpf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    align-items: baseline;
    margin: 0 0 0.4rem;
}

.kc-pdoc__ver[b-1v41657vpf] {
    font-size: 1.125rem;
    color: var(--kc-navy);
}

.kc-pdoc__approved[b-1v41657vpf] {
    font-size: 0.9375rem;
    color: var(--kc-ink);
}

.kc-pdoc__facts[b-1v41657vpf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    font-size: 0.875rem;
    color: var(--kc-muted);
}

/* What the decimal in "Utgåva 4.17" counts. Its own block rather than another chip in the row above: it is
   a sentence to be read, not a fact to be scanned, and it answers a question the number would provoke. */
.kc-pdoc__legend[b-1v41657vpf] {
    display: grid;
    gap: 0.1rem;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--kc-muted);
}

.kc-pdoc__note[b-1v41657vpf],
.kc-pdoc__inherited[b-1v41657vpf] {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    color: var(--kc-muted);
}

/* A newer utgåva published above and not yet taken on. Deliberately NOT warning-coloured: a kitchen whose
   egenkontrollansvarig has not yet accepted the next version is doing exactly what appointing them meant,
   and an amber bar would tell an inspector otherwise. */
.kc-pdoc__standing[b-1v41657vpf] {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--kc-border-soft);
    background: rgba(0, 0, 0, 0.025);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--kc-ink);
}

/* An unapproved draft sitting in this kitchen's editor. Two jobs, and they pull against each other.

   It must not read as part of the document: hence the dashed rule, which nothing else in this stylesheet
   uses, and an indent that takes it out of the document's own measure. A reader skimming for the approved
   text must be able to see at a glance that this block is not it.

   And it must not read as an alarm either. Like .kc-pdoc__standing it is deliberately NOT warning-coloured
   — an amber bar over an approved programme says "this document has a problem", and it does not. Unfinished
   work is normal, and the document below is in force and complete. Distinct from the standing note by the
   dash and the indent rather than by colour, because the difference between the two is what they SAY. */
.kc-pdoc__draft[b-1v41657vpf] {
    margin: 0 0 1rem 0.75rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px dashed var(--kc-border-soft);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--kc-muted);
}

.kc-pdoc__drafthead[b-1v41657vpf] {
    margin: 0;
    font-weight: 600;
    color: var(--kc-ink);
}

.kc-pdoc__draftbody[b-1v41657vpf] {
    margin: 0.2rem 0 0;
}

/* --- Contents beside the text --------------------------------------------- */

.kc-pdoc__layout[b-1v41657vpf] {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* One column once the contents would cost the text its measure. */
@media (max-width: 60rem) {
    .kc-pdoc__layout[b-1v41657vpf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A host that suppressed the contents list gets the width back rather than an empty gutter. */
.kc-pdoc__layout--full[b-1v41657vpf] {
    grid-template-columns: minmax(0, 1fr);
}

.kc-pdoc__toc[b-1v41657vpf] {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 0.5rem;
    border-right: 1px solid var(--kc-border-soft);
}

/* Every heading in this document — the contents' own, each chapter's and each control's — comes out of a
   Razor TEMPLATE in @code rather than from markup, because the level depends on what hosts the component.
   The CSS-isolation attribute is added to markup elements, so those headings would never match a plain
   class selector here. ::deep reaches them from .kc-pdoc, which is markup and therefore is scoped. */
.kc-pdoc[b-1v41657vpf]  .kc-pdoc__toch {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-muted);
}

.kc-pdoc__toclist[b-1v41657vpf] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kc-pdoc__tocitem[b-1v41657vpf] {
    padding-left: calc(var(--kc-pdoc-depth, 0) * 0.85rem);
}

.kc-pdoc__toclink[b-1v41657vpf] {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.35rem;
    padding: 0.2rem 0;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--kc-ink);
    text-decoration: none;
}

.kc-pdoc__toclink:hover[b-1v41657vpf],
.kc-pdoc__toclink:focus-visible[b-1v41657vpf] {
    color: var(--kc-navy);
    text-decoration: underline;
}

/* --- The document --------------------------------------------------------- */

.kc-pdoc__body-col[b-1v41657vpf] {
    min-width: 0;
}

.kc-pdoc__sect[b-1v41657vpf] {
    margin: 0 0 2rem;
}

/* The number sits in its own column so a run of headings lines up on the title rather than ragging out
   from numbers of different widths. */
.kc-pdoc[b-1v41657vpf]  .kc-pdoc__h {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    color: var(--kc-navy);
    /* Anchored navigation lands below a sticky header rather than under it. */
    scroll-margin-top: 1.5rem;
}

.kc-pdoc[b-1v41657vpf]  .kc-pdoc__num {
    color: var(--kc-muted);
    font-variant-numeric: tabular-nums;
}

.kc-pdoc__from[b-1v41657vpf] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--kc-muted);
}

.kc-pdoc__body[b-1v41657vpf] {
    /* A comfortable measure for prose somebody is expected to have read. */
    max-width: 44rem;
    line-height: 1.6;
}

/* The regulation an inspector asks for, beside the routine rather than in an annex. */
.kc-pdoc__regs[b-1v41657vpf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    align-items: baseline;
    margin: 0 0 0.6rem;
    font-size: 0.8125rem;
}

.kc-pdoc__regslbl[b-1v41657vpf] {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-muted);
}

/* A recorded exclusion, published where the routine would have been. */
.kc-pdoc__excluded[b-1v41657vpf] {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--kc-border-soft);
    background: rgba(0, 0, 0, 0.025);
}

.kc-pdoc__excludedhead[b-1v41657vpf] {
    margin: 0 0 0.2rem;
    font-weight: 600;
    color: var(--kc-navy);
}

.kc-pdoc__excludedwhy[b-1v41657vpf] {
    margin: 0 0 0.2rem;
    line-height: 1.5;
}

/* The kitchen's own words, marked rather than merged: an inspector is entitled to see which sentences carry
   the regulation's authority and which are this kitchen describing its own premises. */
.kc-pdoc__addendum[b-1v41657vpf] {
    max-width: 44rem;
    margin: 0.75rem 0;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--kc-navy);
    background: rgba(50, 65, 88, 0.04);
    line-height: 1.6;
}

.kc-pdoc__addendumlabel[b-1v41657vpf] {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-muted);
}

/* --- What each control measures ------------------------------------------- */

.kc-pdoc__ctrl[b-1v41657vpf] {
    margin: 0.75rem 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--kc-border-soft);
    border-radius: 6px;
    scroll-margin-top: 1.5rem;
}

.kc-pdoc[b-1v41657vpf]  .kc-pdoc__ctrlh {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: var(--kc-navy);
}

.kc-pdoc__cfacts[b-1v41657vpf] {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.9375rem;
}

.kc-pdoc__cfacts dt[b-1v41657vpf] {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-muted);
    padding-top: 0.15rem;
}

.kc-pdoc__cfacts dd[b-1v41657vpf] {
    margin: 0;
    line-height: 1.5;
}

.kc-pdoc__band[b-1v41657vpf] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Provenance beside the figure, never below it — see ProgramDocumentText.Provenance. */
.kc-pdoc__prov--law[b-1v41657vpf] {
    background: rgba(50, 65, 88, 0.12);
    color: var(--kc-navy);
}

.kc-pdoc__prov--rec[b-1v41657vpf],
.kc-pdoc__prov--own[b-1v41657vpf] {
    background: rgba(0, 0, 0, 0.05);
    color: var(--kc-muted);
}

.kc-pdoc__cite[b-1v41657vpf] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    color: var(--kc-muted);
}

.kc-pdoc__citelbl[b-1v41657vpf] {
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* --- Nothing to show ------------------------------------------------------ */

.kc-pdoc__empty[b-1v41657vpf] {
    max-width: 44rem;
}

.kc-pdoc[b-1v41657vpf]  .kc-pdoc__emptyh {
    margin: 0 0 0.4rem;
    color: var(--kc-navy);
}
/* /Components/Controls/KcProgramText.razor.rz.scp.css */
/* How programme prose sets. Only this — the reference and hover-card styles are global (see the
   "Programme references" block in kitcheck-design.css), because the same markup has to look the same
   where scoped css cannot reach it: the print view, and any preview built at runtime. */

.kc-progtext[b-26599rt379] {
    /* The authored text is plain text with newlines, and the blank line a manager put between two
       paragraphs is the only paragraphing this component gets. Collapsing it would run the whole
       section together. */
    white-space: pre-wrap;

    /* A broken reference shows its raw slug. Unbroken, that slug pushes a phone sideways. */
    overflow-wrap: break-word;
}

/* The card and the link are not authored prose, so they are exempt from the pre-wrap above — the
   correction lives here because this sheet is what turned it on. */
.kc-progtext .kc-ref-host[b-26599rt379],
.kc-progtext .kc-refcard[b-26599rt379] {
    white-space: normal;
}
/* /Components/Controls/KcProgramTextEditor.razor.rz.scp.css */
/* The programme-text editor: the toolbar that writes the syntax, the box, and the preview that shows
   what the syntax became. Stacked rather than side by side, because a broken reference has to be legible
   directly under the sentence that broke it — on a phone as well as on a laptop.

   Only this component's own elements are styled here. The references and their hover cards inside the
   preview are global (kitcheck-design.css), deliberately: the preview must look like the printed
   programme, not like an editor's idea of it. */

.kc-progedit[b-bmceox162z] { display: flex; flex-direction: column; gap: 0.5rem; }

.kc-progedit__status[b-bmceox162z] { margin: 0; font-size: 0.8rem; color: var(--kc-muted); }

/* The one place a broken reference is stated in words. Weight as well as colour, because the count is
   the sentence a colour-blind author reads instead of the marks in the preview. */
.kc-progedit__status.is-broken[b-bmceox162z] { color: var(--kc-error-text); font-weight: 600; }

.kc-progedit__prevhead[b-bmceox162z] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.kc-progedit__preview[b-bmceox162z] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-card);
    background: var(--kc-surface-alt);
    /* No overflow rule on purpose: a hover card is positioned against the reference inside this box, and
       clipping here would cut off the very explanation the preview exists to give. */
}


/* --- The reference picker, in the toolbar ---------------------------------------------------------
   A dropdown rather than a bar above the editor: inserting a reference is the same kind of act as
   inserting a table, so it belongs among the other insert tools rather than floating outside the frame. */

.kc-refpick[b-bmceox162z] { position: relative; display: inline-flex; }

.kc-refpick__btn[b-bmceox162z] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    color: var(--kc-ink);
    cursor: pointer;
}

.kc-refpick__btn:hover[b-bmceox162z] { background: var(--kc-surface-alt); border-color: var(--kc-line, #e5e7eb); }
.kc-refpick__btn.is-open[b-bmceox162z] { background: var(--kc-blue); border-color: var(--kc-navy); color: #08313f; }

/* Anchored under the button and above the writing surface, so choosing one does not scroll the document
   the author was looking at. Opens LEFTWARDS: the tool sits at the end of the toolbar, so a panel hung
   from its left edge runs off the page. */
.kc-refpick__panel[b-bmceox162z] {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: min(26rem, 80vw);
    background: var(--kc-surface);
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: var(--kc-radius-card);
    box-shadow: var(--kc-shadow-lift);
}

.kc-refpick__kinds[b-bmceox162z] {
    display: flex;
    gap: 0.25rem;
    padding: 0.4rem;
    border-bottom: 1px solid var(--kc-line, #e5e7eb);
}

.kc-refpick__kind[b-bmceox162z] {
    flex: 1;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: 0.3rem;
    background: var(--kc-surface-alt);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kc-muted);
    cursor: pointer;
}

.kc-refpick__kind[aria-pressed="true"][b-bmceox162z] {
    background: var(--kc-blue);
    border-color: var(--kc-navy);
    color: #08313f;
}

/* The list scrolls, and its ceiling is the VIEWPORT rather than a fixed height — twenty-five provisions
   must not produce a panel taller than the window it opens in. Nothing clips it: the panel is free to
   hang below the editor, and measuring confirmed the only limit is this one.

   Generous, because the previous ceiling showed four rows of twenty-five and the partly-visible row at
   the boundary read as a cut-off panel rather than as a list that scrolls. */
.kc-refpick__list[b-bmceox162z] {
    display: flex;
    flex-direction: column;
    max-height: min(24rem, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kc-refpick__item[b-bmceox162z] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-bottom: 1px solid var(--kc-border-soft);
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kc-refpick__item:last-child[b-bmceox162z] { border-bottom: 0; }
.kc-refpick__item:hover[b-bmceox162z],
.kc-refpick__item:focus-visible[b-bmceox162z] { background: var(--kc-surface-alt); }

.kc-refpick__label[b-bmceox162z] { font-size: 0.85rem; font-weight: 600; color: var(--kc-navy); }
.kc-refpick__hint[b-bmceox162z] { font-size: 0.75rem; line-height: 1.35; color: var(--kc-muted); }
.kc-refpick__empty[b-bmceox162z] { padding: 0.6rem; display: block; }

/* --- Inside the writing surface -------------------------------------------------------------------
   A reference is an OBJECT, not a run of words that happen to be blue. Marking it in the editor is what
   tells an author it moves and deletes as one thing — and stops them trying to correct a section title by
   retyping it, which would only change the cache, never the target. ::deep because Radzen owns this DOM. */

[b-bmceox162z] .rz-html-editor-content span[data-kc-ref] {
    padding: 0.05rem 0.3rem;
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--kc-blue) 22%, #fff);
    border: 1px solid color-mix(in srgb, var(--kc-blue-deep) 35%, #fff);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    white-space: nowrap;
    /* Same italic and weight the finished document gives it, so the writing surface and the printed page
       do not disagree about what a citation looks like. */
    font-style: italic;
    font-weight: 600;
}

/* Radzen's own frame, brought into the house look. Only the wrapper and the writing area — the toolbar
   buttons stay Radzen's, because restyling a component library's internals is a maintenance debt that
   comes due at every upgrade.

   No overflow:hidden here. It was, briefly, to clip the corners against the border — and a clipping
   ancestor is the classic way to cut a dropdown off at the edge of its host. It is spelled out as visible
   rather than merely omitted, and the corners are rounded on the parts instead. */
[b-bmceox162z] .rz-html-editor {
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-card);
    overflow: visible;
}

[b-bmceox162z] .rz-html-editor-toolbar {
    overflow: visible;
    border-top-left-radius: var(--kc-radius-card);
    border-top-right-radius: var(--kc-radius-card);
}

[b-bmceox162z] .rz-html-editor-content {
    border-bottom-left-radius: var(--kc-radius-card);
    border-bottom-right-radius: var(--kc-radius-card);
    font-family: var(--kc-font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--kc-ink);
}

/* A table typed into the programme should look like the one that will be printed, not like a bare grid. */
[b-bmceox162z] .rz-html-editor-content table {
    border-collapse: collapse;
    margin: 0.4rem 0;
}

[b-bmceox162z] .rz-html-editor-content th,
[b-bmceox162z] .rz-html-editor-content td {
    border: 1px solid var(--kc-line, #e5e7eb);
    padding: 0.25rem 0.45rem;
    text-align: left;
}
/* /Components/Controls/KcQuizPaper.razor.rz.scp.css */
/* ---- LE-01: the quiz paper ----
   One question at a time on a phone, with large options and a bar at the bottom; the whole paper on a
   computer. Navy is the course's own colour (an answered dot, a picked option); amber is a learner's mark
   to come back to. */

/* ---- TR-29: which attempt, what passes, and the way back to the material ---- */
.kq-head[b-hem4d7iyno] {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem;
    margin: 0 0 0.9rem; padding: 0 0 0.7rem; border-bottom: 1px solid #f3f4f6;
}
.kq-attempt[b-hem4d7iyno] {
    display: flex; flex-wrap: wrap; gap: 0.15rem 0.45rem; margin: 0;
    font-size: 0.85rem; font-weight: 600; color: #1f2937; font-variant-numeric: tabular-nums;
}
.kq-back[b-hem4d7iyno] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; min-width: 0; }
.kq-back__btn[b-hem4d7iyno] {
    min-height: 2.25rem; padding: 0 0.6rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
    font: inherit; font-size: 0.82rem; font-weight: 600; color: #1d4ed8; cursor: pointer; white-space: nowrap;
}
.kq-back__btn:hover[b-hem4d7iyno] { border-color: #1d4ed8; }
.kq-back__btn:disabled[b-hem4d7iyno] { opacity: 0.5; cursor: default; }
.kq-back__note[b-hem4d7iyno] { font-size: 0.76rem; color: #4b5563; text-align: right; }

/* ---- TR-29: handing in an incomplete paper asks first, here ---- */
.kq-confirm[b-hem4d7iyno] {
    margin: 0.8rem 0 0; padding: 0.75rem 0.9rem; border: 1px solid #f59e0b; border-left-width: 4px;
    border-radius: 9px; background: #fffbeb; color: #78350f;
}
.kq-confirm__msg[b-hem4d7iyno] { margin: 0 0 0.6rem; font-size: 0.92rem; font-weight: 600; }
.kq-confirm__msg:focus:not(:focus-visible)[b-hem4d7iyno] { outline: none; }
.kq-confirm__actions[b-hem4d7iyno] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kq-confirm__actions .kr-btn[b-hem4d7iyno] { min-height: 2.25rem; }
.kq-confirm__no[b-hem4d7iyno] {
    min-height: 2.25rem; padding: 0 0.9rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
    font: inherit; font-size: 0.83rem; font-weight: 600; color: #1f2937; cursor: pointer;
}

/* ---- TR-32: an answer the server did not take — at its question, with the retry ---- */
.kq-unsaved[b-hem4d7iyno] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem;
    margin: 0.55rem 0 0; padding: 0.45rem 0.7rem; border-radius: 8px; background: #fef2f2;
    font-size: 0.85rem; font-weight: 600; color: #991b1b;
}
.kq-unsaved__retry[b-hem4d7iyno] {
    min-height: 2.25rem; padding: 0 0.8rem; border: 1px solid #b91c1c; border-radius: 8px; background: #fff;
    font: inherit; font-size: 0.82rem; font-weight: 600; color: #991b1b; cursor: pointer;
}
.kq-unsaved__retry:disabled[b-hem4d7iyno] { opacity: 0.5; cursor: default; }

/* ---- the strip: where the reader is, what is answered, what is marked ---- */
.kq-top[b-hem4d7iyno] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    margin: 0 0 1.1rem;
}
.kq-nav[b-hem4d7iyno] { min-width: 0; }
.kq-strip[b-hem4d7iyno] {
    position: relative; display: flex; flex-wrap: wrap; gap: 0.45rem;
    /* Room for a dot's flag and the current ring, which a strip that scrolls sideways would otherwise clip. */
    margin: 0; padding: 0.55rem 0.45rem 0.35rem 0.35rem; list-style: none;
}

.kq-dot[b-hem4d7iyno] {
    position: relative; min-width: 2.25rem; height: 2.25rem; padding: 0 0.45rem;
    border: 1.5px solid #94a3b8; border-radius: 999px; background: #fff;
    font: inherit; font-size: 0.85rem; font-weight: 600; color: #334155;
    font-variant-numeric: tabular-nums; cursor: pointer;
}
.kq-dot:hover[b-hem4d7iyno] { border-color: #475569; }
.kq-dot.is-answered[b-hem4d7iyno] {
    border-color: var(--kc-navy, #324158); background: var(--kc-navy, #324158); color: #fff;
}
/* The mark: a flag on the dot's shoulder, not a colour alone. */
.kq-dot.is-flagged[b-hem4d7iyno] { border-color: #b45309; }
.kq-dot.is-flagged[b-hem4d7iyno]::after {
    content: "⚑"; position: absolute; top: -0.5rem; right: -0.4rem;
    width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #b45309; color: #fff;
    font-size: 0.62rem; line-height: 1.1rem; text-align: center;
}
.kq-dot.is-current[b-hem4d7iyno] { outline: 3px solid var(--kc-blue-deep, #2e93bc); outline-offset: 2px; }
.kq-dot--end[b-hem4d7iyno] { padding: 0 0.8rem; }
.kq-dot:focus-visible[b-hem4d7iyno] { outline: 3px solid #1d4ed8; outline-offset: 2px; }

.kq-layout[b-hem4d7iyno] {
    flex: none; min-height: 2.25rem; padding: 0 0.1rem; border: 0; background: none;
    font: inherit; font-size: 0.8rem; color: #1d4ed8; text-decoration: underline; cursor: pointer;
    white-space: nowrap;
}

/* ---- a question ---- */
.kr-q[b-hem4d7iyno] { min-width: 0; margin: 0 0 1.4rem; padding: 0; border: 0; }
.kr-q__legend[b-hem4d7iyno] { padding: 0; }
.kr-q__n[b-hem4d7iyno] {
    margin: 0; font-size: 0.74rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280;
}
.kr-q__n:focus:not(:focus-visible)[b-hem4d7iyno] { outline: none; }
.kr-q__prompt[b-hem4d7iyno] { margin: 0.3rem 0 0.7rem; font-size: 0.98rem; line-height: 1.5; color: #111827; overflow-wrap: anywhere; }
/* The prompt and the answers are the author's HTML, rendered as markup: ::deep reaches inside it. Without it
   a paragraph's own margins made every answer twice as tall as its words. */
.kr-q__prompt[b-hem4d7iyno]  :first-child { margin-top: 0; }
.kr-q__prompt[b-hem4d7iyno]  :last-child { margin-bottom: 0; }
.kr-q__prompt[b-hem4d7iyno]  img { max-width: 100%; height: auto; }
/* TR-06 S4: how a multi-answer question is scored — quiet, between the question and its answers. */
.kr-q__rule[b-hem4d7iyno] { margin: -0.3rem 0 0.6rem; font-size: 0.82rem; line-height: 1.4; color: #4b5563; }
.kr-q__opts[b-hem4d7iyno] { display: flex; flex-direction: column; gap: 0.4rem; }

.kr-opt[b-hem4d7iyno] {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.55rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 9px;
    font-size: 0.9rem; line-height: 1.45; color: #374151; cursor: pointer; overflow-wrap: anywhere;
}
.kr-opt:hover[b-hem4d7iyno] { border-color: #d1d5db; background: #fafafa; }
.kr-opt.is-picked[b-hem4d7iyno] { border-color: var(--kc-navy, #1f2937); background: #f3f4f6; }
.kr-opt input[b-hem4d7iyno] { margin-top: 0.2rem; flex: none; }
.kr-opt__text[b-hem4d7iyno] { min-width: 0; }
.kr-opt__text[b-hem4d7iyno]  :first-child { margin-top: 0; }
.kr-opt__text[b-hem4d7iyno]  :last-child { margin-bottom: 0; }
.kr-opt__text[b-hem4d7iyno]  img { max-width: 100%; height: auto; }

/* "Markera för att återkomma": a quiet toggle until it is on. */
.kq-flag[b-hem4d7iyno] {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem;
    min-height: 2.25rem; padding: 0.3rem 0.85rem; border: 1px solid #cbd5e1; border-radius: 999px;
    background: #fff; font: inherit; font-size: 0.82rem; color: #475569; cursor: pointer;
}
.kq-flag:hover[b-hem4d7iyno] { border-color: #94a3b8; }
.kq-flag:disabled[b-hem4d7iyno] { opacity: 0.5; cursor: default; }
.kq-flag.is-on[b-hem4d7iyno] { border-color: #b45309; background: #fffbeb; color: #92400e; font-weight: 600; }
.kq-flag__icon[b-hem4d7iyno] { font-size: 0.95rem; line-height: 1; }

/* ---- one at a time: the bar at the bottom, kept in reach while a long question scrolls ---- */
.kq-bar[b-hem4d7iyno] {
    position: sticky; bottom: 0; z-index: 1;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem;
    margin: 0.4rem -1.2rem -1.2rem; padding: 0.7rem 1.2rem;
    border-top: 1px solid #e5e7eb; border-radius: 0 0 10px 10px; background: #fff;
}
.kq-bar__btn[b-hem4d7iyno] {
    min-height: 2.6rem; padding: 0 0.9rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
    font: inherit; font-size: 0.88rem; font-weight: 600; color: #1f2937; cursor: pointer; white-space: nowrap;
    justify-self: start;
}
.kq-bar__btn--next[b-hem4d7iyno] {
    justify-self: end; border-color: var(--kc-navy, #324158); background: var(--kc-navy, #324158); color: #fff;
}
.kq-bar__btn:disabled[b-hem4d7iyno] { opacity: 0.4; cursor: default; }
.kq-bar__btn--none[b-hem4d7iyno] { visibility: hidden; }
.kq-bar__where[b-hem4d7iyno] {
    font-size: 0.85rem; color: #4b5563; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap;
}

/* ---- the overview before handing in ---- */
.kq-overview[b-hem4d7iyno] { margin: 0 0 1rem; }
.kq-overview__head[b-hem4d7iyno] { margin: 0 0 0.5rem; font-size: 1.02rem; font-weight: 600; color: #1f2937; }
.kq-overview__head:focus:not(:focus-visible)[b-hem4d7iyno] { outline: none; }
.kq-overview__all[b-hem4d7iyno] { margin: 0.4rem 0; font-size: 0.9rem; color: #166534; }
.kq-overview__group[b-hem4d7iyno] { margin: 0.8rem 0; padding: 0.6rem 0.8rem; border-radius: 9px; background: #f8fafc; }
.kq-overview__group p[b-hem4d7iyno] { margin: 0 0 0.45rem; font-size: 0.88rem; color: #374151; }
.kq-overview__flagged[b-hem4d7iyno] { background: #fffbeb; }
.kq-overview__group ul[b-hem4d7iyno] { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.kq-go[b-hem4d7iyno] {
    min-height: 2.25rem; padding: 0 0.8rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff;
    font: inherit; font-size: 0.85rem; color: #1d4ed8; cursor: pointer;
}
.kq-go:hover[b-hem4d7iyno] { border-color: #1d4ed8; }
.kq-handin[b-hem4d7iyno] { margin-top: 0.6rem; }

/* ---- the whole paper: hand in at the bottom ---- */
.kr-paper__foot[b-hem4d7iyno] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding-top: 0.9rem; border-top: 1px solid #f3f4f6;
}
.kr-answered[b-hem4d7iyno] { font-size: 0.82rem; color: #6b7280; }

.kr-btn[b-hem4d7iyno] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.42rem 0.95rem; font-size: 0.83rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kr-btn:disabled[b-hem4d7iyno] { opacity: 0.5; cursor: default; }

/* ---- a phone: finger-sized everything ---- */
@media (max-width: 640px) {
    /* One row of finger-sized dots that scrolls sideways inside itself when the paper is long — the page
       never does — with the current dot kept in view. The overview lists everything a scrolled-off dot
       would show. */
    .kq-top[b-hem4d7iyno] { flex-direction: column; align-items: stretch; gap: 0.1rem; margin-bottom: 0.8rem; }
    .kq-nav[b-hem4d7iyno] { max-width: 100%; }
    .kq-strip[b-hem4d7iyno] { flex-wrap: nowrap; gap: 0.35rem; overflow-x: auto; scrollbar-width: thin; }
    .kq-dot--end[b-hem4d7iyno] { padding: 0 0.6rem; }
    .kq-strip > li[b-hem4d7iyno] { flex: none; }
    .kq-dot[b-hem4d7iyno] { min-width: var(--kc-touch-min, 44px); height: var(--kc-touch-min, 44px); font-size: 0.95rem; }
    /* The layout switch is a link to look at but a finger's target all the same. */
    .kq-layout[b-hem4d7iyno] { align-self: flex-end; min-height: var(--kc-touch-min, 44px); padding: 0 0.5rem; }

    .kr-q__prompt[b-hem4d7iyno] { font-size: 1.05rem; }
    .kr-opt[b-hem4d7iyno] { min-height: var(--kc-touch-min, 44px); padding: 0.75rem 0.85rem; font-size: 1rem; align-items: center; }
    .kr-opt input[b-hem4d7iyno] { width: 1.25rem; height: 1.25rem; margin-top: 0; }
    .kq-flag[b-hem4d7iyno] { min-height: var(--kc-touch-min, 44px); }
    .kq-go[b-hem4d7iyno] { min-height: var(--kc-touch-min, 44px); min-width: var(--kc-touch-min, 44px); }

    .kq-bar[b-hem4d7iyno] { margin: 0.4rem -0.75rem -0.9rem; padding: 0.6rem 0.75rem; gap: 0.35rem; }
    .kq-bar__btn[b-hem4d7iyno] { min-height: var(--kc-touch-min, 44px); padding: 0 0.75rem; }

    .kq-handin[b-hem4d7iyno], .kr-paper__foot .kr-btn[b-hem4d7iyno] { min-height: var(--kc-touch-min, 44px); padding: 0 1.2rem; font-size: 0.95rem; }

    /* TR-29 and TR-32 on a phone: the way back above the paper, under the attempt line, and finger-sized. */
    .kq-head[b-hem4d7iyno] { flex-direction: column; align-items: stretch; }
    .kq-back[b-hem4d7iyno] { align-items: stretch; }
    .kq-back__btn[b-hem4d7iyno] { min-height: var(--kc-touch-min, 44px); }
    .kq-back__note[b-hem4d7iyno] { text-align: left; }
    .kq-confirm__actions .kr-btn[b-hem4d7iyno], .kq-confirm__no[b-hem4d7iyno], .kq-unsaved__retry[b-hem4d7iyno] {
        min-height: var(--kc-touch-min, 44px); min-width: var(--kc-touch-min, 44px); padding: 0 1rem; font-size: 0.95rem;
    }
}
/* /Components/Controls/KcRenewAction.razor.rz.scp.css */
/* Sits inside the "Går ut snart" warning, after the certificate's line, and wraps under it on a narrow screen
   rather than pushing the page sideways. */
.kr[b-o0rvgm7i3t] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; margin-left: 0.4rem; }

/* The warning's own ink on its own background, filled so it reads as the one thing to press. 44 px tall: a
   thumb on a phone in a kitchen. */
.kr-btn[b-o0rvgm7i3t] {
    min-height: var(--kc-touch-min, 44px); min-width: var(--kc-touch-min, 44px); padding: 0.45rem 1rem; border: 0; border-radius: 8px;
    background: #9a3412; color: #fff; font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.kr-btn:hover[b-o0rvgm7i3t] { background: #7c2d12; }
.kr-btn:focus-visible[b-o0rvgm7i3t] { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.kr-btn:disabled[b-o0rvgm7i3t] { opacity: 0.55; cursor: default; }

.kr-state[b-o0rvgm7i3t] { font-size: 0.82rem; color: #7c2d12; font-weight: 600; }

/* Deep blue on the warning's cream reads at better than 6:1; padded to a thumb's height. */
.kr-link[b-o0rvgm7i3t] {
    display: inline-flex; align-items: center; min-height: var(--kc-touch-min, 44px); font-size: 0.85rem; font-weight: 600;
    color: #1d4ed8; text-decoration: underline;
}

.kr-ask[b-o0rvgm7i3t] { font-size: 0.82rem; color: #7c2d12; font-style: italic; }

@media (max-width: 600px) {
    .kr[b-o0rvgm7i3t] { display: flex; margin: 0.35rem 0 0.25rem; }
}
/* /Components/Controls/KcUnitSetup.razor.rz.scp.css */
/* A kitchen's own setup: the two lines it must not let a manager miss. */

/* "Öppettider ej angivna" and "Över gränsen i er plan". Neither is something the manager did wrong, so
   neither is in the error colour: both are the waiting amber the programme's pending-change verdict uses —
   a state to deal with, stated before anybody acts on the wrong assumption. */
.kc-setupflag[b-m3nwuaj5g9] {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.75rem;
    border-left: 4px solid var(--kc-status-missed-edge);
    border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--kc-status-missed) 35%, white);
    color: var(--kc-warn-text);
    font-size: 0.95rem;
}

.kc-setupflag strong[b-m3nwuaj5g9] { font-weight: 700; }

.kc-setupflag .kc-fhint[b-m3nwuaj5g9] { margin-top: 0; }

.kc-setupflag .kc-btn[b-m3nwuaj5g9] { justify-self: start; }

/* The balance beside the button that spends it, so it is read before the click rather than after. */
.kc-setupbar[b-m3nwuaj5g9] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.kc-setupallowance[b-m3nwuaj5g9] {
    font-size: 0.8rem;
    color: var(--kc-muted, #64748b);
    white-space: nowrap;
}
/* /Components/Controls/KcVisaHur.razor.rz.scp.css */
/* "Visa hur" — the pop-up a "?" on a day-board card opens (the owner's approved mockups, 2026-10-13).
   A panel beside the board's own popup on a computer; a bottom sheet at phone width. It sits over the board's popup
   (.kc-boardoverlay is z-index 60). */

.vh-scrim[b-8ryzr7lv15] {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(20, 30, 40, 0.28);
    display: flex; align-items: center; justify-content: flex-end;
    padding: 1.2rem max(1.4rem, calc((100vw - 1160px) / 2 + 1.2rem));
}

.vh[b-8ryzr7lv15] {
    width: min(560px, 100%); max-height: min(94vh, 880px);
    display: flex; flex-direction: column; gap: 0.85rem;
    padding: 1.15rem 1.25rem 1rem;
    background: var(--kc-surface); border-radius: 16px;
    border: 1px solid var(--kc-border-soft);
    box-shadow: 0 18px 50px rgba(20, 30, 40, 0.38);
    overflow: hidden; overscroll-behavior: contain;
}
.vh:focus[b-8ryzr7lv15] { outline: none; }

/* A rich card (a cleaning round, a delivery) is taller than any sheet: the sheet keeps one height from step to step, so
   the buttons never move under a finger, and the card scrolls inside its stage. The temperature tile just fits. */
.vh--rich[b-8ryzr7lv15] { height: min(94vh, 880px); }

.vh__head[b-8ryzr7lv15] { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.vh__titles[b-8ryzr7lv15] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vh__eyebrow[b-8ryzr7lv15] {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    /* The brand blue, deepened to 5.3:1 on white (the plain one is 3.5:1, under the 4.5 small bold text needs). */
    color: color-mix(in srgb, var(--kc-blue-deep) 72%, #0b2230);
}
.vh__title[b-8ryzr7lv15] { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--kc-navy); line-height: 1.2; }
.vh__close[b-8ryzr7lv15] {
    flex: none; min-width: 44px; min-height: 44px; border-radius: 10px; border: 1.5px solid var(--kc-border-soft);
    background: transparent; font: inherit; font-size: 1rem; font-weight: 700; color: var(--kc-subtle); cursor: pointer;
}

/* ---- where in the walkthrough ---- */
.vh__progress[b-8ryzr7lv15] { flex: none; display: flex; flex-direction: column; gap: 0.5rem; }
.vh__dots[b-8ryzr7lv15] { display: flex; align-items: center; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.vh__dot[b-8ryzr7lv15] {
    position: relative; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
    background: var(--kc-status-empty); color: var(--kc-subtle);
}
.vh__dot + .vh__dot[b-8ryzr7lv15] { margin-left: 0.55rem; }
.vh__dot + .vh__dot[b-8ryzr7lv15]::before {
    content: ""; position: absolute; right: 100%; top: 50%; width: 0.6rem; height: 3px; transform: translateY(-50%);
    background: var(--kc-status-empty); border-radius: 2px;
}
.vh__dot.is-done[b-8ryzr7lv15] { background: var(--kc-status-ok); color: #12693A; }
.vh__dot.is-done[b-8ryzr7lv15]::before, .vh__dot.is-now[b-8ryzr7lv15]::before { background: var(--kc-status-ok-edge); }
.vh__dot.is-now[b-8ryzr7lv15] { background: var(--kc-navy); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--kc-blue) 55%, transparent); }
.vh__stepname[b-8ryzr7lv15] { margin: 0; font-size: 1rem; color: var(--kc-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.vh__stepno[b-8ryzr7lv15] { font-size: 0.78rem; font-weight: 700; color: var(--kc-muted); letter-spacing: 0.02em; }

/* ---- the practice copy, with one part lit ---- */
.vh__stagewrap[b-8ryzr7lv15] { position: relative; min-height: 0; display: flex; flex-direction: column; }
.vh--rich .vh__stagewrap[b-8ryzr7lv15] { flex: 1 1 auto; }
.vh__practice[b-8ryzr7lv15] {
    position: absolute; top: 0.5rem; left: 0.7rem; z-index: 3;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--kc-navy); background: rgba(255, 255, 255, 0.9); padding: 0.14rem 0.5rem; border-radius: 999px;
}
.vh__stage[b-8ryzr7lv15] {
    position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden;
    padding: 2rem 1rem 1.15rem;
    border-radius: 14px;
    background: repeating-linear-gradient(135deg, #f1f4f6 0 12px, #e9eef1 12px 24px);
    border: 1px dashed #b6c3cb;
    scrollbar-gutter: stable;
}
.vh--rich .vh__stage[b-8ryzr7lv15] { flex: 1 1 auto; }
.vh__card[b-8ryzr7lv15] { width: min(100%, 280px); margin: 0 auto; }
.vh--rich .vh__card[b-8ryzr7lv15] { width: min(100%, 460px); }

/* While the steps play, the copy is a picture: it is touched only in "Prova själv". A finger on it still scrolls the stage. */
.vh__card[inert][b-8ryzr7lv15] { pointer-events: none; user-select: none; }

/* The spotlight: the lit part gets a ring, and a very large shadow dims the rest of the stage (the stage clips it). */
.vh__stage[b-8ryzr7lv15]  .vh-lit {
    position: relative; z-index: 2; border-radius: 10px;
    animation: vh-ring-b-8ryzr7lv15 1.8s ease-in-out infinite;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--kc-blue-deep), 0 0 0 999px rgba(28, 40, 52, 0.36);
}
.vh__stage[b-8ryzr7lv15]  .kc-card__verdict.vh-lit { border-radius: 999px; }
@keyframes vh-ring-b-8ryzr7lv15 {
    0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--kc-blue-deep), 0 0 0 999px rgba(28, 40, 52, 0.36); }
    50% { box-shadow: 0 0 0 4px #fff, 0 0 0 10px color-mix(in srgb, var(--kc-blue-deep) 70%, transparent), 0 0 0 999px rgba(28, 40, 52, 0.36); }
}
@media (prefers-reduced-motion: reduce) {
    .vh__stage[b-8ryzr7lv15]  .vh-lit { animation: none; }
    .vh__stage[b-8ryzr7lv15]  * { animation: none !important; }
}

/* ---- the one short caption ---- */
.vh__caption[b-8ryzr7lv15] {
    flex: none; display: flex; align-items: flex-start; gap: 0.6rem; margin: 0;
    padding: 0.7rem 0.85rem; border-radius: 12px;
    background: color-mix(in srgb, var(--kc-blue) 22%, var(--kc-surface));
    border: 1px solid color-mix(in srgb, var(--kc-blue) 55%, transparent);
    font-size: 0.95rem; line-height: 1.4; color: var(--kc-ink); min-height: 3.1rem;
}
.vh__text[b-8ryzr7lv15] { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.vh__bubble[b-8ryzr7lv15] {
    flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 0.05rem;
    display: grid; place-items: center; font-family: Georgia, serif; font-style: italic; font-weight: 800; font-size: 0.85rem;
    background: var(--kc-navy); color: #fff;
}

/* ---- the buttons ---- */
.vh__foot[b-8ryzr7lv15] { flex: none; display: flex; align-items: center; gap: 0.5rem; }
.vh__grow[b-8ryzr7lv15] { flex: 1 1 auto; }
.vh__btn[b-8ryzr7lv15] {
    min-height: 44px; padding: 0.4rem 1.05rem; border-radius: 10px;
    border: 2px solid var(--kc-navy); background: transparent; color: var(--kc-navy);
    font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.vh__btn:hover:not(:disabled)[b-8ryzr7lv15] { background: color-mix(in srgb, var(--kc-blue) 25%, transparent); }
.vh__btn:disabled[b-8ryzr7lv15] { opacity: 0.4; cursor: not-allowed; }
.vh__btn--go[b-8ryzr7lv15] { background: var(--kc-navy); color: #fff; }
.vh__btn--go:hover:not(:disabled)[b-8ryzr7lv15] { background: #26334a; }
.vh__btn:focus-visible[b-8ryzr7lv15], .vh__close:focus-visible[b-8ryzr7lv15] { outline: 3px solid var(--kc-blue-deep); outline-offset: 2px; }

.vh__note[b-8ryzr7lv15] { flex: none; margin: 0; font-size: 0.78rem; color: var(--kc-muted); }

/* ---- a phone: a bottom sheet, the three buttons across ---- */
@media (max-width: 640px) {
    .vh-scrim[b-8ryzr7lv15] { align-items: flex-end; justify-content: center; padding: 0; }
    .vh[b-8ryzr7lv15] {
        width: 100%; border-radius: 16px 16px 0 0; max-height: 92dvh;
        padding: 1rem 1rem max(0.9rem, env(safe-area-inset-bottom));
        gap: 0.7rem;
    }
    .vh--rich[b-8ryzr7lv15] { height: 92dvh; }
    .vh__title[b-8ryzr7lv15] { font-size: 1.25rem; }
    .vh__stage[b-8ryzr7lv15] { padding: 1.9rem 0.6rem 0.9rem; }
    .vh__card[b-8ryzr7lv15], .vh--rich .vh__card[b-8ryzr7lv15] { width: 100%; max-width: 460px; }
    .vh__foot[b-8ryzr7lv15] { gap: 0.4rem; }
    .vh__grow[b-8ryzr7lv15] { display: none; }
    .vh__btn[b-8ryzr7lv15] { flex: 1 1 auto; padding: 0.4rem 0.5rem; font-size: 0.92rem; }
}

/* A low screen (a phone on its side, a small laptop): the note and the dots give way before the card does. */
@media (max-height: 620px) {
    .vh__note[b-8ryzr7lv15] { display: none; }
}
/* /Components/Controls/ProductDetail.razor.rz.scp.css */
.kc-pdetail[b-m7z3t2oa10] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.kc-pdetail__label[b-m7z3t2oa10] {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--kc-muted);
}

.kc-pdetail__none[b-m7z3t2oa10] {
    margin: 0;
    color: var(--kc-muted);
    font-size: 0.92rem;
}

/* Where an allergen status comes from — said beside it, so "inga" is never read without its source. */
.kc-pdetail__source[b-m7z3t2oa10] {
    margin: 0.35rem 0 0.5rem;
    color: var(--kc-muted);
    font-size: 0.84rem;
    line-height: 1.4;
}

.kc-pdetail__ingredients[b-m7z3t2oa10] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--kc-ink);
}

.kc-pdetail__nutrition[b-m7z3t2oa10] {
    max-width: 24rem;
}

.kc-pdetail__nutrition td[b-m7z3t2oa10] {
    font-size: 0.92rem;
    padding: 0.3rem 0.4rem;
}

.kc-pdetail__num[b-m7z3t2oa10] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kc-pdetail__facts[b-m7z3t2oa10] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.9rem;
    margin: 0;
    font-size: 0.92rem;
}

.kc-pdetail__facts dt[b-m7z3t2oa10] {
    font-weight: 600;
    color: var(--kc-subtle);
}

.kc-pdetail__facts dd[b-m7z3t2oa10] {
    margin: 0;
}

.kc-pdetail__levels[b-m7z3t2oa10] {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kc-pdetail__gtin[b-m7z3t2oa10] {
    color: var(--kc-muted);
    font-size: 0.8rem;
    margin-left: 0.4rem;
}

.kc-pdetail__provenance[b-m7z3t2oa10] {
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--kc-border-soft);
    color: var(--kc-muted);
    font-size: 0.8rem;
}

/* The product shot. Contained, never cropped: the front label is what identifies a pack, and "cover"
   would crop exactly that away. Capped in height so a tall bottle cannot push the allergen declaration —
   the thing this card exists to show — below the fold. */
.kc-pdetail__shot[b-m7z3t2oa10] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.9rem;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid var(--kc-border-soft);
    border-radius: 10px;
}

.kc-pdetail__shot img[b-m7z3t2oa10] {
    max-width: 100%;
    max-height: 190px;
    object-fit: contain;
    display: block;
}
/* /Components/Controls/ProductExplorer.razor.rz.scp.css */
.kc-explorer[b-uxfngc5ta0] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Sticky search + facet bar ------------------------------------------- */

.kc-explorer__bar[b-uxfngc5ta0] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--kc-frame);
    padding: 0.6rem 0 0.7rem;
    border-bottom: 1px solid var(--kc-border-soft);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.kc-explorer__searchrow[b-uxfngc5ta0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.kc-explorer__search[b-uxfngc5ta0] {
    flex: 1 1 20rem;
    max-width: 32rem;
}

.kc-explorer__count[b-uxfngc5ta0] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--kc-hero-ink);
    white-space: nowrap;
}

/* One line under the "Fri från" facet while it is on: what the filter does NOT check. */
.kc-explorer__caveat[b-uxfngc5ta0] {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--kc-warn-text);
}

/* --- The family grid ------------------------------------------------------ */

.kc-explorer__grid[b-uxfngc5ta0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.kc-explorer__sentinel[b-uxfngc5ta0] {
    height: 1px;
}

.kc-explorer__empty[b-uxfngc5ta0] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--kc-hero-ink);
    background: var(--kc-surface);
    border: 1px dashed var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
}

.kc-explorer__empty p[b-uxfngc5ta0] {
    margin: 0.2rem 0;
}

/* --- Loading skeletons ---------------------------------------------------- */

.kc-explorer__skeleton[b-uxfngc5ta0] {
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    overflow: hidden;
    padding-bottom: 0.9rem;
}

.kc-explorer__skeleton-img[b-uxfngc5ta0] {
    aspect-ratio: 1 / 1;
    background: var(--kc-skeleton);
    animation: kc-shimmer-b-uxfngc5ta0 1.2s ease-in-out infinite alternate;
}

.kc-explorer__skeleton-bar[b-uxfngc5ta0] {
    height: 0.85rem;
    margin: 0.7rem 0.75rem 0;
    border-radius: 4px;
    background: var(--kc-skeleton);
    animation: kc-shimmer-b-uxfngc5ta0 1.2s ease-in-out infinite alternate;
}

.kc-explorer__skeleton-bar--short[b-uxfngc5ta0] {
    width: 55%;
}

@keyframes kc-shimmer-b-uxfngc5ta0 {
    from { opacity: 1; }
    to { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .kc-explorer__skeleton-img[b-uxfngc5ta0],
    .kc-explorer__skeleton-bar[b-uxfngc5ta0] {
        animation: none;
    }
}
/* /Components/Controls/ProductFamilyModal.razor.rz.scp.css */
.kc-famodal[b-xplcigume1] {
    max-width: 780px;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}

.kc-famodal__head[b-xplcigume1] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.kc-famodal__title[b-xplcigume1] {
    flex: 1 1 auto;
    min-width: 0;
}

.kc-famodal__title h3[b-xplcigume1] {
    margin: 0;
    font-size: 1.35rem;
    color: var(--kc-navy);
    line-height: 1.25;
}

.kc-famodal__sub[b-xplcigume1] {
    margin: 0.2rem 0 0;
    color: var(--kc-muted);
    font-size: 0.88rem;
}

.kc-famodal__close[b-xplcigume1] {
    flex: 0 0 auto;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    width: var(--kc-touch-min);
    height: var(--kc-touch-min);
    border-radius: var(--kc-radius-pill);
    border: 1.5px solid var(--kc-border-soft);
    background: var(--kc-surface);
    color: var(--kc-subtle);
    cursor: pointer;
}

.kc-famodal__close:hover[b-xplcigume1] {
    border-color: var(--kc-blue-deep);
    color: var(--kc-navy);
}

.kc-famodal__content[b-xplcigume1] {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.9rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kc-famodal__media[b-xplcigume1] {
    flex: 0 1 240px;
    min-width: 180px;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* In the detail the image may breathe: tall cartons get generous height instead of the grid's square. */
.kc-famodal__media img[b-xplcigume1] {
    width: 100%;
    height: auto;
    max-height: min(56vh, 460px);
    object-fit: contain;
    background: var(--kc-img-bg);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-card);
    padding: 0.6rem;
}

.kc-famodal__noimg[b-xplcigume1] {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--kc-muted);
    font-size: 0.8rem;
    background: var(--kc-surface-alt);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-card);
}

.kc-famodal__facts[b-xplcigume1] {
    flex: 1 1 320px;
    min-width: 260px;
}

.kc-famodal__loading[b-xplcigume1] {
    color: var(--kc-muted);
}
/* /Components/Controls/ProductTile.razor.rz.scp.css */
.kc-ptile[b-o0q69zizxk] {
    display: flex;
    flex-direction: column;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kc-ptile:hover[b-o0q69zizxk],
.kc-ptile:focus-within[b-o0q69zizxk] {
    transform: translateY(-2px);
    box-shadow: var(--kc-shadow-lift);
    border-color: var(--kc-blue-deep);
}

.kc-ptile__body[b-o0q69zizxk] {
    display: flex;
    flex-direction: column;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
}

/* A HARD square image box: the img is absolutely positioned inside it, so a tall packshot can never
   stretch the tile — every card gets the same tidy square. (The detail dialog is where tall images get
   generous room.) */
.kc-ptile__imgbox[b-o0q69zizxk] {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--kc-img-bg);
    border-top: 1px solid var(--kc-border-soft);
    border-bottom: 1px solid var(--kc-border-soft);
    overflow: hidden;
}

.kc-ptile__imgbox img[b-o0q69zizxk] {
    position: absolute;
    left: 0.6rem;
    top: 0.6rem;
    width: calc(100% - 1.2rem);
    height: calc(100% - 1.2rem);
    object-fit: contain;
}

.kc-ptile__noimg[b-o0q69zizxk] {
    position: absolute;
    inset: 0;
    justify-content: center;
}

.kc-ptile--utgatt .kc-ptile__imgbox img[b-o0q69zizxk] {
    filter: grayscale(0.85) opacity(0.55);
}

.kc-ptile__utgatt[b-o0q69zizxk] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-18deg);
    padding: 0.25rem 1rem;
    border: 3px solid var(--kc-fail-text);
    border-radius: 6px;
    color: var(--kc-fail-text);
    background: rgba(255, 255, 255, 0.82);
    font-weight: 800;
    /* "Utgått 2026-07-14" carries its date now, so it is set smaller and never wraps across the packshot. */
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    pointer-events: none;
}

.kc-ptile__noimg[b-o0q69zizxk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: var(--kc-muted);
    font-size: 0.72rem;
}

.kc-ptile--marked[b-o0q69zizxk] {
    border-color: var(--kc-status-ok-edge);
    background: #F4FCF7;
    box-shadow: 0 0 0 1px var(--kc-status-ok-edge), var(--kc-shadow-card);
}

.kc-ptile__markbadge[b-o0q69zizxk] {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: var(--kc-radius-pill);
    background: var(--kc-status-ok);
    color: var(--kc-ok-text);
    border: 1.5px solid var(--kc-status-ok-edge);
    font-weight: 800;
    font-size: 0.9rem;
}

.kc-ptile__trust[b-o0q69zizxk] {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    padding: 0.1rem 0.5rem;
    border-radius: var(--kc-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: help;
}

.kc-ptile__trust--ok[b-o0q69zizxk] { background: var(--kc-status-ok); color: var(--kc-ok-text); }
.kc-ptile__trust--warn[b-o0q69zizxk] { background: var(--kc-status-missed); color: var(--kc-warn-text); }
.kc-ptile__trust--fail[b-o0q69zizxk] { background: var(--kc-status-failed); color: var(--kc-fail-text); }

.kc-ptile__id[b-o0q69zizxk] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem 0.5rem;
}

.kc-ptile__name[b-o0q69zizxk] {
    font-size: 1.02rem;
    font-weight: 650;
    color: var(--kc-navy);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;   /* fixed two-line slot keeps rows aligned */
}

.kc-ptile__meta[b-o0q69zizxk] {
    font-size: 0.8rem;
    color: var(--kc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kc-ptile__allergens[b-o0q69zizxk] {
    padding: 0.35rem 0.75rem 0.6rem;
    min-height: 2.1rem;
    align-items: flex-start;
}

.kc-ptile__allergens .kc-fchip[b-o0q69zizxk] {
    font-size: 0.72rem;
    padding: 0.12rem 0.5rem;
}

.kc-ptile__actions[b-o0q69zizxk] {
    padding: 0 0.75rem 0.7rem;
    margin-top: auto;
}
/* /Components/Controls/QuizEditor.razor.rz.scp.css */
/* TR-34: a fixed place says which question it asks, and a withdrawn one says so in words, not only in colour. */
.qe-fixed[b-16xj3kuzz7] { display: inline; overflow-wrap: anywhere; }
.qe-fixed__kind[b-16xj3kuzz7] {
    font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #4b5563;
    background: #f3f4f6; border-radius: 4px; padding: 0 0.35rem; margin-right: 0.3rem;
}
.qe-fixed__prompt[b-16xj3kuzz7] { color: #1f2937; }
.qe-fixed__pool[b-16xj3kuzz7] { color: #6b7280; margin-left: 0.3rem; }
.qe-fixed__note[b-16xj3kuzz7] { font-size: 0.76rem; color: #4b5563; margin: 0.05rem 0 0.2rem; }
.qe-fixed__note--warn[b-16xj3kuzz7] { color: #b45309; }
.qe-fixed__note--warn[b-16xj3kuzz7]::before { content: "⚠ "; }
.qe-slot--withdrawn .qe-fixed__prompt[b-16xj3kuzz7] { color: #92400e; }

.qe-fixed-add select[b-16xj3kuzz7] { max-width: 100%; }
.qe-fixed-add__question[b-16xj3kuzz7] { flex: 1 1 18rem; min-width: 0; }
/* /Components/Controls/TimelineView.razor.rz.scp.css */
.tl[b-sfz5aduxjo] {
    border-top: 1px solid var(--kc-border-soft, rgba(0,0,0,.08));
    padding: 0.9rem 1.25rem;
}

.tl-head[b-sfz5aduxjo] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kc-muted, #666);
    margin-bottom: 0.6rem;
}

.tl-empty[b-sfz5aduxjo] { color: var(--kc-muted, #999); font-size: 0.85rem; margin: 0; }

.tl-list[b-sfz5aduxjo] { list-style: none; margin: 0; padding: 0; position: relative; }

.tl-list[b-sfz5aduxjo]::before {
    content: "";
    position: absolute;
    left: 0.72rem;
    top: 0.4rem;
    bottom: 0.4rem;
    width: 2px;
    background: var(--kc-border-soft, rgba(0,0,0,.1));
}

.tl-item[b-sfz5aduxjo] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.3rem 0;
    position: relative;
}

.tl-ico[b-sfz5aduxjo] {
    flex: 0 0 1.5rem;
    text-align: center;
    background: var(--kc-surface, #fff);
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
}

.tl-main[b-sfz5aduxjo] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tl-title[b-sfz5aduxjo] { font-size: 0.86rem; font-weight: 600; color: var(--kc-navy, #324158); }
.tl-detail[b-sfz5aduxjo] { font-size: 0.78rem; color: var(--kc-muted, #666); word-break: break-word; }
.tl-time[b-sfz5aduxjo] { font-size: 0.72rem; color: var(--kc-muted, #999); white-space: nowrap; }
/* /Components/Layout/DemoLayout.razor.rz.scp.css */
/* The public demo's shell. PHONE FIRST: the bar is one line at 375 px, the sign-in link a 44 px target, and the main
   column is the whole screen's width — the practice blocks inside it span it border to border on a phone and are drawn as
   rounded boxes from 700 px, exactly as they are in a course. */
.dl[b-e0ed4j5vap] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--kc-frame);
    overflow-x: clip;
}

.dl-topline[b-e0ed4j5vap] { height: 5px; background: #0c0d10; }

.dl-bar[b-e0ed4j5vap] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 60px;
    padding: 0.4rem clamp(0.7rem, 2.5vw, 1.4rem);
    background: var(--kc-blue);
    color: var(--kc-navy);
    box-shadow: 0 2px 10px rgba(29, 52, 66, 0.16);
}

.dl-badge[b-e0ed4j5vap] {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(29, 52, 66, 0.28);
    display: grid;
    place-items: center;
}

.dl-badge b[b-e0ed4j5vap] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 800;
    color: var(--kc-navy);
}

.dl-mark[b-e0ed4j5vap] {
    font-size: 1.3rem;
    font-weight: 750;
    color: var(--kc-navy);
}

.dl-grow[b-e0ed4j5vap] { flex: 1 1 auto; }

.dl-login[b-e0ed4j5vap] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.9rem;
    border-radius: 10px;
    border: 1.5px solid var(--kc-navy);
    color: var(--kc-navy);
    font-weight: 700;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.45);
}

.dl-login:hover[b-e0ed4j5vap] { background: rgba(255, 255, 255, 0.8); }

.dl-login:focus-visible[b-e0ed4j5vap] {
    outline: 3px solid var(--kc-navy);
    outline-offset: 2px;
}

.dl-main[b-e0ed4j5vap] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 1rem 0 2.5rem;
    min-width: 0;
}

@media (min-width: 700px) {
    .dl-main[b-e0ed4j5vap] { padding: 1.6rem 1.4rem 3rem; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-4ceunydk89] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-4ceunydk89] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-uq43y4wpdg],
.components-reconnect-repeated-attempt-visible[b-uq43y4wpdg],
.components-reconnect-failed-visible[b-uq43y4wpdg],
.components-pause-visible[b-uq43y4wpdg],
.components-resume-failed-visible[b-uq43y4wpdg],
.components-rejoining-animation[b-uq43y4wpdg] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-uq43y4wpdg],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-uq43y4wpdg],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-uq43y4wpdg],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-uq43y4wpdg],
#components-reconnect-modal.components-reconnect-retrying[b-uq43y4wpdg],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-uq43y4wpdg],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-uq43y4wpdg],
#components-reconnect-modal.components-reconnect-failed[b-uq43y4wpdg],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-uq43y4wpdg] {
    display: block;
}


#components-reconnect-modal[b-uq43y4wpdg] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-uq43y4wpdg 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-uq43y4wpdg 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-uq43y4wpdg 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-uq43y4wpdg]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-uq43y4wpdg 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-uq43y4wpdg {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-uq43y4wpdg {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-uq43y4wpdg {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-uq43y4wpdg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-uq43y4wpdg] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-uq43y4wpdg] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-uq43y4wpdg] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-uq43y4wpdg] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-uq43y4wpdg] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-uq43y4wpdg] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-uq43y4wpdg 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-uq43y4wpdg] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-uq43y4wpdg {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Andringsjournal.razor.rz.scp.css */
/* The stamp above its own evidence — this page is what the document's legend points at, so it opens by
   repeating the claim the rows below have to support. */
.kc-journal__stamp[b-ppywanawag] {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--kc-border-soft);
    background: var(--kc-surface);
    font-size: 0.875rem;
    color: var(--kc-muted);
}

.kc-journal__stamp strong[b-ppywanawag] {
    font-size: 1.0625rem;
    color: var(--kc-navy);
}

.kc-journal[b-ppywanawag] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Three columns that stay aligned down the page: when, what, who. A journal is scanned down one column at
   a time — "who changed things last week" is read vertically, not row by row. */
.kc-journal__row[b-ppywanawag] {
    display: grid;
    grid-template-columns: 11rem 1fr 10rem;
    gap: 0.5rem 1rem;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--kc-border-soft);
}

/* An approval is not the same kind of event as a register change: somebody put their name to one and
   merely made the other. Marked, so the eye can find the approvals without reading the titles. */
.kc-journal__row--approval[b-ppywanawag] {
    border-left: 3px solid var(--kc-status-ok-edge);
    padding-left: 0.75rem;
    margin-left: -0.75rem;
}

.kc-journal__row--approval strong[b-ppywanawag] { color: var(--kc-ok-text); }

.kc-journal__when[b-ppywanawag] {
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--kc-muted);
}

.kc-journal__what[b-ppywanawag] { display: grid; gap: 0.1rem; }

.kc-journal__detail[b-ppywanawag] {
    font-size: 0.8125rem;
    color: var(--kc-muted);
}

.kc-journal__who[b-ppywanawag] {
    font-size: 0.8125rem;
    color: var(--kc-muted);
    text-align: right;
}

/* Stacked on a phone: three columns at 375px turns every row into three words and a hyphenated name. */
@media (max-width: 640px) {
    .kc-journal__row[b-ppywanawag] {
        grid-template-columns: 1fr auto;
    }

    .kc-journal__what[b-ppywanawag] { grid-column: 1 / -1; order: 3; }
    .kc-journal__who[b-ppywanawag] { text-align: right; }
}

/* The kitchen picker sits above the stamp rather than beside it: which kitchen you are reading is a
   precondition for everything below, not one more field in a form. */
.kc-journal__pick[b-ppywanawag] {
    max-width: 22rem;
    margin-bottom: 1rem;
}
/* /Components/Pages/CommunicationOutbox.razor.rz.scp.css */
/* Meddelandehantering — the vendor message console. Three-zone layout: facet rail /
   virtualized list / detail pane. English, internal-only, kc- design tokens throughout. */

.mm[b-ccwj8o8p7r] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    color: var(--kc-ink, #333);
    font-family: var(--kc-font-body, "Segoe UI", system-ui, sans-serif);
}

.mm-loading[b-ccwj8o8p7r], .mm-denied[b-ccwj8o8p7r] { padding: 2rem 0; color: var(--kc-muted, #666); }
.mm-denied h1[b-ccwj8o8p7r] { color: var(--kc-navy, #324158); margin: 0 0 0.5rem; }

/* ── Header ─────────────────────────────────────────────────────────── */
.mm-head[b-ccwj8o8p7r] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mm-title[b-ccwj8o8p7r] { margin: 0; font-size: 1.55rem; font-weight: 700; color: var(--kc-navy, #324158); letter-spacing: -0.01em; }
.mm-sub[b-ccwj8o8p7r] { margin: 0.15rem 0 0; color: var(--kc-muted, #666); font-size: 0.9rem; }
.mm-head-right[b-ccwj8o8p7r] { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.mm-actions[b-ccwj8o8p7r] { display: flex; gap: 0.4rem; }

.mm-mode[b-ccwj8o8p7r] {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.35rem 0.75rem; border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.8rem; font-weight: 600; white-space: nowrap;
    background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa;
}
.mm-mode-dot[b-ccwj8o8p7r] { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mm-mode--live[b-ccwj8o8p7r] { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.mm-mode--redirect[b-ccwj8o8p7r] { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.mm-mode--off[b-ccwj8o8p7r] { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.mm-btn[b-ccwj8o8p7r] {
    padding: 0.45rem 0.85rem; border-radius: 0.45rem; border: 1px solid transparent;
    background: var(--kc-navy, #324158); color: #fff; font-size: 0.86rem; font-weight: 600;
    cursor: pointer; white-space: nowrap; transition: filter var(--kc-transition, .2s);
}
.mm-btn:hover:not(:disabled)[b-ccwj8o8p7r] { filter: brightness(1.12); }
.mm-btn:disabled[b-ccwj8o8p7r] { opacity: 0.55; cursor: default; }
.mm-btn--ghost[b-ccwj8o8p7r] { background: #fff; color: var(--kc-navy, #324158); border-color: var(--kc-border-soft, rgba(0,0,0,.18)); }
.mm-btn--sm[b-ccwj8o8p7r] { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.mm-link[b-ccwj8o8p7r] { border: 0; background: none; color: #1d4ed8; cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; }

/* ── Test panel ─────────────────────────────────────────────────────── */
.mm-testpanel[b-ccwj8o8p7r] {
    display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap;
    background: var(--kc-surface, #fff); border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-radius: var(--kc-radius-card, 0.5rem); box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0,0,0,.1));
    padding: 0.8rem 1rem;
}
.mm-fld[b-ccwj8o8p7r] { display: flex; flex-direction: column; gap: 0.2rem; }
.mm-fld label[b-ccwj8o8p7r] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-muted, #666); }
.mm-fld--grow[b-ccwj8o8p7r] { flex: 1 1 14rem; }
.mm-input[b-ccwj8o8p7r], .mm-select[b-ccwj8o8p7r] {
    padding: 0.45rem 0.6rem; border: 1px solid var(--kc-border-soft, rgba(0,0,0,.15));
    border-radius: 0.4rem; font-size: 0.88rem; background: #fff; width: 100%;
}
.mm-hint[b-ccwj8o8p7r] { flex-basis: 100%; margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--kc-muted, #888); }

/* ── Toast / alerts / attention ─────────────────────────────────────── */
/* The toast floats over the page, bottom right, below the context menu. In the flow above the list it pushed every
   row down when it came and pulled them up when its timer took it away, under a pointer that may be mid-click: the
   right-click menu opened on a neighbour of the row pressed (review of the load-flake fixes, 2026-10-11). A live list
   does not move under its reader — the rule the delivery log's "new events" pill already keeps. */
.mm-toast[b-ccwj8o8p7r] {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90;
    max-width: min(34rem, calc(100vw - 2rem)); box-sizing: border-box;
    display: flex; align-items: center; gap: 0.6rem;
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a;
    border-radius: 0.5rem; padding: 0.5rem 0.8rem; font-size: 0.88rem;
    box-shadow: var(--kc-shadow-lift, 0 4px 12px rgba(0,0,0,.16));
}
.mm-toast-x[b-ccwj8o8p7r] { margin-left: auto; border: 0; background: none; cursor: pointer; color: inherit; }
.mm-alert[b-ccwj8o8p7r] { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 0.5rem; padding: 0.6rem 0.9rem; }
.mm-attention[b-ccwj8o8p7r] {
    display: flex; align-items: center; gap: 0.5rem;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e;
    border-radius: 0.5rem; padding: 0.5rem 0.8rem; font-size: 0.88rem;
}
.mm-attention .mm-link[b-ccwj8o8p7r] { color: #92400e; font-weight: 600; }
.mm-attention--held[b-ccwj8o8p7r] { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.mm-attention--held .mm-link[b-ccwj8o8p7r] { color: #1e3a8a; }
.mm-retention--off[b-ccwj8o8p7r] { color: #b91c1c; font-weight: 600; }
.mm-attention-ico[b-ccwj8o8p7r] { font-size: 1rem; }
.mm-dot-sep[b-ccwj8o8p7r] { opacity: 0.5; }

/* ── Stat tiles ─────────────────────────────────────────────────────── */
.mm-stats[b-ccwj8o8p7r] { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.7rem; }
.mm-stat[b-ccwj8o8p7r] {
    background: var(--kc-surface, #fff); border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-left: 4px solid var(--kc-status-empty, #e5e7eb);
    border-radius: var(--kc-radius-card, 0.5rem); box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0,0,0,.1));
    padding: 0.6rem 0.85rem; display: flex; flex-direction: column; gap: 0.05rem;
    cursor: pointer; text-align: left; transition: box-shadow var(--kc-transition, .2s);
}
.mm-stat:hover[b-ccwj8o8p7r] { box-shadow: var(--kc-shadow-lift, 0 4px 12px rgba(0,0,0,.12)); }
.mm-stat-val[b-ccwj8o8p7r] { font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--kc-navy, #324158); }
.mm-stat-lbl[b-ccwj8o8p7r] { font-size: 0.74rem; color: var(--kc-muted, #666); text-transform: uppercase; letter-spacing: 0.03em; }
.mm-stat--sent[b-ccwj8o8p7r] { border-left-color: #34d399; }
.mm-stat--captured[b-ccwj8o8p7r] { border-left-color: var(--kc-blue, #7ac0da); }
.mm-stat--dropped[b-ccwj8o8p7r] { border-left-color: #9ca3af; }
.mm-stat--pending[b-ccwj8o8p7r] { border-left-color: #eab308; }
.mm-stat--dead[b-ccwj8o8p7r] { border-left-color: #ef4444; }
.mm-stat--failed[b-ccwj8o8p7r] { border-left-color: #f97316; }

/* ── Tabs ───────────────────────────────────────────────────────────── */
.mm-tabs[b-ccwj8o8p7r] { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--kc-border-soft, rgba(0,0,0,.08)); }
.mm-tab[b-ccwj8o8p7r] {
    border: 0; background: none; padding: 0.5rem 0.85rem; font-size: 0.94rem; font-weight: 600;
    color: var(--kc-muted, #666); cursor: pointer; border-bottom: 2px solid transparent;
    margin-bottom: -2px; display: inline-flex; align-items: center; gap: 0.4rem;
}
.mm-tab.is-active[b-ccwj8o8p7r] { color: var(--kc-navy, #324158); border-bottom-color: var(--kc-blue, #7ac0da); }
.mm-count[b-ccwj8o8p7r] {
    display: inline-block; min-width: 1.2rem; text-align: center; padding: 0.05rem 0.4rem;
    border-radius: var(--kc-radius-pill, 999px); background: rgba(0,0,0,.08);
    font-size: 0.72rem; font-weight: 700;
}
.mm-tab.is-active .mm-count[b-ccwj8o8p7r] { background: var(--kc-blue, #7ac0da); color: #fff; }

/* ── Body: rail / list / detail ─────────────────────────────────────── */
.mm-body[b-ccwj8o8p7r] {
    display: grid;
    grid-template-columns: 200px minmax(300px, 400px) 1fr;
    gap: 0.9rem;
    align-items: start;
}
@media (max-width: 1100px) { .mm-body[b-ccwj8o8p7r] { grid-template-columns: 180px 1fr; } .mm-detail[b-ccwj8o8p7r] { grid-column: 1 / -1; } }
@media (max-width: 760px) { .mm-body[b-ccwj8o8p7r] { grid-template-columns: 1fr; } }

/* Rail */
.mm-rail[b-ccwj8o8p7r] { display: flex; flex-direction: column; gap: 0.8rem; }
.mm-search[b-ccwj8o8p7r] { position: relative; display: flex; align-items: center; }
.mm-search-ico[b-ccwj8o8p7r] { position: absolute; left: 0.55rem; font-size: 0.8rem; opacity: 0.55; pointer-events: none; }
.mm-search input[b-ccwj8o8p7r] {
    width: 100%; padding: 0.45rem 1.7rem 0.45rem 1.9rem;
    border: 1px solid var(--kc-border-soft, rgba(0,0,0,.15)); border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.86rem; background: #fff;
}
.mm-search input:focus[b-ccwj8o8p7r] { outline: 2px solid var(--kc-blue, #7ac0da); outline-offset: -1px; }
.mm-search-x[b-ccwj8o8p7r] { position: absolute; right: 0.5rem; border: 0; background: none; cursor: pointer; color: var(--kc-muted); font-size: 0.8rem; }

.mm-railsec[b-ccwj8o8p7r] { display: flex; flex-direction: column; gap: 0.15rem; }
.mm-railhead[b-ccwj8o8p7r] { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kc-muted, #888); margin-bottom: 0.2rem; }
.mm-facet[b-ccwj8o8p7r] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    border: 0; background: none; padding: 0.32rem 0.5rem; border-radius: 0.4rem;
    font-size: 0.84rem; color: var(--kc-ink, #333); cursor: pointer; text-align: left;
}
.mm-facet:hover[b-ccwj8o8p7r] { background: rgba(0,0,0,.05); }
.mm-facet.is-active[b-ccwj8o8p7r] { background: var(--kc-navy, #324158); color: #fff; }
.mm-facet.is-active .mm-fcount[b-ccwj8o8p7r] { background: rgba(255,255,255,.22); color: #fff; }
.mm-fcount[b-ccwj8o8p7r] {
    min-width: 1.4rem; text-align: center; padding: 0.02rem 0.35rem;
    border-radius: var(--kc-radius-pill, 999px); background: rgba(0,0,0,.07);
    font-size: 0.7rem; font-weight: 700; color: var(--kc-muted, #555);
}
.mm-railfoot[b-ccwj8o8p7r] { font-size: 0.72rem; color: var(--kc-muted, #999); border-top: 1px dashed var(--kc-border-soft, rgba(0,0,0,.1)); padding-top: 0.5rem; }

/* List pane */
.mm-listpane[b-ccwj8o8p7r] { display: flex; flex-direction: column; gap: 0.4rem; outline: none; position: relative; }
.mm-listpane:focus-visible .mm-list[b-ccwj8o8p7r] { outline: 2px solid var(--kc-blue, #7ac0da); outline-offset: -1px; }
.mm-newpill[b-ccwj8o8p7r] {
    align-self: center; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8;
    border-radius: var(--kc-radius-pill, 999px); padding: 0.25rem 0.8rem;
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    position: absolute; top: 0.4rem; z-index: 5; box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0,0,0,.1));
}
.mm-list[b-ccwj8o8p7r] {
    background: var(--kc-surface, #fff); border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-radius: var(--kc-radius-card, 0.5rem); box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0,0,0,.1));
    overflow-y: auto;
    height: clamp(320px, calc(100vh - 430px), 900px);
}

.mm-row[b-ccwj8o8p7r] {
    display: flex; align-items: center; gap: 0.55rem;
    height: 52px; box-sizing: border-box; width: 100%;
    padding: 0 0.7rem;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--kc-border-soft, rgba(0,0,0,.05));
    background: #fff; cursor: pointer;
}
.mm-row:hover[b-ccwj8o8p7r] { background: #f8fafc; }
.mm-row.is-selected[b-ccwj8o8p7r] { background: #eef6fb; border-left-color: var(--kc-blue, #7ac0da); }
.mm-row.is-focused[b-ccwj8o8p7r] { box-shadow: inset 0 0 0 1px var(--kc-blue, #7ac0da); }
.mm-row--ghost[b-ccwj8o8p7r] { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: mm-shimmer-b-ccwj8o8p7r 1.2s infinite; }
@keyframes mm-shimmer-b-ccwj8o8p7r { to { background-position: -200% 0; } }

.mm-row-ico[b-ccwj8o8p7r] { font-size: 1rem; flex: 0 0 auto; }
.mm-check[b-ccwj8o8p7r] { flex: 0 0 auto; display: flex; }
.mm-check input[b-ccwj8o8p7r] { cursor: pointer; }
.mm-row-main[b-ccwj8o8p7r] { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mm-row-to[b-ccwj8o8p7r] { font-size: 0.86rem; font-weight: 600; color: var(--kc-navy, #324158); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-row-subj[b-ccwj8o8p7r] { font-size: 0.78rem; color: var(--kc-muted, #666); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-row-meta[b-ccwj8o8p7r] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; flex: 0 0 auto; }
.mm-row-time[b-ccwj8o8p7r] { font-size: 0.7rem; color: var(--kc-muted, #999); white-space: nowrap; }
.mm-muted[b-ccwj8o8p7r] { color: var(--kc-muted, #888); font-weight: 400; }
.mm-mono[b-ccwj8o8p7r] { font-family: Consolas, "Courier New", monospace; }

.mm-empty[b-ccwj8o8p7r] { padding: 2rem 1rem; text-align: center; color: var(--kc-muted, #999); font-size: 0.9rem; }
.mm-empty--zero[b-ccwj8o8p7r] { font-size: 1rem; color: #047857; }

/* Bulk bar */
.mm-bulkbar[b-ccwj8o8p7r] {
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--kc-navy, #324158); color: #fff;
    border-radius: 0.5rem; padding: 0.45rem 0.8rem; font-size: 0.86rem;
}
.mm-bulkbar .mm-link[b-ccwj8o8p7r] { color: #bfdbfe; }

/* Detail pane */
.mm-detail[b-ccwj8o8p7r] {
    background: var(--kc-surface, #fff); border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-radius: var(--kc-radius-card, 0.5rem); box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0,0,0,.1));
    min-height: 380px; display: flex; flex-direction: column; overflow: hidden;
}
.mm-detail-empty[b-ccwj8o8p7r] { margin: auto; text-align: center; color: var(--kc-muted, #999); padding: 2rem; }
.mm-detail-empty-ico[b-ccwj8o8p7r] { font-size: 2.3rem; opacity: 0.5; margin-bottom: 0.4rem; }
.mm-kbd-hint[b-ccwj8o8p7r] { font-size: 0.78rem; }
.mm-kbd-hint kbd[b-ccwj8o8p7r], .mm-menu-item kbd[b-ccwj8o8p7r] {
    background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.12); border-radius: 0.25rem;
    padding: 0 0.3rem; font-size: 0.72rem; font-family: inherit;
}

.mm-detail-head[b-ccwj8o8p7r] { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--kc-border-soft, rgba(0,0,0,.08)); background: var(--kc-surface-alt, #efeeef); }
.mm-detail-badges[b-ccwj8o8p7r] { display: flex; gap: 0.4rem; margin-bottom: 0.45rem; flex-wrap: wrap; }
.mm-detail-subj[b-ccwj8o8p7r] { margin: 0 0 0.55rem; font-size: 1.1rem; font-weight: 700; color: var(--kc-navy, #324158); }
.mm-detail-actions[b-ccwj8o8p7r] { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.mm-error-box[b-ccwj8o8p7r] {
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 0.4rem; padding: 0.5rem 0.7rem; font-size: 0.84rem; margin-bottom: 0.6rem;
    word-break: break-word;
}

.mm-meta[b-ccwj8o8p7r] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; margin: 0; }
@media (max-width: 560px) { .mm-meta[b-ccwj8o8p7r] { grid-template-columns: 1fr; } }
.mm-meta > div[b-ccwj8o8p7r] { display: flex; flex-direction: column; min-width: 0; }
.mm-meta dt[b-ccwj8o8p7r] { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-muted, #999); }
.mm-meta dd[b-ccwj8o8p7r] { margin: 0; font-size: 0.84rem; color: var(--kc-ink, #333); word-break: break-word; }
.mm-meta code[b-ccwj8o8p7r], .mm-detail code[b-ccwj8o8p7r] { font-size: 0.76rem; background: rgba(0,0,0,.05); padding: 0.05rem 0.3rem; border-radius: 0.25rem; }
/* The intent's link takes a whole row: it is long, and every character of it matters. */
.mm-meta > .mm-linkrow[b-ccwj8o8p7r] { grid-column: 1 / -1; }
.mm-linkrow dd[b-ccwj8o8p7r] { display: flex; gap: 0.4rem; align-items: center; }
.mm-linkval[b-ccwj8o8p7r] { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.74rem; }

/* Badges */
.mm-badge[b-ccwj8o8p7r] {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.1rem 0.5rem; border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.71rem; font-weight: 700; white-space: nowrap;
}
.mm-badge--sent[b-ccwj8o8p7r] { background: #d1fae5; color: #065f46; }
.mm-badge--captured[b-ccwj8o8p7r] { background: #e0f2fe; color: #075985; }
.mm-badge--dropped[b-ccwj8o8p7r] { background: #f3f4f6; color: #4b5563; }
.mm-badge--pending[b-ccwj8o8p7r] { background: #fef9c3; color: #854d0e; }
.mm-badge--dead[b-ccwj8o8p7r] { background: #fee2e2; color: #b91c1c; }
.mm-badge--chan[b-ccwj8o8p7r] { background: #f1f5f9; color: var(--kc-navy, #324158); }

/* Content tabs */
.mm-cont-tabs[b-ccwj8o8p7r] { display: flex; gap: 0.2rem; padding: 0.5rem 1.25rem 0; border-top: 1px solid var(--kc-border-soft, rgba(0,0,0,.08)); }
.mm-cont-tab[b-ccwj8o8p7r] {
    border: 0; background: none; padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600;
    color: var(--kc-muted, #666); cursor: pointer; border-radius: 0.35rem 0.35rem 0 0;
}
.mm-cont-tab.is-active[b-ccwj8o8p7r] { background: #f1f5f9; color: var(--kc-navy, #324158); }
.mm-cont-body[b-ccwj8o8p7r] { padding: 0.9rem 1.25rem 1.1rem; overflow: auto; max-height: 52vh; background: #f8fafc; flex: 1 1 auto; }
.mm-frame[b-ccwj8o8p7r] {
    width: 100%; min-height: 340px; border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-radius: 0.4rem; background: #fff;
}
.mm-plain[b-ccwj8o8p7r] { white-space: pre-wrap; font-size: 0.84rem; margin: 0; word-break: break-word; }

/* Context menu */
.mm-menu[b-ccwj8o8p7r] {
    position: fixed; z-index: 100; min-width: 210px;
    background: #fff; border: 1px solid var(--kc-border-soft, rgba(0,0,0,.14));
    border-radius: 0.5rem; box-shadow: var(--kc-shadow-lift, 0 4px 12px rgba(0,0,0,.16));
    padding: 0.3rem; display: flex; flex-direction: column;
}
.mm-menu-item[b-ccwj8o8p7r] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    border: 0; background: none; padding: 0.42rem 0.6rem; border-radius: 0.35rem;
    font-size: 0.85rem; color: var(--kc-ink, #333); cursor: pointer; text-align: left; width: 100%;
}
.mm-menu-item:hover:not(:disabled)[b-ccwj8o8p7r] { background: #f1f5f9; }
.mm-menu-item:disabled[b-ccwj8o8p7r] { opacity: 0.4; cursor: default; }
.mm-menu-item.is-danger[b-ccwj8o8p7r] { color: #b91c1c; }
.mm-menu-sep[b-ccwj8o8p7r] { height: 1px; background: var(--kc-border-soft, rgba(0,0,0,.08)); margin: 0.25rem 0.4rem; }
/* /Components/Pages/Egenkontrolldokument.razor.rz.scp.css */
/* The programme as a document. Everything here serves one job: making a long compliance text READABLE —
   a measure the eye can track, a number the eye can find, and a visible break between the prose a kitchen
   follows and the controls that prove it followed it.

   No print rules live here; the print view is owned separately. */

.kc-doc[b-5bmpsz65s7] {
    color: var(--kc-ink);
}

/* --- What version this is ------------------------------------------------- */

.kc-doc__meta[b-5bmpsz65s7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    align-items: baseline;
    margin: 1rem 0 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--kc-border-soft);
    font-size: 0.875rem;
    color: var(--kc-muted);
}

.kc-doc__ver[b-5bmpsz65s7] {
    font-size: 1rem;
    color: var(--kc-navy);
}

/* What the decimal in "Utgåva 4.17" counts, printed wherever the number is — the inspection pack included.
   Its own line rather than another chip in the row: it is a sentence to be read, not a fact to be scanned,
   and it is the answer to a question the number would otherwise provoke. */
.kc-doc__legend[b-5bmpsz65s7] {
    flex-basis: 100%;
    display: grid;
    gap: 0.1rem;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* Pushed to the far end of the meta row: the version facts are read together, and the way into changing
   them is an action, not another fact about the document. */
.kc-doc__modes[b-5bmpsz65s7] { margin-left: auto; }

/* --- Editing ---------------------------------------------------------------
   Two notes, saying different things. The draft note is for a READER of the approved document — somebody
   else has an unapproved rewrite in progress. The edit note is for the AUTHOR — what you are typing does
   not govern the kitchen yet. Both are stated rather than implied: the whole risk in editing a compliance
   document is not knowing which version you are looking at. */

.kc-doc__draftnote[b-5bmpsz65s7],
.kc-doc__editnote[b-5bmpsz65s7],
.kc-doc__error[b-5bmpsz65s7] {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0 var(--kc-radius-card) var(--kc-radius-card) 0;
    font-size: 0.9375rem;
}

.kc-doc__draftnote[b-5bmpsz65s7] {
    border-left: 4px solid var(--kc-border-soft);
    background: var(--kc-surface-alt);
    color: var(--kc-muted);
}

.kc-doc__editnote[b-5bmpsz65s7] {
    border-left: 4px solid var(--kc-status-missed-edge);
    background: var(--kc-status-missed);
    color: var(--kc-warn-text);
}

.kc-doc__error[b-5bmpsz65s7] {
    border-left: 4px solid var(--kc-error-text);
    background: var(--kc-status-fail, #FECACA);
    color: var(--kc-error-text);
}

/* The writing surface stands where the prose stands, marked as a place under construction rather than as
   part of the finished document. */
.kc-doc__edit[b-5bmpsz65s7] {
    margin: 0.6rem 0 0.9rem;
    padding: 0.75rem;
    border: 1px dashed var(--kc-navy);
    border-radius: var(--kc-radius-card);
    background: var(--kc-surface-alt);
}

.kc-doc__edit .kc-editactions[b-5bmpsz65s7] { align-items: center; }
.kc-doc__savestate[b-5bmpsz65s7] { margin-left: 0.2rem; }
.kc-doc__savestate[data-savestate="dirty"][b-5bmpsz65s7] { color: var(--kc-warn-text); font-weight: 600; }
.kc-doc__emptybody[b-5bmpsz65s7] { margin: 0.4rem 0; }
.kc-doc__editbtn[b-5bmpsz65s7] { flex: none; }

.kc-doc__note[b-5bmpsz65s7] {
    margin: 0 0 1rem;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--kc-status-missed-edge);
    background: var(--kc-status-missed);
    color: var(--kc-warn-text);
    border-radius: 0 var(--kc-radius-card) var(--kc-radius-card) 0;
    font-size: 0.9375rem;
}

/* --- Layout ---------------------------------------------------------------
   Contents on the left, staying put; the document scrolls past it. A programme is navigated far more often
   than it is read end to end — someone is usually after the one routine that governs what they are about
   to do — and a table of contents that scrolls away is no use for that. */

.kc-doc__layout[b-5bmpsz65s7] {
    display: grid;
    /* The page keeps the house frame; the width is won back from the rail instead. The contents only ever
       hold a number and a title, so they need far less than the prose beside them. */
    grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* No measure of its own: the page frame already bounds it, and the old max-width sat around BOTH columns,
   so a third of it went to the rail and left the prose in a gutter. Within the house frame the remaining
   width sets fine, and the fact columns (frekvens, gränsvärde, korrigerande åtgärd) need every bit of it. */
.kc-doc__body-col[b-5bmpsz65s7] {
    min-width: 0;
}

/* --- Innehåll ------------------------------------------------------------- */

.kc-doc__toc[b-5bmpsz65s7] {
    position: sticky;
    /* Clear of the app's own header, and never taller than the viewport: a long programme's contents must
       scroll inside the rail rather than pushing its own tail out of reach. */
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    margin: 0;
    padding: 0.875rem 1.125rem 1rem;
    background: var(--kc-surface-alt);
    border-radius: var(--kc-radius-panel);
}

/* One column on narrow screens: a 13rem rail beside body text leaves neither enough room. The contents
   then lead, which is the right order for a document you have just opened. */
@media (max-width: 900px) {
    .kc-doc__layout[b-5bmpsz65s7] {
        grid-template-columns: minmax(0, 1fr);
    }

    .kc-doc__toc[b-5bmpsz65s7] {
        position: static;
        max-height: none;
        margin: 0 0 1.5rem;
    }
}

.kc-doc__toch[b-5bmpsz65s7] {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kc-muted);
}

.kc-doc__toclist[b-5bmpsz65s7] {
    margin: 0;
    padding: 0;
    /* The numbers are the document's own, positional ones — a browser-generated list marker beside them
       would be a second, disagreeing numbering. */
    list-style: none;
}

.kc-doc__tocitem[b-5bmpsz65s7] {
    padding-left: calc(var(--kc-doc-depth, 0) * 1.25rem);
}

.kc-doc__toclink[b-5bmpsz65s7] {
    display: flex;
    padding: 0.2rem 0;
    color: var(--kc-ink);
    text-decoration: none;
    line-height: 1.4;
}

/* The number holds its column while a long title wraps beside it, rather than being squeezed onto two
   lines of its own. */
.kc-doc__toclink .kc-doc__num[b-5bmpsz65s7] {
    flex: none;
}

.kc-doc__toclink:hover[b-5bmpsz65s7],
.kc-doc__toclink:focus-visible[b-5bmpsz65s7] {
    color: var(--kc-blue-deep);
    text-decoration: underline;
}

/* --- Sections ------------------------------------------------------------- */

/* Each chapter is its own panel. It gives the section a boundary an edit control can belong to, and it
   makes a long programme scannable as a stack of things rather than one unbroken wall of prose. */
.kc-doc__sect[b-5bmpsz65s7] {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem 0.75rem;
    background: var(--kc-surface);
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: var(--kc-radius-panel);
}

.kc-doc__sectfoot[b-5bmpsz65s7] {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--kc-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.kc-doc__h[b-5bmpsz65s7] {
    /* Landing from a cross-reference with the heading flush against the viewport edge reads as if the
       section started mid-word. */
    scroll-margin-top: 1rem;
    margin: 0 0 0.35rem;
    color: var(--kc-navy);
    font-size: 1.35rem;
    line-height: 1.25;
}

.kc-doc__h--sub[b-5bmpsz65s7] {
    font-size: 1.1rem;
}

.kc-doc__num[b-5bmpsz65s7] {
    /* Tabular figures so 2.10 and 2.9 line up down the contents list rather than drifting. */
    font-variant-numeric: tabular-nums;
    margin-right: 0.6rem;
    color: var(--kc-muted);
    font-weight: 600;
}

/* Where a reference just landed. Colour alone, and static — the number and heading already say where you
   are; this only shortens the search for it. */
.kc-doc__h:target[b-5bmpsz65s7],
.kc-doc__ctrl:target[b-5bmpsz65s7] {
    background: var(--kc-info-bg);
    border-radius: var(--kc-radius-card);
    box-shadow: 0 0 0 0.4rem var(--kc-info-bg);
}

.kc-doc__regs[b-5bmpsz65s7] {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--kc-muted);
    line-height: 1.5;
}

.kc-doc__regslbl[b-5bmpsz65s7] {
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.4rem;
}

/* Semicolons rather than commas: several of these citations contain commas of their own. */
.kc-doc__reg + .kc-doc__reg[b-5bmpsz65s7]::before {
    content: "; ";
}

.kc-doc__body[b-5bmpsz65s7] {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.65;
}

/* --- Controls ------------------------------------------------------------- */

.kc-doc__ctrl[b-5bmpsz65s7] {
    scroll-margin-top: 1rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-left: 4px solid var(--kc-blue);
    border-radius: 0 var(--kc-radius-card) var(--kc-radius-card) 0;
}

.kc-doc__ctrlh[b-5bmpsz65s7] {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--kc-navy);
}

.kc-doc__facts[b-5bmpsz65s7] {
    display: grid;
    grid-template-columns: minmax(7.5rem, max-content) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.kc-doc__facts dt[b-5bmpsz65s7] {
    font-weight: 650;
    color: var(--kc-subtle);
}

.kc-doc__facts dd[b-5bmpsz65s7] {
    margin: 0;
}

.kc-doc__band[b-5bmpsz65s7] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The chip states where the figure's authority comes from, in words — the fill is the second signal, never
   the only one, because a programme that reads a riktvärde as a statutory limit fails inspection. */
.kc-doc__prov[b-5bmpsz65s7] {
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
}

.kc-doc__prov--law[b-5bmpsz65s7] {
    background: var(--kc-info-bg);
    color: var(--kc-info-text);
}

.kc-doc__prov--rec[b-5bmpsz65s7] {
    background: var(--kc-surface);
    color: var(--kc-subtle);
    border: 1px dashed var(--kc-border-soft);
}

.kc-doc__prov--own[b-5bmpsz65s7] {
    background: var(--kc-neutral-bg);
    color: var(--kc-neutral-text);
}

.kc-doc__cite[b-5bmpsz65s7] {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--kc-muted);
}

.kc-doc__citelbl[b-5bmpsz65s7] {
    font-weight: 650;
    margin-right: 0.3rem;
}

/* --- No programme in force ------------------------------------------------ */

.kc-doc__empty[b-5bmpsz65s7] {
    max-width: 40rem;
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--kc-surface-alt);
    border-radius: var(--kc-radius-panel);
}

.kc-doc__emptyh[b-5bmpsz65s7] {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    color: var(--kc-navy);
}

@media (max-width: 640px) {
    /* Stacked: a label column wide enough for "Korrigerande åtgärd" leaves the answer nowhere to go. */
    .kc-doc__facts[b-5bmpsz65s7] {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .kc-doc__facts dd[b-5bmpsz65s7] {
        margin-bottom: 0.55rem;
    }

    .kc-doc__h[b-5bmpsz65s7] {
        font-size: 1.2rem;
    }
}

/* ---------------------------------------------------------------------------------------------------
   The kitchen's own words, under the rule pack's.
   Marked, not merged. An inspector reading this page is entitled to know which sentences carry the
   regulation's authority and which are a kitchen describing its own premises — and the author is
   entitled to add the latter without it looking like they rewrote the former.
   --------------------------------------------------------------------------------------------------- */
.kc-doc__addendum[b-5bmpsz65s7] {
    margin: 0.7rem 0 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--kc-blue, #7EC8E3);
    background: var(--kc-tint, #F3F6FA);
    border-radius: 0 6px 6px 0;
}

.kc-doc__addendumlabel[b-5bmpsz65s7] {
    margin: 0 0 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kc-muted);
}

.kc-doc__addhint[b-5bmpsz65s7] {
    margin: 0 0 0.5rem;
    max-width: 62ch;
}

/* On paper the tint may not survive, so the rule keeps the boundary visible in ink. */
@media print {
    .kc-doc__addendum[b-5bmpsz65s7] {
        background: none;
        border-left: 2pt solid #000;
    }
}

/* ---------------------------------------------------------------------------------------------------
   Rewriting a rule-pack section costs it the pack's citations. Said at the moment it happens, where the
   words are being changed — not in a tooltip somebody discovers afterwards.
   --------------------------------------------------------------------------------------------------- */
.kc-doc__flipwarn[b-5bmpsz65s7] {
    margin: 0 0 0.6rem;
    max-width: 66ch;
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--kc-amber, #F59E0B);
    background: #FFFBEB;
    border-radius: 0 6px 6px 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--kc-ink, #1F2937);
}

/* Naming the citations that lapse turns a general warning into a specific loss. */
.kc-doc__flipwarnrefs[b-5bmpsz65s7] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kc-amber-ink, #92400E);
}

/* ---------------------------------------------------------------------------------------------------
   A recorded exclusion. Published where the routine would have been, because an inspector asking "var är
   er nedkylningsrutin?" must find the answer in the programme — silence reads as an oversight.
   --------------------------------------------------------------------------------------------------- */
.kc-doc__excluded[b-5bmpsz65s7] {
    margin: 0.4rem 0 0.2rem;
    padding: 0.7rem 0.95rem;
    border: 1px dashed var(--kc-line, #D1D5DB);
    border-radius: 8px;
    background: var(--kc-tint, #F3F6FA);
}

.kc-doc__excludedhead[b-5bmpsz65s7] {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kc-muted);
}

.kc-doc__excludedwhy[b-5bmpsz65s7] {
    margin: 0 0 0.35rem;
    max-width: 70ch;
    font-style: italic;
}

/* The three-way question. Wide-ish, because two of the three options exist to talk somebody OUT of
   excluding, and an option nobody reads cannot do that. */
.kc-doc__excl[b-5bmpsz65s7] {
    margin: 0.6rem 0 0;
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--kc-amber, #F59E0B);
    background: #FFFBEB;
    border-radius: 0 8px 8px 0;
}

.kc-doc__exclq[b-5bmpsz65s7] { margin: 0 0 0.5rem; font-weight: 700; }

.kc-doc__exclopts[b-5bmpsz65s7] {
    margin: 0 0 0.8rem;
    padding-left: 1.1rem;
    max-width: 74ch;
    font-size: 0.85rem;
    line-height: 1.5;
}

.kc-doc__exclopts li[b-5bmpsz65s7] { margin-bottom: 0.45rem; }
.kc-doc__exclopts strong[b-5bmpsz65s7] { display: block; }

.kc-doc__excllabel[b-5bmpsz65s7] { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.kc-doc__exclreason[b-5bmpsz65s7] { width: 100%; max-width: 60rem; }

/* On paper the dashed box survives as a box; the amber prompt is an editing tool and does not print. */
@media print {
    .kc-doc__excl[b-5bmpsz65s7] { display: none; }
    .kc-doc__excluded[b-5bmpsz65s7] { background: none; }
}

/* Which kitchen's programme this is. Only rendered where there is more than one — see the markup. */
.kc-doc__units[b-5bmpsz65s7] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
}

/* Where the document comes from, beside the version stamp. A kitchen reading a kostenhet's programme is
   following somebody else's decisions, and "Version 3" alone does not say so. */
.kc-doc__inherited[b-5bmpsz65s7] {
    font-style: italic;
    opacity: .8;
}

/* Per-section origin. Quiet by design: on an inherited document nearly every line says the same thing,
   and the ones worth noticing are the few that say "Skrivet här" or "Undantaget här". */
.kc-doc__from[b-5bmpsz65s7] {
    margin: 0 0 .35rem;
    font-size: .75rem;
    opacity: .6;
}

/* A version published above this kitchen that it has not taken on. Above the document, because everything
   below it is deliberately the older one — the version still in force here. */
.kc-doc__pending[b-5bmpsz65s7] {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--kc-accent, #4a6b8a);
    border-left-width: 4px;
    border-radius: .35rem;
    background: var(--kc-surface-alt, #f6f6f4);
}

.kc-doc__pendinghead[b-5bmpsz65s7] {
    margin: 0 0 .25rem;
    font-weight: 600;
}

.kc-doc__pending p[b-5bmpsz65s7] {
    margin: 0 0 .5rem;
    font-size: .9rem;
}

/* The kitchens under this level. A strip rather than a dropdown: which kök differ, and how much, is the
   thing a kostchef scans for, and a closed select hides exactly that. */
.kc-doc__tree[b-5bmpsz65s7] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .5rem;
}

.kc-doc__leaf[b-5bmpsz65s7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: .3rem .7rem;
    border: 1px solid var(--kc-border, #d8d8d8);
    border-radius: .4rem;
    background: var(--kc-surface, #fff);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.kc-doc__leaf.is-on[b-5bmpsz65s7] {
    border-color: var(--kc-accent, #4a6b8a);
    box-shadow: inset 0 0 0 1px var(--kc-accent, #4a6b8a);
}

.kc-doc__leafname[b-5bmpsz65s7] { font-size: .85rem; font-weight: 600; }

.kc-doc__leafmeta[b-5bmpsz65s7] { font-size: .7rem; opacity: .6; }

/* Said plainly, because the document on screen is NOT the one being changed. */
.kc-doc__targetnote[b-5bmpsz65s7] {
    margin: 0 0 1rem;
    padding: .5rem .8rem;
    border-left: 3px solid var(--kc-accent, #4a6b8a);
    background: var(--kc-surface-alt, #f6f6f4);
    font-size: .9rem;
}

/* Which kitchens depart from this section, collapsed until asked for. */
.kc-doc__variants[b-5bmpsz65s7] { margin: .35rem 0 .5rem; }

.kc-doc__varbtn[b-5bmpsz65s7] {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    padding: .15rem .5rem;
    border: 1px dashed var(--kc-border, #d8d8d8);
    border-radius: 1rem;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
}

.kc-doc__varbtn:hover[b-5bmpsz65s7] { border-color: var(--kc-accent, #4a6b8a); }

.kc-doc__varwho[b-5bmpsz65s7] { opacity: .65; }

.kc-doc__varlist[b-5bmpsz65s7] {
    margin: .5rem 0 0;
    padding: 0 0 0 .8rem;
    list-style: none;
    border-left: 2px solid var(--kc-border, #e2e2e2);
}

.kc-doc__var[b-5bmpsz65s7] { padding: .4rem 0; }

.kc-doc__varhead[b-5bmpsz65s7] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .2rem;
    font-size: .85rem;
}

.kc-doc__varwhy[b-5bmpsz65s7] { margin: 0; font-size: .85rem; }

.kc-doc__varbody[b-5bmpsz65s7] { font-size: .85rem; opacity: .9; }

/* The organisation laid out wide and clicked directly. A dropdown answers "which kitchen am I reading" only
   after being opened — and here the SHAPE of the tree is the context, because what a kitchen inherits
   depends on where it sits. */
.kc-doc__org[b-5bmpsz65s7] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .4rem;
    margin: 0 0 1rem;
}

.kc-doc__node[b-5bmpsz65s7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: calc(var(--kc-doc-lvl, 0) * 1.1rem);
    padding: .35rem .75rem;
    border: 1px solid var(--kc-border, #d8d8d8);
    border-radius: .4rem;
    background: var(--kc-surface, #fff);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.kc-doc__node:hover[b-5bmpsz65s7] { border-color: var(--kc-accent, #4a6b8a); }

.kc-doc__node.is-on[b-5bmpsz65s7] {
    border-color: var(--kc-accent, #4a6b8a);
    box-shadow: inset 0 0 0 1px var(--kc-accent, #4a6b8a);
}

/* A node with no programme at all, its own or inherited. Dimmed rather than hidden: that a kostenhet sits
   above you and has published nothing is worth seeing. */
.kc-doc__node.is-bare[b-5bmpsz65s7] { opacity: .5; }

.kc-doc__nodename[b-5bmpsz65s7] { font-size: .85rem; font-weight: 600; }

.kc-doc__nodemeta[b-5bmpsz65s7] { font-size: .7rem; opacity: .65; }

/* Who follows these exact words. Above the editor, because the REACH of an edit is what an author needs to
   know before typing, not after saving. */
.kc-doc__lamps[b-5bmpsz65s7] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem;
    margin: 0 0 .5rem;
}

.kc-doc__lamp[b-5bmpsz65s7] {
    padding: .1rem .5rem;
    border-radius: 1rem;
    font-size: .72rem;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* Lit: this kitchen has this wording. */
.kc-doc__lamp.is-lit[b-5bmpsz65s7] {
    background: var(--kc-accent, #4a6b8a);
    color: #fff;
}

/* Dimmed: it says something else. */
.kc-doc__lamp.is-dim[b-5bmpsz65s7] {
    background: transparent;
    border-color: var(--kc-border, #d8d8d8);
    opacity: .5;
}

/* Struck through: it has excluded the section, which is a stronger statement than a rewrite. */
.kc-doc__lamp.is-out[b-5bmpsz65s7] {
    background: transparent;
    border-color: var(--kc-border, #d8d8d8);
    opacity: .5;
    text-decoration: line-through;
}

/* Two pips per kitchen: the wording, and whether the section applies. Two facts, so two controls — a single
   state would hide whichever was not on top, and an excluded kitchen's wording is exactly what returns if
   somebody lifts the exclusion. */
.kc-doc__lampslbl[b-5bmpsz65s7] {
    align-self: center;
}

.kc-doc__lamp[b-5bmpsz65s7] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .25rem .1rem .5rem;
    border: 1px solid var(--kc-border, #d8d8d8);
    border-radius: 1rem;
}

.kc-doc__lampname[b-5bmpsz65s7] {
    font-size: .72rem;
    white-space: nowrap;
}

.kc-doc__pip[b-5bmpsz65s7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
    border: 1px solid var(--kc-border, #c9c9c9);
    border-radius: 50%;
    background: transparent;
    color: var(--kc-ink, #333);
    cursor: pointer;
    font: inherit;
    font-size: .58rem;
    line-height: 1;
}

.kc-doc__pip:disabled[b-5bmpsz65s7] {
    cursor: default;
}

/* On: this kitchen has these words / performs this section. */
.kc-doc__pip.is-on[b-5bmpsz65s7] {
    background: var(--kc-accent, #4a6b8a);
    border-color: var(--kc-accent, #4a6b8a);
    color: #fff;
}

/* Off: hollow, and the mark hidden rather than struck — an empty circle reads as "not this one" faster
   than a crossed-out glyph at this size. */
.kc-doc__pip:not(.is-on) .kc-doc__pipmark[b-5bmpsz65s7] {
    visibility: hidden;
}

.kc-doc__pip:not(:disabled):hover[b-5bmpsz65s7] {
    border-color: var(--kc-accent, #4a6b8a);
}

/* A draft would move this pip. The fill shows what it WILL be — a control that does not answer the click
   reads as broken — and the dashed ring is what says it is not in force yet. What is in force is in the
   tooltip, which is where the precise answer belongs; the ring's job is to stop the reader believing the
   kitchen is already following this. */
.kc-doc__pip.is-pending[b-5bmpsz65s7] {
    border-style: dashed;
    border-color: var(--kc-accent, #4a6b8a);
}

.kc-doc__pip.is-pending:not(.is-on) .kc-doc__pipmark[b-5bmpsz65s7] {
    visibility: visible;
    opacity: .45;
}
.kc-doc__review[b-5bmpsz65s7] {
    margin: 0 0 1rem;
    padding: .8rem 1rem;
    border: 1px solid var(--kc-accent, #4a6b8a);
    border-left-width: 4px;
    border-radius: .35rem;
    background: var(--kc-surface-alt, #f6f6f4);
}

.kc-doc__reviewhead[b-5bmpsz65s7] { margin: 0 0 .25rem; font-weight: 600; }

/* What differs from the version in force, marked on the paragraph rather than listed in the abstract. */
.kc-doc__sect.is-changed[b-5bmpsz65s7] {
    border-left: 3px solid var(--kc-accent, #4a6b8a);
    padding-left: .8rem;
    margin-left: -1.1rem;
}

.kc-doc__changed[b-5bmpsz65s7] {
    margin: 0 0 .4rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--kc-accent, #4a6b8a);
}
/* /Components/Pages/Egenkontrollguide.razor.rz.scp.css */
/* Guidad uppsättning. One question at a time, big targets: this is filled in by a restaurateur on a phone
   between services, not by a consultant at a desk. */

.kc-guide[b-4ghp36a3th] {
    max-width: 44rem;
}

.kc-guide__intro p[b-4ghp36a3th] {
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.kc-guide__reassure[b-4ghp36a3th] {
    background: var(--kc-mint, #eef7f3);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

/* Which kitchen this run is for. A statement, not a control — the choice was made on step 2, and
   dressing it as a field here is what made it read as the guide's first question. */
.kc-guide__for[b-4ghp36a3th] {
    padding: .5rem .7rem;
    border-left: 3px solid var(--kc-accent, #4a6b8a);
    background: var(--kc-zebra, #fafafa);
}

.kc-guide__for > a[b-4ghp36a3th] { margin-left: .5rem; font-size: .85rem; }

/* "Utgå från <kök>": where the answers on screen came from, or the choice to start from a sibling. Framed
   like the kitchen statement above it — it is a fact about this run, not one of the questions. */
.kc-guide__from[b-4ghp36a3th] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 1rem;
    margin: 0 0 .75rem;
    padding: .6rem .75rem;
    border-left: 3px solid var(--kc-accent, #4a6b8a);
    background: var(--kc-zebra, #fafafa);
}

.kc-guide__from p[b-4ghp36a3th] { margin: 0; flex-basis: 100%; }

.kc-guide__from .kc-field[b-4ghp36a3th] { margin: 0; }

.kc-guide__from .kc-fhint[b-4ghp36a3th] { flex-basis: 100%; margin-top: 0; }

.kc-guide__progress[b-4ghp36a3th] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.kc-guide__bar[b-4ghp36a3th] {
    flex: 1;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--kc-line, #e5e7eb);
    position: relative;
    overflow: hidden;
}

.kc-guide__bar[b-4ghp36a3th]::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--p, 0%);
    background: var(--kc-navy, #1f3a5f);
    border-radius: inherit;
    transition: width 200ms ease;
}

.kc-guide__count[b-4ghp36a3th] {
    font-size: 0.8125rem;
    color: var(--kc-ink-muted, #6b7280);
    white-space: nowrap;
}

.kc-guide__q[b-4ghp36a3th] {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    line-height: 1.35;
}

.kc-guide__hint[b-4ghp36a3th],
.kc-guide__why[b-4ghp36a3th] {
    font-size: 0.875rem;
    color: var(--kc-ink-muted, #6b7280);
    margin: 0.25rem 0 0.75rem;
    line-height: 1.45;
}

.kc-guide__opts[b-4ghp36a3th] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

/* Full-width rows rather than a grid: the labels are sentences, and a phone should never truncate one. */
.kc-guide__opt[b-4ghp36a3th] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: 0.5rem;
    background: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kc-guide__opt:hover[b-4ghp36a3th] { border-color: var(--kc-navy, #1f3a5f); }

.kc-guide__opt.is-on[b-4ghp36a3th] {
    border-color: var(--kc-navy, #1f3a5f);
    box-shadow: inset 0 0 0 1px var(--kc-navy, #1f3a5f);
}

/* "Nej" sits apart from the yes-options: it is a different KIND of answer, not one more alternative. */
.kc-guide__opt--none[b-4ghp36a3th] {
    margin-top: 0.25rem;
    border-style: dashed;
}

.kc-guide__mark[b-4ghp36a3th] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    font-size: 0.8125rem;
}

.kc-guide__opt.is-on .kc-guide__mark[b-4ghp36a3th] {
    background: var(--kc-navy, #1f3a5f);
    border-color: var(--kc-navy, #1f3a5f);
    color: #fff;
}

/* The determination, stated plainly. Colour is never the only signal — the sentence says it too. */
.kc-guide__depth[b-4ghp36a3th] {
    border-left: 4px solid var(--kc-line, #e5e7eb);
    padding: 0.5rem 0 0.5rem 0.875rem;
    margin: 0.5rem 0 1rem;
}

.kc-guide__depth.is-light[b-4ghp36a3th] { border-left-color: #8bc7a6; }
.kc-guide__depth.is-standard[b-4ghp36a3th] { border-left-color: #5b8def; }
.kc-guide__depth.is-full[b-4ghp36a3th] { border-left-color: #e0a33e; }

.kc-guide__depth ul[b-4ghp36a3th] {
    margin: 0.5rem 0 0;
    padding-left: 1.125rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.kc-guide__cite[b-4ghp36a3th] {
    display: block;
    font-size: 0.8125rem;
    color: var(--kc-ink-muted, #6b7280);
}

.kc-guide__sections[b-4ghp36a3th] {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.kc-guide__sections li[b-4ghp36a3th] {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--kc-line, #e5e7eb);
}

.kc-guide__sect[b-4ghp36a3th] { font-weight: 600; }

.kc-guide__tag[b-4ghp36a3th],
.kc-guide__ctrl[b-4ghp36a3th] {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--kc-ink-muted, #6b7280);
}

.kc-guide__tag[b-4ghp36a3th] {
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: 999px;
    padding: 0.0625rem 0.5rem;
}

.kc-guide__ctrl[b-4ghp36a3th] {
    display: block;
    margin: 0.25rem 0 0 0;
}

.kc-guide__error[b-4ghp36a3th] { color: var(--kc-red, #b42318); }
/* /Components/Pages/Enheter.razor.rz.scp.css */
/* The org chart. A kommun's reporting path is the thing that decides who can see what — a grant at a node
   covers its whole subtree — so it is drawn as a tree, not implied by an indented list. */

.kc-orgchart[b-wkaj7i7r5g] {
    border: 1px solid var(--kc-line, #e5e7eb);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem 1rem;
    margin: 0 0 1rem;
    background: #fff;
    overflow-x: auto;
}

.kc-tree[b-wkaj7i7r5g] { list-style: none; margin: 0; padding: 0; }

/* Nested levels indent and carry a connector, so depth is readable at a glance. */
.kc-tree .kc-tree[b-wkaj7i7r5g] {
    margin-left: 0.75rem;
    padding-left: 0.875rem;
    border-left: 2px solid var(--kc-line, #e5e7eb);
}

.kc-tree__node[b-wkaj7i7r5g] { position: relative; padding: 0.1875rem 0; }

/* The elbow into each child. */
.kc-tree .kc-tree > .kc-tree__node[b-wkaj7i7r5g]::before {
    content: "";
    position: absolute;
    left: -0.875rem;
    top: 1rem;
    width: 0.75rem;
    height: 2px;
    background: var(--kc-line, #e5e7eb);
}

.kc-tree__chip[b-wkaj7i7r5g] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4375rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--kc-line, #e5e7eb);
    background: color-mix(in srgb, var(--tc, #fff) 42%, #fff);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.kc-tree__kind[b-wkaj7i7r5g] {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.kc-grid__warn[b-wkaj7i7r5g] { font-size: 0.75rem; margin-right: 0.25rem; }

.kc-enh__note[b-wkaj7i7r5g] { margin-top: 0.75rem; }

/* "Klart" / "N steg kvar" per kitchen — the readiness the dialog and the day board spell out step by step.
   The same two colours as there: the waiting amber for something left to do, the done green once nothing is. */
.kc-grid__ready[b-wkaj7i7r5g] { white-space: nowrap; }

.kc-enh__ready[b-wkaj7i7r5g] {
    display: inline-flex;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--kc-status-missed);
    color: #7A5B12;
}

.kc-enh__ready.is-ready[b-wkaj7i7r5g] {
    background: var(--kc-status-ok);
    color: #12693A;
}
/* /Components/Pages/Gastkoder.razor.rz.scp.css */
.gk[b-xc7xo40gyd] { max-width: 1000px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.gk-loading[b-xc7xo40gyd], .gk-denied[b-xc7xo40gyd] { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.gk-head[b-xc7xo40gyd] { margin-bottom: 1rem; }
.gk-title[b-xc7xo40gyd] { margin: 0; font-size: 1.35rem; }
.gk-sub[b-xc7xo40gyd] { margin: 0.25rem 0 0; max-width: 66ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.gk-h2[b-xc7xo40gyd] { margin: 0 0 0.5rem; font-size: 0.95rem; }

.gk-toast[b-xc7xo40gyd], .gk-alert[b-xc7xo40gyd] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.gk-toast[b-xc7xo40gyd] { background: #eff6ff; color: #1e40af; }
.gk-alert[b-xc7xo40gyd] { background: #fef2f2; color: #991b1b; }

/* The sign points at the browser's own address because no public one is set — said above everything else, in words and with the way out. */
.gk-warn[b-xc7xo40gyd] {
    margin: 0 0 0.75rem; padding: 0.6rem 0.85rem; border-radius: 8px;
    background: #fffbeb; border: 1px solid #f59e0b; color: #78350f; font-size: 0.9rem; line-height: 1.45;
}
.gk-warn-link[b-xc7xo40gyd] { color: #78350f; text-decoration: underline; }

.gk-new[b-xc7xo40gyd] { padding: 0.9rem; background: #f9fafb; border-radius: 10px; margin-bottom: 1.25rem; }
.gk-form[b-xc7xo40gyd] { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.gk-fld[b-xc7xo40gyd] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.gk-fld--grow[b-xc7xo40gyd] { flex: 1 1 16rem; }
.gk-fld > span[b-xc7xo40gyd] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.gk-input[b-xc7xo40gyd], .gk-select[b-xc7xo40gyd] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0;
}
.gk-check[b-xc7xo40gyd] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: #374151; padding-bottom: 0.45rem; }

.gk-btn[b-xc7xo40gyd] {
    border: 0; border-radius: 8px; background: #1f2937; color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.gk-btn:disabled[b-xc7xo40gyd] { opacity: 0.5; cursor: default; }

.gk-list[b-xc7xo40gyd] { display: flex; flex-direction: column; gap: 0.5rem; }

.gk-card[b-xc7xo40gyd] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.75rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
}
.gk-card.is-revoked[b-xc7xo40gyd] { opacity: 0.55; }
.gk-card-main[b-xc7xo40gyd] { min-width: 0; }
.gk-card-side[b-xc7xo40gyd] { flex: none; display: flex; align-items: center; gap: 0.75rem; }

.gk-code[b-xc7xo40gyd] {
    font-family: Consolas, monospace; font-size: 1.15rem; font-weight: 700;
    letter-spacing: 0.08em; color: #111827;
}
.gk-meta[b-xc7xo40gyd] { font-size: 0.88rem; margin-top: 0.15rem; }
.gk-flags[b-xc7xo40gyd] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; }
.gk-flag[b-xc7xo40gyd] {
    padding: 0.05rem 0.45rem; border-radius: var(--kc-radius-pill, 999px);
    background: #e0f2fe; color: #075985; font-size: 0.65rem; font-weight: 700;
}
.gk-dim[b-xc7xo40gyd] { color: #9ca3af; font-size: 0.75rem; }

.gk-link[b-xc7xo40gyd] { font-size: 0.78rem; color: var(--kc-blue, #2563eb); text-decoration: none; }
.gk-link:hover[b-xc7xo40gyd] { text-decoration: underline; }

.gk-revoke[b-xc7xo40gyd] {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 0.72rem; font-weight: 600; color: #9ca3af; text-decoration: underline;
}
.gk-revoke:not(.gk-revoke--armed):hover[b-xc7xo40gyd] { color: #b91c1c; }
.gk-revoke--armed[b-xc7xo40gyd] {
    color: #fff; background: #b91c1c; text-decoration: none;
    padding: 0.15rem 0.55rem; border-radius: var(--kc-radius-pill, 999px);
}
.gk-revoke--armed:hover[b-xc7xo40gyd] { background: #7f1d1d; }
.gk-revoked[b-xc7xo40gyd] { font-size: 0.72rem; color: #9ca3af; }

.gk-empty[b-xc7xo40gyd] { padding: 2.5rem 1rem; text-align: center; color: var(--kc-muted, #666); }
.gk-empty-ico[b-xc7xo40gyd] { font-size: 1.8rem; margin-bottom: 0.4rem; }
.gk-empty p[b-xc7xo40gyd] { margin: 0.2rem 0; }
.gk-empty-sub[b-xc7xo40gyd] { font-size: 0.8rem; max-width: 44ch; margin-inline: auto; }
/* /Components/Pages/Granskning.razor.rz.scp.css */
/* Granskning: the inspector's screen, as six steps. Quiet on purpose — nothing here draws the eye to a
   number, because a page that colours its own findings is a page that has decided which of them matter,
   and that is the inspector's job. The only emphasis in the whole sheet is the art. 19 flag, which is the
   one fact that outranks everything else on a record.

   ::deep IS LOAD-BEARING THROUGHOUT. Each step is its own component (see the contract at the top of
   Granskning.razor), so the elements a step renders do NOT carry this page's scope attribute and a plain
   scoped selector never reaches them. Everything a step's body can use is therefore written as
   ".gr-step ::deep X" — which compiles to ".gr-step[b-xxx] X" and matches at any depth beneath the step
   section this page renders. A new step needs no stylesheet of its own; it inherits this one by sitting
   inside .gr-step. */

.gr-lead[b-jfol6hp597] {
    max-width: 62ch;
}

/* --- the stepper ------------------------------------------------------------------------------------
   The same shape Avvikelse uses, but its steps are a READOUT (spans) and these are navigation (buttons),
   so the button chrome has to be undone. Navigation is not interaction: moving between steps is the one
   thing on this page that a press may do. */

.gr-stepper .st[b-jfol6hp597] {
    background: none;
    border: 0;
    padding: .25rem .5rem;
    border-radius: var(--kc-radius-pill, 999px);
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.gr-stepper .st:hover[b-jfol6hp597] {
    background: var(--kc-surface-alt, #EFEEEF);
    color: var(--kc-navy, #123);
}

.gr-stepper .st:focus-visible[b-jfol6hp597] {
    outline: 2px solid var(--kc-blue-deep, #2E93BC);
    outline-offset: 2px;
}

/* --- the step ---------------------------------------------------------------------------------------
   Tables here run five and six columns wide and the page is meant to be handed over on a tablet.
   Scrolling the step sideways beats wrapping a corrective action into four lines, and beats the
   alternative of dropping a column an inspector is entitled to. */

.gr-step[b-jfol6hp597] {
    overflow-x: auto;
}

/* The question the step answers, in the words an inspector would use. It is the script. */
.gr-question[b-jfol6hp597] {
    margin: .1rem 0 .6rem;
    font-size: 1rem;
    font-style: italic;
    color: var(--kc-subtle, #555);
}

/* CN-079 §4 rule 2: every step states the window in words. Printed by the shell so that no step can
   forget it and no step can disagree with another about what the dossier covers. */
.gr-period[b-jfol6hp597] {
    margin: 0 0 .9rem;
    padding: .4rem .6rem;
    border-left: 3px solid var(--kc-blue, #7AC0DA);
    background: var(--kc-surface-alt, #EFEEEF);
    border-radius: 0 var(--kc-radius-panel, 8px) var(--kc-radius-panel, 8px) 0;
    font-size: .85rem;
    max-width: 72ch;
}

.gr-period__note[b-jfol6hp597] {
    color: var(--kc-muted, #666);
}

/* A step whose real content is not built yet. Said out loud, in Swedish, because a placeholder that
   renders nothing reads as "there is nothing to show" — and those are different statements. */
.gr-step[b-jfol6hp597]  .gr-todo {
    margin: .8rem 0 0;
    padding: .6rem .75rem;
    border: 1px dashed var(--kc-border-soft, rgba(0, 0, 0, .18));
    border-radius: var(--kc-radius-panel, 8px);
    background: var(--kc-surface-alt, #EFEEEF);
    color: var(--kc-subtle, #555);
    font-size: .85rem;
    max-width: 72ch;
}

/* A heading inside a step's body, under the step's own h3. */
.gr-step[b-jfol6hp597]  .gr-sub {
    margin: 1.4rem 0 .1rem;
    font-size: .95rem;
    color: var(--kc-navy, #123);
}

/* --- shared readouts inside a step ------------------------------------------------------------------ */

/* A programme nobody has approved, a kitchen with no arrival control, an avvikelse closed without
   verification: absences, said in words rather than left as an empty cell. */
.gr-step[b-jfol6hp597]  .gr-none {
    opacity: .6;
    font-style: italic;
}

/* Which level published the utgåva this kitchen reads, and who put it in force. Second-line detail:
   the answer is the version, the attribution is what the next question asks for. */
.gr-step[b-jfol6hp597]  .gr-from,
.gr-step[b-jfol6hp597]  .gr-by {
    display: block;
    font-size: .75rem;
    opacity: .7;
    font-weight: 400;
}

.gr-step[b-jfol6hp597]  .gr-type {
    display: block;
    font-weight: 600;
}

.gr-step[b-jfol6hp597]  .gr-what {
    display: block;
    font-size: .85rem;
}

/* An avvikelse still being worked. Marked, not coloured — it is the register doing its job, not a
   finding, and the same reasoning keeps RecordTone.Open out of the red family in Historik. */
.gr-step[b-jfol6hp597]  .gr-row--open > th[scope="row"] {
    border-left: 3px solid var(--kc-blue, #7AC0DA);
    padding-left: .5rem;
}

.gr-step[b-jfol6hp597]  .gr-flag {
    display: inline-block;
    margin-top: .25rem;
    margin-right: .3rem;
    font-size: .72rem;
    padding: .1rem .5rem;
    border-radius: var(--kc-radius-pill, 999px);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    background: var(--kc-surface-alt, #EFEEEF);
    white-space: nowrap;
}

/* Unsafe food reached a guest and the kontrollmyndighet was told. The only thing on this page allowed
   to shout. */
.gr-step[b-jfol6hp597]  .gr-flag--art19 {
    background: var(--kc-status-failed, #FECACA);
    border-color: var(--kc-status-failed-edge, #F0A0A0);
    font-weight: 700;
}

/* --- step 6: what the lists are, and opening a row -------------------------------------------------- */

/* The sentence step 6 exists for: what was recorded is not what arrived. Marked enough to be read before
   the tables and quiet enough not to look like a finding — it is a statement about the data, not about
   the kitchen. */
.gr-step[b-jfol6hp597]  .gr-honest {
    margin: .8rem 0;
    padding: .5rem .7rem;
    border-left: 3px solid var(--kc-border-soft, rgba(0, 0, 0, .18));
    background: var(--kc-surface-alt, #EFEEEF);
    border-radius: 0 var(--kc-radius-panel, 8px) var(--kc-radius-panel, 8px) 0;
    font-size: .85rem;
    line-height: 1.45;
    max-width: 72ch;
}

/* The row you open. A <details> cannot wrap a <tr>, so each post is its own <tbody> holding the row and,
   beneath it, a full-width cell with the disclosure — which is also what gives the photograph and the
   recorded values room to be read. The cell loses the table's own rule so the pair reads as one row. */
.gr-step[b-jfol6hp597]  .gr-openrow > td {
    border-top: 0;
    padding-top: 0;
}

.gr-step[b-jfol6hp597]  .gr-openrow summary {
    cursor: pointer;
    font-size: .78rem;
    color: var(--kc-blue-deep, #2E93BC);
    width: fit-content;
}

.gr-step[b-jfol6hp597]  .gr-openrow summary:focus-visible {
    outline: 2px solid var(--kc-blue-deep, #2E93BC);
    outline-offset: 2px;
}

.gr-step[b-jfol6hp597]  .gr-openrow__body {
    margin: .4rem 0 .2rem;
    padding: .6rem .75rem;
    background: var(--kc-surface-alt, #EFEEEF);
    border-radius: var(--kc-radius-panel, 8px);
    max-width: 72ch;
}

.gr-step[b-jfol6hp597]  .gr-openrow__who {
    margin: 0 0 .4rem;
    font-size: .8rem;
    color: var(--kc-subtle, #555);
}

.gr-step[b-jfol6hp597]  .gr-values {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .2rem;
    font-size: .85rem;
}

/* The gap after a label, in CSS rather than as a space in the markup: Razor trims the whitespace around a
   control block, so a value rendered from an @if ran straight into its own colon. */
.gr-step[b-jfol6hp597]  .gr-values strong {
    margin-right: .3rem;
}

/* The probe readings from the van, as a column of moments: many short lines read better than a paragraph
   of numbers, and an excursion is meant to be findable by eye. */
.gr-step[b-jfol6hp597]  .gr-values--probe {
    margin-top: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    font-size: .8rem;
    color: var(--kc-subtle, #555);
}

.gr-step[b-jfol6hp597]  .gr-probe {
    margin-left: .5rem;
    font-weight: 650;
    color: var(--kc-navy, #123);
}

/* The one photograph. Sized to be legible on a tablet and linked to the full file, because a fraktsedel
   is not readable at thumbnail size — and it is here as the record of THIS delivery, never as a gallery
   (CN-076 §4, amended exactly this far). */
.gr-step[b-jfol6hp597]  .gr-shot {
    display: inline-block;
    margin-top: .5rem;
}

.gr-step[b-jfol6hp597]  .gr-shot img {
    display: block;
    max-width: min(100%, 26rem);
    max-height: 22rem;
    border-radius: var(--kc-radius-panel, 8px);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .18));
}

/* The provisions behind a step, rendered by GranskningRegler — a child component, hence ::deep. */
.gr-step[b-jfol6hp597]  .gr-regel {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin: .6rem 0 0;
    padding-top: .5rem;
    border-top: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    font-size: .78rem;
    color: var(--kc-muted, #666);
}

.gr-step[b-jfol6hp597]  .gr-regel__lead {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .68rem;
    align-self: center;
}

.gr-step[b-jfol6hp597]  .gr-regel__item {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    max-width: 44ch;
}

/* The provision's own plain-Swedish sentence. It is there so the citation reads as a duty rather than
   as a reference nobody follows up. */
.gr-step[b-jfol6hp597]  .gr-regel__gist {
    line-height: 1.35;
}

/* Rendered both by this page (the omissions list) and inside steps (the journal statements), so it needs
   both the plain scoped selector and the ::deep one. */
.gr-facts[b-jfol6hp597],
.gr-step[b-jfol6hp597]  .gr-facts {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: .5rem;
    max-width: 72ch;
}

.gr-facts strong[b-jfol6hp597],
.gr-step[b-jfol6hp597]  .gr-facts strong {
    font-weight: 650;
}

/* Said out loud under every step: a surface that silently omits a record type reads as though none
   exists. */
.gr-omitted[b-jfol6hp597] {
    background: transparent;
    border-bottom: none;
}
/* /Components/Pages/Guest/GuestLayout.razor.rz.scp.css */
/* Phone first: a diner is standing up, holding a phone, and will not zoom. */
.gl[b-bfknvy1kwl] { min-height: 100vh; display: flex; flex-direction: column; background: #f6f7f9; }

.gl-bar[b-bfknvy1kwl] {
    padding: 0.9rem 1rem; background: var(--kc-brand, #7ac0da); color: #0f172a;
}
.gl-mark[b-bfknvy1kwl] { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; }

.gl-main[b-bfknvy1kwl] { flex: 1 1 auto; padding: 1rem 0.85rem 2rem; }

.gl-foot[b-bfknvy1kwl] {
    padding: 1rem; text-align: center; font-size: 0.72rem; color: #9ca3af;
}
/* /Components/Pages/Guest/GuestPass.razor.rz.scp.css */
.gp-card[b-8laqyxsa4j] {
    max-width: 34rem; margin: 0 auto; padding: 1.25rem 1.1rem 1.5rem;
    background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.gp-where[b-8laqyxsa4j] { margin: 0; font-size: 0.78rem; color: #6b7280; }
.gp-h1[b-8laqyxsa4j] { margin: 0.1rem 0 0.6rem; font-size: 1.4rem; line-height: 1.2; }
.gp-h2[b-8laqyxsa4j] { margin: 0 0 0.4rem; font-size: 1.05rem; }
.gp-lede[b-8laqyxsa4j] { margin: 0 0 0.9rem; color: #4b5563; font-size: 0.92rem; line-height: 1.45; }

.gp-sec[b-8laqyxsa4j] { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid #f1f5f9; }
.gp-sec:first-of-type[b-8laqyxsa4j] { border-top: 0; padding-top: 0; }
.gp-soon[b-8laqyxsa4j] { color: #9ca3af; font-size: 0.88rem; }

.gp-label[b-8laqyxsa4j] { display: block; margin: 0.85rem 0 0.25rem; font-size: 0.85rem; font-weight: 600; color: #374151; }
.gp-req[b-8laqyxsa4j] { color: #b91c1c; }

/* 16px minimum: anything smaller makes iOS zoom the page on focus. */
.gp-input[b-8laqyxsa4j] {
    width: 100%; box-sizing: border-box; font-size: 1rem; font-family: inherit;
    padding: 0.6rem 0.7rem; border: 1px solid #d1d5db; border-radius: 10px; background: #fff;
}
.gp-input:focus[b-8laqyxsa4j] { outline: 2px solid var(--kc-brand, #7ac0da); outline-offset: -1px; }
.gp-input--num[b-8laqyxsa4j] { max-width: 7rem; }

.gp-fieldset[b-8laqyxsa4j] { margin: 0.85rem 0 0; padding: 0; border: 0; }
.gp-checks[b-8laqyxsa4j] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.3rem; }
.gp-check[b-8laqyxsa4j] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.7rem; border: 1px solid #e5e7eb; border-radius: 999px;
    font-size: 0.9rem; background: #fff; cursor: pointer;
}
.gp-check input[b-8laqyxsa4j] { width: 1.05rem; height: 1.05rem; }

.gp-details[b-8laqyxsa4j] { margin-top: 1rem; }
.gp-details summary[b-8laqyxsa4j] { cursor: pointer; font-size: 0.9rem; color: #374151; padding: 0.3rem 0; }

.gp-btn[b-8laqyxsa4j] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.9rem; padding: 0 1.2rem; border: 0; border-radius: 10px;
    background: #1f2937; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer;
    text-decoration: none;
}
.gp-btn--block[b-8laqyxsa4j] { width: 100%; margin-top: 1.1rem; }
.gp-btn--ghost[b-8laqyxsa4j] { background: #fff; color: #374151; border: 1px solid #e5e7eb; }

.gp-codeform[b-8laqyxsa4j] { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.gp-code[b-8laqyxsa4j] {
    flex: 1 1 auto; min-width: 0; font-size: 1.35rem; letter-spacing: 0.12em;
    text-align: center; text-transform: uppercase; font-family: Consolas, monospace;
    padding: 0.6rem 0.5rem; border: 1px solid #d1d5db; border-radius: 10px;
}

.gp-error[b-8laqyxsa4j] {
    margin: 0 0 0.8rem; padding: 0.6rem 0.75rem; border-radius: 10px;
    background: #fef2f2; color: #991b1b; font-size: 0.9rem;
}

.gp-fine[b-8laqyxsa4j] { margin: 0.8rem 0 0; font-size: 0.75rem; color: #9ca3af; line-height: 1.5; }

.gp-done[b-8laqyxsa4j] { text-align: center; padding: 1.5rem 0 0.5rem; }
.gp-done-ico[b-8laqyxsa4j] {
    width: 3rem; height: 3rem; margin: 0 auto 0.7rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #d1fae5; color: #065f46; font-size: 1.5rem;
}
.gp-done p[b-8laqyxsa4j] { color: #4b5563; margin: 0 0 1.2rem; }
/* /Components/Pages/Guest/GuestSign.razor.rz.scp.css */
.gs-sheet[b-8vnkio4iee] {
    max-width: 21cm; margin: 1.5rem auto; padding: 2.5rem 2rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; text-align: center;
}

.gs-inner[b-8vnkio4iee] { max-width: 15cm; margin: 0 auto; }

.gs-kicker[b-8vnkio4iee] { margin: 0; font-size: 1rem; color: #6b7280; letter-spacing: 0.02em; }
.gs-h1[b-8vnkio4iee] { margin: 0.3rem 0 0.8rem; font-size: 2.1rem; line-height: 1.15; }
.gs-lede[b-8vnkio4iee] { margin: 0 auto 1.6rem; max-width: 30ch; color: #374151; font-size: 1rem; line-height: 1.5; }

.gs-qr[b-8vnkio4iee] { width: 8.5cm; margin: 0 auto 1.2rem; }
.gs-qr[b-8vnkio4iee]  svg { width: 100%; height: auto; display: block; }

.gs-url[b-8vnkio4iee] { margin: 0; font-size: 1.05rem; color: #374151; word-break: break-all; }

.gs-code[b-8vnkio4iee] {
    margin: 0.4rem 0 0; font-family: Consolas, monospace; font-size: 2.4rem;
    font-weight: 700; letter-spacing: 0.12em; color: #111827;
}

.gs-foot[b-8vnkio4iee] { margin: 1.8rem 0 0; font-size: 0.8rem; color: #9ca3af; }

.gs-warn[b-8vnkio4iee] {
    max-width: 21cm; margin: 1.5rem auto 0; padding: 0.75rem 1rem; border-radius: 8px;
    background: #fffbeb; border: 1px solid #f59e0b; color: #78350f; font-size: 0.95rem; line-height: 1.45;
}
.gs-warn-link[b-8vnkio4iee] { color: #78350f; text-decoration: underline; }

.gs-print[b-8vnkio4iee] { text-align: center; font-size: 0.8rem; color: #6b7280; margin-bottom: 2rem; }
.gs-missing[b-8vnkio4iee] { text-align: center; padding: 3rem 1rem; color: #6b7280; }

@media print {
    /* One sheet, no furniture — the browser's own header/footer is the user's business. */
    .gs-print[b-8vnkio4iee], .gs-warn[b-8vnkio4iee] { display: none; }
    .gs-sheet[b-8vnkio4iee] { margin: 0; border: 0; border-radius: 0; padding: 1.5cm 1cm; }
}
/* /Components/Pages/Inkop.razor.rz.scp.css */
/* Inköp (b-35): saved purchase lists. Same list-beside-editor shape as Menyer, because it is the same
   gesture — pick a saved thing on the left, work on it on the right. The shared kc-prod__* summary and
   numeric columns come from kitcheck-design.css. */

.kc-inkop__layout[b-sn8v8h3lg9] {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .kc-inkop__layout[b-sn8v8h3lg9] {
        grid-template-columns: 1fr;
    }
}

.kc-inkop__list[b-sn8v8h3lg9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kc-inkop__items[b-sn8v8h3lg9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.kc-inkop__item[b-sn8v8h3lg9] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    text-align: left;
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    background: var(--kc-surface);
    cursor: pointer;
}

.kc-inkop__item--on[b-sn8v8h3lg9] {
    border-color: var(--kc-blue);
    box-shadow: 0 0 0 2px rgba(122, 192, 218, 0.35);
}

.kc-inkop__item-meta[b-sn8v8h3lg9] {
    font-size: 0.75rem;
    color: var(--kc-muted);
}

.kc-inkop__head[b-sn8v8h3lg9] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.kc-inkop__name[b-sn8v8h3lg9] {
    flex: 1 1 auto;
    font-size: 1.05rem;
    font-weight: 700;
}

.kc-inkop__savestate[b-sn8v8h3lg9] {
    font-size: 0.85rem;
    color: var(--kc-muted);
    white-space: nowrap;
}

.kc-inkop__savestate[data-savestate="saved"][b-sn8v8h3lg9] {
    color: var(--kc-ok-text);
    font-weight: 600;
}

.kc-inkop__savestate[data-savestate="error"][b-sn8v8h3lg9] {
    color: var(--kc-fail-text);
    font-weight: 600;
}

.kc-inkop__addmenu[b-sn8v8h3lg9] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.kc-inkop__addmenu label[b-sn8v8h3lg9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.kc-inkop__addmenu .kc-select[b-sn8v8h3lg9] {
    width: auto;
    min-width: 16rem;
}

/* Portions: blank reads as a quiet dash, because "not decided" and "cook nothing" are different. */
.kc-inkop__portions[b-sn8v8h3lg9] {
    width: 4.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kc-inkop__portions:placeholder-shown[b-sn8v8h3lg9] {
    color: var(--kc-muted);
    border-color: transparent;
    background: transparent;
}

.kc-inkop__portions:placeholder-shown:hover[b-sn8v8h3lg9],
.kc-inkop__portions:focus[b-sn8v8h3lg9] {
    border-color: var(--kc-border-soft);
    background: var(--kc-surface);
}

.kc-inkop__caveat[b-sn8v8h3lg9] {
    max-width: 78ch;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--kc-status-missed-edge, var(--kc-border-soft));
    background: var(--kc-surface-alt);
    font-size: 0.82rem;
    line-height: 1.5;
}

/* A row nobody could work out a pack count for — the buyer's job now, so marked rather than reddened. */
.kc-inkop__row--manual td[b-sn8v8h3lg9] {
    background: var(--kc-surface-alt);
}
/* /Components/Pages/Inkopslista.razor.rz.scp.css */
/* Inköpslista (b-35). Shares the production sheet's vocabulary — same bar, same summary, same numeric
   columns — because they are two readings of one plan and should not look like two different products. */

.kc-inkop__caveat[b-0r7zilxqov] {
    max-width: 78ch;
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--kc-status-missed-edge, var(--kc-border-soft));
    background: var(--kc-surface-alt);
    font-size: 0.82rem;
    line-height: 1.5;
}

.kc-inkop__lines[b-0r7zilxqov] {
    width: 100%;
}

/* A row nobody could work out a pack count for. It is not an error — it is the buyer's job now — so it is
   marked rather than reddened. */
.kc-inkop__row--manual td[b-0r7zilxqov] {
    background: var(--kc-surface-alt);
}
/* /Components/Pages/Installningar.razor.rz.scp.css */
/* Settings screens — one row per setting: what it is on the left, the control and where the value
   comes from on the right. Shared shape between the organisation and personal pages. */

.st[b-t2y1eroi9x] {
    display: flex;
    flex-direction: column;
    max-width: 820px;
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0,0,0,.1));
    overflow: hidden;
}

.st-scopebar[b-t2y1eroi9x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0,0,0,.08));
}
.st-scopelabel[b-t2y1eroi9x] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-muted, #666); font-weight: 700; }
.st-scopehint[b-t2y1eroi9x] { font-size: 0.78rem; color: var(--kc-muted, #888); }

.st-toast[b-t2y1eroi9x] {
    margin: 0;
    padding: 0.55rem 1rem;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    color: #1e3a8a;
    font-size: 0.86rem;
}

.st-row[b-t2y1eroi9x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--kc-border-soft, rgba(0,0,0,.06));
}
.st-row:last-child[b-t2y1eroi9x] { border-bottom: 0; }
@media (max-width: 640px) { .st-row[b-t2y1eroi9x] { flex-direction: column; align-items: stretch; gap: 0.5rem; } }

.st-label[b-t2y1eroi9x] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.st-label b[b-t2y1eroi9x] { font-size: 0.92rem; color: var(--kc-navy, #324158); }
.st-label small[b-t2y1eroi9x] { font-size: 0.8rem; color: var(--kc-muted, #666); }

.st-control[b-t2y1eroi9x] { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.st-input[b-t2y1eroi9x] { min-width: 9rem; }
.st-origin[b-t2y1eroi9x] { font-size: 0.72rem; color: var(--kc-muted, #999); white-space: nowrap; }

.st-switch[b-t2y1eroi9x] { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.86rem; }
.st-switch input[b-t2y1eroi9x] { width: 1.1rem; height: 1.1rem; cursor: pointer; }

.st-clear[b-t2y1eroi9x] {
    border: 1px solid var(--kc-border-soft, rgba(0,0,0,.15));
    background: #fff;
    border-radius: 0.35rem;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.3rem 0.45rem;
    color: var(--kc-muted, #666);
}
.st-clear:hover[b-t2y1eroi9x] { color: var(--kc-navy, #324158); }
/* /Components/Pages/Intyg.razor.rz.scp.css */
/* The certificate page is drawn on the blue page frame (.kc-blueframe, kitcheck-design.css). The way back and the print
   button are the frame's pills in the title block; the certificate is the white paper it always was. */

/* A page-level line — "Laddar…", "Intyget finns inte" — is the frame's notice card, and "Tillbaka" is a link inside one. */
.in-back[b-sr5o2c8v0z] { color: #1d4ed8; text-decoration: none; }
a.kc-blueframe__notice.in-back[b-sr5o2c8v0z] {
    display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--kc-touch-min, 44px);
    font-size: 0.875rem;
}

/* The pills are 28px high on a computer, as the frame has them; a finger needs 44 (Visual-Guidelines §10). */
.in-print[b-sr5o2c8v0z] { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.kc-blueframe__pill.in-back[b-sr5o2c8v0z] { color: var(--kc-heading-ink); }
@media (max-width: 760px) {
    .in-head .kc-blueframe__pill[b-sr5o2c8v0z] { min-height: var(--kc-touch-min, 44px); }
}

/* The sheet: centred at the width it always had, lifted off the blue by the frame's card shadow. Its own rules
   live with it, in KcCertificate.razor.css — scoped CSS follows the component that renders the markup, and left
   here they would silently stop applying. */
.in-paper[b-sr5o2c8v0z] { width: 100%; max-width: 900px; margin: 0 auto; }
.in-paper[b-sr5o2c8v0z]  .in-cert { box-shadow: var(--kc-shadow-card); }

/* What the browser's "save as PDF" actually produces. Without this the page chrome, the nav and the
   buttons come out on the sheet, which is why a print view that nobody styled for print is not a
   certificate — it is a screenshot. The title block is the screen's; the blue and the padding round the sheet are taken
   away in kitcheck-print.css, which is linked for paper only. */
@media print {
    .in-head[b-sr5o2c8v0z] { display: none; }
    .in-paper[b-sr5o2c8v0z] { max-width: none; }
    .in-paper[b-sr5o2c8v0z]  .in-cert { box-shadow: none; }
}
/* /Components/Pages/JobsMonitor.razor.rz.scp.css */
/* The jobs grid. Built on the shared .kc-grid (the unit list's look — navy header, tinted rows, one line
   per record) with only the things a JOB list needs on top: monospaced keys and schedules so cron strings
   line up under each other, and the info column.

   Dense on purpose. This is a list of thirteen machines read by somebody trying to answer "what is running
   and what is broken" — four stacked touch-target buttons per row pushed that answer off the screen. */

/* .kc-opssheet and .kc-info now live in kitcheck-design.css — two ops pages share them. */

/* Fixed layout, and every column that can be given a width IS. With auto layout the browser re-measured
   on every live update, so a run whose counts went from 0 to 1 140 nudged half the grid sideways while
   somebody was reading it. Fixed widths also mean the numeric columns line up down the page, which is the
   only reason to have split them out.

   The widths below add up to roughly the 1400px the wide frame gives, so nothing has to be squeezed. */
.kc-jobs[b-f95m78kxvu] { table-layout: fixed; }

/* The Job column is deliberately the ONE without a stated width. Under fixed layout a table whose
   columns sum past 100%% grows past its container — which is how the grid came to be 1414px wide inside a
   1368px sheet while the alerts table above it sat at 1331. Leaving one column to absorb the remainder
   makes the table exactly its container, and keeps it that way when the numbers beside it change. */

/* Keys and lanes are literals an operator types elsewhere — a key into a log search, a lane into config. */
.kc-jobs__key[b-f95m78kxvu],
.kc-jobs__lane[b-f95m78kxvu] {
    font-family: var(--kc-font-mono, ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--kc-muted);
}

.kc-jobs__key[b-f95m78kxvu] { width: 10rem; }
.kc-jobs__lane[b-f95m78kxvu] { width: 6.2rem; }
.kc-jobs__name[b-f95m78kxvu] { overflow: hidden; text-overflow: ellipsis; }

/* The last run's note rides after the name, muted, and is cut rather than wrapped: one line per job. The
   cell has to clip for that — the rule further down that lets every cell overflow is for the info card,
   which lives in its own column, so the name cell can take its clipping back. No separator glyph: at the
   1500px an ops laptop gives this column, "Message dispatch · hel…" was all that showed, while
   "Message dispatch held:…" already reads as what it is — and the whole note is on hover. */
.kc-jobs td.kc-jobs__name[b-f95m78kxvu] { overflow: hidden; white-space: nowrap; }
.kc-jobs__note[b-f95m78kxvu] {
    margin-left: 0.35em;
    color: var(--kc-muted);
    font-family: var(--kc-font-mono, ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.72rem;
}
.kc-jobs__health[b-f95m78kxvu] { width: 4.2rem; text-align: center; }

/* Status is what it is DOING; health is whether it is well. Running gets weight because it is the row you
   came to watch; disabled is greyed because it is the row you came to switch on. */
.kc-jobs__status[b-f95m78kxvu] { width: 5rem; text-align: center; white-space: nowrap; }
.kc-jobs td.kc-jobs__status.is-running[b-f95m78kxvu] { font-weight: 700; color: var(--kc-navy); }
.kc-jobs td.kc-jobs__status.is-disabled[b-f95m78kxvu] { color: var(--kc-ink-muted, #6b7280); }
.kc-jobs__sched[b-f95m78kxvu] { width: 7rem; white-space: nowrap; }
.kc-jobs__run[b-f95m78kxvu] { width: 7.4rem; white-space: nowrap; }
/* The alerts table shares .kc-jobs, so it is the same width and the same grid as the one below it — an
   alert is about a job on that list, and two tables of different widths read as two unrelated screens.
   Its action column gets a stated width for the same reason the jobs one does: under fixed layout a
   content-sized column is ignored, and the button spilled past the frame. */
.kc-jobs__sev[b-f95m78kxvu] { width: 5rem; }
.kc-jobs__when[b-f95m78kxvu] { width: 6.5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kc-jobs .kc-grid__acts[b-f95m78kxvu] { width: 8rem; text-align: right; }

/* The five number columns. One width for all of them so the eye can run straight down a block of digits;
   tabular figures so 1 140 and 22 line up on their last digit rather than on their first. */
.kc-jobs__n[b-f95m78kxvu] {
    width: 3.5rem;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Zero failures should read as calm, not as a number worth stopping on. A non-zero one is the single cell
   this whole page exists to surface, so it gets the weight. */
.kc-jobs td.kc-jobs__n[b-f95m78kxvu] { color: var(--kc-muted); }
.kc-jobs td.kc-jobs__n.is-bad[b-f95m78kxvu] { color: var(--kc-error-text); font-weight: 700; }

/* One control per column, each the full width of its cell. Stacked in a single cell the buttons shifted
   sideways whenever a row gained or lost the Cancel button, so the Edit you were aiming at moved while you
   reached for it. Separate columns hold their position whatever a row is doing. */
.kc-jobs__act[b-f95m78kxvu] { width: 4.5rem; padding-left: 0.2rem; padding-right: 0.2rem; }
.kc-jobs__act .kc-btn[b-f95m78kxvu] { width: 100%; text-align: center; }
.kc-jobs th.kc-jobs__act[b-f95m78kxvu] { text-align: center; }

/* The edit dialog. Its chrome (.kc-opsmodal__*) is global — the product card on /ops/product-mirror
   wears the same. Only the width is a jobs-page decision.

   ::deep because .kc-modal lives in kc-controls.css, which loads later; the doubled class is what wins
   the max-width back at equal specificity. */
[b-f95m78kxvu] .kc-modal.kc-jobmodal {
    max-width: min(620px, 100%);
    max-height: 92vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 640px) {
    [b-f95m78kxvu] .kc-modal.kc-jobmodal { max-height: 100dvh; border-radius: 0; }
}

.kc-jobs__live[b-f95m78kxvu] { margin-left: 0.2rem; }
.kc-jobs__live[data-live="1"][b-f95m78kxvu] { color: #12693A; font-weight: 600; }

/* No scroll wrapper around this table, deliberately. One would clip the info card: CSS forces the other
   axis to auto as soon as one is not visible, so overflow-x:auto quietly takes overflow-y with it and the
   card gets cut off at the row. With every column given a width, fixed layout scales them to the container
   instead of overflowing it, which is what the wrapper would have been for. */

/* The info column is exactly as wide as the mark. */
.kc-jobs__i[b-f95m78kxvu] { width: 1.6rem; padding-left: 0.35rem; padding-right: 0; text-align: center; }


/* Near the bottom of a thirteen-row table the card would open below the fold. The last rows flip it up
   instead — cheaper and steadier than measuring in JS on every hover. */
.kc-jobs tbody tr:nth-last-child(-n + 4) .kc-info__card[b-f95m78kxvu] {
    top: auto;
    bottom: calc(100% + 0.4rem);
}

/* The grid clips nothing: the card hangs outside the table's rounded corners on purpose. */
.kc-jobs[b-f95m78kxvu],
.kc-jobs tbody[b-f95m78kxvu],
.kc-jobs td[b-f95m78kxvu] { overflow: visible; }

/* Actions: four small ghost buttons on one line, not four touch targets stacked. This is a desktop ops
   screen — the mobile rule that every control is thumb-sized costs more here than it buys. */
.kc-jobs .kc-grid__acts .kc-btn[b-f95m78kxvu] { min-height: 1.6rem; padding: 0.15rem 0.45rem; font-size: 0.75rem; }

/* A disabled job is still worth reading — it is usually the row you came to switch ON — so it greys
   without the strike-through the unit grid puts on a removed unit. Struck through, "DABAS full refresh"
   read as deleted rather than as available. */
.kc-jobs .kc-grid__row.is-off .kc-grid__name[b-f95m78kxvu] { text-decoration: none; }
.kc-grid__row.is-off .kc-jobs__key[b-f95m78kxvu],
.kc-grid__row.is-off .kc-jobs__sched[b-f95m78kxvu] { color: var(--kc-ink-muted, #6b7280); }

/* One line per job means one LINE. A wrapped name turned a 13-row table into 30 rows of white space, and
   the whole point of the grid is that thirteen machines fit on one screen. */
.kc-jobs .kc-grid__name[b-f95m78kxvu] { white-space: nowrap; }
.kc-jobs__run[b-f95m78kxvu] { white-space: nowrap; }
.kc-jobs .kc-grid__num[b-f95m78kxvu] { white-space: nowrap; }

.kc-timetravel[b-f95m78kxvu] { margin-bottom: 1rem; }
/* /Components/Pages/Kompetens.razor.rz.scp.css */
.kp[b-33sa81f2p1] { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.kp-loading[b-33sa81f2p1], .kp-denied[b-33sa81f2p1] { max-width: 1180px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.kp-head[b-33sa81f2p1] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.kp-title[b-33sa81f2p1] { margin: 0; font-size: 1.35rem; color: var(--kc-navy, #324158); }
.kp-sub[b-33sa81f2p1] { margin: 0.25rem 0 0; max-width: 66ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.kp-h2[b-33sa81f2p1] { margin: 0 0 0.15rem; font-size: 1.05rem; color: var(--kc-navy, #324158); }
.kp-hint[b-33sa81f2p1] { margin: 0; color: var(--kc-muted, #666); font-size: 0.8rem; }

.kp-queue[b-33sa81f2p1] {
    flex: none; align-self: flex-end; margin-bottom: 0.35rem;
    padding: 0.3rem 0.7rem; border-radius: var(--kc-radius-pill, 999px);
    background: #fef3c7; color: #92400e; font-size: 0.78rem; font-weight: 700; text-decoration: none;
    white-space: nowrap;
}
.kp-queue:hover[b-33sa81f2p1] { background: #fde68a; }

.kp-pick[b-33sa81f2p1] { flex: none; display: flex; flex-direction: column; gap: 0.2rem; min-width: 13rem; }
.kp-pick > span[b-33sa81f2p1] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }

.kp-toast[b-33sa81f2p1], .kp-alert[b-33sa81f2p1] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.kp-toast[b-33sa81f2p1] { background: #eff6ff; color: #1e40af; }
.kp-alert[b-33sa81f2p1] { background: #fef2f2; color: #991b1b; }

.kp-body[b-33sa81f2p1] { display: grid; grid-template-columns: 18rem 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .kp-body[b-33sa81f2p1] { grid-template-columns: 1fr; } }

.kp-people[b-33sa81f2p1] { display: flex; flex-direction: column; gap: 0.2rem; }
.kp-person[b-33sa81f2p1] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
    width: 100%; padding: 0.5rem 0.65rem; border: 1px solid transparent; border-radius: 8px;
    background: #f9fafb; cursor: pointer; text-align: left;
}
.kp-person:hover[b-33sa81f2p1] { background: #f3f4f6; }
.kp-person.is-on[b-33sa81f2p1] { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.kp-person-name[b-33sa81f2p1] { font-size: 0.88rem; font-weight: 600; color: #1f2937; display: flex; align-items: center; gap: 0.4rem; }
.kp-person-count[b-33sa81f2p1] { font-size: 0.72rem; color: #6b7280; display: flex; align-items: center; gap: 0.4rem; }

.kp-unlinked[b-33sa81f2p1] {
    padding: 0.02rem 0.35rem; border-radius: var(--kc-radius-pill, 999px);
    background: #fef3c7; color: #92400e; font-size: 0.6rem; font-weight: 700;
}
.kp-soon[b-33sa81f2p1] {
    padding: 0.02rem 0.35rem; border-radius: var(--kc-radius-pill, 999px);
    background: #ffedd5; color: #9a3412; font-size: 0.6rem; font-weight: 700;
}

.kp-shelf[b-33sa81f2p1] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; min-width: 0; }
.kp-shelf-head[b-33sa81f2p1] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }

.kp-nounit[b-33sa81f2p1] {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.6rem 0.75rem; margin-bottom: 0.8rem; border-radius: 10px;
    background: #fff7ed; color: #9a3412; font-size: 0.83rem;
}
.kp-nounit .kp-select[b-33sa81f2p1] { width: auto; min-width: 12rem; }

.kp-add[b-33sa81f2p1] {
    display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.75rem; background: #f9fafb; border-radius: 10px; margin-bottom: 0.4rem;
}
.kp-fld[b-33sa81f2p1] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.kp-fld--grow[b-33sa81f2p1] { flex: 1 1 14rem; }
.kp-fld > span[b-33sa81f2p1] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.kp-input[b-33sa81f2p1], .kp-select[b-33sa81f2p1] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0; font-family: inherit;
}
.kp-note[b-33sa81f2p1] { font-size: 0.72rem; color: #6b7280; }
.kp-fine[b-33sa81f2p1] { margin: 0 0 0.8rem; font-size: 0.75rem; color: #9ca3af; }

.kp-btn[b-33sa81f2p1] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.kp-btn:disabled[b-33sa81f2p1] { opacity: 0.5; cursor: default; }
.kp-btn--ghost[b-33sa81f2p1] { background: #fff; color: #374151; border: 1px solid #e5e7eb; font-weight: 500; }

.kp-addperson[b-33sa81f2p1] {
    display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem;
    padding: 0.75rem; border: 1px dashed #e5e7eb; border-radius: 10px;
}

.kp-table[b-33sa81f2p1] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.kp-table th[b-33sa81f2p1] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.kp-table td[b-33sa81f2p1] { padding: 0.5rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; white-space: nowrap; }
.kp-table td.kp-what[b-33sa81f2p1] { white-space: normal; }
.kp-table tr.is-superseded[b-33sa81f2p1] { color: #9ca3af; text-decoration: line-through; }
.kp-what[b-33sa81f2p1] { font-weight: 600; }
.kp-dim[b-33sa81f2p1] { color: #6b7280; font-size: 0.8rem; }
.kp-link[b-33sa81f2p1] { color: var(--kc-blue, #2563eb); text-decoration: none; font-size: 0.8rem; }
.kp-link:hover[b-33sa81f2p1] { text-decoration: underline; }

.kp-empty[b-33sa81f2p1] { padding: 2.5rem 1rem; text-align: center; color: var(--kc-muted, #666); }
.kp-empty-ico[b-33sa81f2p1] { font-size: 1.8rem; margin-bottom: 0.4rem; }
.kp-empty p[b-33sa81f2p1] { margin: 0.2rem 0; }
.kp-empty-sub[b-33sa81f2p1] { font-size: 0.8rem; max-width: 46ch; margin-inline: auto; }
.kp-empty-side[b-33sa81f2p1] { padding: 0.75rem; color: var(--kc-muted, #666); font-size: 0.82rem; }

/* Undoing a wrong link (TR-20): asked in the page, naming the account, with a reason that is kept. */
.kp-shelf-acts[b-33sa81f2p1] { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.kp-unlink[b-33sa81f2p1] {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 0.75rem 0.85rem; margin-bottom: 0.8rem; border-radius: 10px;
    border: 1px solid #fecaca; border-left: 4px solid #dc2626; background: #fff7f7;
}
.kp-unlink__title[b-33sa81f2p1] { margin: 0; font-weight: 700; color: #7f1d1d; font-size: 0.9rem; }
.kp-unlink__body[b-33sa81f2p1] { margin: 0; font-size: 0.83rem; color: #374151; line-height: 1.5; max-width: 72ch; }
.kp-unlink__acts[b-33sa81f2p1] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* In a column, "grow" would stretch the field downwards; here it only widens. */
.kp-unlink .kp-fld[b-33sa81f2p1] { flex: none; max-width: 40rem; }
.kp-btn--danger[b-33sa81f2p1] { background: #b91c1c; }
@media (max-width: 600px) {
    .kp-shelf-head[b-33sa81f2p1] { flex-direction: column; }
    .kp-shelf-acts[b-33sa81f2p1] { justify-content: flex-start; }
}

/* TR-49: the record's certificate, in a column of its own. A tap target, not a word in a line. */
.kp-cert[b-33sa81f2p1] {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.35rem;
    font-weight: 600; white-space: nowrap; color: #1d4ed8;
}
/* /Components/Pages/KompetensIntyg.razor.rz.scp.css */
.ki-page[b-7anpms1zto] { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.ki-loading[b-7anpms1zto] { color: #4b5563; font-size: 0.9rem; }

.ki-alert[b-7anpms1zto] {
    padding: 0.8rem 1rem; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

.ki-actions[b-7anpms1zto] {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 0.6rem;
}

/* Tap targets a thumb can hit: the back link and the print button are 44 px tall on any screen. */
.ki-back[b-7anpms1zto] {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    font-size: 0.85rem; color: #1d4ed8; text-decoration: none;
}
.ki-back:hover[b-7anpms1zto] { text-decoration: underline; }

.ki-print[b-7anpms1zto] {
    min-height: 2.75rem; border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}

.ki-note[b-7anpms1zto] { margin: 0 0 1.2rem; font-size: 0.8rem; color: #4b5563; max-width: 70ch; line-height: 1.5; }

/* The sheet's own rules live with it, in KcCertificate.razor.css. On paper only the sheet goes. */
@media print {
    .ki-actions[b-7anpms1zto], .ki-note[b-7anpms1zto] { display: none; }
    .ki-page[b-7anpms1zto] { padding: 0; max-width: none; }
}
/* /Components/Pages/KompetensKoppla.razor.rz.scp.css */
.kk[b-66929dm7yl] { max-width: 900px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.kk-loading[b-66929dm7yl], .kk-denied[b-66929dm7yl] { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.kk-head[b-66929dm7yl] { margin-bottom: 1rem; }
.kk-title[b-66929dm7yl] { margin: 0; font-size: 1.35rem; color: var(--kc-navy, #324158); }
.kk-sub[b-66929dm7yl] { margin: 0.25rem 0 0.4rem; max-width: 70ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.kk-back[b-66929dm7yl] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; }
.kk-back:hover[b-66929dm7yl] { text-decoration: underline; }
.kk-h2[b-66929dm7yl] { margin: 0 0 0.4rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

.kk-toast[b-66929dm7yl], .kk-alert[b-66929dm7yl] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.kk-toast[b-66929dm7yl] { background: #eff6ff; color: #1e40af; }
.kk-alert[b-66929dm7yl] { background: #fef2f2; color: #991b1b; }

.kk-row[b-66929dm7yl] { border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; margin-bottom: 0.5rem; }
.kk-row.is-open[b-66929dm7yl] { border-color: #cbd5e1; box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.kk-row-head[b-66929dm7yl] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.9rem; }
.kk-who[b-66929dm7yl] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.kk-name[b-66929dm7yl] { font-size: 0.95rem; font-weight: 600; color: #1f2937; }
.kk-meta[b-66929dm7yl] { font-size: 0.75rem; color: #6b7280; }

.kk-choices[b-66929dm7yl] { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; padding: 0 0.9rem 0.9rem; }
.kk-choice[b-66929dm7yl] { background: #f9fafb; border-radius: 10px; padding: 0.7rem; }
.kk-none[b-66929dm7yl] { margin: 0 0 0.5rem; font-size: 0.8rem; color: #6b7280; line-height: 1.45; }
.kk-fine[b-66929dm7yl] { margin: 0.5rem 0 0; font-size: 0.72rem; color: #9ca3af; line-height: 1.45; }

.kk-cand[b-66929dm7yl] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; }
.kk-cand + .kk-cand[b-66929dm7yl] { border-top: 1px solid #f3f4f6; }
.kk-cand > div[b-66929dm7yl] { min-width: 0; }
.kk-cand-name[b-66929dm7yl] { display: block; font-size: 0.85rem; font-weight: 600; color: #1f2937; }
.kk-cand-why[b-66929dm7yl] { display: block; font-size: 0.72rem; color: #6b7280; overflow-wrap: anywhere; }

/* Two accounts for one person: set apart from the queue, and above it — a decision only a person can make. */
.kk-twins[b-66929dm7yl] { margin-bottom: 1.25rem; }
.kk-twins .kk-row[b-66929dm7yl] { border-color: #fcd34d; }
.kk-twin-accounts[b-66929dm7yl] { padding: 0 0.9rem 0.6rem; }

.kk-btn[b-66929dm7yl] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kk-btn:disabled[b-66929dm7yl] { opacity: 0.5; cursor: default; }
.kk-btn--ghost[b-66929dm7yl] { background: #fff; color: #374151; border: 1px solid #e5e7eb; font-weight: 500; }

.kk-empty[b-66929dm7yl] { padding: 2.5rem 1rem; text-align: center; color: var(--kc-muted, #666); }
.kk-empty-ico[b-66929dm7yl] { font-size: 1.6rem; margin-bottom: 0.3rem; color: #16a34a; }
.kk-empty p[b-66929dm7yl] { margin: 0.2rem 0; }
.kk-empty-sub[b-66929dm7yl] { font-size: 0.8rem; max-width: 46ch; margin-inline: auto; }
/* /Components/Pages/Kompetenskrav.razor.rz.scp.css */
.kk2[b-w2gstxhbxf] { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.kk2-loading[b-w2gstxhbxf], .kk2-denied[b-w2gstxhbxf] { max-width: 1180px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.kk2-head[b-w2gstxhbxf] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.kk2-title[b-w2gstxhbxf] { margin: 0; font-size: 1.35rem; color: var(--kc-navy, #324158); }
.kk2-sub[b-w2gstxhbxf] { margin: 0.25rem 0 0; max-width: 66ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.kk2-h2[b-w2gstxhbxf] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

.kk2-pick[b-w2gstxhbxf] { flex: none; display: flex; flex-direction: column; gap: 0.2rem; min-width: 14rem; }
.kk2-pick > span[b-w2gstxhbxf] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }

.kk2-toast[b-w2gstxhbxf], .kk2-alert[b-w2gstxhbxf] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.kk2-toast[b-w2gstxhbxf] { background: #ecfdf5; color: #065f46; }
.kk2-alert[b-w2gstxhbxf] { background: #fef2f2; color: #991b1b; }

.kk2-card[b-w2gstxhbxf] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; margin-bottom: 0.9rem; }

.kk2-form[b-w2gstxhbxf] { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.kk2-fld[b-w2gstxhbxf] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.kk2-fld--grow[b-w2gstxhbxf] { flex: 1 1 15rem; }
.kk2-fld > span[b-w2gstxhbxf] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.kk2-input[b-w2gstxhbxf], .kk2-select[b-w2gstxhbxf] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0; font-family: inherit;
}
.kk2-fine[b-w2gstxhbxf] { margin: 0.6rem 0 0; font-size: 0.75rem; color: #9ca3af; max-width: 70ch; line-height: 1.5; }
.kk2-none[b-w2gstxhbxf] { margin: 0; font-size: 0.85rem; color: #6b7280; }

.kk2-btn[b-w2gstxhbxf] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kk2-btn:disabled[b-w2gstxhbxf] { opacity: 0.5; cursor: default; }
.kk2-btn--ghost[b-w2gstxhbxf] { background: #fff; color: #374151; border: 1px solid #e5e7eb; font-weight: 500; }

.kk2-reqs[b-w2gstxhbxf] { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.2rem; }
.kk2-req[b-w2gstxhbxf] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.5rem 0.6rem; border-radius: 8px; background: #f9fafb;
}
.kk2-req-title[b-w2gstxhbxf] { display: block; font-size: 0.88rem; font-weight: 600; color: #1f2937; }
.kk2-req-why[b-w2gstxhbxf] { display: block; font-size: 0.75rem; color: #6b7280; }

.kk2-table[b-w2gstxhbxf] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.kk2-table th[b-w2gstxhbxf] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.kk2-col[b-w2gstxhbxf] { text-align: center; }
.kk2-table td[b-w2gstxhbxf] { padding: 0.5rem; border-bottom: 1px solid #f3f4f6; }
.kk2-cell[b-w2gstxhbxf] { text-align: center; }
.kk2-person[b-w2gstxhbxf] { font-weight: 600; color: #1f2937; white-space: nowrap; }
.kk2-dim[b-w2gstxhbxf] { color: #d1d5db; }

.kk2-gap[b-w2gstxhbxf] {
    margin-left: 0.45rem; padding: 0.02rem 0.4rem; border-radius: var(--kc-radius-pill, 999px);
    background: #fef2f2; color: #991b1b; font-size: 0.6rem; font-weight: 700;
}

.kk2-pill[b-w2gstxhbxf] {
    display: inline-block; min-width: 1.5rem; padding: 0.1rem 0.4rem;
    border-radius: var(--kc-radius-pill, 999px); font-size: 0.75rem; font-weight: 700;
}
.kk2-pill.is-met[b-w2gstxhbxf] { background: #ecfdf5; color: #065f46; }
.kk2-pill.is-soon[b-w2gstxhbxf] { background: #ffedd5; color: #9a3412; }
.kk2-pill.is-expired[b-w2gstxhbxf] { background: #fef2f2; color: #991b1b; }
.kk2-pill.is-missing[b-w2gstxhbxf] { background: #f3f4f6; color: #6b7280; }
/* /Components/Pages/KursForhandsgranska.razor.rz.scp.css */
.kp-loading[b-44aw4i3jjh] { padding: 1.5rem 1rem; color: #6b7280; font-size: 0.9rem; }

.kp-denied[b-44aw4i3jjh] { max-width: 720px; margin: 2rem auto; padding: 0 1rem; color: #374151; }
.kp-denied h1[b-44aw4i3jjh] { font-size: 1.3rem; }

.kp-link[b-44aw4i3jjh] { font-size: 0.85rem; color: #2563eb; text-decoration: none; }
.kp-link:hover[b-44aw4i3jjh] { text-decoration: underline; }

/* The banner. Sticky, so it is on screen in every screenshot of the preview and at every scroll position:
   the one thing an author must never be unsure of is whether what they are clicking is recorded. Amber with
   a diagonal hatch — a colour the course itself never uses, so nothing in the preview can be read as part
   of the course, and the banner cannot be read as a message from it. */
.kp-banner[b-44aw4i3jjh] {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.2rem;
    padding: 0.6rem clamp(0.8rem, 2.5vw, 1.4rem);
    border-bottom: 2px solid #d97706;
    background-color: #fef3c7;
    background-image: repeating-linear-gradient(
        -45deg, rgba(217, 119, 6, 0.10) 0 10px, transparent 10px 20px);
    color: #78350f;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.kp-banner__main[b-44aw4i3jjh] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.kp-banner__tag[b-44aw4i3jjh] { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; }
.kp-banner__what[b-44aw4i3jjh] { font-size: 0.8rem; }

.kp-banner__actions[b-44aw4i3jjh] { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.kp-btn[b-44aw4i3jjh] {
    min-height: 2.2rem; border: 0; border-radius: 8px; background: #78350f; color: #fff;
    padding: 0.4rem 0.9rem; font-size: 0.83rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.kp-btn--ghost[b-44aw4i3jjh] { background: #fff; color: #78350f; border: 1px solid #d97706; font-weight: 600; }
.kp-btn:disabled[b-44aw4i3jjh] { opacity: 0.6; cursor: default; }

/* A course with no parts: the participant's course card, with a line above it saying what the author is
   looking at. Amber like the banner — the preview speaking, not the course. */
.kp-note[b-44aw4i3jjh] {
    margin: 0; padding: 0.6rem 0.9rem; border-radius: 8px;
    background: #fef3c7; color: #78350f; font-size: 0.85rem; line-height: 1.45; box-shadow: var(--kc-shadow-card);
}
.kp-note small[b-44aw4i3jjh] { color: #92400e; }

/* On the blue page frame (a flex column that spaces its blocks), the way back is the frame's notice card, as small and as
   far left as its words. */
.kp-frame > .kp-link[b-44aw4i3jjh] { align-self: flex-start; }

.kp-cert[b-44aw4i3jjh] { width: 100%; margin: 0 auto; max-width: 900px; }

/* The banner sits on the frame's blue, ahead of the frame itself: rounded like the cards, and a frame's gap above them. */
.kp-banner[b-44aw4i3jjh] { margin-bottom: 14px; border-radius: 10px; }
/* /Components/Pages/KursRedigera.razor.rz.scp.css */
.kre-loading[b-nk0d1j7q9m] { color: var(--kc-muted, #666); padding: 1rem; }
.kre-denied[b-nk0d1j7q9m] { max-width: 640px; margin: 2rem auto; padding: 1rem; }

.kre[b-nk0d1j7q9m] { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.kre-head[b-nk0d1j7q9m] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
    margin-bottom: 1rem;
}
.kre-title[b-nk0d1j7q9m] { margin: 0; font-size: 1.4rem; color: #111827; }
.kre-sub[b-nk0d1j7q9m] { margin: 0.25rem 0 0; font-size: 0.85rem; color: #6b7280; }
.kre-actions[b-nk0d1j7q9m] { display: flex; gap: 0.5rem; flex: none; }

/* A phone (2026-10-13): the head's buttons go under the title and wrap, instead of pushing the page sideways. */
@media (max-width: 700px) {
    .kre-head[b-nk0d1j7q9m] { flex-wrap: wrap; }
    .kre-actions[b-nk0d1j7q9m] { flex: 1 1 100%; flex-wrap: wrap; }
}

.kre-state[b-nk0d1j7q9m] {
    display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.kre-state--draft[b-nk0d1j7q9m] { background: #fef3c7; color: #92400e; }
.kre-state--published[b-nk0d1j7q9m] { background: #dcfce7; color: #166534; }
.kre-state--retired[b-nk0d1j7q9m] { background: #f3f4f6; color: #6b7280; }

.kre-toast[b-nk0d1j7q9m] {
    margin-bottom: 0.8rem; padding: 0.55rem 0.8rem; border-radius: 8px;
    background: #dcfce7; color: #166534; font-size: 0.86rem;
}
.kre-alert[b-nk0d1j7q9m] {
    margin-bottom: 0.8rem; padding: 0.55rem 0.8rem; border-radius: 8px;
    background: #fef2f2; color: #991b1b; font-size: 0.86rem;
}
/* Beside the control that was refused (TR-02, TR-10): set off by the same red rule as a confirmation. */
.kre-alert--inline[b-nk0d1j7q9m] {
    margin: 0.5rem 0; border: 1px solid #fecaca; border-left: 4px solid #dc2626; line-height: 1.45;
}

.kre-toggle[b-nk0d1j7q9m] {
    display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1rem;
    padding: 0.7rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
    font-size: 0.86rem; color: #374151; cursor: pointer;
}
.kre-toggle em[b-nk0d1j7q9m] { display: block; font-style: normal; font-size: 0.78rem; color: #6b7280; }

.kre-section[b-nk0d1j7q9m] {
    margin-bottom: 0.9rem; padding: 0.9rem 1rem;
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
}
.kre-section__head[b-nk0d1j7q9m] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 0.5rem;
}
.kre-section__head h2[b-nk0d1j7q9m] { margin: 0; font-size: 1rem; color: #1f2937; }

.kre-tools[b-nk0d1j7q9m] { display: flex; gap: 0.2rem; flex: none; }
.kre-icon[b-nk0d1j7q9m] {
    border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: #6b7280;
    width: 1.7rem; height: 1.7rem; font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.kre-icon:hover[b-nk0d1j7q9m] { background: #f9fafb; color: #374151; }
.kre-icon--danger:hover[b-nk0d1j7q9m] { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.kre-icon:disabled[b-nk0d1j7q9m] { opacity: 0.4; cursor: default; }

.kre-block[b-nk0d1j7q9m] {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.6rem 0; border-top: 1px solid #f3f4f6;
}
/* min-width:0 lets a flex child shrink below its content; without it the video's intrinsic width wins
   and pushes the whole row off the page. overflow-x is the belt to that braces. */
.kre-block__body[b-nk0d1j7q9m] { flex: 1; min-width: 0; overflow-x: auto; }

/* A phone (2026-10-13): the kind above, the content the width of the part, the tools under it — side by side, a
   block's words were squeezed into a column a word wide. */
@media (max-width: 700px) {
    .kre-block[b-nk0d1j7q9m] { flex-wrap: wrap; }
    .kre-kind[b-nk0d1j7q9m] { width: 100%; }
    .kre-block__body[b-nk0d1j7q9m] { flex: 1 1 100%; }
}

/* A lecture is 1920px wide and a card is not. Nothing sized these at all, so the player rendered at its
   own resolution and half of it sat outside the panel. */
.kre-video[b-nk0d1j7q9m], .kre-image[b-nk0d1j7q9m] {
    display: block; width: 100%; max-width: 100%; height: auto;
    border-radius: 0.4rem;
}
.kre-video[b-nk0d1j7q9m] { max-height: 55vh; background: #000; }
.kre-kind[b-nk0d1j7q9m] {
    flex: none; width: 3.4rem; padding-top: 0.1rem;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af;
}
.kre-flag[b-nk0d1j7q9m] {
    display: inline-block; margin-top: 0.3rem; margin-right: 0.3rem;
    padding: 0.1rem 0.4rem; border-radius: 999px;
    background: #eef2ff; color: #4338ca; font-size: 0.7rem;
}

.kre-prose[b-nk0d1j7q9m] { font-size: 0.88rem; line-height: 1.5; color: #374151; }
.kre-prose :first-child[b-nk0d1j7q9m] { margin-top: 0; }
.kre-prose :last-child[b-nk0d1j7q9m] { margin-bottom: 0; }

.kre-add[b-nk0d1j7q9m] { margin-top: 0.6rem; }
.kre-form[b-nk0d1j7q9m] { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.5rem; }
.kre-row[b-nk0d1j7q9m] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kre-row--split[b-nk0d1j7q9m] { padding-top: 0.5rem; border-top: 1px dashed #e5e7eb; }
.kre-row--option[b-nk0d1j7q9m] { gap: 0.7rem; }

/* width AND box-sizing, both of which were missing. flex:1 does nothing outside a flex row, so a field
   placed on its own fell back to a textarea's default ~20 columns — the sliver the intro was typed into. */
.kre-input[b-nk0d1j7q9m] {
    flex: 1; min-width: 10rem; width: 100%; box-sizing: border-box; padding: 0.4rem 0.6rem;
    border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.86rem; font-family: inherit;
}
.kre-input--area[b-nk0d1j7q9m] { resize: vertical; min-height: 8rem; }

/* The rich editor fills its panel and never pushes it wider. */
[b-nk0d1j7q9m] .kc-crsedit { width: 100%; min-width: 0; }
[b-nk0d1j7q9m] .kc-crsedit__rte { width: 100%; max-width: 100%; box-sizing: border-box; background: #fff; }
[b-nk0d1j7q9m] .kc-crsedit .rz-html-editor-content { background: #fff; }
.kre-input--num[b-nk0d1j7q9m] { flex: none; width: 4.5rem; min-width: 0; }

.kre-check[b-nk0d1j7q9m] {
    display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.82rem; color: #4b5563;
    cursor: pointer;
}
.kre-check em[b-nk0d1j7q9m] { display: block; font-style: normal; font-size: 0.76rem; color: #9ca3af; }
/* A setting that has no effect where it is (TR-23): said beside it, in the colour review refusals use. */
.kre-check em.kre-check__warn[b-nk0d1j7q9m] { color: #b45309; }
.kre-flag--warn[b-nk0d1j7q9m] { background: #fffbeb; color: #b45309; }

.kre-file[b-nk0d1j7q9m] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: #6b7280; }

/* The handout: one file beside the course, not part of any lesson. Set apart from the details above it
   because saving it is an upload rather than a press of "Save course details". */
/* Feedback for one answer. Indented under its option so four of them stay readable as four. */
[b-nk0d1j7q9m] .qn-input--fb {
    margin: 0 0 0.5rem 2.6rem; width: calc(100% - 2.6rem);
    font-size: 0.78rem; font-style: italic; color: #4b5563;
}

/* The page-level picker. Off-screen rather than display:none — a hidden input cannot be clicked
   programmatically in every browser, and this one is opened from a button. */
.kre-hidden[b-nk0d1j7q9m] {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.kre-upload[b-nk0d1j7q9m] {
    display: flex; align-items: center; gap: 0.7rem;
    margin: 0 0 0.9rem; padding: 0.6rem 0.85rem; border-radius: 10px; background: #eff6ff;
}
.kre-upload__bar[b-nk0d1j7q9m] {
    flex: 1; height: 6px; border-radius: 3px; background: #dbeafe; overflow: hidden;
}
.kre-upload__bar span[b-nk0d1j7q9m] {
    display: block; height: 100%; background: #2563eb; transition: width 0.15s linear;
}
.kre-upload__pct[b-nk0d1j7q9m] {
    font-size: 0.78rem; font-variant-numeric: tabular-nums; color: #1e3a8a; min-width: 2.8rem;
    text-align: right;
}
/* A new block's progress sits in the part's own form, where the author picked the file — a part far down
   the page would otherwise report its upload at the top, out of sight. */
.kre-upload--inline[b-nk0d1j7q9m] { margin: 0; flex-wrap: wrap; }

/* What is travelling and what happens when it lands — said, so a long upload is not a mystery. */
.kre-upload__what[b-nk0d1j7q9m] { flex-basis: 100%; font-size: 0.76rem; color: #1e3a8a; }
.kre-upload:not(.kre-upload--inline)[b-nk0d1j7q9m] { flex-wrap: wrap; }

/* LE-04: a film's tick held back until a share of it has played. One line: words, a number, words. */
.kre-watch[b-nk0d1j7q9m] {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem;
    margin-left: 1.45rem; font-size: 0.82rem; color: #4b5563;
}
.kre-input--pct[b-nk0d1j7q9m] { flex: none; width: 4.5rem; min-width: 0; }
.kre-input--pct:disabled[b-nk0d1j7q9m] { background: #f3f4f6; color: #9ca3af; }
.kre-watch + .kre-hint[b-nk0d1j7q9m] { margin: -0.25rem 0 0 1.45rem; }

/* A fact about the block rather than a rule on it: its length. */
.kre-flag--quiet[b-nk0d1j7q9m] { background: #f3f4f6; color: #4b5563; }

.kre-material[b-nk0d1j7q9m] {
    margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed #e5e7eb;
}
.kre-material__label[b-nk0d1j7q9m] {
    display: block; margin-bottom: 0.3rem;
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: #6b7280;
}
.kre-material .kre-hint[b-nk0d1j7q9m] { margin-bottom: 0.55rem; }

.kre-btn[b-nk0d1j7q9m] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; cursor: pointer;
    white-space: nowrap; text-decoration: none; display: inline-block;
}
.kre-btn--ghost[b-nk0d1j7q9m] { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.kre-btn:disabled[b-nk0d1j7q9m] { opacity: 0.5; cursor: default; }

.kre-newsection[b-nk0d1j7q9m] {
    display: flex; gap: 0.5rem; margin-top: 0.8rem; padding: 0.8rem;
    border: 1px dashed #d1d5db; border-radius: 10px;
}

.kre-link[b-nk0d1j7q9m] { font-size: 0.85rem; color: #2563eb; text-decoration: none; }
.kre-link:hover[b-nk0d1j7q9m] { text-decoration: underline; }

/* ---- question bank ---- */

.kre-bank[b-nk0d1j7q9m] { margin-top: 2rem; }
.kre-h2[b-nk0d1j7q9m] {
    margin: 0 0 0.3rem; font-size: 0.8rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280;
}
.kre-hint[b-nk0d1j7q9m] { margin: 0 0 0.8rem; font-size: 0.82rem; color: #6b7280; max-width: 60ch; }
.kre-hint--warn[b-nk0d1j7q9m] {
    padding: 0.5rem 0.7rem; border-radius: 8px; background: #fff7ed; color: #9a3412;
}

.kre-pool[b-nk0d1j7q9m] {
    margin-bottom: 0.6rem; padding: 0.7rem 0.9rem;
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
}
.kre-pool__head[b-nk0d1j7q9m] { display: flex; align-items: center; gap: 0.7rem; }
.kre-pool__head h3[b-nk0d1j7q9m] { margin: 0; font-size: 0.92rem; color: #1f2937; flex: 1; }
.kre-count[b-nk0d1j7q9m] { font-size: 0.78rem; color: #6b7280; }

.kre-question[b-nk0d1j7q9m] {
    display: flex; align-items: flex-start; gap: 0.7rem;
    padding: 0.55rem 0; border-top: 1px solid #f3f4f6;
}
.kre-question__body[b-nk0d1j7q9m] { flex: 1; min-width: 0; }
.kre-options[b-nk0d1j7q9m] { margin: 0.2rem 0 0; padding-left: 1.1rem; font-size: 0.82rem; color: #6b7280; }
.kre-options li.is-correct[b-nk0d1j7q9m] { color: #166534; font-weight: 600; }
.kre-frac[b-nk0d1j7q9m] {
    margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 0.25rem;
    background: #eef2ff; color: #4338ca; font-size: 0.7rem; font-weight: 600;
}
.kre-frac--neg[b-nk0d1j7q9m] { background: #fef2f2; color: #991b1b; }
.kre-qkind[b-nk0d1j7q9m] {
    display: inline-block; margin-top: 0.2rem; padding: 0.05rem 0.4rem;
    border-radius: var(--kc-radius-pill, 999px);
    background: #f3f4f6; color: #6b7280; font-size: 0.68rem; font-weight: 600;
}
.kre-qform[b-nk0d1j7q9m] {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.7rem; border: 1px dashed #d1d5db; border-radius: 0.5rem; background: #fafafa;
}
.kre-h4[b-nk0d1j7q9m] { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

/* ---- panels, matching the internal pages ---- */

.kre-card[b-nk0d1j7q9m] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    overflow: hidden; margin-bottom: 0.9rem;
}
.kre-sec[b-nk0d1j7q9m] {
    padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.kre-sec h2[b-nk0d1j7q9m] {
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* A part's title and its tools side by side — beside the heading, not inside it (TR-25). */
.kre-sec__head[b-nk0d1j7q9m] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kre-sec__head h2[b-nk0d1j7q9m] { flex: 1; min-width: 0; }
.kre-body[b-nk0d1j7q9m] { padding: 1rem 1.1rem; }

/* The second click (TR-03). Beside the control it confirms, saying what goes; red only on the button that
   actually deletes, so "Cancel" is the calm choice. */
.kre-confirm[b-nk0d1j7q9m] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap;
    margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626;
    font-size: 0.84rem; color: #7f1d1d;
}
.kre-confirm__text[b-nk0d1j7q9m] { flex: 1 1 22rem; min-width: 0; line-height: 1.45; }
.kre-confirm__actions[b-nk0d1j7q9m] { display: flex; gap: 0.5rem; flex: none; }
.kre-btn--danger[b-nk0d1j7q9m] { background: #b91c1c; color: #fff; }
.kre-inline[b-nk0d1j7q9m] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kre-inline--split[b-nk0d1j7q9m] { padding-top: 0.5rem; border-top: 1px dashed #e5e7eb; }
.kre-hint--warn[b-nk0d1j7q9m] {
    padding: 0.5rem 0.7rem; border-radius: 0.45rem; background: #fff7ed; color: #9a3412;
}
/* The frozen-edition notice. Loud on purpose: a page full of missing buttons is indistinguishable from a
   broken one unless something says otherwise, and the way out belongs in the same box as the reason. */
/* Says which edition learners are on while this one is written. A statement, not a warning — everything
   on the page is editable, and this only explains why publishing is a separate act. */
.kre-state--inreview[b-nk0d1j7q9m] { background: #ede9fe; color: #5b21b6; }

/* Held for approval. Amber rather than red: nothing is wrong, it is simply somebody else's turn. */
.kre-review[b-nk0d1j7q9m] {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: 0.75rem 1.1rem; border-radius: var(--kc-radius-card, 0.5rem);
    background: #fff7ed; border: 1px solid #fed7aa; border-left: 4px solid #f59e0b;
}
.kre-review__main[b-nk0d1j7q9m] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.kre-review strong[b-nk0d1j7q9m] { font-size: 0.92rem; color: #92400e; }
.kre-review span[b-nk0d1j7q9m] { font-size: 0.82rem; color: #9a3412; max-width: 78ch; line-height: 1.45; }
/* TR-40: the reviewer's optional note, beside the reason the content is held still; "Return to draft" takes it. */
.kre-review__note[b-nk0d1j7q9m] { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 18rem; max-width: 30rem; min-width: 0; }
.kre-review__note label[b-nk0d1j7q9m] { font-size: 0.78rem; font-weight: 600; color: #92400e; }
.kre-review__note em[b-nk0d1j7q9m] { font-style: normal; font-weight: 400; color: #9a3412; }
.kre-review__note small[b-nk0d1j7q9m] { font-size: 0.74rem; color: #9a3412; }
.kre-review__text[b-nk0d1j7q9m] { flex: none; min-width: 0; min-height: 3.2rem; resize: vertical; background: #fff; }

/* TR-40: back from review — who returned the draft, when, and their note, until it is sent again. */
.kre-returned[b-nk0d1j7q9m] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
    margin-bottom: 0.8rem; padding: 0.65rem 1.1rem; border-radius: var(--kc-radius-card, 0.5rem);
    background: #f5f3ff; border: 1px solid #ddd6fe; border-left: 4px solid #7c3aed;
    font-size: 0.83rem; color: #4c1d95; line-height: 1.45;
}
.kre-returned__note[b-nk0d1j7q9m] {
    display: block; max-width: 78ch; padding: 0.4rem 0.7rem; border-radius: 6px;
    background: #fff; border: 1px solid #ddd6fe; color: #1f2937; white-space: pre-line; overflow-wrap: anywhere;
}

.kre-serving[b-nk0d1j7q9m] {
    padding: 0.6rem 0.9rem; border-radius: var(--kc-radius-card, 0.5rem);
    background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #2563eb;
    font-size: 0.83rem; color: #1e40af;
}

.kre-card--warn[b-nk0d1j7q9m] { border-color: #fed7aa; }
.kre-card--warn .kre-sec[b-nk0d1j7q9m] { background: #fff7ed; }
.kre-card--warn .kre-sec h2[b-nk0d1j7q9m] { color: #9a3412; }
.kre-orphan[b-nk0d1j7q9m] { padding: 0.4rem 0; border-bottom: 1px solid #f3f4f6; }
.kre-orphan:last-child[b-nk0d1j7q9m] { border-bottom: 0; }
.kre-name[b-nk0d1j7q9m] { font-weight: 600; color: var(--kc-navy, #1f2937); flex: 1; }
.kre-muted[b-nk0d1j7q9m] { color: #9ca3af; font-size: 0.8rem; }
.kre-grid[b-nk0d1j7q9m] { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; margin-bottom: 0.8rem; }
.kre-fld[b-nk0d1j7q9m] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.kre-fld--wide[b-nk0d1j7q9m] { grid-column: 1 / -1; }
.kre-fld > span[b-nk0d1j7q9m] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.kre-note[b-nk0d1j7q9m] { font-size: 0.72rem; color: #9ca3af; }
/* TR-42: beside a course detail this edition changes, what learners get from the live edition until it is approved. */
.kre-live[b-nk0d1j7q9m] { display: block; font-size: 0.74rem; color: #92400e; }
/* In review the details are held still with the edition: visibly not a field to type in. */
.kre-card .kre-input:disabled[b-nk0d1j7q9m] { background: #f3f4f6; color: #4b5563; cursor: default; }
.kre-compare[b-nk0d1j7q9m] { margin: -0.3rem 0 0.9rem; font-size: 0.85rem; }
.kre-cap[b-nk0d1j7q9m] { display: block; margin-top: 0.2rem; font-size: 0.76rem; color: #9ca3af; }

/* ---- the question control (shared, so unscoped names) ---- */

[b-nk0d1j7q9m] .qn { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
[b-nk0d1j7q9m] .qn .kc-crsedit { width: 100%; }
[b-nk0d1j7q9m] .qn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
[b-nk0d1j7q9m] .qn-fld { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
[b-nk0d1j7q9m] .qn-fld--grow { flex: 1 1 20rem; }
[b-nk0d1j7q9m] .qn-fld > span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
[b-nk0d1j7q9m] .qn-input {
    flex: 1; min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid #d1d5db;
    border-radius: 0.4rem; font-size: 0.85rem; font-family: inherit; background: #fff;
}
[b-nk0d1j7q9m] .qn-input[readonly] { background: #f3f4f6; color: #6b7280; }
[b-nk0d1j7q9m] .qn-input--kind { flex: none; min-width: 13rem; }
[b-nk0d1j7q9m] .qn-input--num { flex: none; width: 4.5rem; }
[b-nk0d1j7q9m] .qn-opt { display: flex; align-items: center; gap: 0.5rem; }
[b-nk0d1j7q9m] .qn-mark {
    flex: none; display: flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; color: #6b7280; cursor: pointer; min-width: 3.4rem;
}
[b-nk0d1j7q9m] .qn-frac { flex: none; display: flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; color: #6b7280; }
[b-nk0d1j7q9m] .qn-drop {
    flex: none; border: 1px solid #e5e7eb; border-radius: 0.35rem; background: #fff;
    color: #9ca3af; width: 1.6rem; height: 1.6rem; font-size: 0.75rem; cursor: pointer;
}
[b-nk0d1j7q9m] .qn-drop:hover { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
[b-nk0d1j7q9m] .qn-add {
    align-self: flex-start; border: 0; background: none; padding: 0;
    color: var(--kc-blue, #2563eb); font-size: 0.8rem; cursor: pointer;
}
[b-nk0d1j7q9m] .qn-add:hover { text-decoration: underline; }
/* The one warning worth interrupting for: without it, ticking every box scores full marks. */
[b-nk0d1j7q9m] .qn-warn {
    margin: 0; padding: 0.4rem 0.6rem; border-radius: 0.4rem;
    background: #fff7ed; color: #9a3412; font-size: 0.78rem;
}

/* ---- quiz editor (shared control, unscoped names) ---- */

[b-nk0d1j7q9m] .qe { width: 100%; }
[b-nk0d1j7q9m] .qe-head { display: flex; flex-direction: column; gap: 0.1rem; }
[b-nk0d1j7q9m] .qe-title { font-size: 0.9rem; color: #1f2937; }
[b-nk0d1j7q9m] .qe-meta { font-size: 0.78rem; color: #6b7280; }
[b-nk0d1j7q9m] .qe-slots { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.82rem; color: #4b5563; }
[b-nk0d1j7q9m] .qe-slots li { margin: 0.1rem 0; }
[b-nk0d1j7q9m] .qe-warn { margin: 0.4rem 0 0; font-size: 0.8rem; color: #b45309; }
[b-nk0d1j7q9m] .qe-form {
    display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem;
    padding-top: 0.6rem; border-top: 1px dashed #e5e7eb;
}
[b-nk0d1j7q9m] .qe-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
[b-nk0d1j7q9m] .qe-row label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: #6b7280; }
[b-nk0d1j7q9m] div.qe-fld--grow { flex: 1 1 20rem; display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
[b-nk0d1j7q9m] .qe-fld__label { font-size: 0.8rem; color: #6b7280; }

/* ---- the participant preview ----
   Amber like the preview's own banner, so the button and the page it opens read as one thing — and as a
   different thing from the lifecycle buttons beside it, none of which it touches. */
.kre-preview[b-nk0d1j7q9m] { display: inline-flex; align-items: stretch; }
.kre-btn--preview[b-nk0d1j7q9m] {
    background: #fef3c7; color: #78350f; border: 1px solid #d97706; border-radius: 8px 0 0 8px;
}
.kre-preview__tab[b-nk0d1j7q9m] {
    display: inline-flex; align-items: center; padding: 0 0.55rem;
    border: 1px solid #d97706; border-left: 0; border-radius: 0 8px 8px 0;
    background: #fff; color: #78350f; font-weight: 700; text-decoration: none;
}
.kre-preview__tab:hover[b-nk0d1j7q9m] { background: #fef3c7; }
.kre-preview-here[b-nk0d1j7q9m] { display: inline-block; margin-top: 0.35rem; font-size: 0.8rem; color: #92400e; }

/* Where the preview's "back to the editor" lands. */
.kre-card--part[b-nk0d1j7q9m] { scroll-margin-top: 1rem; }

/* ---- stage C2: content and reuse (TR-24, TR-26, TR-72) ---- */

/* A success said beside the control it belongs to — the toast is a long scroll away from the bank. */
.kre-notice[b-nk0d1j7q9m] {
    margin: 0.5rem 0; padding: 0.5rem 0.8rem; border-radius: 8px;
    background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a;
    font-size: 0.84rem; line-height: 1.45;
}
/* Not a success: typing that was thrown away when the card refilled from what is stored (TR-42). */
.kre-notice--warn[b-nk0d1j7q9m] {
    background: #fff7ed; color: #9a3412; border-color: #fed7aa; border-left-color: #ea580c;
}

.kre-duplicate[b-nk0d1j7q9m] {
    display: flex; flex-direction: column; gap: 0.5rem;
    margin: 0 0 1rem; padding: 0.8rem 0.9rem; border-radius: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.kre-duplicate .kre-hint[b-nk0d1j7q9m] { margin: 0; }

.kre-move[b-nk0d1j7q9m] {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin: 0.2rem 0 0.5rem 4.2rem; padding: 0.5rem 0.7rem; border-radius: 8px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.kre-move__label[b-nk0d1j7q9m] { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: #4b5563; }
.kre-move__label .kre-input[b-nk0d1j7q9m] { min-width: 12rem; }

.kre-tf[b-nk0d1j7q9m] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; max-width: none; }
/* The places the change cannot reach: a line of their own under the sentence and its button. */
.kre-tf__kept[b-nk0d1j7q9m] { flex: 1 1 100%; margin: 0; }

.kre-search[b-nk0d1j7q9m] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.kre-search .kre-input[b-nk0d1j7q9m] { flex: 1 1 18rem; min-width: 0; }
.kre-search__retired[b-nk0d1j7q9m] { align-items: center; }
.kre-hits[b-nk0d1j7q9m] {
    margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; border-radius: 10px;
    background: #f8fafc; border: 1px solid #e2e8f0;
}
.kre-hits .kre-muted[b-nk0d1j7q9m] { margin: 0 0 0.4rem; }
.kre-hits .kre-hits__summary:last-child[b-nk0d1j7q9m] { margin-bottom: 0; }
/* Before any search: no box, only the empty live region waiting for words. */
.kre-hits--idle[b-nk0d1j7q9m] { display: contents; }
.kre-hits--idle .kre-hits__summary[b-nk0d1j7q9m] { margin: 0; }
.kre-hits ul[b-nk0d1j7q9m] { margin: 0; padding: 0; list-style: none; }
.kre-hit[b-nk0d1j7q9m] {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.35rem 0; border-top: 1px solid #eef2f7; font-size: 0.84rem;
}
.kre-hit:first-child[b-nk0d1j7q9m] { border-top: 0; }
.kre-hit__pool[b-nk0d1j7q9m] {
    flex: none; padding: 0.1rem 0.45rem; border-radius: 999px;
    background: #eef2ff; color: #4338ca; font-size: 0.72rem; font-weight: 600;
}
.kre-hit__text[b-nk0d1j7q9m] { flex: 1 1 16rem; min-width: 0; color: #1f2937; }

.kre-pool__rename[b-nk0d1j7q9m] { flex: 1 1 14rem; min-width: 0; }
.kre-showretired[b-nk0d1j7q9m] { margin: 0.5rem 0 0.2rem; }
.kre-flag--retired[b-nk0d1j7q9m] { background: #f3f4f6; color: #6b7280; margin: 0 0 0.25rem; }
.kre-question--retired .kre-prose[b-nk0d1j7q9m],
.kre-question--retired .kre-options[b-nk0d1j7q9m] { color: #9ca3af; }
.kre-question--retired .kre-options li.is-correct[b-nk0d1j7q9m] { color: #6b9f7a; }
.kre-question--found[b-nk0d1j7q9m] { background: #fefce8; box-shadow: inset 3px 0 0 #eab308; padding-left: 0.5rem; scroll-margin-top: 1rem; }
.kre-question--found:focus[b-nk0d1j7q9m] { outline: none; }
.kre-question--found:focus-visible[b-nk0d1j7q9m] { outline: 2px solid #ca8a04; outline-offset: 2px; }
.kre-pool__bar[b-nk0d1j7q9m] { display: flex; align-items: center; gap: 0.5rem; }
.kre-pool__bar .kre-pool__head[b-nk0d1j7q9m] { flex: 1; min-width: 0; }
.kre-pool__renameform[b-nk0d1j7q9m] { margin-top: 0.5rem; }
/* Partial credit on a one-answer question (TR-56): styled as the share field beside a multi-answer option,
   under its own class so ".qn-opt .qn-input" still means the answer's text. */
[b-nk0d1j7q9m] .qn-partial {
    flex: none; width: 4.5rem; padding: 0.4rem 0.55rem; border: 1px solid #d1d5db;
    border-radius: 0.4rem; font-size: 0.85rem; font-family: inherit; background: #fff;
}

/* ---- leaving, and failing, without losing work (TR-45) ---- */

/* Leaving with unsaved work: asked at the top of the editor, held there while the author scrolls, in the
   confirmation's colours — the red button is the one that loses something. */
.kre-leave[b-nk0d1j7q9m] {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap;
    margin: 0 0 0.8rem; padding: 0.7rem 0.9rem; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    font-size: 0.86rem; color: #7f1d1d;
}
.kre-leave__text[b-nk0d1j7q9m] { flex: 1 1 24rem; min-width: 0; line-height: 1.45; }
.kre-leave__actions[b-nk0d1j7q9m] { display: flex; gap: 0.5rem; flex: none; flex-wrap: wrap; }

/* What the error boundary shows in place of the forms until "Show the editor again". */
.kre-broken[b-nk0d1j7q9m] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.kre-broken p[b-nk0d1j7q9m] { margin: 0; line-height: 1.45; }

/* ---- the quiz and question forms (TR-66) ---- */

/* "Quiz saved." — the same quiet green as a notice beside a control. */
[b-nk0d1j7q9m] .qe-ok { margin: 0.4rem 0 0; font-size: 0.8rem; color: #166534; }
/* A setting refused for its range: the field is marked as well as named. */
[b-nk0d1j7q9m] .qe-row input[aria-invalid="true"] { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
/* TR-06: how a multi-answer question is scored — the choice, what it does, and the words its learners read. */
[b-nk0d1j7q9m] .qn-input--scoring { flex: none; min-width: 15rem; }
[b-nk0d1j7q9m] .qn-rule { margin: 0; font-size: 0.76rem; line-height: 1.45; color: #4b5563; }
[b-nk0d1j7q9m] .qn-rule__learner { display: block; color: #6b7280; }
/* Answers set aside by a switch to true / false, and how to have them back. */
[b-nk0d1j7q9m] .qn-kept {
    margin: 0; padding: 0.4rem 0.6rem; border-radius: 0.4rem;
    background: #eff6ff; color: #1e40af; font-size: 0.78rem;
}

/* ---- TR-51: the banks a course draws from, what an edit reaches, and who changed what ---- */

/* One bank: its name, who else uses it, its pools. Grouped, so a shared bank reads as one. */
div.kre-bank[b-nk0d1j7q9m] {
    margin: 0.9rem 0 0; padding: 0.8rem 0.9rem 0.6rem;
    border: 1px solid #dbe4ea; border-radius: 12px; background: #f8fbfc;
}
.kre-bank__head[b-nk0d1j7q9m] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.kre-bank__title[b-nk0d1j7q9m] { margin: 0; font-size: 0.98rem; color: #1f2937; }
.kre-bank__use[b-nk0d1j7q9m] { font-size: 0.78rem; color: #4b5563; flex: 1 1 14rem; }
.kre-bank__use--shared[b-nk0d1j7q9m] { color: #9a3412; }
.kre-bank__tools[b-nk0d1j7q9m] { align-items: center; gap: 0.6rem; }
.kre-nobank[b-nk0d1j7q9m] { max-width: none; }

/* Choosing another bank, or creating one: a deliberate act, below the course's own. */
.kre-bankpick[b-nk0d1j7q9m] {
    display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; padding: 0.8rem;
    border: 1px dashed #d1d5db; border-radius: 10px;
}
.kre-bankpick .kre-input[b-nk0d1j7q9m] { flex: 1 1 18rem; min-width: 0; }

/* The history link beside a question's edit and retire buttons. */
.kre-icon--link[b-nk0d1j7q9m] { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Before an edit is saved: what it reaches (TR-51 Q5). */
.kre-impact[b-nk0d1j7q9m] {
    margin: 0.6rem 0; padding: 0.55rem 0.8rem; border-radius: 8px;
    background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; font-size: 0.82rem; line-height: 1.45;
}
.kre-impact p[b-nk0d1j7q9m] { margin: 0; }
.kre-impact__head[b-nk0d1j7q9m] { font-weight: 600; }
.kre-impact__uses[b-nk0d1j7q9m] { margin: 0.25rem 0 0.35rem; padding-left: 1.2rem; }

/* After a correction: the handed-in attempts that answered what it replaced (TR-51 Q6). */
.kre-correction .kre-link[b-nk0d1j7q9m] { margin-left: 0.35rem; }

/* "Prova på" (owner, 2026-10-13): a real check card in the course, nothing saved. Its two choices — the card and
   the kitchen — side by side, wrapping to a column on a narrow screen. */
.kre-practice[b-nk0d1j7q9m] { font-size: 0.92rem; color: #1f2937; }
.kre-practice-add[b-nk0d1j7q9m] {
    display: flex; flex-direction: column; gap: 0.45rem; padding-top: 0.5rem; border-top: 1px dashed #e5e7eb;
}
.kre-practice-add__title[b-nk0d1j7q9m] { font-size: 0.82rem; font-weight: 600; color: #374151; }
.kre-practice-add .kre-btn[b-nk0d1j7q9m] { align-self: flex-start; }
.kre-practice-fields[b-nk0d1j7q9m] { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: flex-end; min-width: 0; }
.kre-practice-fields .kre-fld[b-nk0d1j7q9m] { flex: 1 1 14rem; }
.kre-practice-fields__hint[b-nk0d1j7q9m] { flex: 1 1 100%; margin: 0; }

/* ED-01: importing questions into a pool. The dialog is a component of its own (QuestionImportPanel), so its rules are
   deep, like the question control's; it keeps the editor's look — the same buttons, inputs and greys. */
.kre-btn--small[b-nk0d1j7q9m] { padding: 0.25rem 0.65rem; font-size: 0.76rem; align-self: center; }

[b-nk0d1j7q9m] .imp {
    margin: 0.6rem 0 0.8rem; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.7rem;
    border: 1px solid #c7d2e0; border-radius: 10px; background: #f8fafc;
}
[b-nk0d1j7q9m] .imp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
[b-nk0d1j7q9m] .imp-title { margin: 0; font-size: 0.95rem; color: var(--kc-navy, #1f2937); }
[b-nk0d1j7q9m] .imp-hint { margin: 0; font-size: 0.82rem; color: #6b7280; max-width: 70ch; }
[b-nk0d1j7q9m] .imp-box {
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.85rem;
    border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; min-width: 0;
}
[b-nk0d1j7q9m] .imp-h5 {
    margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280;
    display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
[b-nk0d1j7q9m] .imp-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
[b-nk0d1j7q9m] .imp-muted { color: #9ca3af; font-size: 0.8rem; }
[b-nk0d1j7q9m] .imp-source { text-transform: none; letter-spacing: 0; font-weight: 400; }
[b-nk0d1j7q9m] .imp-fld { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
[b-nk0d1j7q9m] .imp-fld--grow { flex: 1 1 18rem; }
[b-nk0d1j7q9m] .imp-fld > span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
[b-nk0d1j7q9m] .imp-input {
    box-sizing: border-box; min-width: 0; padding: 0.4rem 0.55rem; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 0.85rem; font-family: inherit; background: #fff;
}
[b-nk0d1j7q9m] .imp-input:disabled { background: #f3f4f6; color: #9ca3af; }
[b-nk0d1j7q9m] .imp-paste { width: 100%; resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }
[b-nk0d1j7q9m] .imp-btn {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
[b-nk0d1j7q9m] .imp-btn--ghost { background: #fff; color: #374151; border: 1px solid #d1d5db; }
[b-nk0d1j7q9m] .imp-btn:disabled { opacity: 0.5; cursor: default; }
[b-nk0d1j7q9m] .imp-warn {
    margin: 0; padding: 0.5rem 0.7rem; border-radius: 8px; background: #fff7ed; color: #9a3412;
    font-size: 0.8rem; line-height: 1.45; max-width: 75ch;
}
[b-nk0d1j7q9m] .imp-note { margin: 0; font-size: 0.8rem; color: #4b5563; }
[b-nk0d1j7q9m] .imp-alert {
    padding: 0.55rem 0.8rem; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 0.86rem;
    border: 1px solid #fecaca; border-left: 4px solid #dc2626; line-height: 1.45;
}
[b-nk0d1j7q9m] .imp-sum { margin: 0; font-size: 0.86rem; color: #374151; }

[b-nk0d1j7q9m] .imp-tablewrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
[b-nk0d1j7q9m] .imp-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; table-layout: fixed; }
[b-nk0d1j7q9m] .imp-table th {
    text-align: left; padding: 0.4rem 0.6rem; background: #f3f4f6; color: #6b7280;
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #e5e7eb;
}
[b-nk0d1j7q9m] .imp-table td { padding: 0.5rem 0.6rem; vertical-align: top; border-top: 1px solid #f3f4f6; overflow-wrap: anywhere; }
[b-nk0d1j7q9m] .imp-c-pick { width: 2.4rem; text-align: center; }
[b-nk0d1j7q9m] .imp-c-q { width: 27%; }
[b-nk0d1j7q9m] .imp-c-a { width: 25%; }
[b-nk0d1j7q9m] .imp-c-k { width: 9.5rem; }
[b-nk0d1j7q9m] .imp-tr--rejected { background: #fef8f8; }
[b-nk0d1j7q9m] .imp-tr--exists { background: #fffdf5; }
[b-nk0d1j7q9m] .imp-q { color: #1f2937; line-height: 1.4; }
[b-nk0d1j7q9m] .imp-where { margin-top: 0.15rem; font-size: 0.72rem; color: #9ca3af; }
[b-nk0d1j7q9m] .imp-answers { margin: 0; padding-left: 1rem; color: #6b7280; }
[b-nk0d1j7q9m] .imp-answers li.is-right { color: #166534; font-weight: 600; }
[b-nk0d1j7q9m] .imp-frac {
    margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 0.25rem;
    background: #eef2ff; color: #4338ca; font-size: 0.7rem; font-weight: 600; white-space: nowrap;
}
[b-nk0d1j7q9m] .imp-frac--neg { background: #fef2f2; color: #991b1b; }
[b-nk0d1j7q9m] .imp-kind {
    display: inline-block; padding: 0.05rem 0.4rem; border-radius: var(--kc-radius-pill, 999px);
    background: #f3f4f6; color: #4b5563; font-size: 0.7rem; font-weight: 600;
}
[b-nk0d1j7q9m] .imp-rule { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: #6b7280; }
[b-nk0d1j7q9m] .imp-badge {
    display: inline-block; padding: 0.05rem 0.5rem; border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
[b-nk0d1j7q9m] .imp-badge--ready { background: #dcfce7; color: #166534; }
[b-nk0d1j7q9m] .imp-badge--exists { background: #fef3c7; color: #92400e; }
[b-nk0d1j7q9m] .imp-badge--rejected { background: #fee2e2; color: #991b1b; }
[b-nk0d1j7q9m] .imp-reason { margin-top: 0.3rem; font-size: 0.76rem; color: #4b5563; line-height: 1.4; }
[b-nk0d1j7q9m] .imp-reason--note { color: #92400e; }
[b-nk0d1j7q9m] .imp-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* /Components/Pages/KursSynpunkter.razor.rz.scp.css */
/* A course's learner reports (LE-10): the editor's header shape, so the two pages read as one place, with the
   list below at the editor's width. */

.ks-loading[b-mm7vgohko3] { color: var(--kc-muted, #666); padding: 1rem; }
.ks-denied[b-mm7vgohko3] { max-width: 640px; margin: 2rem auto; padding: 1rem; }

.ks[b-mm7vgohko3] { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.ks-link[b-mm7vgohko3] { font-size: 0.85rem; color: #2563eb; text-decoration: none; }
.ks-link:hover[b-mm7vgohko3] { text-decoration: underline; }

.ks-head[b-mm7vgohko3] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
    margin: 0.6rem 0 1rem;
}
.ks-title[b-mm7vgohko3] { margin: 0; font-size: 1.4rem; color: #111827; overflow-wrap: anywhere; }
.ks-sub[b-mm7vgohko3] { margin: 0.25rem 0 0; font-size: 0.85rem; color: #6b7280; }
.ks-actions[b-mm7vgohko3] { display: flex; gap: 0.5rem; flex: none; }

.ks-retired[b-mm7vgohko3] {
    display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.45rem; border-radius: 999px;
    background: #f3f4f6; color: #6b7280;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}

.ks-btn[b-mm7vgohko3] {
    display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.95rem;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151;
    font-size: 0.84rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ks-btn:hover[b-mm7vgohko3] { background: #f9fafb; }

@media (max-width: 640px) {
    .ks-head[b-mm7vgohko3] { flex-direction: column; gap: 0.6rem; }
}
/* /Components/Pages/KursUtgavor.razor.rz.scp.css */
/* A course's editions (TR-52): the editor's header and card shapes, so the history reads as part of the same place,
   with the list in a table that scrolls inside its card rather than widening the page. */

.ku-loading[b-8lu4jdpqgi] { color: var(--kc-muted, #666); padding: 1rem; }
.ku-denied[b-8lu4jdpqgi] { max-width: 640px; margin: 2rem auto; padding: 1rem; }

.ku[b-8lu4jdpqgi] { max-width: 1100px; margin: 0 auto; padding: 1rem; }

.ku-link[b-8lu4jdpqgi] { font-size: 0.85rem; color: #2563eb; text-decoration: none; overflow-wrap: anywhere; }
.ku-link:hover[b-8lu4jdpqgi] { text-decoration: underline; }

.ku-head[b-8lu4jdpqgi] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
    margin: 0.6rem 0 1rem;
}
.ku-title[b-8lu4jdpqgi] { margin: 0; font-size: 1.4rem; color: #111827; overflow-wrap: anywhere; }
.ku-sub[b-8lu4jdpqgi] { margin: 0.25rem 0 0; font-size: 0.85rem; color: #6b7280; max-width: 72ch; }
.ku-actions[b-8lu4jdpqgi] { display: flex; gap: 0.5rem; flex: none; }

.ku-btn[b-8lu4jdpqgi] {
    display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.95rem;
    border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151;
    font-size: 0.84rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.ku-btn:hover[b-8lu4jdpqgi] { background: #f9fafb; }
.ku-btn--small[b-8lu4jdpqgi] { min-height: 2rem; font-size: 0.8rem; }

.ku-alert[b-8lu4jdpqgi] {
    margin: 0 0 0.9rem; padding: 0.55rem 0.8rem; border-radius: 8px; background: #fef2f2; color: #991b1b;
    font-size: 0.85rem;
}

.ku-card[b-8lu4jdpqgi] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    overflow: hidden; margin-bottom: 0.9rem;
    scroll-margin-top: 5rem;
}
.ku-sec[b-8lu4jdpqgi] {
    padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.ku-sec h2[b-8lu4jdpqgi] {
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158);
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.ku-hint[b-8lu4jdpqgi] { margin: 0.35rem 0 0.5rem; font-size: 0.82rem; color: #6b7280; max-width: 72ch; }
.ku-ro[b-8lu4jdpqgi] { margin-right: 0.3em; color: #374151; }
.ku-body[b-8lu4jdpqgi] { padding: 0.9rem 1.1rem; }
.ku-muted[b-8lu4jdpqgi] { margin: 0; font-size: 0.84rem; color: #6b7280; }
.ku-hidden[b-8lu4jdpqgi] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Positioned, so the visually hidden column heading inside is clipped by the scroller rather than widening the page. */
.ku-tablewrap[b-8lu4jdpqgi] { overflow-x: auto; position: relative; }
.ku-table[b-8lu4jdpqgi] { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.ku-table th[b-8lu4jdpqgi], .ku-table td[b-8lu4jdpqgi] { padding: 0.55rem 0.9rem; text-align: left; vertical-align: top; border-top: 1px solid #f3f4f6; }
.ku-table thead th[b-8lu4jdpqgi] {
    border-top: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280;
    font-weight: 600; white-space: nowrap;
}
.ku-table tbody th[b-8lu4jdpqgi] { font-weight: 600; color: #1f2937; white-space: nowrap; }
.ku-row.is-open[b-8lu4jdpqgi] { background: #f8fafc; }
.ku-who[b-8lu4jdpqgi] { display: block; color: #1f2937; overflow-wrap: anywhere; }
.ku-when[b-8lu4jdpqgi] { display: block; color: #6b7280; font-size: 0.78rem; white-space: nowrap; }
.ku-open[b-8lu4jdpqgi] { white-space: nowrap; color: #2563eb; text-decoration: none; font-weight: 600; }
.ku-open:hover[b-8lu4jdpqgi] { text-decoration: underline; }
.ku-open[aria-current][b-8lu4jdpqgi] { color: #6b7280; font-weight: 400; }

.ku-state[b-8lu4jdpqgi] {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.ku-state--draft[b-8lu4jdpqgi] { background: #fef3c7; color: #92400e; }
.ku-state--inreview[b-8lu4jdpqgi] { background: #ede9fe; color: #5b21b6; }
.ku-state--published[b-8lu4jdpqgi] { background: #dcfce7; color: #166534; }
.ku-state--retired[b-8lu4jdpqgi] { background: #f3f4f6; color: #6b7280; }

/* TR-40: the change log. The step in the state colours of where it leaves the edition; a return's note as written.
   Wide enough to read a row on one line: on a phone it scrolls inside its card, like the editions list, instead of
   squeezing a name into one letter per line. */
.ku-log[b-8lu4jdpqgi] { min-width: 46rem; }
.ku-log .ku-who[b-8lu4jdpqgi] { overflow-wrap: normal; }
.ku-step[b-8lu4jdpqgi] { display: block; font-weight: 600; color: #1f2937; white-space: nowrap; }
.ku-step--sentforreview[b-8lu4jdpqgi] { color: #5b21b6; }
.ku-step--returnedtodraft[b-8lu4jdpqgi] { color: #92400e; }
.ku-step--published[b-8lu4jdpqgi] { color: #166534; }
.ku-step--retired[b-8lu4jdpqgi], .ku-step--discarded[b-8lu4jdpqgi] { color: #6b7280; }
.ku-note[b-8lu4jdpqgi] { display: block; min-width: 14rem; max-width: 48ch; color: #1f2937; white-space: pre-line; overflow-wrap: anywhere; }
.ku-lognote[b-8lu4jdpqgi] { border-top: 1px solid #f3f4f6; font-size: 0.78rem; }

.ku-inline[b-8lu4jdpqgi] { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.ku-compare[b-8lu4jdpqgi] { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; color: #4b5563; }
.ku-select[b-8lu4jdpqgi] {
    min-height: 2rem; padding: 0.2rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
    font-size: 0.82rem; max-width: 100%;
}

.ku-details[b-8lu4jdpqgi] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem 1.2rem;
    margin: 0 0 1rem;
}
.ku-details dt[b-8lu4jdpqgi] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.ku-details dd[b-8lu4jdpqgi] { margin: 0.15rem 0 0; font-size: 0.88rem; color: #1f2937; overflow-wrap: anywhere; }

.ku-part[b-8lu4jdpqgi] { padding: 0.8rem 0; border-top: 1px solid #e5e7eb; scroll-margin-top: 5rem; }
.ku-parttitle[b-8lu4jdpqgi] { margin: 0 0 0.4rem; font-size: 0.98rem; color: #1f2937; overflow-wrap: anywhere; }
.ku-partno[b-8lu4jdpqgi] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; margin-right: 0.3rem; }
.ku-intro[b-8lu4jdpqgi] { margin-bottom: 0.5rem; }

.ku-block[b-8lu4jdpqgi] { display: flex; gap: 0.7rem; padding: 0.45rem 0; border-top: 1px dashed #f3f4f6; }
.ku-block:first-of-type[b-8lu4jdpqgi] { border-top: 0; }
.ku-block__body[b-8lu4jdpqgi] { flex: 1; min-width: 0; }
.ku-kind[b-8lu4jdpqgi] {
    flex: none; width: 3.6rem; padding-top: 0.15rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #9ca3af;
}
.ku-prose[b-8lu4jdpqgi] { font-size: 0.88rem; line-height: 1.5; color: #374151; overflow-wrap: anywhere; }
.ku-prose :first-child[b-8lu4jdpqgi] { margin-top: 0; }
.ku-prose :last-child[b-8lu4jdpqgi] { margin-bottom: 0; }
.ku-image[b-8lu4jdpqgi] { display: block; max-width: 100%; max-height: 40vh; border-radius: 6px; }
.ku-cap[b-8lu4jdpqgi] { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: #6b7280; }
.ku-flags[b-8lu4jdpqgi] { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.25rem; }
.ku-flag[b-8lu4jdpqgi] {
    padding: 0.05rem 0.45rem; border-radius: 999px; background: #eff6ff; color: #1e40af; font-size: 0.72rem;
}
.ku-flags:empty[b-8lu4jdpqgi] { display: none; }

.ku-quiz strong[b-8lu4jdpqgi] { display: block; color: #1f2937; font-size: 0.9rem; }
.ku-places[b-8lu4jdpqgi] { margin: 0.35rem 0 0; padding-left: 1.3rem; font-size: 0.82rem; color: #374151; }
.ku-places li[b-8lu4jdpqgi] { padding: 0.1rem 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .ku-head[b-8lu4jdpqgi] { flex-direction: column; gap: 0.6rem; }
    .ku-kind[b-8lu4jdpqgi] { width: auto; }
    .ku-block[b-8lu4jdpqgi] { flex-direction: column; gap: 0.2rem; }
}
/* /Components/Pages/Maltidsplanering.razor.rz.scp.css */
.kc-mp__grid[b-uzp3zm7tc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.kc-mp__card[b-uzp3zm7tc7] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.2rem 1.2rem;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    text-decoration: none;
    color: var(--kc-ink);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.kc-mp__card:hover[b-uzp3zm7tc7],
.kc-mp__card:focus-visible[b-uzp3zm7tc7] {
    transform: translateY(-2px);
    box-shadow: var(--kc-shadow-lift);
    border-color: var(--kc-blue-deep);
}

.kc-mp__icon[b-uzp3zm7tc7] {
    font-size: 1.7rem;
}

.kc-mp__count[b-uzp3zm7tc7] {
    position: absolute;
    top: 0.9rem;
    right: 1.1rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--kc-navy);
    font-variant-numeric: tabular-nums;
}

.kc-mp__card h3[b-uzp3zm7tc7] {
    margin: 0;
    color: var(--kc-navy);
    font-size: 1.15rem;
}

.kc-mp__card p[b-uzp3zm7tc7] {
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
    color: var(--kc-subtle);
    flex: 1 1 auto;
}

.kc-mp__card .kc-btn[b-uzp3zm7tc7] {
    align-self: flex-start;
}

.kc-mp__actions[b-uzp3zm7tc7] {
    display: flex;
    gap: 0.6rem;
    margin: 1.1rem 0;
}

.kc-mp__lists[b-uzp3zm7tc7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.kc-mp__panel[b-uzp3zm7tc7] {
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 0.9rem 1.1rem;
}

.kc-mp__items[b-uzp3zm7tc7] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.kc-mp__items a[b-uzp3zm7tc7] {
    font-weight: 600;
    color: var(--kc-navy);
    text-decoration: none;
}

.kc-mp__items a:hover[b-uzp3zm7tc7] {
    color: var(--kc-blue-deep);
}

.kc-mp__meta[b-uzp3zm7tc7] {
    display: block;
    font-size: 0.8rem;
    color: var(--kc-muted);
}

/* A card's headline number and the page it opens must agree; where a second, narrower fact matters —
   how many recipes are actually plannable — it is said in words rather than substituted for the count. */
.kc-mp__hint[b-uzp3zm7tc7] {
    margin: 0.15rem 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--kc-amber-ink, #92400E);
}

/* A draft is listed, not hidden: it exists, it just cannot be planned yet. */
.kc-mp__draft[b-uzp3zm7tc7] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border-radius: 3px;
    background: var(--kc-tint, #F3F6FA);
    border: 1px solid var(--kc-line, #E5E7EB);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kc-muted);
}
/* /Components/Pages/Matsedel.razor.rz.scp.css */
.kc-mats__bar[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 0.7rem 1rem;
    margin-bottom: 0.9rem;
}

.kc-mats__bar-space[b-72maeg0pz6] {
    flex: 1 1 auto;
}

.kc-mats__pick[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--kc-subtle);
}

.kc-mats__weeknav[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.kc-mats__week[b-72maeg0pz6] {
    font-weight: 700;
    color: var(--kc-navy);
    min-width: 5.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.kc-mats__range[b-72maeg0pz6] {
    color: var(--kc-muted);
    font-size: 0.88rem;
}

.kc-mats__planhead[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

.kc-mats__name[b-72maeg0pz6] {
    font-size: 1.05rem;
    font-weight: 600;
    flex: 0 1 20rem;
}

.kc-mats__savestate[b-72maeg0pz6] {
    font-size: 0.85rem;
    color: var(--kc-muted);
}

.kc-mats__savestate[data-savestate="saved"][b-72maeg0pz6] {
    color: var(--kc-ok-text);
    font-weight: 600;
}

.kc-mats__savestate[data-savestate="error"][b-72maeg0pz6] {
    color: #b91c1c;
    font-weight: 600;
}

/* The week: seven day columns, each a self-contained card of slots. Stacks on narrow screens so a
   phone in the kitchen reads one day at a time. */
.kc-mats__grid[b-72maeg0pz6] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.6rem;
    /* Stretch, not start: the week reads as one row of equal cards, so the eye compares days rather
       than following a ragged bottom edge. */
    align-items: stretch;
}

@media (max-width: 1100px) {
    .kc-mats__grid[b-72maeg0pz6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .kc-mats__grid[b-72maeg0pz6] {
        grid-template-columns: 1fr;
    }
}

.kc-mats__day[b-72maeg0pz6] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 0.6rem 0.65rem 0.5rem;
    min-height: 12rem;
}

.kc-mats__day--today[b-72maeg0pz6] {
    border-color: var(--kc-blue-deep);
    box-shadow: 0 0 0 1px var(--kc-blue-deep) inset, var(--kc-shadow-card);
}

.kc-mats__dayhead[b-72maeg0pz6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--kc-border-soft);
}

.kc-mats__dayhead strong[b-72maeg0pz6] {
    color: var(--kc-navy);
    font-size: 0.95rem;
}

.kc-mats__dayhead span[b-72maeg0pz6] {
    color: var(--kc-muted);
    font-size: 0.78rem;
    white-space: nowrap;
}

.kc-mats__slot[b-72maeg0pz6] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kc-mats__slothead[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--kc-muted);
}

.kc-mats__add[b-72maeg0pz6] {
    border: 1px solid var(--kc-border-soft);
    background: var(--kc-surface-alt);
    color: var(--kc-navy);
    border-radius: 6px;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.kc-mats__add:hover:not(:disabled)[b-72maeg0pz6] {
    background: var(--kc-blue-deep);
    border-color: var(--kc-blue-deep);
    color: #fff;
}

.kc-mats__dish[b-72maeg0pz6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--kc-surface-alt);
    border: 1px solid var(--kc-border-soft);
    border-radius: 8px;
    padding: 0.35rem 0.45rem;
}

.kc-mats__dish--gone[b-72maeg0pz6] {
    background: #fff7ed;
}

.kc-mats__dishname[b-72maeg0pz6] {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--kc-ink);
    overflow-wrap: anywhere;
}

.kc-mats__dishmeta[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    flex-wrap: wrap;
}

/* What this day does to the food, as one line under the dish. It reads as a sentence, not a control bar:
   in a week grid the answer is worth seeing at a glance and changing rarely. */
.kc-mats__serve[b-72maeg0pz6] {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
    padding: 0.15rem 0.25rem;
    border: 1px dashed var(--kc-line, #e5e7eb);
    border-radius: 0.3rem;
    background: transparent;
    font: inherit;
    font-size: 0.66rem;
    line-height: 1.3;
    text-align: left;
    color: var(--kc-navy, #1f2937);
    cursor: pointer;
}

.kc-mats__serve:hover:not(:disabled)[b-72maeg0pz6] { border-color: var(--kc-accent, #4a6b8a); }

.kc-mats__serve:disabled[b-72maeg0pz6] { cursor: default; opacity: 0.5; }

/* Nothing declared is a real state and must not read as an error — this day simply owes no controls. */
.kc-mats__serve--none[b-72maeg0pz6] { opacity: 0.55; font-style: italic; }

/* Declared something the programme does not describe. Marked on the line, not only inside the dialog:
   the point is to be noticed by someone scanning the week, not by someone who already opened it. */
.kc-mats__serve.is-uncovered[b-72maeg0pz6] { border-color: var(--kc-status-missed-edge, #E8DB8A); border-style: solid; }

.kc-mats__servegap[b-72maeg0pz6] {
    display: block;
    color: var(--kc-warn-text, #7A5B12);
    font-weight: 600;
}

.kc-mats__gapnote[b-72maeg0pz6] {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    background: var(--kc-status-missed, #FEF9C3);
    color: var(--kc-warn-text, #7A5B12);
    font-size: 0.85rem;
    line-height: 1.4;
}

.kc-mats__servemodal[b-72maeg0pz6] { max-width: 44rem; }

.kc-mats__servegrid[b-72maeg0pz6] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 0.6rem;
}

.kc-mats__serveaxis[b-72maeg0pz6] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kc-mats__serveopts[b-72maeg0pz6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.kc-mats__servelabel[b-72maeg0pz6] {
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
}

.kc-mats__portions[b-72maeg0pz6] {
    width: 2.9rem;
    height: 1.45rem;
    padding: 0 0.25rem;
    font-size: 0.72rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The slot's portion target (b-21): the number production and purchasing scale by, so it sits in the slot
   header where the planner is already looking rather than in a panel of its own. */
.kc-mats__target[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
}

.kc-mats__targetinput[b-72maeg0pz6] {
    width: 3.2rem;
    height: 1.45rem;
    padding: 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* An empty target reads as a quiet dash, not as a zero — "not planned yet" and "cook nothing" are
   different statements and the field must not confuse them.
   It also sheds its box entirely while empty: there are four slots on each of seven days, so a bordered
   input per slot puts 28 boxes on the week for a field that is usually blank. The affordance comes back
   the moment a planner reaches for it. */
.kc-mats__targetinput:placeholder-shown[b-72maeg0pz6] {
    font-weight: 400;
    color: var(--kc-muted);
    border-color: transparent;
    background: transparent;
}

.kc-mats__targetinput:placeholder-shown:hover[b-72maeg0pz6],
.kc-mats__targetinput:focus[b-72maeg0pz6] {
    border-color: var(--kc-border-soft);
    background: var(--kc-surface);
}

/* The unit label is noise next to an unset field — it belongs to a number, and there isn't one yet. */
.kc-mats__target:has(.kc-mats__targetinput:placeholder-shown) .kc-equip__muted[b-72maeg0pz6] {
    visibility: hidden;
}

.kc-mats__target:hover .kc-equip__muted[b-72maeg0pz6],
.kc-mats__target:focus-within .kc-equip__muted[b-72maeg0pz6] {
    visibility: visible;
}

.kc-mats__alloc[b-72maeg0pz6] {
    margin: 0.15rem 0 0;
    font-size: 0.66rem;
    color: var(--kc-muted);
    font-variant-numeric: tabular-nums;
}

/* Promising more portions than the slot plans to make is a real planning error, not a nuance. */
.kc-mats__alloc--over[b-72maeg0pz6] {
    color: var(--kc-fail-text);
    font-weight: 600;
}

.kc-mats__daytotal[b-72maeg0pz6] {
    margin: 0 0 0.3rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.kc-mats__remove[b-72maeg0pz6] {
    margin-left: auto;
    border: none;
    background: none;
    color: var(--kc-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0 0.15rem;
}

.kc-mats__remove:hover:not(:disabled)[b-72maeg0pz6] {
    color: #b91c1c;
}

.kc-mats__dayfoot[b-72maeg0pz6] {
    margin-top: auto;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--kc-border-soft);
    font-size: 0.75rem;
}

.kc-mats__dayfoot .kc-fchip[b-72maeg0pz6] {
    font-size: 0.68rem;
    padding: 0.05rem 0.4rem;
}

/* Collapsed by default: the anmärkningar must be reachable without pushing the day board apart. */
.kc-mats__daywarn[b-72maeg0pz6] {
    margin-top: 0.3rem;
    font-size: 0.68rem;
    color: var(--kc-muted);
}

.kc-mats__daywarn > summary[b-72maeg0pz6] {
    cursor: pointer;
    color: #b45309;
}

.kc-mats__daywarn ul[b-72maeg0pz6] {
    margin: 0.25rem 0 0;
    padding-left: 1rem;
}

/* ---------- recipe picker ---------- */

.kc-mats__modal[b-72maeg0pz6] {
    width: min(92vw, 720px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.2rem;
}

.kc-mats__pickbar[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.kc-mats__pickbar .kc-input[b-72maeg0pz6] {
    flex: 1 1 14rem;
}

.kc-mats__pickmatch[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--kc-subtle);
}

.kc-mats__picklist[b-72maeg0pz6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.kc-mats__pickitem[b-72maeg0pz6] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    text-align: left;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--kc-border-soft);
    border-radius: 8px;
    background: var(--kc-surface);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.kc-mats__pickitem:hover:not(:disabled)[b-72maeg0pz6] {
    background: #f8fafc;
    border-color: var(--kc-blue-deep);
}

.kc-mats__thumb[b-72maeg0pz6] {
    flex: 0 0 2.6rem;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 6px;
    background: var(--kc-surface-alt) center / cover no-repeat;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}

.kc-mats__pickbody[b-72maeg0pz6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
/* /Components/Pages/Meddelanden.razor.rz.scp.css */
.md-loading[b-zw7z0ohqd2] { color: #6b7280; font-size: 0.9rem; }

.md-empty[b-zw7z0ohqd2] {
    display: flex; flex-direction: column; gap: 0.2rem;
    max-width: 1180px; margin: 0 auto; padding: 1.2rem 1.1rem;
    border: 1px dashed #d1d5db; border-radius: 12px; background: #f9fafb;
    font-size: 0.88rem; color: #6b7280;
}
.md-empty strong[b-zw7z0ohqd2] { color: #374151; }

.md-list[b-zw7z0ohqd2] { display: flex; flex-direction: column; gap: 0.6rem; max-width: 1180px; margin: 0 auto; }

.md-item[b-zw7z0ohqd2] {
    padding: 0.85rem 1rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
}

/* Unread carries a left bar rather than a bold everything: a list where half the rows shout is a list
   nobody reads. */
.md-item.is-unread[b-zw7z0ohqd2] { border-left: 3px solid #2563eb; background: #f8fbff; }

.md-item__head[b-zw7z0ohqd2] {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem;
}
.md-item__subject[b-zw7z0ohqd2] { font-size: 0.92rem; font-weight: 600; color: #1f2937; }
.md-item__when[b-zw7z0ohqd2] { font-size: 0.76rem; color: #9ca3af; white-space: nowrap; }

.md-item__body[b-zw7z0ohqd2] { font-size: 0.86rem; color: #374151; line-height: 1.6; }
.md-item__body > :first-child[b-zw7z0ohqd2] { margin-top: 0; }
.md-item__body > :last-child[b-zw7z0ohqd2] { margin-bottom: 0; }

.md-item__read[b-zw7z0ohqd2] {
    margin-top: 0.5rem; border: 0; background: none; padding: 0;
    font-size: 0.78rem; color: #1d4ed8; text-decoration: underline; cursor: pointer;
}
.md-item__read:disabled[b-zw7z0ohqd2] { opacity: 0.5; cursor: default; }
/* /Components/Pages/Menyer.razor.rz.scp.css */
.kc-menu[b-o65kidscup] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kc-menu__list[b-o65kidscup] {
    flex: 0 0 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kc-menu__items[b-o65kidscup] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kc-menu__item[b-o65kidscup] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.kc-menu__item:hover[b-o65kidscup] {
    background: #f8fafc;
}

.kc-menu__item--on[b-o65kidscup] {
    border-color: #2563eb;
    background: #eff6ff;
}

.kc-menu__item-meta[b-o65kidscup] {
    font-size: 0.8rem;
    opacity: 0.6;
}

.kc-menu__main[b-o65kidscup] {
    flex: 1 1 30rem;
    min-width: 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kc-menu__head[b-o65kidscup] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.kc-menu__name[b-o65kidscup] {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 16rem;
    flex: 1 1 16rem;
}

.kc-menu__panel[b-o65kidscup] {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    background: #fbfdff;
}

.kc-menu__unresolved[b-o65kidscup] {
    background: #fff7ed;
}

.kc-menu__warnings[b-o65kidscup] {
    border-left: 3px solid #f59e0b;
    padding-left: 0.75rem;
}


/* Autosave state, same wording and colours as the matsedel and the recipe editor — the module has one
   saving behaviour, so it must have one appearance. */
.kc-menu__savestate[b-o65kidscup] {
    font-size: 0.85rem;
    color: var(--kc-muted);
}

.kc-menu__savestate[data-savestate="saved"][b-o65kidscup] {
    color: var(--kc-ok-text);
    font-weight: 600;
}

.kc-menu__savestate[data-savestate="error"][b-o65kidscup] {
    color: var(--kc-fail-text);
    font-weight: 600;
}

/* Portions per dish: the volume purchasing scales by. Blank reads as a quiet dash — a menu carrying no
   volume yet is a normal resting state, not a zero. */
.kc-menu__portions[b-o65kidscup] {
    width: 4.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kc-menu__portions:placeholder-shown[b-o65kidscup] {
    color: var(--kc-muted);
    border-color: transparent;
    background: transparent;
}

.kc-menu__portions:placeholder-shown:hover[b-o65kidscup],
.kc-menu__portions:focus[b-o65kidscup] {
    border-color: var(--kc-border-soft);
    background: var(--kc-surface);
}
/* /Components/Pages/MinaInstallningar.razor.rz.scp.css */
/* Settings screens — one row per setting: what it is on the left, the control and where the value
   comes from on the right. Shared shape between the organisation and personal pages. */

.st[b-1g1vf0gmw9] {
    display: flex;
    flex-direction: column;
    max-width: 820px;
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0,0,0,.1));
    overflow: hidden;
}

.st-scopebar[b-1g1vf0gmw9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0,0,0,.08));
}
.st-scopelabel[b-1g1vf0gmw9] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-muted, #666); font-weight: 700; }
.st-scopehint[b-1g1vf0gmw9] { font-size: 0.78rem; color: var(--kc-muted, #888); }

.st-toast[b-1g1vf0gmw9] {
    margin: 0;
    padding: 0.55rem 1rem;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    color: #1e3a8a;
    font-size: 0.86rem;
}

.st-row[b-1g1vf0gmw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--kc-border-soft, rgba(0,0,0,.06));
}
.st-row:last-child[b-1g1vf0gmw9] { border-bottom: 0; }
@media (max-width: 640px) { .st-row[b-1g1vf0gmw9] { flex-direction: column; align-items: stretch; gap: 0.5rem; } }

.st-label[b-1g1vf0gmw9] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.st-label b[b-1g1vf0gmw9] { font-size: 0.92rem; color: var(--kc-navy, #324158); }
.st-label small[b-1g1vf0gmw9] { font-size: 0.8rem; color: var(--kc-muted, #666); }

.st-control[b-1g1vf0gmw9] { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.st-input[b-1g1vf0gmw9] { min-width: 9rem; }
.st-origin[b-1g1vf0gmw9] { font-size: 0.72rem; color: var(--kc-muted, #999); white-space: nowrap; }

.st-switch[b-1g1vf0gmw9] { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.86rem; }
.st-switch input[b-1g1vf0gmw9] { width: 1.1rem; height: 1.1rem; cursor: pointer; }

.st-clear[b-1g1vf0gmw9] {
    border: 1px solid var(--kc-border-soft, rgba(0,0,0,.15));
    background: #fff;
    border-radius: 0.35rem;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.3rem 0.45rem;
    color: var(--kc-muted, #666);
}
.st-clear:hover[b-1g1vf0gmw9] { color: var(--kc-navy, #324158); }

/* "Om mig" — who you are, above what you prefer. The account tile in the app bar renders this name and
   picture, so this panel is where a person makes that corner of the screen say something true. */
.kc-profile[b-1g1vf0gmw9] {
    margin-bottom: 1.6rem;
}

.kc-profile__grid[b-1g1vf0gmw9] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 700px) {
    .kc-profile__grid[b-1g1vf0gmw9] {
        grid-template-columns: 1fr;
    }
}

.kc-profile__avatar[b-1g1vf0gmw9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 8rem;
}

/* Larger than the app-bar tile: this is where you judge whether the picture actually looks like you. */
.kc-profile__pic[b-1g1vf0gmw9] {
    width: 96px;
    height: 96px;
    font-size: 1.8rem;
}

/* The real file input is unusable as chrome, so the label IS the button and the input is hidden inside it. */
.kc-profile__upload[b-1g1vf0gmw9] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* ::deep is required: <InputFile> is a CHILD COMPONENT, so its rendered <input> does not carry this
   page's scope attribute and a plain scoped selector never matches it — the native "Choose File" control
   sits there in full view. */
.kc-profile__upload[b-1g1vf0gmw9]  input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* The invisible field has focus, so the button it hides in shows it: the navy 3 px ring every .kc-btn has — and only for
   KEYBOARD focus (:focus-visible). A mouse click on the button focuses the field as well, so :focus-within would light the ring
   for everyone who clicks. */
.kc-profile__upload:has(input[type="file"]:focus-visible)[b-1g1vf0gmw9] {
    outline: 3px solid var(--kc-navy);
    outline-offset: 2px;
}

.kc-profile__fields[b-1g1vf0gmw9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.8rem 1rem;
    align-items: end;
}

.kc-profile__fields label[b-1g1vf0gmw9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* The login address and password sit at the end of the grid and take the full width: they are not two
   more preferences in the row, and the note under them has to be readable rather than squeezed into a
   14rem column. */
.kc-profile__fields > label:has(#mi-email)[b-1g1vf0gmw9],
.kc-profile__login[b-1g1vf0gmw9],
.kc-profile__fields > small[b-1g1vf0gmw9],
.kc-profile__fields > p[b-1g1vf0gmw9] {
    grid-column: 1 / -1;
}

.kc-profile__login[b-1g1vf0gmw9] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.kc-profile__state[b-1g1vf0gmw9] {
    align-self: center;
    font-size: 0.85rem;
    color: var(--kc-muted);
}

.kc-profile__state[data-savestate="saved"][b-1g1vf0gmw9] {
    color: var(--kc-ok-text);
    font-weight: 600;
}

.kc-profile__state[data-savestate="error"][b-1g1vf0gmw9] {
    color: var(--kc-fail-text);
    font-weight: 600;
}
/* /Components/Pages/Moduler.razor.rz.scp.css */
.kc-mod-ok[b-m31c3xx55n] {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    background: var(--kc-status-ok);
    color: #12693A;
    font-weight: 600;
}

.kc-mod-note[b-m31c3xx55n],
.kc-mod-pending[b-m31c3xx55n],
.kc-mod-answer[b-m31c3xx55n] {
    margin: 0 0 0.6rem;
    font-size: 0.88rem;
    color: var(--kc-navy);
}

.kc-mod-pending[b-m31c3xx55n] {
    font-weight: 600;
}

.kc-mod-said[b-m31c3xx55n] {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--kc-muted);
}

.kc-mod-answer[b-m31c3xx55n] {
    color: var(--kc-muted);
}

.kc-mod-ask[b-m31c3xx55n] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.kc-mod-ask__label[b-m31c3xx55n] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--kc-subtle);
}

.kc-mod-ask__note[b-m31c3xx55n] {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--kc-border-soft);
    border-radius: 8px;
    background: var(--kc-surface);
    resize: vertical;
}

.kc-mod-ask__acts[b-m31c3xx55n] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kc-mod-fine[b-m31c3xx55n] {
    margin: 1.2rem 0 0;
    font-size: 0.85rem;
    color: var(--kc-muted);
    max-width: 44rem;
}

/* A subscription that has stopped entitling: said once, above the tiles. */
.kc-mod-hold[b-m31c3xx55n] {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--kc-status-missed-edge);
    background: var(--kc-status-missed);
    color: var(--kc-navy);
    font-weight: 600;
    max-width: 44rem;
}

.kc-mod-waits[b-m31c3xx55n] {
    color: var(--kc-muted);
}
/* /Components/Pages/Notifieringar.razor.rz.scp.css */
.nf[b-t7kwjdyed3] { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.nf-loading[b-t7kwjdyed3], .nf-denied[b-t7kwjdyed3] { max-width: 1180px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.nf-head[b-t7kwjdyed3] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.nf-title[b-t7kwjdyed3] { margin: 0; font-size: 1.35rem; }
.nf-sub[b-t7kwjdyed3] { margin: 0.25rem 0 0; max-width: 68ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.nf-h2[b-t7kwjdyed3] { margin: 0 0 0.2rem; font-size: 1rem; }
.nf-hint[b-t7kwjdyed3] { margin: 0; color: var(--kc-muted, #666); font-size: 0.8rem; line-height: 1.45; }

.nf-nodepick[b-t7kwjdyed3] { flex: none; display: flex; flex-direction: column; gap: 0.2rem; min-width: 14rem; }
.nf-nodepick > span[b-t7kwjdyed3] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }

.nf-toast[b-t7kwjdyed3], .nf-alert[b-t7kwjdyed3] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.nf-toast[b-t7kwjdyed3] { background: #eff6ff; color: #1e40af; }
.nf-alert[b-t7kwjdyed3] { background: #fef2f2; color: #991b1b; }

.nf-body[b-t7kwjdyed3] { display: grid; grid-template-columns: 19rem 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .nf-body[b-t7kwjdyed3] { grid-template-columns: 1fr; } }

.nf-list[b-t7kwjdyed3] { display: flex; flex-direction: column; gap: 0.2rem; }
.nf-item[b-t7kwjdyed3] {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
    padding: 0.5rem 0.65rem; border: 1px solid transparent; border-radius: 8px;
    background: #f9fafb; cursor: pointer; text-align: left; width: 100%;
}
.nf-item:hover[b-t7kwjdyed3] { background: #f3f4f6; }
.nf-item.is-on[b-t7kwjdyed3] { background: #fff; border-color: #cbd5e1; box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.nf-item-name[b-t7kwjdyed3] { font-size: 0.87rem; font-weight: 600; color: #1f2937; }

.nf-origin[b-t7kwjdyed3] { font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: var(--kc-radius-pill, 999px); }
.nf-origin--own[b-t7kwjdyed3] { background: #d1fae5; color: #065f46; }
.nf-origin--inherited[b-t7kwjdyed3] { background: #e0f2fe; color: #075985; }
.nf-origin--default[b-t7kwjdyed3] { background: #f3f4f6; color: #6b7280; }
.nf-origin--silent[b-t7kwjdyed3] { background: #fee2e2; color: #991b1b; }

.nf-editor[b-t7kwjdyed3] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; min-width: 0; }
.nf-editor-head[b-t7kwjdyed3] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }

.nf-silence[b-t7kwjdyed3] { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #374151; margin-bottom: 0.6rem; }

.nf-stage[b-t7kwjdyed3] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.75rem; margin-bottom: 0.6rem; }
.nf-stage-head[b-t7kwjdyed3] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.nf-stage-n[b-t7kwjdyed3] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; font-weight: 700; }

.nf-row[b-t7kwjdyed3] { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }
.nf-fld[b-t7kwjdyed3] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.nf-fld--grow[b-t7kwjdyed3] { flex: 1 1 14rem; }
.nf-fld > span[b-t7kwjdyed3] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.nf-input[b-t7kwjdyed3], .nf-select[b-t7kwjdyed3] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0;
}
.nf-input--num[b-t7kwjdyed3] { max-width: 8rem; }

.nf-preview[b-t7kwjdyed3] {
    margin: 0.55rem 0 0; padding: 0.4rem 0.55rem; border-radius: 8px;
    background: #f8fafc; color: #475569; font-size: 0.75rem;
}

.nf-targets[b-t7kwjdyed3] { margin-top: 0.7rem; }
.nf-targets-h[b-t7kwjdyed3] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.nf-chips[b-t7kwjdyed3] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.nf-chip[b-t7kwjdyed3] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.6rem; border: 1px solid #e5e7eb; border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.8rem; background: #fff; cursor: pointer;
}
.nf-chip.is-on[b-t7kwjdyed3] { background: #1f2937; border-color: #1f2937; color: #fff; }
.nf-chip input[b-t7kwjdyed3] { width: 0.9rem; height: 0.9rem; }

.nf-warn[b-t7kwjdyed3] {
    margin: 0.5rem 0 0; padding: 0.4rem 0.6rem; border-radius: 8px;
    background: #fffbeb; color: #92400e; font-size: 0.78rem; line-height: 1.45;
}

.nf-add[b-t7kwjdyed3] {
    border: 1px dashed #cbd5e1; background: #fff; border-radius: 8px;
    padding: 0.45rem 0.9rem; font-size: 0.82rem; color: #374151; cursor: pointer;
}
.nf-add:hover[b-t7kwjdyed3] { border-color: #94a3b8; }

.nf-actions[b-t7kwjdyed3] { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
.nf-btn[b-t7kwjdyed3] {
    border: 0; border-radius: 8px; background: #1f2937; color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.nf-btn--ghost[b-t7kwjdyed3] { background: #fff; color: #374151; border: 1px solid #e5e7eb; }
.nf-btn:disabled[b-t7kwjdyed3] { opacity: 0.5; cursor: default; }

.nf-link[b-t7kwjdyed3] { border: 0; background: none; padding: 0; cursor: pointer; font-size: 0.78rem; color: var(--kc-blue, #2563eb); text-decoration: underline; }
.nf-link--danger[b-t7kwjdyed3] { color: #b91c1c; }

.nf-empty[b-t7kwjdyed3] { padding: 2.5rem 1rem; text-align: center; color: var(--kc-muted, #666); }
.nf-empty-ico[b-t7kwjdyed3] { font-size: 1.8rem; margin-bottom: 0.4rem; }
.nf-empty p[b-t7kwjdyed3] { margin: 0.2rem 0; }
.nf-empty-sub[b-t7kwjdyed3] { font-size: 0.8rem; max-width: 48ch; margin-inline: auto; }

.nf-groups[b-t7kwjdyed3] { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #e5e7eb; }
.nf-grouplist[b-t7kwjdyed3] { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.6rem 0; }
.nf-group[b-t7kwjdyed3] { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.nf-dim[b-t7kwjdyed3] { color: #9ca3af; font-size: 0.78rem; }
.nf-groupedit[b-t7kwjdyed3] {
    display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.75rem; background: #f9fafb; border-radius: 10px;
}
/* /Components/Pages/OpsCourses.razor.rz.scp.css */
/* Kitcheck's course library — internal, English, and in the same language as the rest of /ops.
   Panels follow the PlatformSettings idiom: a card per job, each with a tinted header carrying the
   heading and one line saying what the panel is for. */

.oc[b-vdunljzi09] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
    color: var(--kc-ink, #333);
    font-family: var(--kc-font-body, "Segoe UI", system-ui, sans-serif);
}

.oc-loading[b-vdunljzi09], .oc-denied[b-vdunljzi09] {
    max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666);
}
.oc-denied h1[b-vdunljzi09] { color: var(--kc-navy, #324158); margin: 0 0 0.5rem; }

.oc-back[b-vdunljzi09] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; align-self: flex-start; }
.oc-back:hover[b-vdunljzi09] { text-decoration: underline; }

.oc-head[b-vdunljzi09] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.oc-title[b-vdunljzi09] {
    margin: 0; font-size: 1.55rem; font-weight: 700;
    color: var(--kc-navy, #324158); letter-spacing: -0.01em;
}
.oc-sub[b-vdunljzi09] {
    margin: 0.15rem 0 0; max-width: 72ch;
    color: var(--kc-muted, #666); font-size: 0.9rem; line-height: 1.5;
}

/* ---- panels ---- */

.oc-card[b-vdunljzi09] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    overflow: hidden;
}
/* Requests waiting on Kitcheck. Marked only when there are some — an empty queue is not news. */
.oc-card--seats[b-vdunljzi09] { border-left: 4px solid var(--kc-blue, #2563eb); }

.oc-seatreq[b-vdunljzi09] {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
    padding: 0.7rem 0.9rem; margin-bottom: 0.6rem;
    border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb;
}
.oc-seatreq__main[b-vdunljzi09] { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.oc-seatreq__figure[b-vdunljzi09] { font-size: 0.95rem; font-weight: 700; color: #1f2937; }
.oc-seatreq__who[b-vdunljzi09] { font-size: 0.8rem; color: #374151; }
.oc-seatreq__now[b-vdunljzi09] { font-size: 0.76rem; color: #6b7280; }
.oc-seatreq__note[b-vdunljzi09] { font-size: 0.8rem; font-style: italic; color: #374151; }
.oc-seatreq__acts[b-vdunljzi09] { display: flex; gap: 0.45rem; align-items: flex-end; flex-wrap: wrap; }
.oc-seatreq__places[b-vdunljzi09] { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.oc-seatreq__places input[b-vdunljzi09] { width: 5.5rem; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.35rem 0.5rem; font-size: 0.85rem; font-family: inherit; }

.oc-card--report[b-vdunljzi09] { border-color: #bbf7d0; }

.oc-sec[b-vdunljzi09] {
    padding: 0.85rem 1.1rem;
    background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.oc-sec h2[b-vdunljzi09] {
    margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158);
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.oc-hint[b-vdunljzi09] { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--kc-muted, #666); max-width: 78ch; line-height: 1.5; }

.oc-body[b-vdunljzi09] { padding: 1rem 1.1rem; }
.oc-row[b-vdunljzi09] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.oc-none[b-vdunljzi09], .oc-warn[b-vdunljzi09] { margin: 0; padding: 1rem 1.1rem; font-size: 0.85rem; }
.oc-none[b-vdunljzi09] { color: var(--kc-muted, #666); }
.oc-warn[b-vdunljzi09] { color: #9a3412; }
.oc-warn code[b-vdunljzi09], .oc-body code[b-vdunljzi09] {
    font-family: Consolas, "Courier New", monospace; font-size: 0.78rem;
    background: var(--kc-surface-alt, #f3f4f6); padding: 0.05rem 0.3rem; border-radius: 0.25rem;
}

/* ---- tables ---- */

.oc-table[b-vdunljzi09] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.oc-table th[b-vdunljzi09] {
    text-align: left; padding: 0.55rem 1.1rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--kc-muted, #6b7280);
    border-bottom: 1px solid var(--kc-border-soft, #e5e7eb);
}
.oc-table td[b-vdunljzi09] { padding: 0.6rem 1.1rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.oc-table tbody tr:last-child td[b-vdunljzi09] { border-bottom: 0; }
.oc-table tbody tr:hover[b-vdunljzi09] { background: #fafafa; }
.oc-name[b-vdunljzi09] { font-weight: 600; color: var(--kc-navy, #1f2937); }
.oc-muted[b-vdunljzi09] { color: var(--kc-muted, #9ca3af); font-size: 0.8rem; }
/* LE-10: unhandled "Säg till" reports, leading to the editor's list. */
.oc-reports[b-vdunljzi09] {
    display: block; width: fit-content; margin-top: 0.2rem; padding: 0.05rem 0.5rem; border-radius: 999px;
    background: #fef3c7; color: #92400e; font-size: 0.74rem; font-weight: 600; text-decoration: none;
}
.oc-reports:hover[b-vdunljzi09] { text-decoration: underline; }
.oc-actions[b-vdunljzi09] { text-align: right; white-space: nowrap; }

/* ---- state pills ---- */

.oc-state[b-vdunljzi09] {
    display: inline-flex; align-items: center; padding: 0.1rem 0.5rem;
    border-radius: var(--kc-radius-pill, 999px); font-size: 0.68rem; font-weight: 700;
    white-space: nowrap;
}
.oc-state--draft[b-vdunljzi09] { background: #fef3c7; color: #92400e; }
.oc-state--inreview[b-vdunljzi09] { background: #ede9fe; color: #5b21b6; }
.oc-state--published[b-vdunljzi09] { background: #d1fae5; color: #065f46; }
.oc-state--retired[b-vdunljzi09] { background: #f3f4f6; color: #6b7280; }

/* A course's second line belongs to the row above it: no rule between them, and the title cell left
   empty, so two editions read as one course rather than two courses sharing a name. */
.oc-table tr.is-first td[b-vdunljzi09] { border-top: 1px solid var(--kc-border-soft, #e5e7eb); }
.oc-table tbody tr:first-child td[b-vdunljzi09] { border-top: 0; }
.oc-table tr.is-continued td[b-vdunljzi09] { border-bottom: 0; padding-top: 0; }
.oc-table tr.is-continued + tr.is-first td[b-vdunljzi09] { border-top: 1px solid var(--kc-border-soft, #e5e7eb); }

/* ---- controls ---- */

.oc-input[b-vdunljzi09] {
    flex: 1 1 18rem; min-width: 0;
    padding: 0.45rem 0.6rem; border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .15));
    border-radius: 0.4rem; font-size: 0.88rem; background: #fff; font-family: inherit;
}
.oc-input:focus[b-vdunljzi09] { outline: 2px solid var(--kc-blue, #7ac0da); outline-offset: -1px; }

.oc-btn[b-vdunljzi09] {
    display: inline-block; padding: 0.45rem 1rem; border: 1px solid transparent;
    border-radius: 0.45rem; background: var(--kc-navy, #324158); color: #fff;
    font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.oc-btn:hover[b-vdunljzi09] { background: var(--kc-navy-dark, #26313f); }
.oc-btn:disabled[b-vdunljzi09] { opacity: 0.5; cursor: default; }
.oc-btn--ghost[b-vdunljzi09] {
    background: #fff; color: var(--kc-navy, #324158);
    border-color: var(--kc-border-soft, rgba(0, 0, 0, .15));
}
.oc-btn--ghost:hover[b-vdunljzi09] { background: var(--kc-surface-alt, #f3f4f6); }

/* ---- messages ---- */

.oc-toast[b-vdunljzi09], .oc-alert[b-vdunljzi09] { padding: 0.55rem 0.85rem; border-radius: 0.45rem; font-size: 0.85rem; }
.oc-toast[b-vdunljzi09] { background: #ecfdf5; color: #065f46; }
.oc-alert[b-vdunljzi09] { background: #fef2f2; color: #991b1b; }

/* ---- the import report ---- */

/* The figures read before the prose does. Somebody who has just imported a 3.5 GB course wants the
   shape of what arrived at a glance, then the list of what did not. */
.oc-figures[b-vdunljzi09] {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem; margin-bottom: 0.9rem;
}
.oc-figure[b-vdunljzi09] {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.6rem 0.7rem; border-radius: 0.45rem;
    background: var(--kc-surface-alt, #f9fafb); border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .06));
}
.oc-figure b[b-vdunljzi09] { font-size: 1.15rem; color: var(--kc-navy, #324158); }
.oc-figure span[b-vdunljzi09] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-muted, #6b7280); }
.oc-figure.is-warn[b-vdunljzi09] { background: #fff7ed; border-color: #fed7aa; }
.oc-figure.is-warn b[b-vdunljzi09] { color: #9a3412; }

.oc-notes[b-vdunljzi09] { margin: 0 0 1rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.oc-note[b-vdunljzi09] {
    padding: 0.4rem 0.65rem; border-radius: 0.4rem; font-size: 0.82rem; line-height: 1.45;
    border-left: 3px solid transparent;
}
/* Three kinds, three weights. "Not imported" is the one that can cost somebody a section of a course. */
.oc-note--not-imported[b-vdunljzi09] { background: #fef2f2; color: #991b1b; border-left-color: #f87171; }
.oc-note--skipped[b-vdunljzi09] { background: #fff7ed; color: #9a3412; border-left-color: #fdba74; }
.oc-note--gated[b-vdunljzi09] { background: #eff6ff; color: #1e40af; border-left-color: #93c5fd; }

/* ---- retiring and restoring (TR-28) ---- */

/* The question a Retire click asks, in the page: what will change, and the way back. */
.oc-confirm[b-vdunljzi09] {
    margin: 0.9rem 1.1rem 0; padding: 0.8rem 0.95rem;
    border: 1px solid #fecaca; border-left: 4px solid #dc2626; border-radius: 0.45rem; background: #fff7f7;
}
.oc-confirm__title[b-vdunljzi09] { margin: 0; font-weight: 700; color: #7f1d1d; font-size: 0.92rem; }
.oc-confirm__body[b-vdunljzi09] { margin: 0.3rem 0 0.7rem; font-size: 0.85rem; color: #374151; line-height: 1.5; max-width: 78ch; }
.oc-confirm__acts[b-vdunljzi09] { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.oc-btn--danger[b-vdunljzi09] { background: #b91c1c; }
.oc-btn--danger:hover[b-vdunljzi09] { background: #991b1b; }

.oc-retired .oc-table td[b-vdunljzi09] { color: var(--kc-muted, #6b7280); }
.oc-retired .oc-name[b-vdunljzi09] { color: var(--kc-muted, #4b5563); }
/* A Moodle setting that behaves differently here (TR-55) weighs like a skip; something imported faithfully
   that is still worth knowing (partial credit, TR-56) like a gate. */
.oc-note--changed[b-vdunljzi09] { background: #fff7ed; color: #9a3412; border-left-color: #fdba74; }
.oc-note--info[b-vdunljzi09] { background: #eff6ff; color: #1e40af; border-left-color: #93c5fd; }

/* ---- re-import, progress and the stored report (TR-46) ---- */

/* Under the backup's name: where it went last time, with the way there. Text and a glyph, never colour alone. */
.oc-prior[b-vdunljzi09] {
    display: block; margin-top: 0.25rem; font-weight: 400; font-size: 0.78rem;
    color: #9a3412; line-height: 1.4;
}
.oc-prior a[b-vdunljzi09] { color: var(--kc-blue, #2563eb); font-weight: 600; }
/* The two ways in for a backup that only shares a course's name: stacked, so the column stays narrow. */
.oc-choices[b-vdunljzi09] { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.oc-confirm-row td[b-vdunljzi09] { background: var(--kc-surface-alt, #f9fafb); }
/* Scoped to the row: the retire question (TR-28) is an .oc-confirm too, and keeps its own red frame. */
.oc-confirm-row .oc-confirm[b-vdunljzi09] {
    margin: 0; padding: 0.75rem 0.9rem; border: 0; border-left: 3px solid var(--kc-navy, #324158);
    background: var(--kc-surface, #fff); border-radius: 0.4rem;
}
.oc-confirm-row .oc-confirm p[b-vdunljzi09] { margin: 0 0 0.5rem; }
.oc-progress[b-vdunljzi09] {
    display: flex; align-items: center; gap: 0.5rem; margin: 0.9rem 0 0;
    font-size: 0.85rem; color: var(--kc-navy, #324158);
}
.oc-spinner[b-vdunljzi09] {
    width: 0.9rem; height: 0.9rem; border-radius: 50%; flex: none;
    border: 2px solid var(--kc-border-soft, rgba(0, 0, 0, .15)); border-top-color: var(--kc-navy, #324158);
    animation: oc-spin-b-vdunljzi09 0.9s linear infinite;
}
@keyframes oc-spin-b-vdunljzi09 { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .oc-spinner[b-vdunljzi09] { animation: none; } }
.oc-report-meta[b-vdunljzi09] { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--kc-muted, #666); }
.oc-report-meta strong[b-vdunljzi09] { color: var(--kc-navy, #324158); }
.oc-report-link[b-vdunljzi09] { margin-right: 0.35rem; }

/* ---- quizzes people are taking that nobody can sit (TR-34, review) ---- */

/* Above the library, red like a refusal: every learner who reaches one of these is stuck, today. */
.oc-unsittable[b-vdunljzi09] {
    margin: 0.9rem 1.1rem 0; padding: 0.8rem 0.95rem;
    border: 1px solid #fecaca; border-left: 4px solid #dc2626; border-radius: 0.45rem; background: #fff7f7;
}
.oc-unsittable__title[b-vdunljzi09] { margin: 0; font-weight: 700; color: #7f1d1d; font-size: 0.92rem; }
.oc-unsittable__why[b-vdunljzi09] { margin: 0.25rem 0 0.6rem; font-size: 0.82rem; color: #374151; line-height: 1.5; }
.oc-unsittable__list[b-vdunljzi09] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.oc-unsittable__item[b-vdunljzi09] {
    display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.45rem;
    border-top: 1px solid #fde2e2; font-size: 0.82rem; line-height: 1.45; color: #374151;
}
.oc-unsittable__item:first-child[b-vdunljzi09] { border-top: 0; padding-top: 0; }
.oc-unsittable__where b[b-vdunljzi09] { color: var(--kc-navy, #324158); }
.oc-unsittable__problem[b-vdunljzi09] { max-width: 90ch; overflow-wrap: anywhere; }
.oc-unsittable__open[b-vdunljzi09] { width: fit-content; color: var(--kc-blue, #2563eb); font-weight: 600; text-decoration: none; }
.oc-unsittable__open:hover[b-vdunljzi09] { text-decoration: underline; }

/* On the edition's own line, leading to the list above. */
.oc-flag[b-vdunljzi09] {
    display: block; width: fit-content; margin-top: 0.25rem; padding: 0.05rem 0.5rem; border-radius: 999px;
    background: #fee2e2; color: #991b1b; font-size: 0.72rem; font-weight: 700; text-decoration: none;
    white-space: nowrap;
}
.oc-flag:hover[b-vdunljzi09] { text-decoration: underline; }
/* /Components/Pages/OpsCustomerDetail.razor.rz.scp.css */
.ocd[b-4qh7wjbbw2] { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.ocd-loading[b-4qh7wjbbw2], .ocd-denied[b-4qh7wjbbw2] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.ocd-head[b-4qh7wjbbw2] { margin-bottom: 1rem; }
.ocd-back[b-4qh7wjbbw2] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; }
.ocd-back:hover[b-4qh7wjbbw2] { text-decoration: underline; }
.ocd-title[b-4qh7wjbbw2] { margin: 0.3rem 0 0; font-size: 1.35rem; color: var(--kc-navy, #324158); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ocd-badge[b-4qh7wjbbw2] {
    font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem; border-radius: 999px; background: #eef2ff; color: #3730a3;
}
.ocd-sub[b-4qh7wjbbw2] { margin: 0.25rem 0 0; max-width: 78ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.ocd-readonly[b-4qh7wjbbw2] { margin: 0.5rem 0 0; padding: 0.45rem 0.7rem; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 0.82rem; }

.ocd-ok[b-4qh7wjbbw2], .ocd-error[b-4qh7wjbbw2] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.ocd-ok[b-4qh7wjbbw2] { background: #ecfdf5; color: #065f46; }
.ocd-error[b-4qh7wjbbw2] { background: #fef2f2; color: #991b1b; }

.ocd-card[b-4qh7wjbbw2] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; margin-bottom: 1rem; min-width: 0; overflow-x: auto; }
.ocd-h2[b-4qh7wjbbw2] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.ocd-h3[b-4qh7wjbbw2] { margin: 1rem 0 0.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #9ca3af; }
.ocd-now[b-4qh7wjbbw2] { margin: 0 0 0.7rem; font-size: 0.88rem; color: #1f2937; }

.ocd-form[b-4qh7wjbbw2] { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ocd-fld[b-4qh7wjbbw2] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ocd-fld--grow[b-4qh7wjbbw2] { flex: 1 1 14rem; }
.ocd-fld--sm[b-4qh7wjbbw2] { width: 6.5rem; }
.ocd-fld > span[b-4qh7wjbbw2] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.ocd-input[b-4qh7wjbbw2] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0; font-family: inherit;
}
.ocd-input:disabled[b-4qh7wjbbw2] { background: #f9fafb; color: #9ca3af; }
.ocd-fine[b-4qh7wjbbw2] { margin: 0.6rem 0 0; font-size: 0.75rem; color: #9ca3af; max-width: 78ch; line-height: 1.5; }
.ocd-pack-note[b-4qh7wjbbw2] { margin: 0.6rem 0 0; font-size: 0.8rem; color: #374151; max-width: 78ch; line-height: 1.5; }
.ocd-pack-note--no[b-4qh7wjbbw2] { color: #9a3412; }

.ocd-btn[b-4qh7wjbbw2] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ocd-btn:disabled[b-4qh7wjbbw2] { opacity: 0.5; cursor: default; }
.ocd-btn--ghost[b-4qh7wjbbw2] { background: #fff; color: #1f2937; border: 1px solid #d1d5db; }
.ocd-btn--sm[b-4qh7wjbbw2] { padding: 0.25rem 0.6rem; font-size: 0.75rem; }

.ocd-table[b-4qh7wjbbw2] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ocd-table th[b-4qh7wjbbw2] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.ocd-table td[b-4qh7wjbbw2] { padding: 0.45rem 0.5rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.ocd-name[b-4qh7wjbbw2] { font-weight: 600; color: #1f2937; white-space: nowrap; }
.ocd-dim[b-4qh7wjbbw2] { color: #6b7280; }
.ocd-reason[b-4qh7wjbbw2] { color: #374151; max-width: 32ch; }
.ocd-warn[b-4qh7wjbbw2] { color: #9a3412; font-weight: 600; }
.ocd-on[b-4qh7wjbbw2] { color: #065f46; font-weight: 600; }
.ocd-off[b-4qh7wjbbw2] { color: #9ca3af; }
.ocd-ended td[b-4qh7wjbbw2] { color: #9ca3af; text-decoration: line-through; text-decoration-color: #d1d5db; }
.ocd-ended td:last-child[b-4qh7wjbbw2] { text-decoration: none; }

.ocd-inline[b-4qh7wjbbw2] { display: inline-flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.ocd-inline .ocd-input[b-4qh7wjbbw2] { width: 14rem; }
.ocd-handover[b-4qh7wjbbw2] { margin-top: 0.4rem; }
/* /Components/Pages/OpsCustomers.razor.rz.scp.css */
.oc[b-tpdynqbnxn] { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.oc-loading[b-tpdynqbnxn], .oc-denied[b-tpdynqbnxn] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.oc-head[b-tpdynqbnxn] { margin-bottom: 1rem; }
.oc-title[b-tpdynqbnxn] { margin: 0; font-size: 1.35rem; color: var(--kc-navy, #324158); }
.oc-sub[b-tpdynqbnxn] { margin: 0.25rem 0 0.4rem; max-width: 72ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.oc-back[b-tpdynqbnxn] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; }
.oc-back:hover[b-tpdynqbnxn] { text-decoration: underline; }
.oc-back + .oc-back[b-tpdynqbnxn] { margin-left: 1.1rem; }
.oc-h2[b-tpdynqbnxn] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

.oc-ok[b-tpdynqbnxn], .oc-error[b-tpdynqbnxn] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.oc-ok[b-tpdynqbnxn] { background: #ecfdf5; color: #065f46; }
.oc-error[b-tpdynqbnxn] { background: #fef2f2; color: #991b1b; }

.oc-new[b-tpdynqbnxn] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; margin-bottom: 1.25rem; }
.oc-form[b-tpdynqbnxn] { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.oc-fld[b-tpdynqbnxn] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.oc-fld--grow[b-tpdynqbnxn] { flex: 1 1 14rem; }
.oc-fld > span[b-tpdynqbnxn] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.oc-input[b-tpdynqbnxn] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0; font-family: inherit;
}
.oc-fine[b-tpdynqbnxn] { margin: 0.7rem 0 0; font-size: 0.75rem; color: #9ca3af; max-width: 72ch; line-height: 1.5; }

.oc-btn[b-tpdynqbnxn] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.oc-btn:disabled[b-tpdynqbnxn] { opacity: 0.5; cursor: default; }

.oc-list[b-tpdynqbnxn] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; }
.oc-table[b-tpdynqbnxn] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.oc-table th[b-tpdynqbnxn] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.oc-table td[b-tpdynqbnxn] { padding: 0.5rem; border-bottom: 1px solid #f3f4f6; white-space: nowrap; }
.oc-name[b-tpdynqbnxn] { font-weight: 600; color: #1f2937; }
.oc-dim[b-tpdynqbnxn] { color: #6b7280; }
.oc-warn[b-tpdynqbnxn] { color: #9a3412; font-weight: 600; }

/* The module pick. Its own block below the text fields rather than inside .oc-form: the battery
   addresses those five fields by position, and a checkbox among them would move every index. */
.oc-modules[b-tpdynqbnxn] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem;
    margin: 0.8rem 0 0; padding: 0.55rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 8px;
}
.oc-modules legend[b-tpdynqbnxn] {
    padding: 0 0.3rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280;
}
.oc-mod[b-tpdynqbnxn] { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: #1f2937; cursor: pointer; }
.oc-mod--core[b-tpdynqbnxn] { cursor: default; color: #6b7280; }
.oc-mod em[b-tpdynqbnxn] { font-style: normal; font-size: 0.72rem; color: #9ca3af; }
.oc-actions[b-tpdynqbnxn] { margin-top: 0.8rem; display: flex; justify-content: flex-end; }

.oc-handover[b-tpdynqbnxn] { margin-top: 0.5rem; }

.oc-btn--sm[b-tpdynqbnxn] { padding: 0.25rem 0.6rem; font-size: 0.75rem; margin-left: 0.4rem; }

/* Kitcheck's own organisation: listed, opened like any other, never counted as a customer. */
.oc-vendor td[b-tpdynqbnxn] { background: #f8fafc; }
.oc-vendor .oc-name[b-tpdynqbnxn] { color: #324158; }

.oc-manage[b-tpdynqbnxn] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; font-weight: 600; }
.oc-manage:hover[b-tpdynqbnxn] { text-decoration: underline; }

/* Nine columns of nowrap cells outgrow the card well before a phone does: scroll inside it, never past it. */
.oc-list[b-tpdynqbnxn] { overflow-x: auto; }

/* What customers are waiting on: above the form, in the warning colour the "Invited, not yet activated"
   column uses, because somebody outside Kitcheck has been told it is on its way. */
.oc-requests[b-tpdynqbnxn] { border: 1px solid #fed7aa; border-radius: 10px; padding: 0.75rem 1rem; background: #fff7ed; margin-bottom: 1.25rem; }
.oc-requests__list[b-tpdynqbnxn] { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; color: #1f2937; }
.oc-requests__list li[b-tpdynqbnxn] { padding: 0.3rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.oc-requests__list li + li[b-tpdynqbnxn] { border-top: 1px solid #ffedd5; }
.oc-requests__note[b-tpdynqbnxn] { color: #6b7280; font-style: italic; }
.oc-requests__list .oc-manage[b-tpdynqbnxn] { margin-left: auto; }
/* /Components/Pages/OpsPlans.razor.rz.scp.css */
.op[b-ondephs5fo] { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.op-loading[b-ondephs5fo], .op-denied[b-ondephs5fo] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.op-head[b-ondephs5fo] { margin-bottom: 1rem; }
.op-back[b-ondephs5fo] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; margin-right: 1rem; }
.op-back:hover[b-ondephs5fo] { text-decoration: underline; }
.op-title[b-ondephs5fo] { margin: 0.3rem 0 0; font-size: 1.35rem; color: var(--kc-navy, #324158); }
.op-sub[b-ondephs5fo] { margin: 0.25rem 0 0; max-width: 78ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.op-readonly[b-ondephs5fo] { margin: 0.5rem 0 0; padding: 0.45rem 0.7rem; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 0.82rem; }

.op-ok[b-ondephs5fo], .op-error[b-ondephs5fo] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.op-ok[b-ondephs5fo] { background: #ecfdf5; color: #065f46; }
.op-error[b-ondephs5fo] { background: #fef2f2; color: #991b1b; }

.op-card[b-ondephs5fo] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; margin-bottom: 1rem; min-width: 0; overflow-x: auto; }
.op-editor[b-ondephs5fo] { border-color: #c7d2fe; }
.op-h2[b-ondephs5fo] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.op-h3[b-ondephs5fo] { margin: 1rem 0 0.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #9ca3af; }
.op-now[b-ondephs5fo] { margin: 0 0 0.7rem; font-size: 0.88rem; color: #1f2937; }

.op-form[b-ondephs5fo] { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.6rem; }
.op-fld[b-ondephs5fo] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.op-fld--grow[b-ondephs5fo] { flex: 1 1 14rem; }
.op-fld > span[b-ondephs5fo] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.op-input[b-ondephs5fo] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0; font-family: inherit; box-sizing: border-box;
}
.op-input--num[b-ondephs5fo] { width: 8rem; }
.op-input:disabled[b-ondephs5fo] { background: #f9fafb; color: #9ca3af; }
.op-fine[b-ondephs5fo] { margin: 0.6rem 0 0; font-size: 0.75rem; color: #9ca3af; max-width: 78ch; line-height: 1.5; }

.op-btn[b-ondephs5fo] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.op-btn:disabled[b-ondephs5fo] { opacity: 0.5; cursor: default; }
.op-btn--ghost[b-ondephs5fo] { background: #fff; color: #1f2937; border: 1px solid #d1d5db; }
.op-btn--sm[b-ondephs5fo] { padding: 0.25rem 0.6rem; font-size: 0.75rem; }

.op-table[b-ondephs5fo] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.op-table th[b-ondephs5fo] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.op-table td[b-ondephs5fo] { padding: 0.45rem 0.5rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.op-plans tr.is-editing td[b-ondephs5fo] { background: #eef2ff; }
.op-name[b-ondephs5fo] { font-weight: 600; color: #1f2937; white-space: nowrap; }
.op-code[b-ondephs5fo] { margin-left: 0.4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; color: #6b7280; font-weight: 400; text-transform: none; letter-spacing: 0; }
.op-badge[b-ondephs5fo] {
    margin-left: 0.35rem; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem; border-radius: 999px; background: #f3f4f6; color: #4b5563;
}
.op-badge--vendor[b-ondephs5fo] { background: #eef2ff; color: #3730a3; }
.op-dim[b-ondephs5fo] { color: #6b7280; }
.op-reason[b-ondephs5fo] { color: #374151; max-width: 32ch; }
.op-warn[b-ondephs5fo] { margin: 0.4rem 0 0; color: #9a3412; font-size: 0.82rem; font-weight: 600; }

.op-preview[b-ondephs5fo] { margin-top: 0.9rem; padding: 0.8rem 0.9rem; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.op-count[b-ondephs5fo] { margin: 0 0 0.4rem; font-size: 0.9rem; color: #1f2937; }
.op-changes[b-ondephs5fo] { margin: 0 0 0.4rem 1.1rem; padding: 0; font-size: 0.85rem; color: #1f2937; }
.op-refused[b-ondephs5fo] { margin: 0; color: #991b1b; font-size: 0.85rem; font-weight: 600; }
/* /Components/Pages/OpsQuestionBankHistory.razor.rz.scp.css */
.qh[b-rnb9isiy0l] {
    display: flex; flex-direction: column; gap: 1rem; max-width: 1100px;
    margin: 0 auto; padding: 1.25rem 1rem 3rem;
    color: var(--kc-ink, #333); font-family: var(--kc-font-body, "Segoe UI", system-ui, sans-serif);
}
.qh-loading[b-rnb9isiy0l], .qh-denied[b-rnb9isiy0l] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }
.qh-denied h1[b-rnb9isiy0l] { color: var(--kc-navy, #324158); margin: 0 0 0.5rem; }

.qh-back[b-rnb9isiy0l] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; align-self: flex-start; }
.qh-back:hover[b-rnb9isiy0l] { text-decoration: underline; }
.qh-link[b-rnb9isiy0l] { color: var(--kc-blue, #2563eb); margin-left: 0.35rem; }

.qh-head[b-rnb9isiy0l] { display: flex; flex-direction: column; gap: 0.35rem; }
.qh-title[b-rnb9isiy0l] { margin: 0; font-size: 1.55rem; font-weight: 700; color: var(--kc-navy, #324158); letter-spacing: -0.01em; }
.qh-sub[b-rnb9isiy0l] { margin: 0; max-width: 85ch; color: var(--kc-muted, #555); font-size: 0.9rem; line-height: 1.5; }
.qh-sub strong[b-rnb9isiy0l] { color: var(--kc-navy, #324158); }

.qh-alert[b-rnb9isiy0l] { padding: 0.55rem 0.85rem; border-radius: 0.45rem; font-size: 0.85rem; background: #fef2f2; color: #991b1b; }

.qh-card[b-rnb9isiy0l] {
    background: var(--kc-surface, #fff); border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem); box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    overflow: hidden;
}
.qh-sec[b-rnb9isiy0l] {
    padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.qh-sec h2[b-rnb9isiy0l] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158); }
.qh-hint[b-rnb9isiy0l] { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--kc-muted, #666); max-width: 90ch; }
.qh-none[b-rnb9isiy0l] { margin: 0; padding: 1rem 1.1rem; font-size: 0.85rem; color: var(--kc-muted, #666); }

.qh-list[b-rnb9isiy0l] { list-style: none; margin: 0; padding: 0; }
.qh-entry[b-rnb9isiy0l] {
    display: grid; grid-template-columns: 11rem 1fr; gap: 0.75rem;
    padding: 0.7rem 1.1rem; border-bottom: 1px solid #f3f4f6; font-size: 0.86rem;
}
.qh-entry:last-child[b-rnb9isiy0l] { border-bottom: 0; }
.qh-entry__when[b-rnb9isiy0l] { display: flex; flex-direction: column; gap: 0.1rem; color: var(--kc-muted, #555); font-variant-numeric: tabular-nums; }
.qh-entry__who[b-rnb9isiy0l] { font-weight: 600; color: var(--kc-navy, #1f2937); }
.qh-entry__line[b-rnb9isiy0l] { margin: 0; font-weight: 600; color: var(--kc-ink, #1f2937); }
.qh-entry__note[b-rnb9isiy0l] { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--kc-muted, #555); }
.qh-entry__review[b-rnb9isiy0l] { margin: 0.35rem 0 0; font-size: 0.82rem; }
.qh-changes[b-rnb9isiy0l] { margin: 0.35rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.15rem; }
.qh-dim[b-rnb9isiy0l] { color: var(--kc-muted, #555); }

@media (max-width: 720px) {
    .qh-entry[b-rnb9isiy0l] { grid-template-columns: 1fr; gap: 0.3rem; }
}
/* /Components/Pages/OpsQuestionRegrade.razor.rz.scp.css */
.qr[b-z5m72s9r8o] {
    display: flex; flex-direction: column; gap: 1rem; max-width: 1240px;
    margin: 0 auto; padding: 1.25rem 1rem 3rem;
    color: var(--kc-ink, #333); font-family: var(--kc-font-body, "Segoe UI", system-ui, sans-serif);
}
.qr-loading[b-z5m72s9r8o], .qr-denied[b-z5m72s9r8o] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }
.qr-denied h1[b-z5m72s9r8o] { color: var(--kc-navy, #324158); margin: 0 0 0.5rem; }

.qr-back[b-z5m72s9r8o] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; align-self: flex-start; }
.qr-back:hover[b-z5m72s9r8o] { text-decoration: underline; }

.qr-head[b-z5m72s9r8o] { display: flex; flex-direction: column; gap: 0.35rem; }
.qr-title[b-z5m72s9r8o] { margin: 0; font-size: 1.55rem; font-weight: 700; color: var(--kc-navy, #324158); letter-spacing: -0.01em; }
.qr-sub[b-z5m72s9r8o] { margin: 0; max-width: 92ch; color: var(--kc-muted, #555); font-size: 0.9rem; line-height: 1.5; }

.qr-alert[b-z5m72s9r8o] { padding: 0.55rem 0.85rem; border-radius: 0.45rem; font-size: 0.85rem; background: #fef2f2; color: #991b1b; }
.qr-toast[b-z5m72s9r8o] { padding: 0.55rem 0.85rem; border-radius: 0.45rem; font-size: 0.85rem; background: #ecfdf5; color: #065f46; }
/* Review round 1: a correction a later edit corrected again — read only, pointing at the latest. Amber, not red:
   nothing went wrong, the work is elsewhere. */
.qr-superseded[b-z5m72s9r8o] { background: #fffbeb; color: #78350f; display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; }
.qr-superseded .qr-back[b-z5m72s9r8o] { align-self: auto; font-weight: 600; }

.qr-card[b-z5m72s9r8o] {
    background: var(--kc-surface, #fff); border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem); box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    overflow: hidden;
}
.qr-sec[b-z5m72s9r8o] {
    padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.qr-sec h2[b-z5m72s9r8o] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158); }
.qr-hint[b-z5m72s9r8o] { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--kc-muted, #666); max-width: 95ch; }
.qr-none[b-z5m72s9r8o] { margin: 0; padding: 1rem 1.1rem; font-size: 0.85rem; color: var(--kc-muted, #666); }
.qr-check[b-z5m72s9r8o] { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.5rem; font-size: 0.82rem; }

.qr-changes[b-z5m72s9r8o] { margin: 0; padding: 0.75rem 1.1rem 0.25rem 2.3rem; font-size: 0.86rem; display: flex; flex-direction: column; gap: 0.15rem; }
.qr-wordings[b-z5m72s9r8o] { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0.75rem 1.1rem 1rem; }
.qr-wording h3[b-z5m72s9r8o] { margin: 0 0 0.3rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--kc-muted, #555); }
.qr-wording__prompt[b-z5m72s9r8o] { margin: 0 0 0.4rem; font-weight: 600; font-size: 0.88rem; }
/* TR-06: a multi-answer wording's scoring rule, which decides what its shares earn. */
.qr-wording__rule[b-z5m72s9r8o] { margin: -0.2rem 0 0.4rem; font-size: 0.78rem; color: #4b5563; }
.qr-wording__options[b-z5m72s9r8o] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; }
.qr-wording__options li[b-z5m72s9r8o] { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.3rem; background: #f8fafc; }
.qr-wording__options li.is-right[b-z5m72s9r8o] { background: #ecfdf5; }
.qr-share[b-z5m72s9r8o] { font-variant-numeric: tabular-nums; color: var(--kc-muted, #555); }

.qr-tablewrap[b-z5m72s9r8o] { overflow-x: auto; }
.qr-table[b-z5m72s9r8o] { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.qr-table th[b-z5m72s9r8o] {
    text-align: left; padding: 0.5rem 0.7rem; font-size: 0.68rem; text-transform: uppercase; white-space: nowrap;
    letter-spacing: 0.04em; color: var(--kc-muted, #6b7280); border-bottom: 1px solid var(--kc-border-soft, #e5e7eb);
}
.qr-table td[b-z5m72s9r8o] { padding: 0.5rem 0.7rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.qr-num[b-z5m72s9r8o] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qr-ref[b-z5m72s9r8o], .qr-date[b-z5m72s9r8o] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qr-row--verdict td[b-z5m72s9r8o] { background: #fffbeb; }
.qr-verdict[b-z5m72s9r8o] { font-size: 0.75rem; color: var(--kc-muted, #555); margin-left: 0.25rem; }
.qr-verdict--changes[b-z5m72s9r8o] { color: #92400e; font-weight: 700; }
.qr-dim[b-z5m72s9r8o] { color: var(--kc-muted, #555); }
.qr-held[b-z5m72s9r8o] { display: block; font-size: 0.75rem; max-width: 26ch; }
.qr-logrow td[b-z5m72s9r8o], .qr-withdrawrow td[b-z5m72s9r8o] { padding-top: 0; }
.qr-log[b-z5m72s9r8o] { font-size: 0.78rem; color: var(--kc-muted, #555); }
.qr-sr[b-z5m72s9r8o] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.qr-foot[b-z5m72s9r8o] { display: flex; align-items: flex-end; gap: 0.8rem; flex-wrap: wrap; padding: 0.85rem 1.1rem; border-top: 1px solid #f3f4f6; }
.qr-reason[b-z5m72s9r8o] { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 28rem; font-size: 0.8rem; font-weight: 600; }
.qr-input[b-z5m72s9r8o] {
    border: 1px solid var(--kc-border, #d1d5db); border-radius: 0.4rem; padding: 0.4rem 0.6rem;
    font-size: 0.85rem; font-family: inherit; min-width: 16rem;
}
.qr-btn[b-z5m72s9r8o] {
    border: 0; border-radius: 0.45rem; background: var(--kc-navy, #324158); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.qr-btn:disabled[b-z5m72s9r8o] { opacity: 0.5; cursor: default; }
.qr-btn--ghost[b-z5m72s9r8o] { background: transparent; color: var(--kc-navy, #324158); border: 1px solid var(--kc-border, #d1d5db); }
.qr-btn--danger[b-z5m72s9r8o] { background: #b91c1c; }
.qr-withdraw[b-z5m72s9r8o] { margin-left: 0.4rem; padding: 0.2rem 0.6rem; font-size: 0.78rem; }
.qr-confirm[b-z5m72s9r8o] {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.6rem 0.75rem;
    border-radius: 0.45rem; background: #fef2f2; border: 1px solid #fecaca; font-size: 0.84rem;
}
.qr-confirm p[b-z5m72s9r8o] { margin: 0; flex: 1 1 100%; }

@media (max-width: 820px) {
    .qr-wordings[b-z5m72s9r8o] { grid-template-columns: 1fr; }
}
/* /Components/Pages/OpsRetention.razor.rz.scp.css */
.or[b-afrv8w18ec] {
    display: flex; flex-direction: column; gap: 1rem; max-width: 1200px;
    margin: 0 auto; padding: 1.25rem 1rem 3rem;
    color: var(--kc-ink, #333); font-family: var(--kc-font-body, "Segoe UI", system-ui, sans-serif);
}
.or-loading[b-afrv8w18ec], .or-denied[b-afrv8w18ec] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }
.or-denied h1[b-afrv8w18ec] { color: var(--kc-navy, #324158); margin: 0 0 0.5rem; }

.or-back[b-afrv8w18ec] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; align-self: flex-start; }
.or-back:hover[b-afrv8w18ec] { text-decoration: underline; }

.or-head[b-afrv8w18ec] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.or-title[b-afrv8w18ec] { margin: 0; font-size: 1.55rem; font-weight: 700; color: var(--kc-navy, #324158); letter-spacing: -0.01em; }
.or-sub[b-afrv8w18ec] { margin: 0.15rem 0 0; max-width: 78ch; color: var(--kc-muted, #666); font-size: 0.9rem; line-height: 1.5; }
.or-sub a[b-afrv8w18ec] { color: var(--kc-blue, #2563eb); }

.or-alert[b-afrv8w18ec] { padding: 0.55rem 0.85rem; border-radius: 0.45rem; font-size: 0.85rem; background: #fef2f2; color: #991b1b; }

/* The mode is the first thing on the page and never only a colour: the word says it. */
.or-mode[b-afrv8w18ec] {
    display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: baseline;
    padding: 0.7rem 0.95rem; border-radius: 0.5rem; font-size: 0.88rem; line-height: 1.5;
}
.or-mode.is-report[b-afrv8w18ec] { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
.or-mode.is-enforcing[b-afrv8w18ec] { background: #fef2f2; color: #7f1d1d; border: 1px solid #fecaca; }

.or-card[b-afrv8w18ec] {
    background: var(--kc-surface, #fff); border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem); box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    overflow: hidden;
}
.or-sec[b-afrv8w18ec] {
    padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.or-sec h2[b-afrv8w18ec] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158); }
.or-hint[b-afrv8w18ec] { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--kc-muted, #666); max-width: 90ch; }
.or-none[b-afrv8w18ec] { margin: 0; padding: 1rem 1.1rem; font-size: 0.85rem; color: var(--kc-muted, #666); }

.or-table[b-afrv8w18ec] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.or-table th[b-afrv8w18ec] {
    text-align: left; padding: 0.55rem 1.1rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--kc-muted, #6b7280); border-bottom: 1px solid var(--kc-border-soft, #e5e7eb);
}
.or-table td[b-afrv8w18ec] { padding: 0.55rem 1.1rem; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
.or-table tbody tr:last-child td[b-afrv8w18ec] { border-bottom: 0; }
.or-num[b-afrv8w18ec] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.or-name[b-afrv8w18ec] { font-weight: 600; color: var(--kc-navy, #1f2937); white-space: nowrap; }
.or-dim[b-afrv8w18ec] { color: var(--kc-muted, #6b7280); }

.or-foot[b-afrv8w18ec] { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.75rem 1.1rem; border-top: 1px solid #f3f4f6; font-size: 0.8rem; }
.or-btn[b-afrv8w18ec] {
    border: 0; border-radius: 0.45rem; background: var(--kc-navy, #324158); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.or-btn:disabled[b-afrv8w18ec] { opacity: 0.5; cursor: default; }

.or-notes[b-afrv8w18ec] { margin: 0; padding: 0.85rem 1.1rem 0.85rem 2.2rem; font-size: 0.85rem; line-height: 1.55; display: flex; flex-direction: column; gap: 0.35rem; }

@media (max-width: 820px) {
    .or-table[b-afrv8w18ec] { display: block; overflow-x: auto; }
    .or-name[b-afrv8w18ec] { white-space: normal; }
}
/* /Components/Pages/OpsStorage.razor.rz.scp.css */
/* Storage (/ops/lagring) — the file store, moving it, and what is in it. On the blue page frame (.kc-blueframe in
   kitcheck-design.css) like the rest of Platform Administration: white cards on the blue, English, internal. */

.os[b-673oudpyg4] {
    color: var(--kc-ink, #333);
    font-family: var(--kc-font-body, "Segoe UI", system-ui, sans-serif);
}

/* The way back to the hub, in the eyebrow where the page says where it is. */
.os-crumb[b-673oudpyg4] { color: inherit; text-underline-offset: 2px; }
.os-crumb:hover[b-673oudpyg4] { color: var(--kc-heading-ink); }

/* Cards */
.os-card[b-673oudpyg4] { overflow: hidden; }
.os-sec[b-673oudpyg4] {
    padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef);
    border-bottom: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .08));
}
.os-sec h2[b-673oudpyg4] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158); }
.os-hint[b-673oudpyg4] { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--kc-muted, #666); max-width: 90ch; }
.os-body[b-673oudpyg4] { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.os-none[b-673oudpyg4] { margin: 0; padding: 1rem 1.1rem; font-size: 0.85rem; color: var(--kc-muted, #666); }
.os-scroll[b-673oudpyg4] { overflow-x: auto; }

/* The folder the store is in, said large enough to be read from across a desk. */
.os-folder[b-673oudpyg4] { margin: 0; }
.os-folder code[b-673oudpyg4] { font-size: 1.05rem; font-weight: 600; color: var(--kc-navy, #324158); word-break: break-all; }

.os-note[b-673oudpyg4] {
    margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.45rem; font-size: 0.85rem;
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; max-width: 100ch;
}
.os-note--warn[b-673oudpyg4] { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.os-alert[b-673oudpyg4] { margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.45rem; font-size: 0.85rem; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* The headline numbers. "Saved by sharing" is the one worth looking at — it is the whole reason the
   dedup exists, and a figure nobody can see is a feature nobody believes in. */
.os-figures[b-673oudpyg4] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.os-figure[b-673oudpyg4] {
    display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.7rem; border-radius: 0.45rem;
    background: var(--kc-surface-alt, #f9fafb); border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .06));
}
.os-figure b[b-673oudpyg4] { font-size: 1.15rem; color: var(--kc-navy, #324158); }
.os-figure span[b-673oudpyg4] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-muted, #6b7280); }
.os-figure.is-good[b-673oudpyg4] { background: #ecfdf5; border-color: #a7f3d0; }
.os-figure.is-good b[b-673oudpyg4] { color: #065f46; }
.os-figure.is-warn[b-673oudpyg4] { background: #fff7ed; border-color: #fed7aa; }
.os-figure.is-warn b[b-673oudpyg4] { color: #9a3412; }

/* The move: where to, the checks, and the progress. */
.os-label[b-673oudpyg4] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-muted, #666); }
.os-row[b-673oudpyg4] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
.os-input[b-673oudpyg4] {
    flex: 1 1 320px; min-width: 0; padding: 0.5rem 0.65rem; border: 1px solid var(--kc-border-soft, rgba(0,0,0,.2));
    border-radius: 0.4rem; font-size: 0.9rem; font-family: Consolas, "Courier New", monospace; background: #fff;
}
.os-input:focus[b-673oudpyg4] { outline: 2px solid var(--kc-blue, #7ac0da); outline-offset: -1px; }

.os-checks[b-673oudpyg4] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.os-check[b-673oudpyg4] {
    display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.55rem 0.75rem; border-radius: 0.45rem;
    border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1)); font-size: 0.85rem;
}
.os-check > div[b-673oudpyg4] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.os-check__mark[b-673oudpyg4] {
    flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem;
}
.os-check__title[b-673oudpyg4] { font-weight: 600; color: var(--kc-navy, #324158); }
.os-check__detail[b-673oudpyg4] { color: #374151; overflow-wrap: anywhere; }
.os-check__fix[b-673oudpyg4] { color: #7f1d1d; }
.os-check--pass[b-673oudpyg4] { background: #f0fdf4; border-color: #bbf7d0; }
.os-check--pass .os-check__mark[b-673oudpyg4] { background: #16a34a; color: #fff; }
.os-check--fail[b-673oudpyg4] { background: #fef2f2; border-color: #fecaca; }
.os-check--fail .os-check__mark[b-673oudpyg4] { background: #b91c1c; color: #fff; }
.os-check--skip[b-673oudpyg4] { background: #f9fafb; color: var(--kc-muted, #6b7280); }
.os-check--skip .os-check__mark[b-673oudpyg4] { background: #e5e7eb; color: #6b7280; }
.os-check--skip .os-check__title[b-673oudpyg4] { color: var(--kc-muted, #6b7280); font-weight: 500; }

.os-ready[b-673oudpyg4] { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 0.9rem; border-radius: 0.5rem; background: #f0fdf4; border: 1px solid #bbf7d0; }
.os-ready p[b-673oudpyg4] { margin: 0; font-size: 0.88rem; }

.os-phase[b-673oudpyg4] { margin: 0; font-size: 0.95rem; }
.os-meta[b-673oudpyg4] { margin: 0; font-size: 0.82rem; color: #4b5563; overflow-wrap: anywhere; }
.os-progress[b-673oudpyg4] { height: 0.8rem; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.os-progress > span[b-673oudpyg4] { display: block; height: 100%; background: var(--kc-navy, #324158); transition: width 0.4s ease; }

.os-filter[b-673oudpyg4] { display: flex; align-items: center; gap: 0.45rem; font-size: 0.83rem; color: #4b5563; cursor: pointer; }

.os-table[b-673oudpyg4] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.os-table th[b-673oudpyg4] {
    text-align: left; padding: 0.55rem 1.1rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--kc-muted, #6b7280); border-bottom: 1px solid var(--kc-border-soft, #e5e7eb);
}
.os-table td[b-673oudpyg4] { padding: 0.55rem 1.1rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.os-table tbody tr:last-child td[b-673oudpyg4] { border-bottom: 0; }
.os-table tbody tr:hover[b-673oudpyg4] { background: #fafafa; }
.os-table tr.is-gone[b-673oudpyg4] { opacity: 0.5; }
.os-table code[b-673oudpyg4] { word-break: break-all; }
.os-name[b-673oudpyg4] { font-weight: 600; color: var(--kc-navy, #1f2937); }
.os-dim[b-673oudpyg4] { color: var(--kc-muted, #9ca3af); }
.os-num[b-673oudpyg4] { white-space: nowrap; }
.os-left[b-673oudpyg4] { display: block; font-size: 0.78rem; margin-top: 0.2rem; max-width: 36ch; }
.os-actions[b-673oudpyg4] { text-align: right; white-space: nowrap; }
.os-ready .os-actions[b-673oudpyg4], .os-move .os-actions[b-673oudpyg4] { text-align: left; white-space: normal; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.os-pill[b-673oudpyg4] {
    display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.4rem;
    border-radius: var(--kc-radius-pill, 999px); font-size: 0.66rem; font-weight: 700;
}
.os-pill--shared[b-673oudpyg4] { background: #eff6ff; color: #1e40af; margin-left: 0; }
.os-pill--gone[b-673oudpyg4] { background: #f3f4f6; color: #6b7280; margin-left: 0; }
.os-pill--hold[b-673oudpyg4] { background: #fef2f2; color: #991b1b; }
.os-pill--ok[b-673oudpyg4] { background: #d1fae5; color: #065f46; margin-left: 0; }

.os-btn[b-673oudpyg4] {
    min-height: 2.25rem; padding: 0.4rem 0.9rem; border: 1px solid transparent; border-radius: 0.4rem;
    background: var(--kc-navy, #324158); color: #fff; font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.os-btn:disabled[b-673oudpyg4] { opacity: 0.5; cursor: default; }
.os-btn--ghost[b-673oudpyg4] { background: #fff; color: #374151; border-color: var(--kc-border-soft, rgba(0, 0, 0, .15)); }
.os-btn--ghost:hover:not(:disabled)[b-673oudpyg4] { background: var(--kc-surface-alt, #f3f4f6); }
/* Two-step, because this is the one button on the platform that destroys bytes — and the one that starts hours of copying. */
.os-btn--danger[b-673oudpyg4] { background: #b91c1c; }
.os-btn--danger:hover:not(:disabled)[b-673oudpyg4] { background: #7f1d1d; }

@media (max-width: 760px) {
    .os-table th[b-673oudpyg4], .os-table td[b-673oudpyg4] { padding: 0.5rem 0.7rem; }
    .os-folder code[b-673oudpyg4] { font-size: 0.95rem; }
}
/* /Components/Pages/OpsUsers.razor.rz.scp.css */
/* The people console. Same vocabulary and the same values as /ops/customers — an internal console the
   staffer moves between and back, so the two must not look like two different products. */

.ou[b-crnjttjmmp] { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.ou-loading[b-crnjttjmmp], .ou-denied[b-crnjttjmmp] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.ou-head[b-crnjttjmmp] { margin-bottom: 1rem; }
.ou-title[b-crnjttjmmp] { margin: 0; font-size: 1.35rem; color: var(--kc-navy, #324158); }
.ou-sub[b-crnjttjmmp] { margin: 0.25rem 0 0.4rem; max-width: 78ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.ou-back[b-crnjttjmmp] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; }
.ou-back:hover[b-crnjttjmmp] { text-decoration: underline; }
.ou-h2[b-crnjttjmmp] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.ou-h3[b-crnjttjmmp] { margin: 0 0 0.3rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

.ou-ok[b-crnjttjmmp], .ou-error[b-crnjttjmmp] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.ou-ok[b-crnjttjmmp] { background: #ecfdf5; color: #065f46; }
.ou-error[b-crnjttjmmp] { background: #fef2f2; color: #991b1b; }

.ou-filters[b-crnjttjmmp] {
    display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap;
    border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.85rem 1rem; background: #fff;
    margin-bottom: 1rem;
}
.ou-fld[b-crnjttjmmp] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ou-fld--grow[b-crnjttjmmp] { flex: 1 1 16rem; }
.ou-fld > span[b-crnjttjmmp] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.ou-input[b-crnjttjmmp] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0; font-family: inherit;
}
.ou-check[b-crnjttjmmp] { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: #6b7280; padding-bottom: 0.4rem; }
.ou-fine[b-crnjttjmmp] { margin: 0 0 0.6rem; font-size: 0.75rem; color: #9ca3af; max-width: 68ch; line-height: 1.5; }

.ou-btn[b-crnjttjmmp] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ou-btn:disabled[b-crnjttjmmp] { opacity: 0.5; cursor: default; }
.ou-btn--ghost[b-crnjttjmmp] { background: #fff; color: #374151; border: 1px solid #e5e7eb; }
.ou-btn--danger[b-crnjttjmmp] { background: #b91c1c; }

.ou-new[b-crnjttjmmp] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; margin-bottom: 1rem; }
.ou-list[b-crnjttjmmp] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; }
.ou-table[b-crnjttjmmp] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ou-table th[b-crnjttjmmp] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.ou-table td[b-crnjttjmmp] { padding: 0.5rem; border-bottom: 1px solid #f3f4f6; white-space: nowrap; }
.ou-row.is-open td[b-crnjttjmmp] { background: #f9fafb; border-bottom-color: transparent; }
.ou-name[b-crnjttjmmp] { font-weight: 600; color: #1f2937; }
.ou-dim[b-crnjttjmmp] { color: #6b7280; }
.ou-warn[b-crnjttjmmp] { color: #9a3412; font-weight: 600; }
.ou-bad[b-crnjttjmmp] { color: #991b1b; font-weight: 600; }
.ou-acts[b-crnjttjmmp] { text-align: right; }

.ou-detailrow td[b-crnjttjmmp] { background: #f9fafb; white-space: normal; padding: 0 0.5rem 0.9rem; }
.ou-detail[b-crnjttjmmp] { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0.9rem; }
.ou-panel[b-crnjttjmmp] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.85rem 1rem; background: #fff; }
.ou-panel--wide[b-crnjttjmmp] { grid-column: 1 / -1; }
.ou-form[b-crnjttjmmp] { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }

.ou-hist[b-crnjttjmmp] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ou-hist li[b-crnjttjmmp] { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: baseline; font-size: 0.82rem; }
.ou-hist strong[b-crnjttjmmp] { color: #1f2937; font-weight: 600; }
.ou-reason[b-crnjttjmmp] { color: #6b7280; font-style: italic; }
/* /Components/Pages/PlatformHub.razor.rz.scp.css */
/* Platform Administration — the hub (/ops/platform), on the blue page frame (.kc-blueframe in
   kitcheck-design.css). Sizes and colours are the agreed mockup's (owner, 2026-10-09). Scoped rather than
   global: nothing else draws these, and the frame itself is the shared part. */

.pa-asof[b-dbmsrmp0je], .pa-changed[b-dbmsrmp0je] { white-space: nowrap; }

/* A link in looks, a button in kind: it works the figures out again rather than going anywhere. */
.pa-linkbtn[b-dbmsrmp0je] {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: var(--kc-blueframe-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.pa-linkbtn:disabled[b-dbmsrmp0je] { opacity: 0.6; cursor: default; }
.pa-linkbtn:focus-visible[b-dbmsrmp0je] { outline: 2px solid var(--kc-navy); outline-offset: 2px; }

/* --- Needs attention: one card per live problem ----------------------------------------------------- */
.pa-attention[b-dbmsrmp0je] { display: flex; flex-direction: column; gap: 8px; }
.pa-attention__head[b-dbmsrmp0je] { margin: 0; font-size: 1rem; color: var(--kc-blueframe-ink); }
.pa-attention__count[b-dbmsrmp0je] { font-weight: 400; }

.pa-cards[b-dbmsrmp0je] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 10px;
}

.pa-card[b-dbmsrmp0je] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 12px;
    border-radius: 8px;
    background: var(--kc-surface);
    box-shadow: var(--kc-shadow-card);
    border-top: 3px solid var(--kc-stop-tag-edge);
}
.pa-card--warn[b-dbmsrmp0je] { border-top-color: var(--kc-warn-tag-edge); }

.pa-card__line[b-dbmsrmp0je] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pa-card__num[b-dbmsrmp0je] { font-size: 1.375rem; font-weight: 700; color: var(--kc-stop-num); font-variant-numeric: tabular-nums; }
.pa-card--warn .pa-card__num[b-dbmsrmp0je] { color: var(--kc-warn-num); }
.pa-card__title[b-dbmsrmp0je] { font-size: 0.875rem; font-weight: 600; color: var(--kc-heading-ink); }
.pa-card__why[b-dbmsrmp0je] { margin: 0; flex-grow: 1; font-size: 0.8125rem; line-height: 1.4; color: var(--kc-ink); overflow-wrap: anywhere; }

/* Steps done of steps, for the installation card. */
.pa-bar[b-dbmsrmp0je] { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--kc-neutral-bg); }
.pa-bar__done[b-dbmsrmp0je] { height: 100%; background: var(--kc-status-ok-edge); }

.pa-card__foot[b-dbmsrmp0je] { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.pa-card__go[b-dbmsrmp0je] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: var(--kc-navy);
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.pa-card__go:hover[b-dbmsrmp0je] { background: var(--kc-heading-ink); color: #fff; }
.pa-card__go:focus-visible[b-dbmsrmp0je] { outline: 2px solid var(--kc-navy); outline-offset: 2px; }
.pa-card__go:disabled[b-dbmsrmp0je] { opacity: 0.6; cursor: default; }
.pa-card__source[b-dbmsrmp0je] { font-size: 0.75rem; color: var(--kc-muted); }

/* --- The two white sheets ----------------------------------------------------------------------------- */
.pa-now[b-dbmsrmp0je], .pa-tools[b-dbmsrmp0je] { padding: 16px 22px; display: flex; flex-direction: column; }
.pa-tools[b-dbmsrmp0je] { gap: 10px; }
.pa-sheet__head[b-dbmsrmp0je] { margin: 0 0 8px; font-size: 1rem; color: var(--kc-heading-ink); }
.pa-tools .pa-sheet__head[b-dbmsrmp0je] { margin-bottom: 0; }

/* --- Right now: one row per area, larger figures, links at the end ---------------------------------- */
.pa-area[b-dbmsrmp0je] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.pa-area__title[b-dbmsrmp0je] { flex: 0 0 170px; font-size: 0.9375rem; font-weight: 600; color: var(--kc-heading-ink); }
.pa-area__figures[b-dbmsrmp0je] { flex: 1 1 520px; display: flex; flex-wrap: wrap; gap: 10px 36px; min-width: 0; }
.pa-area__unread[b-dbmsrmp0je] { font-size: 0.8125rem; color: var(--kc-muted); align-self: center; }
.pa-area__links[b-dbmsrmp0je] { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.8125rem; }
.pa-area__links a[b-dbmsrmp0je] { color: #2F5F86; text-underline-offset: 2px; }
.pa-area__links a:hover[b-dbmsrmp0je] { color: #1E3F5A; }

.pa-fig[b-dbmsrmp0je] { display: flex; flex-direction: column; min-width: 90px; }
.pa-fig__n[b-dbmsrmp0je] {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--kc-heading-ink);
    font-variant-numeric: tabular-nums;
}
.pa-fig--bad .pa-fig__n[b-dbmsrmp0je] { color: var(--kc-stop-num); }
.pa-fig--warn .pa-fig__n[b-dbmsrmp0je] { color: var(--kc-warn-num); }
.pa-fig__label[b-dbmsrmp0je] { font-size: 0.75rem; color: #555; }

/* --- Tools: grouped, a stroke icon each, a count where something is wrong --------------------------- */
.pa-toolgroups[b-dbmsrmp0je] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 24px;
}
.pa-toolgroup[b-dbmsrmp0je] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pa-toolgroup__title[b-dbmsrmp0je] {
    margin: 0 0 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
}

.pa-tool[b-dbmsrmp0je] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--kc-ink);
}
.pa-tool:hover[b-dbmsrmp0je] { background: #F4F9FB; }
.pa-tool:focus-visible[b-dbmsrmp0je] { outline: 2px solid var(--kc-navy); outline-offset: -2px; }
.pa-tool__icon[b-dbmsrmp0je] { flex: 0 0 18px; margin-top: 1px; color: var(--kc-navy); }
.pa-tool__text[b-dbmsrmp0je] { display: flex; flex-direction: column; min-width: 0; }
.pa-tool__name[b-dbmsrmp0je] { font-size: 0.875rem; font-weight: 600; color: var(--kc-heading-ink); }
.pa-tool__what[b-dbmsrmp0je] { font-size: 0.75rem; color: var(--kc-muted); }

.pa-badge[b-dbmsrmp0je] {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    line-height: 16px;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    vertical-align: 1px;
}
.pa-badge--bad[b-dbmsrmp0je] { background: var(--kc-stop-tag); color: var(--kc-stop-tag-ink); }
.pa-badge--warn[b-dbmsrmp0je] { background: var(--kc-warn-tag); color: var(--kc-warn-tag-ink); }

@media (max-width: 760px) {
    .pa-now[b-dbmsrmp0je], .pa-tools[b-dbmsrmp0je] { padding: 12px 14px; }
    .pa-area__title[b-dbmsrmp0je] { flex-basis: 100%; }
    .pa-area__figures[b-dbmsrmp0je] { flex-basis: 100%; gap: 10px 22px; }
    .pa-asof[b-dbmsrmp0je], .pa-changed[b-dbmsrmp0je] { white-space: normal; }
}
/* /Components/Pages/PlatformInstallation.razor.rz.scp.css */
/* The installation checklist's page (/ops/platform/installation). The checklist draws itself
   (KcPlatformChecklist); all this page adds is the way back to the hub. */

.pi-crumb[b-a67zh64hvw] { color: inherit; text-underline-offset: 2px; }
.pi-crumb:hover[b-a67zh64hvw] { color: var(--kc-heading-ink); }
/* /Components/Pages/PlatformSettings.razor.rz.scp.css */
/* Platform settings (/ops/platform/settings) — internal superadmin configuration, on the blue page frame
   (.kc-blueframe in kitcheck-design.css), a tab per area. The forms keep the message console's language. */

.ps[b-73v02idf8m] {
    color: var(--kc-ink, #333);
    font-family: var(--kc-font-body, "Segoe UI", system-ui, sans-serif);
}

/* The way back to the hub, in the eyebrow where the page says where it is. */
.ps-crumb[b-73v02idf8m] { color: inherit; text-underline-offset: 2px; }
.ps-crumb:hover[b-73v02idf8m] { color: var(--kc-heading-ink); }

.ps-audit[b-73v02idf8m] { font-size: 0.78rem; white-space: nowrap; }

/* --- The tabs: one per area, in the address -------------------------------------------------------- */
.ps-sheet[b-73v02idf8m] { display: flex; flex-direction: column; }

.ps-tabs[b-73v02idf8m] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.ps-tab[b-73v02idf8m] {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    font-size: 0.875rem;
    color: #555;
    text-decoration: none;
}
.ps-tab:hover[b-73v02idf8m] { color: var(--kc-heading-ink); }
.ps-tab:focus-visible[b-73v02idf8m] { outline: 2px solid var(--kc-navy); outline-offset: -2px; }
.ps-tab[aria-selected="true"][b-73v02idf8m] { color: var(--kc-heading-ink); font-weight: 600; box-shadow: inset 0 -3px 0 var(--kc-navy); }

.ps-panel[b-73v02idf8m] { display: flex; flex-direction: column; gap: 1rem; padding: 14px 16px 18px; min-width: 0; }

/* Cards */
.ps-card[b-73v02idf8m] {
    background: var(--kc-surface, #fff); border: 1px solid var(--kc-border-soft, rgba(0,0,0,.1));
    border-radius: var(--kc-radius-card, 0.5rem);
    overflow: hidden;
}
.ps-sec[b-73v02idf8m] { padding: 0.85rem 1.1rem; background: var(--kc-surface-alt, #efeeef); border-bottom: 1px solid var(--kc-border-soft, rgba(0,0,0,.08)); }
.ps-sec h2[b-73v02idf8m] { margin: 0; font-size: 1rem; font-weight: 700; color: var(--kc-navy, #324158); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ps-hint[b-73v02idf8m] { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--kc-muted, #666); }
.ps-empty[b-73v02idf8m] { margin: 0; padding: 1rem 1.1rem; font-size: 0.88rem; color: var(--kc-muted, #666); }

.ps-grid[b-73v02idf8m] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; padding: 1rem 1.1rem; }
.ps-fld[b-73v02idf8m] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ps-fld--wide[b-73v02idf8m] { grid-column: 1 / -1; }
.ps-fld > span[b-73v02idf8m] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kc-muted, #666); }
.ps-note[b-73v02idf8m] { font-size: 0.74rem; color: var(--kc-muted, #999); }
/* An on/off setting from the catalogue: a real switch rather than "true" typed into a text box. */
.ps-switch[b-73v02idf8m] { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; font-size: 0.88rem; }
.ps-switch input[b-73v02idf8m] { width: 1.1rem; height: 1.1rem; margin: 0; }
.ps-monitorline[b-73v02idf8m] { margin: 0; padding: 0.85rem 1.1rem 0; font-size: 0.84rem; color: var(--kc-ink, #333); }

.ps-input[b-73v02idf8m], .ps-select[b-73v02idf8m] {
    padding: 0.45rem 0.6rem; border: 1px solid var(--kc-border-soft, rgba(0,0,0,.15));
    border-radius: 0.4rem; font-size: 0.88rem; background: #fff; width: 100%;
    font-family: inherit;
}
.ps-input:focus[b-73v02idf8m], .ps-select:focus[b-73v02idf8m] { outline: 2px solid var(--kc-blue, #7ac0da); outline-offset: -1px; }
.ps-mono[b-73v02idf8m] { font-family: Consolas, "Courier New", monospace; font-size: 0.78rem; }

/* Badges */
.ps-badge[b-73v02idf8m] {
    display: inline-flex; align-items: center; padding: 0.1rem 0.5rem;
    border-radius: var(--kc-radius-pill, 999px); font-size: 0.68rem; font-weight: 700;
    text-transform: none; letter-spacing: 0;
}
.ps-badge--ok[b-73v02idf8m] { background: #d1fae5; color: #065f46; }
.ps-badge--cfg[b-73v02idf8m] { background: #e0f2fe; color: #075985; }
.ps-badge--off[b-73v02idf8m] { background: #f3f4f6; color: #6b7280; }

/* Remove-credential: quiet until armed, then unmistakably destructive. */
.ps-remove[b-73v02idf8m] {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 0.68rem; font-weight: 600; color: #9ca3af; text-decoration: underline;
}
.ps-remove:not(.ps-remove--armed):hover[b-73v02idf8m] { color: #b91c1c; }
.ps-remove--armed[b-73v02idf8m] {
    color: #fff; background: #b91c1c; text-decoration: none;
    padding: 0.1rem 0.5rem; border-radius: var(--kc-radius-pill, 999px);
}
.ps-remove--armed:hover[b-73v02idf8m] { background: #7f1d1d; }
.ps-remove:disabled[b-73v02idf8m] { opacity: 0.5; cursor: default; }

/* Actions + messages */
.ps-actions[b-73v02idf8m] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ps-actions--card[b-73v02idf8m] { padding: 0 1.1rem 1rem; }
.ps-savenote[b-73v02idf8m] { flex: 1 1 260px; }
.ps-btn[b-73v02idf8m] {
    padding: 0.5rem 1rem; border-radius: 0.45rem; border: 1px solid transparent;
    background: var(--kc-navy, #324158); color: #fff; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.ps-btn:hover:not(:disabled)[b-73v02idf8m] { filter: brightness(1.12); }
.ps-btn:disabled[b-73v02idf8m] { opacity: 0.55; cursor: default; }
.ps-btn--ghost[b-73v02idf8m] { background: #fff; color: var(--kc-navy, #324158); border-color: var(--kc-border-soft, rgba(0,0,0,.18)); }

/* On the blue, so as small cards of their own rather than tinted text on the gradient. */
.ps-toast[b-73v02idf8m] { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; border-radius: 0.5rem; padding: 0.55rem 0.85rem; font-size: 0.88rem; }
.ps-alert[b-73v02idf8m] { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 0.5rem; padding: 0.6rem 0.9rem; font-size: 0.88rem; }

@media (max-width: 760px) {
    .ps-tabs[b-73v02idf8m] { padding: 4px 6px 0; }
    .ps-panel[b-73v02idf8m] { padding: 10px 12px 14px; }
    .ps-audit[b-73v02idf8m] { white-space: normal; }
}
/* /Components/Pages/ProductCatalogue.razor.rz.scp.css */
/* ---------------------------------------------------------------------------------------------------
   The ops catalogue: a dense list, but with room for the picture.
   A product is recognised by its packaging long before its name is read, so the row is tall enough for a
   thumbnail that is actually legible — about twice a normal grid row. Everything else stays as tight as
   the rest of the ops sheets, so a screen still holds a useful number of them.
   --------------------------------------------------------------------------------------------------- */

.kc-cat__bar[b-n15j8i0h5t] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.7rem;
}

.kc-cat__search[b-n15j8i0h5t] { flex: 1 1 22rem; max-width: 34rem; }

.kc-cat__count[b-n15j8i0h5t] {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--kc-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Fixed layout so the columns do not reflow as rows stream in — a table that reshuffles under the cursor
   while you are reading it is the reason "excel-like" is worth asking for in the first place. */
.kc-cat[b-n15j8i0h5t] { table-layout: fixed; width: 100%; }

.kc-cat__row[b-n15j8i0h5t] { cursor: pointer; }
.kc-cat__row:hover[b-n15j8i0h5t] { background: var(--kc-tint, #F3F6FA); }
.kc-cat__row:focus-visible[b-n15j8i0h5t] { outline: 2px solid var(--kc-navy); outline-offset: -2px; }

.kc-cat__row > td[b-n15j8i0h5t] { height: 3.4rem; vertical-align: middle; }

/* The picture column. Contain, never cover: a product shot cropped to fill would cut the label off the
   front of the pack, which is the part that identifies it. */
.kc-cat__thumb[b-n15j8i0h5t] { width: 3.9rem; padding: 0.2rem 0.35rem; }

.kc-cat__thumb img[b-n15j8i0h5t] {
    width: 3.2rem;
    height: 3.2rem;
    object-fit: contain;
    display: block;
    border-radius: 4px;
    background: #fff;
}

.kc-cat__noimg[b-n15j8i0h5t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px dashed var(--kc-line, #E5E7EB);
    border-radius: 4px;
    color: var(--kc-muted);
    font-size: 0.9rem;
}

/* Name over brand: two facts in one column without a second column's worth of width. */
.kc-grid__name .kc-fhint[b-n15j8i0h5t] { display: block; font-size: 0.72rem; }

.kc-cat__gtin[b-n15j8i0h5t] {
    width: 9.5rem;
    font-family: var(--kc-font-mono, ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.72rem;
    color: var(--kc-muted);
    white-space: nowrap;
}

.kc-cat__group[b-n15j8i0h5t] { width: 13rem; font-size: 0.78rem; }
.kc-cat__group .kc-fhint[b-n15j8i0h5t] { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; }

.kc-cat__size[b-n15j8i0h5t] { width: 7.5rem; font-size: 0.78rem; color: var(--kc-subtle); }

.kc-cat__when[b-n15j8i0h5t] {
    width: 7.5rem;
    font-size: 0.76rem;
    color: var(--kc-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kc-cat__done[b-n15j8i0h5t] { width: 4.2rem; text-align: center; }

.kc-cat__score[b-n15j8i0h5t] {
    display: inline-block;
    min-width: 2.4rem;
    padding: 0.1rem 0.3rem;
    border-radius: 999px;
    background: var(--kc-tint, #F3F6FA);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    cursor: help;
}

/* An article the review queue is holding. Marked, not hidden — it is still in the catalogue, it just may
   not supply facts, and a curator looking for something wrong wants to see it first. */
.kc-cat__row--held .kc-cat__score[b-n15j8i0h5t] { background: #FEF3C7; }

.kc-cat__held[b-n15j8i0h5t] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.3rem;
    border-radius: 3px;
    background: #FED7AA;
    color: #7C2D12;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.kc-cat__more[b-n15j8i0h5t] { margin: 0.8rem 0 0; text-align: center; }

/* The card is a document; it scrolls inside its own frame rather than moving the list behind it. */
[b-n15j8i0h5t] .kc-modal.kc-cat__card {
    max-width: min(900px, 100%);
    max-height: 92vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kc-cat__cardbody[b-n15j8i0h5t] { overflow-y: auto; padding: 1rem 1.1rem; }
/* /Components/Pages/ProductSync.razor.rz.scp.css */
/* The product mirror, given the same treatment as /ops/jobs: wide frame, one white sheet, dense grids.
   The shared parts — .kc-opssheet and the "i" card — live in kitcheck-design.css; only what a MIRROR
   page needs is here. */

/* --- The worklist, in four numbers -----------------------------------------------------------------
   A row of tiles rather than the old card grid: these are four readings of one thing, and the card grid
   spaced them like four unrelated panels. Pending is the number that matters — it is work promised and
   not yet done — so they sit adjacent and comparable rather than apart. */

.kc-mirror__stats[b-pd02tekk8e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.kc-mirror__tile[b-pd02tekk8e] {
    flex: 1 1 8rem;
    min-width: 7rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--kc-radius-card);
    border: 1px solid var(--kc-border-soft);
    /* The tone is a wash, not a fill: four saturated blocks in a row read as an alarm even when three of
       them are good news. */
    background: color-mix(in srgb, var(--tc, #fff) 45%, #fff);
    box-shadow: inset 4px 0 0 0 var(--tc, var(--kc-navy));
}

.kc-mirror__tilenum[b-pd02tekk8e] {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--kc-navy);
    font-variant-numeric: tabular-nums;
}

.kc-mirror__tilelabel[b-pd02tekk8e] { font-size: 0.78rem; color: var(--kc-subtle); }

/* --- Progress ---------------------------------------------------------------------------------------
   Thin, because it is a summary of the tiles above rather than a second announcement of them. */

.kc-mirror__bar[b-pd02tekk8e] {
    height: 8px;
    border-radius: 6px;
    background: #e5e7eb;
    overflow: hidden;
}

.kc-mirror__fill[b-pd02tekk8e] { height: 100%; background: #16a34a; transition: width 0.4s ease; }
.kc-mirror__pct[b-pd02tekk8e] { margin: 0.35rem 0 1rem; }

/* --- The action bar ---------------------------------------------------------------------------------
   Each control sits with its own "i". These buttons range from one cheap list call to seventy gigabytes,
   and nothing in their appearance said which was which — the explanation belongs beside the button, not
   in a paragraph underneath that is read once and never again. */

.kc-mirror__acts[b-pd02tekk8e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--kc-border-soft);
}

.kc-mirror__act[b-pd02tekk8e] { display: inline-flex; align-items: center; gap: 0.35rem; }
.kc-mirror__limit[b-pd02tekk8e] { width: 6rem; }

.kc-mirror__live[data-live="1"][b-pd02tekk8e] { color: #12693A; font-weight: 600; }

/* --- The grids --------------------------------------------------------------------------------------
   Auto layout here, unlike the jobs grid: these tables have one column that is genuinely open-ended (an
   error message, a product name) and several that are narrow and known. Fixed widths would either cut the
   message or waste the width the narrow ones do not need. The known columns are pinned; the rest flexes. */

.kc-mirror__kind[b-pd02tekk8e] { width: 6.5rem; white-space: nowrap; }
.kc-mirror__trig[b-pd02tekk8e] { width: 5.5rem; white-space: nowrap; }
.kc-mirror__stat[b-pd02tekk8e] { width: 5rem; white-space: nowrap; }
.kc-mirror__name[b-pd02tekk8e] { width: 14rem; }
.kc-mirror__map[b-pd02tekk8e] { width: 26rem; }

.kc-mirror__when[b-pd02tekk8e] {
    width: 9.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--kc-muted);
}

.kc-mirror__n[b-pd02tekk8e] {
    width: 5rem;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* GTINs and source codes are literals somebody pastes into a search box. */
.kc-mirror__gtin[b-pd02tekk8e],
.kc-mirror__code[b-pd02tekk8e] {
    width: 11rem;
    font-family: var(--kc-font-mono, ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace);
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--kc-muted);
}

/* The one column allowed to be long. It wraps rather than truncates: an error you cannot read in full is
   an error you have to go to the logs for, which is what this page exists to save you. */
.kc-mirror__err[b-pd02tekk8e] {
    white-space: normal;
    word-break: break-word;
    color: var(--kc-subtle);
}

/* The mapping controls: a select and its buttons on one line, the select taking the slack. */
.kc-mirror__mapper[b-pd02tekk8e] { display: flex; align-items: center; gap: 0.35rem; }
.kc-mirror__mapper .kc-select[b-pd02tekk8e],
.kc-mirror__mapper .kc-input[b-pd02tekk8e] { flex: 1 1 auto; min-width: 0; font-size: 0.8125rem; }
.kc-mirror__mapper .kc-btn[b-pd02tekk8e] { white-space: nowrap; }

/* The grid clips nothing — the "i" cards hang outside it on purpose. */
.kc-mirror[b-pd02tekk8e],
.kc-mirror tbody[b-pd02tekk8e],
.kc-mirror td[b-pd02tekk8e] { overflow: visible; }

/* --- Foldable sections ------------------------------------------------------------------------------
   The curator queues are a hundred rows each and a job for a sitting, not something to scroll past on
   the way to the run history. Closed by default with the count on the bar, so nothing is hidden — it is
   only shut. */

.kc-opsfold[b-pd02tekk8e] { margin-top: 1.1rem; }

.kc-opsfold__bar[b-pd02tekk8e] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--kc-radius-card);
    background: var(--kc-surface-alt);
    cursor: pointer;
    list-style: none;
}

.kc-opsfold__bar[b-pd02tekk8e]::-webkit-details-marker { display: none; }

/* A disclosure triangle of our own, so the affordance survives the list-style reset above. */
.kc-opsfold__bar[b-pd02tekk8e]::before {
    content: "▸";
    margin-right: 0.35rem;
    color: var(--kc-navy);
    transition: transform 0.15s ease;
    display: inline-block;
}

.kc-opsfold[open] > .kc-opsfold__bar[b-pd02tekk8e]::before { transform: rotate(90deg); }
.kc-opsfold__bar:hover[b-pd02tekk8e] { background: color-mix(in srgb, var(--kc-blue) 25%, var(--kc-surface-alt)); }
.kc-opsfold__bar:focus-visible[b-pd02tekk8e] { outline: 3px solid var(--kc-navy); outline-offset: 2px; }

/* A GTIN you can open. Styled as a link rather than a button: it navigates (into a card) rather than
   acting, and the monospace has to survive so the number still reads as a number you can paste. */
.kc-mirror__gtinlink[b-pd02tekk8e] {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: var(--kc-navy);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.kc-mirror__gtinlink:hover[b-pd02tekk8e] { color: var(--kc-blue-deep, var(--kc-navy)); text-decoration-thickness: 2px; }
.kc-mirror__gtinlink:focus-visible[b-pd02tekk8e] { outline: 2px solid var(--kc-navy); outline-offset: 2px; }

/* The product card is a big document — wider than the job editor and scrolling inside its own frame. */
[b-pd02tekk8e] .kc-modal.kc-mirror__card {
    max-width: min(900px, 100%);
    max-height: 92vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kc-mirror__cardbody[b-pd02tekk8e] { overflow-y: auto; padding: 1rem 1.1rem; }

/* A sub-bar inside a folded section: no top border, since the summary above it already divides. */
.kc-mirror__acts--sub[b-pd02tekk8e] { border-bottom: 0; padding-bottom: 0.4rem; }

/* ---------------------------------------------------------------------------------------------------
   To-map, grouped by kind. Each block carries its own instructions, because "map this code" is a
   different job per kind — and a curator should be able to read one block, do that work, and stop.
   --------------------------------------------------------------------------------------------------- */

.kc-mapgroup[b-pd02tekk8e] { margin: 0 0 1.4rem; }
.kc-mapgroup:last-child[b-pd02tekk8e] { margin-bottom: 0.4rem; }

.kc-mapgroup__title[b-pd02tekk8e] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--kc-navy);
}

/* The two guidance lines are prose, not table furniture: measured for reading, indented off the rule
   that ties them to their heading. Kept narrow — a full-width paragraph on a 1400px page is unreadable. */
.kc-mapgroup__what[b-pd02tekk8e],
.kc-mapgroup__do[b-pd02tekk8e] {
    max-width: 88ch;
    margin: 0 0 0.3rem;
    padding-left: 0.7rem;
    border-left: 3px solid var(--kc-line, #E5E7EB);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--kc-ink-soft, #4B5563);
}

/* "What to do" is the actionable half, so it gets the ink and the accent. */
.kc-mapgroup__do[b-pd02tekk8e] {
    border-left-color: var(--kc-amber, #F59E0B);
    color: var(--kc-ink, #1F2937);
    margin-bottom: 0.6rem;
}

.kc-mapgroup__what strong[b-pd02tekk8e],
.kc-mapgroup__do strong[b-pd02tekk8e] { color: var(--kc-navy); }

/* A block whose fix is a code change, not a decision. Greyed and given the neutral accent so it reads as
   "noted, nothing owed" rather than as a backlog the curator is failing to clear. It is still listed —
   an unreadable value must never be mistaken for an absent one. */
.kc-mapgroup--fyi .kc-mapgroup__title[b-pd02tekk8e] { color: var(--kc-ink-soft, #4B5563); font-weight: 600; }
.kc-mapgroup--fyi .kc-mapgroup__do[b-pd02tekk8e] {
    border-left-color: var(--kc-line, #E5E7EB);
    color: var(--kc-ink-soft, #4B5563);
}
.kc-mapgroup--fyi .kc-grid[b-pd02tekk8e] { opacity: 0.78; }

/* Which of the two ways an article was given up on. Fixed and unwrapped: it is one of exactly two short
   phrases, and it is the column that decides whether "Try again" is worth clicking. */
.kc-mirror__reason[b-pd02tekk8e] {
    width: 10.5rem;
    white-space: nowrap;
    font-weight: 600;
    color: var(--kc-ink-soft, #4B5563);
}

/* --- The packaging trees -------------------------------------------------------------------------------
   Its own block under the article worklist, the same tiles and bar: it is a second worklist with a second job,
   and it reads best as the same kind of thing one level down. */

.kc-mirror__section[b-pd02tekk8e] { margin: 1.4rem 0 0.6rem; }
.kc-mirror__job[b-pd02tekk8e] { margin: 0.6rem 0 0.2rem; }
.kc-mirror__fill--job[b-pd02tekk8e] { background: var(--kc-navy, #1e3a5f); }
.kc-mirror__job-last[b-pd02tekk8e] { margin: 0.3rem 0; }
.kc-mirror__preview[b-pd02tekk8e] { margin: 1rem 0; padding-top: 0.6rem; border-top: 1px solid var(--kc-border-soft); }
.kc-mirror__list[b-pd02tekk8e] { margin: 0.5rem 0; }
.kc-mirror__list ul[b-pd02tekk8e] { margin: 0.3rem 0 0; padding-left: 1.2rem; max-height: 22rem; overflow: auto; font-size: 0.85rem; }
/* /Components/Pages/Produktion.razor.rz.scp.css */
/* Dagens produktion (b-25): a working sheet, not a dashboard. It is read standing up, in a kitchen, so the
   numbers carry the weight and everything else stays quiet.

   The bar, summary, numeric columns and "ca" badge are SHARED with /inkopslista and live in
   kitcheck-design.css — Blazor scopes component CSS, so anything defined here would leave the purchase
   list unstyled. Only what is genuinely this page's stays below. */

.kc-prod__warnings[b-67fuqc80jj] {
    margin: 0 0 1rem;
    padding: 0.7rem 1rem 0.7rem 2rem;
    border-radius: var(--kc-radius-panel);
    background: var(--kc-status-missed);
    color: var(--kc-warn-text);
    font-size: 0.85rem;
}

.kc-prod__panel[b-67fuqc80jj] {
    margin-bottom: 1.6rem;
}

.kc-prod__panel > h3[b-67fuqc80jj] {
    margin: 0 0 0.6rem;
}

.kc-prod__slot[b-67fuqc80jj] {
    margin-bottom: 1rem;
}

.kc-prod__slot > h4[b-67fuqc80jj] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.3rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kc-muted);
}

.kc-prod__over[b-67fuqc80jj] {
    color: var(--kc-fail-text);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

/* A dish with no portions yet is still on the sheet — present, but not competing with what is being cooked. */
.kc-prod__row--idle td[b-67fuqc80jj] {
    opacity: 0.6;
}
/* /Components/Pages/ProduktkvalitetGranska.razor.rz.scp.css */
/* Density follows the viewport (visual guidelines §12): the table takes the room it needs and the
   decisions ride alongside it, instead of both being squeezed into a modal column. */
.kc-dqr[b-t55056wtav] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 1100px) {
    .kc-dqr[b-t55056wtav] {
        grid-template-columns: minmax(0, 1fr) 22rem;
    }
}

.kc-dqr__back[b-t55056wtav] {
    margin: 0.8rem 0 0.4rem;
}

/* Content sits on a surface, never straight on the page grey — text on the frame colour is the 1995 look
   this project keeps being told off for. */
.kc-dqr__main[b-t55056wtav] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 1rem 1.1rem;
}

.kc-dqr__rail[b-t55056wtav] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
}

.kc-dqr__ident h3[b-t55056wtav] {
    margin-bottom: 0.15rem;
}

/* Wide content must scroll inside its own box, never push the page sideways. */
.kc-dqr__table[b-t55056wtav] {
    display: block;
    overflow-x: auto;
    width: 100%;
}

.kc-dqr__table th[scope="row"][b-t55056wtav] {
    white-space: nowrap;
    text-align: left;
    font-weight: 600;
}

.kc-dqr__table td[b-t55056wtav],
.kc-dqr__table th[b-t55056wtav] {
    vertical-align: top;
}

.kc-dqr__row--blocking > td[b-t55056wtav],
.kc-dqr__row--blocking > th[b-t55056wtav] {
    background: #fff5f5;
}

.kc-dqr__row--warning > td[b-t55056wtav],
.kc-dqr__row--warning > th[b-t55056wtav] {
    background: #fffbeb;
}

.kc-dqr__reason[b-t55056wtav] {
    font-size: 0.82rem;
    line-height: 1.35;
    max-width: 22rem;
}

.kc-dqr__derived[b-t55056wtav] {
    font-size: 0.82rem;
    color: var(--kc-warn-text);
    font-weight: 600;
}

.kc-dqr__input[b-t55056wtav] {
    width: 100%;
    max-width: 12rem;
}

.kc-dqr__adopt[b-t55056wtav] {
    margin-left: 0.5rem;
}

.kc-dqr__save[b-t55056wtav] {
    display: flex;
    align-items: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.kc-dqr__note[b-t55056wtav] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    color: var(--kc-subtle);
    flex: 1 1 18rem;
}

.kc-dqr__prov[b-t55056wtav] {
    font-size: 0.9rem;
    margin: 0;
}

.kc-dqr__panel[b-t55056wtav] {
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 0.9rem 1rem;
}

.kc-dqr__panel > .kc-h3[b-t55056wtav] {
    margin-top: 0;
}

.kc-dqr__sublabel[b-t55056wtav] {
    margin: 0.7rem 0 0.2rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--kc-subtle);
}

.kc-dqr__actions[b-t55056wtav] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kc-dqr__list[b-t55056wtav] {
    margin: 0.3rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
}

.kc-dqr__raw pre[b-t55056wtav] {
    max-height: 20rem;
    overflow: auto;
    background: var(--kc-surface-alt);
    padding: 0.7rem;
    border-radius: 8px;
    font-size: 0.72rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---- Fältkarta: the whole source document, full width ---------------------------------------- */

.kc-dqr__fieldmap[b-t55056wtav] {
    margin-top: 1rem;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 1rem 1.1rem;
}

.kc-dqr__fieldhead[b-t55056wtav] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}

.kc-dqr__fieldhead .kc-h3[b-t55056wtav] {
    margin: 0 0 0.2rem;
}

.kc-dqr__legend[b-t55056wtav] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.kc-dqr__key[b-t55056wtav] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: var(--kc-radius-pill);
}

.kc-dqr__key--missing[b-t55056wtav] {
    background: #fee2e2;
    color: #b91c1c;
}

.kc-dqr__key--target[b-t55056wtav] {
    background: #e0f2fe;
    color: var(--kc-info-text);
}

.kc-dqr__key--unused[b-t55056wtav] {
    background: #fdf3e3;
    color: #b45309;
}

.kc-dqr__key--mapped[b-t55056wtav] {
    background: var(--kc-surface-alt);
    color: var(--kc-subtle);
}

.kc-dqr__fieldmap .kc-dqr__raw[b-t55056wtav] {
    margin-top: 0.8rem;
}

.kc-dqr__fieldmap pre[b-t55056wtav] {
    max-height: 18rem;
    overflow: auto;
    background: var(--kc-surface-alt);
    padding: 0.7rem;
    border-radius: 8px;
    font-size: 0.72rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.kc-dqr__toggle[b-t55056wtav] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--kc-subtle);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* --- Förpackning ------------------------------------------------------------------------------------
   The packaging evidence and the decision about a count, above the field map. */

.kc-dqr__pack[b-t55056wtav] { margin-top: 1rem; }
.kc-dqr__packdecision[b-t55056wtav] { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; max-width: 46rem; }
.kc-dqr__choices[b-t55056wtav] { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.kc-dqr__choices label[b-t55056wtav] { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.9rem; }
#pack-history[b-t55056wtav] { margin-top: 0.8rem; }
/* A note label is a growing row in the override form; in the decision column it must keep its own height. */
.kc-dqr__packdecision .kc-dqr__note[b-t55056wtav] { flex: 0 0 auto; }

/* The allergen review: one finding per open warning, the supplier's own words with what decided it marked. */
.kc-dqr__allergens[b-t55056wtav] { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kc-dqr__status[b-t55056wtav] { margin: 0; }
.kc-dqr__finding[b-t55056wtav] { margin: 0; padding: 0.45rem 0.6rem; border-radius: 4px; border-left: 4px solid #E5D27A; background: #FFFBEA; }
.kc-dqr__finding--high[b-t55056wtav] { border-left-color: #E8A866; background: #FFF1E2; }
.kc-dqr__finding--verify[b-t55056wtav] { border-left-color: #C7CDD3; background: #F6F7F9; }
.kc-dqr__evidence[b-t55056wtav] { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 0.8rem; font-size: 0.88rem; }
.kc-dqr__evidence dt[b-t55056wtav] { color: var(--kc-muted); }
.kc-dqr__evidence dd[b-t55056wtav] { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kc-dqr__evidence mark[b-t55056wtav] { background: #FDE68A; padding: 0 1px; border-radius: 2px; }
.kc-dqr__food[b-t55056wtav], .kc-dqr__email[b-t55056wtav] { max-width: 52rem; display: flex; flex-direction: column; gap: 0.5rem; }
/* The note is a growing row in the override form; here it keeps its own height. */
.kc-dqr__food .kc-dqr__note[b-t55056wtav] { flex: 0 0 auto; }
.kc-dqr__allergens [data-meanwhile][b-t55056wtav] { font-size: 0.9rem; }
.kc-dqr__emailbody[b-t55056wtav] { width: 100%; font-family: inherit; font-size: 0.86rem; line-height: 1.4; }
@media (max-width: 640px) {
    .kc-dqr__evidence[b-t55056wtav] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Programkarta.razor.rz.scp.css */
/* Programkarta: one row per node, so a kostchef can see twelve kitchens at once. The document itself lives
   at /program/dokument — nothing here renders programme prose, on purpose. */

.pk-table[b-dc5g8wgyvr] {
    width: 100%;
    margin-bottom: 1rem;
}

.pk-table th[scope="row"][b-dc5g8wgyvr] {
    /* Indented by tree depth, so the first column IS the org chart. A flat list of names would hide the
       one thing that decides what each kitchen inherits. */
    padding-left: calc(var(--pk-depth, 0) * 1.25rem);
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.pk-name[b-dc5g8wgyvr] {
    display: block;
}

.pk-kind[b-dc5g8wgyvr] {
    display: block;
    font-size: .7rem;
    font-weight: 400;
    opacity: .6;
}

/* A node that is not a kitchen holds a programme for the ones beneath it; it is not itself a day board. */
.pk-row--group[b-dc5g8wgyvr] {
    background: var(--kc-surface-alt, #f6f6f4);
}

.pk-from[b-dc5g8wgyvr] {
    display: block;
    font-size: .75rem;
    opacity: .7;
}

.pk-none[b-dc5g8wgyvr] {
    opacity: .55;
    font-style: italic;
}

.pk-wait[b-dc5g8wgyvr] {
    font-size: .8rem;
    padding: .1rem .5rem;
    border-radius: 1rem;
    border: 1px solid var(--kc-accent, #4a6b8a);
    white-space: nowrap;
}

.pk-ok[b-dc5g8wgyvr] {
    font-size: .8rem;
    opacity: .6;
}

.pk-links[b-dc5g8wgyvr] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .35rem;
}
/* /Components/Pages/ProvaKitcheck.razor.rz.scp.css */
/* "Prova Kitcheck" (/prova). PHONE FIRST: the words keep a 16 px gutter, and the practice blocks between them span the
   screen — on a phone the real card is the screen's whole width (KcPracticeBlock draws it border to border), and the
   verdict is one short line under it. From 700 px the shell's column takes the gutter and the blocks are the rounded
   boxes they are in a course, card and verdict side by side. Every target is 44 px or more. */

.pv[b-kzbc1rtt1n] { min-width: 0; }

.pv-h1[b-kzbc1rtt1n] {
    margin: 0;
    padding-inline: 16px;
    font-size: 1.7rem;
    font-weight: 750;
    color: var(--kc-navy);
}

.pv-lede[b-kzbc1rtt1n] {
    margin: 0.4rem 0 0;
    padding-inline: 16px;
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--kc-ink);
}

.pv-step[b-kzbc1rtt1n] { margin-top: 1.6rem; }

.pv-step__head[b-kzbc1rtt1n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding-inline: 16px;
    min-height: 44px;
}

.pv-step__title[b-kzbc1rtt1n] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kc-navy);
    min-width: 0;
}

.pv-step__no[b-kzbc1rtt1n] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--kc-navy);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pv-how[b-kzbc1rtt1n] {
    flex: none;
    min-height: 44px;
    min-width: 88px;
    padding: 0.45rem 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--kc-navy);
    background: var(--kc-surface);
    color: var(--kc-navy);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.pv-how:hover[b-kzbc1rtt1n] { background: var(--kc-surface-alt); }

.pv-how:focus-visible[b-kzbc1rtt1n] {
    outline: 3px solid color-mix(in srgb, var(--kc-blue) 60%, transparent);
    outline-offset: 2px;
}

.pv-end[b-kzbc1rtt1n] {
    margin-top: 1.8rem;
    padding: 1.1rem 16px 1.3rem;
    background: var(--kc-surface);
    border-block: 1.5px solid var(--kc-border-soft);
}

.pv-end__title[b-kzbc1rtt1n] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--kc-navy);
}

.pv-end__line[b-kzbc1rtt1n] { margin: 0.3rem 0 0; color: var(--kc-ink); }

.pv-end__more[b-kzbc1rtt1n] { margin: 0.9rem 0 0; }

.pv-end__link[b-kzbc1rtt1n] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 1.1rem;
    border-radius: 10px;
    background: var(--kc-navy);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pv-end__link:hover[b-kzbc1rtt1n] { background: color-mix(in srgb, var(--kc-navy) 85%, #000); }

.pv-end__link:focus-visible[b-kzbc1rtt1n] {
    outline: 3px solid color-mix(in srgb, var(--kc-blue) 70%, transparent);
    outline-offset: 2px;
}

.pv-full[b-kzbc1rtt1n] {
    margin: 1rem 0 0;
    padding: 1rem 16px;
    background: var(--kc-surface);
    border-block: 1.5px solid var(--kc-border-soft);
    font-size: 1.05rem;
    color: var(--kc-ink);
}

@media (min-width: 700px) {
    .pv-h1[b-kzbc1rtt1n],
    .pv-lede[b-kzbc1rtt1n],
    .pv-step__head[b-kzbc1rtt1n] { padding-inline: 0; }

    .pv-h1[b-kzbc1rtt1n] { font-size: 2rem; }

    .pv-end[b-kzbc1rtt1n],
    .pv-full[b-kzbc1rtt1n] {
        padding-inline: 1.3rem;
        border-inline: 1.5px solid var(--kc-border-soft);
        border-radius: 14px;
    }
}
/* /Components/Pages/Recept.razor.rz.scp.css */
.kc-recept[b-8809yzqlju] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kc-recept__list[b-8809yzqlju] {
    flex: 0 0 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kc-recept__items[b-8809yzqlju] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kc-recept__item[b-8809yzqlju] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--kc-border-soft);
    border-radius: 8px;
    background: var(--kc-surface);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.kc-recept__thumb[b-8809yzqlju] {
    flex: 0 0 3.1rem;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 6px;
    background: var(--kc-surface-alt) center / cover no-repeat;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
}

.kc-recept__itembody[b-8809yzqlju] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.kc-recept__time[b-8809yzqlju] {
    font-weight: 600;
    color: var(--kc-navy);
    white-space: nowrap;
}

.kc-recept__item:hover[b-8809yzqlju] {
    background: #f8fafc;
}

.kc-recept__item--on[b-8809yzqlju] {
    border-color: #2563eb;
    background: #eff6ff;
}

.kc-recept__item-meta[b-8809yzqlju] {
    font-size: 0.8rem;
    opacity: 0.6;
}

.kc-recept__main[b-8809yzqlju] {
    flex: 1 1 30rem;
    min-width: 20rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kc-recept__head[b-8809yzqlju] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.kc-recept__name[b-8809yzqlju] {
    font-size: 1.1rem;
    font-weight: 600;
    min-width: 16rem;
    flex: 1 1 16rem;
}

.kc-recept__portions[b-8809yzqlju] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

/* Containment surfaces: every editor section sits in its own card so the page reads as gathered
   blocks, not loose gray-on-gray controls. */
.kc-recept__panel[b-8809yzqlju] {
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kc-recept__panel > .kc-h3[b-8809yzqlju] {
    margin: 0;
}

.kc-recept__editbar[b-8809yzqlju] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.kc-recept__editbar-space[b-8809yzqlju] {
    flex: 1 1 auto;
}

.kc-recept__savestate[b-8809yzqlju] {
    font-size: 0.85rem;
    color: var(--kc-muted);
}

.kc-recept__savestate[data-savestate="saved"][b-8809yzqlju] {
    color: var(--kc-ok-text);
    font-weight: 600;
}

.kc-recept__savestate[data-savestate="error"][b-8809yzqlju] {
    color: #b91c1c;
    font-weight: 600;
}

.kc-recept__imagerow[b-8809yzqlju] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.kc-recept__image[b-8809yzqlju] {
    width: 5.2rem;
    height: 5.2rem;
    object-fit: cover;
    border-radius: var(--kc-radius-card);
    border: 1px solid var(--kc-border-soft);
}

.kc-recept__upload[b-8809yzqlju] {
    cursor: pointer;
}

/* ---------- Day-to-day viewer ---------- */

.kc-rview[b-8809yzqlju] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kc-rview__hero[b-8809yzqlju] {
    display: flex;
    gap: 1.4rem;
    align-items: stretch;
    flex-wrap: wrap;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 1.2rem;
}

.kc-rview__photo[b-8809yzqlju] {
    flex: 0 1 20rem;
    min-width: 15rem;
    max-height: 16rem;
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--kc-border-soft);
}

.kc-rview__photo--empty[b-8809yzqlju] {
    display: grid;
    place-items: center;
    font-size: 3.4rem;
    background: var(--kc-img-bg);
}

.kc-rview__heroinfo[b-8809yzqlju] {
    flex: 1 1 22rem;
    min-width: 18rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.kc-rview__titlerow[b-8809yzqlju] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.kc-rview__title[b-8809yzqlju] {
    margin: 0;
    font-size: 1.55rem;
    color: var(--kc-navy);
}

.kc-rview__stats[b-8809yzqlju] {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
}

.kc-rview__stat[b-8809yzqlju] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.kc-rview__stat strong[b-8809yzqlju] {
    color: var(--kc-navy);
    font-variant-numeric: tabular-nums;
}

.kc-rview__stat small[b-8809yzqlju] {
    color: var(--kc-muted);
    font-size: 0.75rem;
}

.kc-rview__desc[b-8809yzqlju] {
    color: var(--kc-subtle);
    max-width: 60ch;
}

.kc-rview__controls[b-8809yzqlju] {
    display: flex;
    gap: 1.4rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 0.7rem 1.1rem;
}

.kc-rview__portioner[b-8809yzqlju] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.kc-rview__pinput[b-8809yzqlju] {
    width: 4.6rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.kc-rview__cols[b-8809yzqlju] {
    display: grid;
    grid-template-columns: minmax(17rem, 1fr) minmax(20rem, 1.6fr);
    gap: 1rem;
    align-items: start;
}

/* The right-hand column is a stack, not two grid items. Method and processes belong together, and as
   separate children the second wrapped onto a new row that starts below the full-height ingredients
   column — technically in the right column, visually nowhere near it. */
.kc-rview__right[b-8809yzqlju] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

@media (max-width: 900px) {
    .kc-rview__cols[b-8809yzqlju] {
        grid-template-columns: 1fr;
    }
}

.kc-rview__inglist[b-8809yzqlju] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.kc-rview__inglist li[b-8809yzqlju] {
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    padding: 0.45rem 0.2rem;
    border-bottom: 1px dashed var(--kc-border-soft);
}

.kc-rview__inglist li:last-child[b-8809yzqlju] {
    border-bottom: none;
}

.kc-rview__ing--sub[b-8809yzqlju] {
    background: #eff6ff;
    border-radius: 6px;
}

.kc-rview__qty[b-8809yzqlju] {
    flex: 0 0 6.5rem;
    text-align: right;
    font-weight: 600;
    color: var(--kc-navy);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Rendered (sanitized) rich text — viewer and anywhere else stored HTML is displayed. */
.kc-richtext-output :is(p, ol, ul, blockquote)[b-8809yzqlju] {
    margin: 0 0 0.6rem;
}

.kc-richtext-output :is(h3, h4)[b-8809yzqlju] {
    margin: 0.8rem 0 0.35rem;
    color: var(--kc-navy);
}

.kc-richtext-output blockquote[b-8809yzqlju] {
    border-left: 3px solid var(--kc-border-soft);
    padding-left: 0.75rem;
    color: var(--kc-subtle);
}

.kc-richtext-output ol li[b-8809yzqlju],
.kc-richtext-output ul li[b-8809yzqlju] {
    margin-bottom: 0.35rem;
    line-height: 1.55;
}

.kc-recept__yield[b-8809yzqlju] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.kc-recept__prodlink[b-8809yzqlju] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--kc-navy);
    cursor: pointer;
    text-align: left;
    text-decoration: underline dotted var(--kc-blue-deep);
    text-underline-offset: 3px;
}

.kc-recept__prodlink:hover[b-8809yzqlju] {
    color: var(--kc-blue-deep);
}

.kc-recept__tagrows[b-8809yzqlju] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.kc-recept__history summary[b-8809yzqlju] {
    cursor: pointer;
}

.kc-recept__revs[b-8809yzqlju] {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.kc-recept__revwhen[b-8809yzqlju] {
    display: block;
    color: var(--kc-muted);
    font-size: 0.75rem;
}

.kc-recept__item .kc-fchip[b-8809yzqlju] {
    font-size: 0.68rem;
    padding: 0.08rem 0.45rem;
}

.kc-recept__work[b-8809yzqlju] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kc-recept__edit[b-8809yzqlju] {
    flex: 1 1 26rem;
    min-width: 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.kc-recept__summary[b-8809yzqlju] {
    flex: 0 1 17rem;
    min-width: 15rem;
    position: sticky;
    top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--kc-surface);
    border: 1px solid var(--kc-border-soft);
    border-radius: var(--kc-radius-panel);
    box-shadow: var(--kc-shadow-card);
    padding: 0.9rem;
}

.kc-recept__hero[b-8809yzqlju] {
    display: flex;
    flex-direction: column;
}

.kc-recept__kcal[b-8809yzqlju] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--kc-navy);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kc-recept__kcal-label[b-8809yzqlju] {
    font-size: 0.82rem;
    color: var(--kc-muted);
}

.kc-recept__label[b-8809yzqlju] {
    margin: 0.2rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--kc-muted);
}

.kc-recept__facts[b-8809yzqlju] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.15rem 0.8rem;
    margin: 0;
    font-size: 0.9rem;
}

.kc-recept__facts dt[b-8809yzqlju] {
    font-weight: 600;
    color: var(--kc-subtle);
}

.kc-recept__facts dd[b-8809yzqlju] {
    margin: 0;
}

.kc-recept__nutrition td[b-8809yzqlju] {
    font-size: 0.9rem;
    padding: 0.25rem 0.3rem;
}

.kc-recept__num[b-8809yzqlju] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kc-recept__unresolved[b-8809yzqlju] {
    background: #fff7ed;
}

/* An utgången produkt in the recipe (owner decision 6): said above the editor, with the way out on each line. */
.kc-recept__utgatt[b-8809yzqlju] {
    border-color: var(--kc-fail-text);
    background: #fff5f5;
    margin-bottom: 0.9rem;
}

.kc-recept__utgatt-list[b-8809yzqlju] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.kc-recept__utgatt-list .kc-btn[b-8809yzqlju] {
    margin-left: 0.5rem;
}

.kc-recept__sub[b-8809yzqlju] {
    background: #eff6ff;
}

.kc-recept__warnings[b-8809yzqlju] {
    border-left: 3px solid #f59e0b;
    padding-left: 0.75rem;
}

/* The product picker as a FULL-SCREEN dialog: nearly the whole viewport, its own scroll, the recipe
   stays untouched behind it. */
.kc-recmodal[b-8809yzqlju] {
    width: 96vw;
    max-width: 1500px;
    height: 94vh;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.2rem;
}

.kc-recmodal__head[b-8809yzqlju] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--kc-border-soft);
}

.kc-recmodal__title h3[b-8809yzqlju] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--kc-navy);
}

.kc-recmodal__sub[b-8809yzqlju] {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    color: var(--kc-muted);
}

.kc-recmodal__body[b-8809yzqlju] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 0.6rem;
}

.kc-recmodal__added[b-8809yzqlju] {
    background: var(--kc-status-ok);
    border: 1.5px solid var(--kc-status-ok-edge);
    color: var(--kc-ok-text);
    width: 100%;
}

.kc-recmodal__added:hover[b-8809yzqlju] {
    background: #A7EBC0;
}


/* ---- Processer och kontroller ------------------------------------------------------------------
   What the dish does to food. Visually quieter than the ingredient list: it is a short declaration,
   not the part of the page a cook works in every day — but the gap warning has to carry. */
.kc-rproc__lead[b-8809yzqlju] {
    margin: -0.2rem 0 0.8rem;
}

.kc-rproc__status[b-8809yzqlju] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.kc-rproc__statusnote[b-8809yzqlju] {
    font-size: 0.78rem;
    color: var(--kc-muted);
}

.kc-rproc__list[b-8809yzqlju] {
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.kc-rproc__row[b-8809yzqlju] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem);
}

/* A suggestion is a question the app is asking, so it reads as unfinished business rather than fact. */
.kc-rproc__row--suggested[b-8809yzqlju] {
    border-style: dashed;
}

.kc-rproc__row--rejected[b-8809yzqlju] {
    opacity: 0.65;
}

.kc-rproc__axis[b-8809yzqlju] {
    min-width: 11rem;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kc-muted);
}

.kc-rproc__what[b-8809yzqlju] {
    font-weight: 600;
}

.kc-rproc__tag[b-8809yzqlju] {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--kc-surface-sunken, rgba(0, 0, 0, .05));
    color: var(--kc-muted);
}

.kc-rproc__tag--on[b-8809yzqlju] {
    background: #D8F3E3;
    color: #14532D;
}

/* --kc-status-missed is the pale yellow BACKGROUND of a missed check (#FEF9C3). Used as a text colour it
   put pale yellow on white, so the one warning telling a kitchen its programme disagrees with what it
   cooks was the least readable thing on the page (owner, 2026-08-17). --kc-warn-text is the token meant
   for text in that role. */
.kc-rproc__gap[b-8809yzqlju],
.kc-rproc__gapnote[b-8809yzqlju] {
    color: var(--kc-warn-text, #7A5B12);
    font-weight: 600;
}

.kc-rproc__gapnote[b-8809yzqlju] {
    font-weight: 500;
}

.kc-rproc__add[b-8809yzqlju] {
    margin-top: 0.6rem;
}

.kc-rproc__add > summary[b-8809yzqlju] {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--kc-muted);
}

.kc-rproc__addgrid[b-8809yzqlju] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

/* What the dish does to food, on the READ view. Sits beside the method because that is where a cook is
   already looking when they ask "and what does this one need from me". */
.kc-rview__processes .kc-fchip__sub[b-8809yzqlju] {
    display: block;
    font-size: 0.7rem;
    opacity: 0.85;
}

.kc-rview__gap[b-8809yzqlju] {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--kc-amber-ink, #92400E);
}
/* /Components/Pages/Suppressions.razor.rz.scp.css */
.sp[b-j9dvxxhfng] { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.sp-loading[b-j9dvxxhfng], .sp-denied[b-j9dvxxhfng] { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.sp-head[b-j9dvxxhfng] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.sp-title[b-j9dvxxhfng] { margin: 0; font-size: 1.35rem; }
.sp-sub[b-j9dvxxhfng] { margin: 0.25rem 0 0; max-width: 62ch; color: var(--kc-muted, #666); font-size: 0.85rem; }
.sp-back[b-j9dvxxhfng] { flex: none; font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; }
.sp-back:hover[b-j9dvxxhfng] { text-decoration: underline; }

.sp-toast[b-j9dvxxhfng], .sp-alert[b-j9dvxxhfng] {
    margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem;
}
.sp-toast[b-j9dvxxhfng] { background: #eff6ff; color: #1e40af; }
.sp-alert[b-j9dvxxhfng] { background: #fef2f2; color: #991b1b; }

.sp-bar[b-j9dvxxhfng] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.sp-filters[b-j9dvxxhfng] { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }

.sp-chip[b-j9dvxxhfng] {
    border: 1px solid #e5e7eb; background: #fff; border-radius: var(--kc-radius-pill, 999px);
    padding: 0.2rem 0.7rem; font-size: 0.78rem; cursor: pointer; color: #374151;
}
.sp-chip:hover[b-j9dvxxhfng] { border-color: #cbd5e1; }
.sp-chip.is-on[b-j9dvxxhfng] { background: #1f2937; border-color: #1f2937; color: #fff; }

.sp-toggle[b-j9dvxxhfng] { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: #6b7280; margin-left: 0.4rem; }

.sp-btn[b-j9dvxxhfng] {
    border: 0; border-radius: 8px; background: #1f2937; color: #fff;
    padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.sp-btn--ghost[b-j9dvxxhfng] { background: #fff; color: #374151; border: 1px solid #e5e7eb; }
.sp-btn:disabled[b-j9dvxxhfng] { opacity: 0.5; cursor: default; }

.sp-block[b-j9dvxxhfng] {
    display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.75rem; margin-bottom: 0.75rem; background: #f9fafb; border-radius: 10px;
}
.sp-fld[b-j9dvxxhfng] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.sp-fld--grow[b-j9dvxxhfng] { flex: 1 1 14rem; }
.sp-fld > span[b-j9dvxxhfng] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.sp-input[b-j9dvxxhfng], .sp-select[b-j9dvxxhfng] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem; font-size: 0.85rem;
    background: #fff; min-width: 0; width: 100%;
}

.sp-table[b-j9dvxxhfng] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sp-table th[b-j9dvxxhfng] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.sp-table td[b-j9dvxxhfng] { padding: 0.5rem; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.sp-table tr.is-lifted[b-j9dvxxhfng] { color: #9ca3af; }

.sp-addr[b-j9dvxxhfng] { font-weight: 600; word-break: break-all; }
.sp-scope[b-j9dvxxhfng], .sp-src[b-j9dvxxhfng] { color: #6b7280; font-size: 0.78rem; }
.sp-act[b-j9dvxxhfng] { text-align: right; white-space: nowrap; }

.sp-reason[b-j9dvxxhfng] {
    display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.68rem; font-weight: 700;
}
.sp-reason--hardbounce[b-j9dvxxhfng], .sp-reason--invalidaddress[b-j9dvxxhfng] { background: #fee2e2; color: #991b1b; }
.sp-reason--complaint[b-j9dvxxhfng] { background: #ffedd5; color: #9a3412; }
.sp-reason--unsubscribed[b-j9dvxxhfng] { background: #e0f2fe; color: #075985; }
.sp-reason--manualblock[b-j9dvxxhfng] { background: #f3f4f6; color: #4b5563; }

.sp-lift[b-j9dvxxhfng] {
    border: 0; background: none; padding: 0; cursor: pointer;
    font-size: 0.72rem; font-weight: 600; color: #9ca3af; text-decoration: underline;
}
.sp-lift:not(.sp-lift--armed):hover[b-j9dvxxhfng] { color: #1f2937; }
.sp-lift--armed[b-j9dvxxhfng] {
    color: #fff; background: #1f2937; text-decoration: none;
    padding: 0.15rem 0.55rem; border-radius: var(--kc-radius-pill, 999px);
}
.sp-lift--armed:hover[b-j9dvxxhfng] { background: #111827; }
.sp-lift:disabled[b-j9dvxxhfng] { opacity: 0.5; cursor: default; }
.sp-lifted[b-j9dvxxhfng] { font-size: 0.72rem; color: #9ca3af; }

.sp-empty[b-j9dvxxhfng] { padding: 2.5rem 1rem; text-align: center; color: var(--kc-muted, #666); }
.sp-empty-ico[b-j9dvxxhfng] { font-size: 1.8rem; margin-bottom: 0.4rem; }
.sp-empty p[b-j9dvxxhfng] { margin: 0.2rem 0; }
.sp-empty-sub[b-j9dvxxhfng] { font-size: 0.8rem; max-width: 46ch; margin-inline: auto; }
/* /Components/Pages/Utbildare.razor.rz.scp.css */
.ut[b-e14br2fs70] { max-width: 980px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.ut-loading[b-e14br2fs70], .ut-denied[b-e14br2fs70] { max-width: 980px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.ut-head[b-e14br2fs70] { margin-bottom: 1rem; }
.ut-title[b-e14br2fs70] { margin: 0; font-size: 1.35rem; color: var(--kc-navy, #324158); }
.ut-sub[b-e14br2fs70] { margin: 0.25rem 0 0; max-width: 70ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.ut-h2[b-e14br2fs70] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.ut-hint[b-e14br2fs70] { margin: 0 0 0.5rem; font-size: 0.82rem; color: #6b7280; }

.ut-toast[b-e14br2fs70], .ut-alert[b-e14br2fs70] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.ut-toast[b-e14br2fs70] { background: #ecfdf5; color: #065f46; }
.ut-alert[b-e14br2fs70] { background: #fef2f2; color: #991b1b; }

.ut-card[b-e14br2fs70] {
    border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; margin-bottom: 0.9rem;
}

.ut-form[b-e14br2fs70] { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.ut-fld[b-e14br2fs70] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ut-fld--grow[b-e14br2fs70] { flex: 1 1 16rem; }
.ut-fld > span[b-e14br2fs70] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.ut-input[b-e14br2fs70], .ut-select[b-e14br2fs70], .ut-area[b-e14br2fs70] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0; font-family: inherit;
}
.ut-area[b-e14br2fs70] { resize: vertical; line-height: 1.5; }
.ut-typed[b-e14br2fs70] { margin-top: 0.8rem; }

.ut-known[b-e14br2fs70] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.2rem;
    margin-bottom: 0.4rem;
}
.ut-check[b-e14br2fs70] {
    display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.4rem;
    border-radius: 8px; font-size: 0.87rem; cursor: pointer;
}
.ut-check:hover[b-e14br2fs70] { background: #f9fafb; }
.ut-tag[b-e14br2fs70] {
    padding: 0.02rem 0.35rem; border-radius: var(--kc-radius-pill, 999px);
    background: #fef3c7; color: #92400e; font-size: 0.6rem; font-weight: 700;
}

.ut-fine[b-e14br2fs70] { margin: 0.5rem 0 0.9rem; font-size: 0.75rem; color: #9ca3af; max-width: 70ch; line-height: 1.5; }

.ut-btn[b-e14br2fs70] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.5rem 1.1rem; font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.ut-btn:disabled[b-e14br2fs70] { opacity: 0.5; cursor: default; }

.ut-table[b-e14br2fs70] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ut-table th[b-e14br2fs70] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.ut-table td[b-e14br2fs70] { padding: 0.5rem; border-bottom: 1px solid #f3f4f6; white-space: nowrap; }
.ut-what[b-e14br2fs70] { font-weight: 600; }
.ut-dim[b-e14br2fs70] { color: #6b7280; }

/* TR-41: the session is opened before any names are shown. */
.ut-open-row[b-e14br2fs70] { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.9rem; }
.ut-open-row .ut-fine[b-e14br2fs70] { margin: 0; }
.ut-session[b-e14br2fs70] {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.9rem 0 0;
    padding: 0.5rem 0.75rem; border-radius: 8px; background: #eef6f1; color: #14532d; font-size: 0.85rem;
}
.ut-session__dot[b-e14br2fs70] { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #16a34a; flex: none; }
.ut-link[b-e14br2fs70] {
    border: 0; background: none; padding: 0; margin-left: 0.35rem; font: inherit; font-size: 0.85rem;
    color: var(--kc-navy, #324158); text-decoration: underline; cursor: pointer;
}
.ut-link:disabled[b-e14br2fs70] { opacity: 0.5; cursor: default; }
.ut-note[b-e14br2fs70] {
    margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: #fffbeb; color: #92400e;
    font-size: 0.85rem; max-width: 70ch;
}
.ut-fine--logged[b-e14br2fs70] { margin-top: 0.2rem; }
.ut-state[b-e14br2fs70] {
    display: inline-block; padding: 0.05rem 0.45rem; border-radius: var(--kc-radius-pill, 999px);
    background: #f3f4f6; color: #4b5563; font-size: 0.7rem; font-weight: 700;
}
.ut-state--open[b-e14br2fs70] { background: #dcfce7; color: #166534; }

@media (max-width: 640px) {
    .ut-table[b-e14br2fs70] { display: block; overflow-x: auto; }
}
/* /Components/Pages/Utbildning.razor.rz.scp.css */
/* The learner's page is drawn on the blue page frame (.kc-blueframe, kitcheck-design.css): a flex column that spaces its
   blocks 14px apart. What stood on the grey band is a white sheet (.kc-blueframe__sheet) or the frame's notice card now,
   so nothing here keeps the margin, the border or the 1180px width it had on the band. */

/* TR-20 (.ub-unlinked): the account's link to the person shown was undone while the page was open. Informational, not an
   error — nothing went wrong, and nothing was saved. The frame's notice card says it, as it says "Laddar…" and a failure
   (.ub-alert); the classes stay as the names tests and the page know them by. */

.ub-soon[b-8v8gtc0502] {
    padding: 0.75rem 0.9rem; border-radius: 10px;
    background: #fff7ed; color: #9a3412; font-size: 0.88rem; box-shadow: var(--kc-shadow-card);
}
.ub-soon strong[b-8v8gtc0502] { display: block; margin-bottom: 0.25rem; }
.ub-soon ul[b-8v8gtc0502] { margin: 0; padding-left: 1.1rem; }
.ub-soon li[b-8v8gtc0502] { margin: 0.1rem 0; }

/* The records are one white sheet with a heading, and the rows are the white cards they were, on the grey they were on —
   a well of the page's own band colour. The owner chose how an expired row fades by looking at it on that grey, and axe's
   floors for those words (Axe.RevertedByOwner) are measured on it: a fade is a blend with what is behind the row, so on
   plain white the same colours would read a little fainter. */
.ub-shelf[b-8v8gtc0502] { padding: 1rem; }
.ub-list[b-8v8gtc0502] {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.5rem; border-radius: 8px; background: var(--kc-section-band);
}

.ub-item[b-8v8gtc0502] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
}
/* A record that has run out is faded, its badge saying why ("gick ut …"). At 60 % its words are about 2:1, under
   WCAG's 4.5:1; the axe work (2026-10-11) replaced the fade with a grey dashed card and a darker badge, and the owner
   put the fade and the old badge back (2026-10-12). Readable expired records belong to the high-contrast theme
   (docs/Accessibility-Inventory-2026-10-11.md); axe spares this row's own words (Axe.RevertedByOwner). */
.ub-item.is-past[b-8v8gtc0502] { opacity: 0.6; }
.ub-item__main[b-8v8gtc0502] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ub-item__title[b-8v8gtc0502] { font-size: 0.95rem; font-weight: 600; color: #1f2937; }
.ub-item__meta[b-8v8gtc0502] { font-size: 0.78rem; color: #6b7280; }
.ub-item__right[b-8v8gtc0502] { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.ub-badge[b-8v8gtc0502] {
    padding: 0.15rem 0.55rem; border-radius: var(--kc-radius-pill, 999px);
    font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.ub-badge.is-ok[b-8v8gtc0502] { background: #ecfdf5; color: #065f46; }
.ub-badge.is-soon[b-8v8gtc0502] { background: #ffedd5; color: #9a3412; }
.ub-badge.is-past[b-8v8gtc0502] { background: #f3f4f6; color: #6b7280; }

/* Not ThemeBlue: #7AC0DA on white is 2:1, and these links are the way back to a finished course and its
   certificate. A deep blue reads at better than 6:1. */
.ub-link[b-8v8gtc0502] { font-size: 0.8rem; color: #1d4ed8; text-decoration: none; white-space: nowrap; }
.ub-link:hover[b-8v8gtc0502] { text-decoration: underline; }

/* The page's footnote, light grey: 2.5:1 on the white sheet (2.2:1 on the grey band it was set on), under WCAG's 4.5:1. The
   axe work (2026-10-11) darkened it, and the owner put this grey back (2026-10-12). A darker one belongs to the
   high-contrast theme (docs/Accessibility-Inventory-2026-10-11.md); axe spares this element (Axe.RevertedByOwner). */
.ub-note[b-8v8gtc0502] { margin-top: 1rem; font-size: 0.78rem; color: #9ca3af; max-width: 62ch; line-height: 1.5; }

.ub-empty[b-8v8gtc0502] { padding: 2.5rem 1rem; text-align: center; color: var(--kc-muted, #666); }
.ub-empty-ico[b-8v8gtc0502] { font-size: 1.8rem; margin-bottom: 0.4rem; }
.ub-empty p[b-8v8gtc0502] { margin: 0.2rem 0; }
/* ".ub-empty p" sets the margin too, and wins on specificity — so the centring has to be as specific. */
.ub-empty .ub-empty-sub[b-8v8gtc0502] { font-size: 0.85rem; max-width: 48ch; margin-inline: auto; line-height: 1.5; }

@media (max-width: 600px) {
    .ub-item[b-8v8gtc0502] { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

    /* TR-50: "Intyg" was 29×19 px on a phone. The link is the way to the certificate; a finger needs 44. */
    .ub-link[b-8v8gtc0502] {
        display: inline-flex; align-items: center; justify-content: center;
        min-height: var(--kc-touch-min, 44px); min-width: var(--kc-touch-min, 44px); padding: 0 0.3rem;
        font-size: 0.88rem;
    }
}

/* What happened to something the learner just did, when it is not a fault: "redan registrerad som klar". It is a
   .ub-note by name, and so inherits the footnote's grey and size above — which are too faint for something the learner
   needs to read. In the frame's notice card it has the card's own ink and size. */
.ub-note--action[b-8v8gtc0502] { margin: 0; max-width: none; color: var(--kc-ink); font-size: 0.875rem; line-height: 1.45; }

/* ---- Ingår i egenkontrollen (owner, 2026-10-13): courses anybody in the company may start ---- */

.ub-offer[b-8v8gtc0502] { padding: 1rem; }
.ub-offer__lead[b-8v8gtc0502] { margin: -0.2rem 0 0.6rem; font-size: 0.82rem; color: #4b5563; }
.ub-offer__list[b-8v8gtc0502] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ub-offer__item[b-8v8gtc0502] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
    padding: 0.7rem 0.8rem; border-radius: 8px; border-left: 3px solid #2563eb; background: #f9fafb;
}
.ub-offer__text[b-8v8gtc0502] { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ub-offer__title[b-8v8gtc0502] { font-weight: 600; color: #1f2937; }
.ub-offer__desc[b-8v8gtc0502] { font-size: 0.85rem; color: #374151; }
.ub-offer__meta[b-8v8gtc0502] { font-size: 0.78rem; color: #4b5563; }
/* A large target, as everything a learner presses on a phone. */
.ub-offer__start[b-8v8gtc0502] {
    flex: none; min-height: 44px; padding: 0.5rem 1.1rem; border-radius: 8px; border: 0;
    background: #1d4ed8; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.ub-offer__start:disabled[b-8v8gtc0502] { opacity: 0.6; cursor: default; }
.ub-offer__start:focus-visible[b-8v8gtc0502] { outline: 3px solid #93c5fd; outline-offset: 2px; }

/* ---- Krav för dig (TR-71): the learner's own row of the requirement matrix, read-only ---- */

/* The card's heading style, repeated: scoped CSS reaches only the component that declares it. */
.ub-h2[b-8v8gtc0502] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

.ub-reqs[b-8v8gtc0502] { padding: 1rem; }
.ub-reqs__lead[b-8v8gtc0502] { margin: -0.2rem 0 0.6rem; font-size: 0.82rem; color: #4b5563; }
.ub-reqs__list[b-8v8gtc0502] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }

/* Mark, title, verdict — the mark and the words carry the state; the colour only repeats it. */
.ub-req[b-8v8gtc0502] {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.45rem 0.7rem; border-radius: 8px; border-left: 3px solid #e5e7eb; background: #f9fafb;
    font-size: 0.88rem;
}
.ub-req__mark[b-8v8gtc0502] {
    flex: none; width: 1.5rem; height: 1.5rem; border-radius: 999px;
    display: grid; place-items: center; font-weight: 700; font-size: 0.85rem;
}
.ub-req__title[b-8v8gtc0502] { flex: 1 1 12rem; min-width: 0; font-weight: 600; color: #1f2937; }
.ub-req__state[b-8v8gtc0502] { flex: none; font-size: 0.8rem; font-weight: 600; }

.ub-req.is-met[b-8v8gtc0502] { border-left-color: #16a34a; }
.ub-req.is-met .ub-req__mark[b-8v8gtc0502] { background: #dcfce7; color: #166534; }
.ub-req.is-met .ub-req__state[b-8v8gtc0502] { color: #166534; }

.ub-req.is-soon[b-8v8gtc0502] { border-left-color: #d97706; }
.ub-req.is-soon .ub-req__mark[b-8v8gtc0502] { background: #fef3c7; color: #92400e; }
.ub-req.is-soon .ub-req__state[b-8v8gtc0502] { color: #92400e; }

.ub-req.is-expired[b-8v8gtc0502], .ub-req.is-missing[b-8v8gtc0502] { border-left-color: #dc2626; }
.ub-req.is-expired .ub-req__mark[b-8v8gtc0502], .ub-req.is-missing .ub-req__mark[b-8v8gtc0502] { background: #fee2e2; color: #991b1b; }
.ub-req.is-expired .ub-req__state[b-8v8gtc0502], .ub-req.is-missing .ub-req__state[b-8v8gtc0502] { color: #991b1b; }
/* /Components/Pages/Utbildningar.razor.rz.scp.css */
.ku[b-sd2f0uitlo] { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.ku-loading[b-sd2f0uitlo], .ku-denied[b-sd2f0uitlo] { max-width: 1180px; margin: 0 auto; padding: 2rem 1rem; color: var(--kc-muted, #666); }

.ku-head[b-sd2f0uitlo] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; }
.ku-title[b-sd2f0uitlo] { margin: 0; font-size: 1.35rem; color: var(--kc-navy, #324158); }
.ku-sub[b-sd2f0uitlo] { margin: 0.25rem 0 0; max-width: 68ch; color: var(--kc-muted, #666); font-size: 0.85rem; line-height: 1.5; }
.ku-h2[b-sd2f0uitlo] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }

.ku-pick[b-sd2f0uitlo] { flex: none; display: flex; flex-direction: column; gap: 0.2rem; min-width: 14rem; }
.ku-pick > span[b-sd2f0uitlo] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }

.ku-toast[b-sd2f0uitlo], .ku-alert[b-sd2f0uitlo] { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; font-size: 0.85rem; }
.ku-toast[b-sd2f0uitlo] { background: #ecfdf5; color: #065f46; }
.ku-alert[b-sd2f0uitlo] { background: #fef2f2; color: #991b1b; }

.ku-card[b-sd2f0uitlo] { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1rem; background: #fff; margin-bottom: 0.9rem; }

.ku-form[b-sd2f0uitlo] { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.ku-fld[b-sd2f0uitlo] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ku-fld--grow[b-sd2f0uitlo] { flex: 1 1 15rem; }
.ku-fld > span[b-sd2f0uitlo] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.ku-input[b-sd2f0uitlo], .ku-select[b-sd2f0uitlo] {
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.4rem 0.55rem;
    font-size: 0.85rem; background: #fff; width: 100%; min-width: 0; font-family: inherit;
}
.ku-select--slim[b-sd2f0uitlo] { width: auto; min-width: 11rem; }
.ku-note[b-sd2f0uitlo] { font-size: 0.72rem; color: #6b7280; }
.ku-fine[b-sd2f0uitlo] { margin: 0.6rem 0 0; font-size: 0.75rem; color: #9ca3af; max-width: 70ch; line-height: 1.5; }
.ku-none[b-sd2f0uitlo] { margin: 0; font-size: 0.85rem; color: #6b7280; }

.ku-btn[b-sd2f0uitlo] {
    border: 0; border-radius: 8px; background: var(--kc-navy, #1f2937); color: #fff;
    padding: 0.45rem 1rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.ku-btn:disabled[b-sd2f0uitlo] { opacity: 0.5; cursor: default; }
.ku-btn--ghost[b-sd2f0uitlo] { background: #fff; color: #374151; border: 1px solid #e5e7eb; font-weight: 500; }

.ku-course[b-sd2f0uitlo] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.7rem 0; border-bottom: 1px solid #f3f4f6;
}
.ku-course:last-of-type[b-sd2f0uitlo] { border-bottom: 0; }
.ku-course__main[b-sd2f0uitlo] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ku-course__title[b-sd2f0uitlo] { font-size: 0.95rem; font-weight: 600; color: #1f2937; display: flex; align-items: center; gap: 0.4rem; }
.ku-course__meta[b-sd2f0uitlo] { font-size: 0.78rem; color: #6b7280; }
.ku-course__right[b-sd2f0uitlo] { display: flex; align-items: center; gap: 0.5rem; flex: none; flex-wrap: wrap; justify-content: flex-end; }

.ku-tag[b-sd2f0uitlo] {
    padding: 0.02rem 0.4rem; border-radius: var(--kc-radius-pill, 999px);
    background: #eff6ff; color: #1e40af; font-size: 0.6rem; font-weight: 700;
}
.ku-sat[b-sd2f0uitlo] { color: #065f46; font-weight: 600; }
.ku-link[b-sd2f0uitlo] { font-size: 0.8rem; color: var(--kc-blue, #2563eb); text-decoration: none; white-space: nowrap; }
.ku-link:hover[b-sd2f0uitlo] { text-decoration: underline; }

/* ---- panels ----
   One card per job, each with a tinted header carrying its heading and a line of what it is for —
   the same idiom as the internal pages, so the two halves of the product read alike. */

.ku-courses[b-sd2f0uitlo], .ku-roster[b-sd2f0uitlo], .ku-order[b-sd2f0uitlo], .ku-seats[b-sd2f0uitlo] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    margin-bottom: 1rem;
}
.ku-courses[b-sd2f0uitlo], .ku-roster[b-sd2f0uitlo], .ku-order[b-sd2f0uitlo] { padding: 1rem 1.1rem; }

/* ---- places ----
   First on the page because it is the number that decides whether anything else on it can be done. */

.ku-seats[b-sd2f0uitlo] {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid var(--kc-green, #16a34a);
}
.ku-seats.is-empty[b-sd2f0uitlo] { border-left-color: #dc2626; background: #fef2f2; }
.ku-seats__main[b-sd2f0uitlo] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.ku-seats__head[b-sd2f0uitlo] {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280;
}
.ku-seats__figure[b-sd2f0uitlo] { font-size: 1.3rem; font-weight: 700; color: var(--kc-navy, #324158); }
.ku-seats__figure em[b-sd2f0uitlo] { font-style: normal; font-size: 0.9rem; font-weight: 500; color: #6b7280; }
.ku-seats__note[b-sd2f0uitlo] { font-size: 0.78rem; color: #6b7280; max-width: 68ch; line-height: 1.45; }
.ku-seats__right[b-sd2f0uitlo] { flex: none; }

.ku-order[b-sd2f0uitlo] { border-left: 4px solid var(--kc-blue, #2563eb); }
.ku-order p[b-sd2f0uitlo] { margin: 0 0 0.4rem; font-size: 0.85rem; color: #374151; line-height: 1.5; }
.ku-order__now[b-sd2f0uitlo] { font-weight: 600; color: var(--kc-navy, #324158); }

/* The standing request, shown back so a customer can see it landed rather than wondering. */
.ku-order__pending[b-sd2f0uitlo] {
    display: flex; flex-direction: column; gap: 0.2rem;
    margin: 0.6rem 0; padding: 0.7rem 0.85rem; border-radius: 10px;
    background: #eff6ff; color: #1e3a8a; font-size: 0.83rem;
}
.ku-order__pending .ku-hint[b-sd2f0uitlo] { color: #3b6fc4; }
.ku-order__note[b-sd2f0uitlo] { font-style: italic; }

.ku-order__form[b-sd2f0uitlo] {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.7rem;
    margin-top: 0.7rem;
}
.ku-order__form .ku-input--num[b-sd2f0uitlo] { width: 6.5rem; }
.ku-hint[b-sd2f0uitlo] { margin: 0.5rem 0 0; font-size: 0.78rem; color: #9ca3af; }

/* ---- who did what ---- */

.ku-table[b-sd2f0uitlo] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ku-table th[b-sd2f0uitlo] {
    text-align: left; padding: 0.4rem 0.5rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.ku-table td[b-sd2f0uitlo] { padding: 0.5rem; border-bottom: 1px solid #f3f4f6; }
.ku-table tbody tr:last-child td[b-sd2f0uitlo] { border-bottom: 0; }
.ku-table tbody tr:hover[b-sd2f0uitlo] { background: #fafafa; }

.ku-badge[b-sd2f0uitlo] {
    display: inline-flex; align-items: center; padding: 0.1rem 0.5rem;
    border-radius: var(--kc-radius-pill, 999px); font-size: 0.68rem; font-weight: 700;
}
.ku-badge--assigned[b-sd2f0uitlo] { background: #f3f4f6; color: #6b7280; }
.ku-badge--started[b-sd2f0uitlo] { background: #fef3c7; color: #92400e; }
.ku-badge--completed[b-sd2f0uitlo] { background: #d1fae5; color: #065f46; }

/* ---- out of attempts (TR-11): the state, and the one action that helps ---- */
.ku-badge--blocked[b-sd2f0uitlo] { background: #fee2e2; color: #991b1b; }
.ku-blocked[b-sd2f0uitlo] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-top: 0.35rem; }
.ku-btn--small[b-sd2f0uitlo] { padding: 0.3rem 0.7rem; font-size: 0.78rem; min-height: 2.2rem; }
.ku-grant[b-sd2f0uitlo] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; width: 100%; margin-top: 0.25rem; }
.ku-grant .ku-btn[b-sd2f0uitlo] { min-height: 2.2rem; }

/* A course listed but not yet assignable (TR-16): said in words, not only by a greyed button. */
.ku-unpublished[b-sd2f0uitlo] { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.78rem; color: #92400e; }
.ku-tag--muted[b-sd2f0uitlo] { background: #fef3c7; color: #92400e; }

/* A phone. The unit picker kept its 14rem beside the title and pushed the page sideways, and a course's
   explanation was squeezed into a column beside its button. Stacked: picker under the title, and the
   button under the course it belongs to. */
@media (max-width: 640px) {
    .ku-head[b-sd2f0uitlo] { flex-direction: column; gap: 0.6rem; }
    .ku-pick[b-sd2f0uitlo] { min-width: 0; width: 100%; }
    .ku-course[b-sd2f0uitlo] { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .ku-course__right[b-sd2f0uitlo] { justify-content: flex-start; }
    .ku-select--slim[b-sd2f0uitlo] { min-width: 0; }

    /* TR-50: the roster fits a phone. A name, a course, a status that can carry the "one more attempt" form, and a
       date pushed the page 13 px sideways at 375 px: the status's button would not wrap. It wraps between words now,
       like everything else in a cell, and the cells and the card give back some of their padding. */
    .ku-courses[b-sd2f0uitlo], .ku-roster[b-sd2f0uitlo], .ku-order[b-sd2f0uitlo] { padding: 0.9rem 0.75rem; }
    .ku-table th[b-sd2f0uitlo], .ku-table td[b-sd2f0uitlo] { padding: 0.45rem 0.3rem; }
    .ku-table .ku-btn[b-sd2f0uitlo] { white-space: normal; text-align: left; }
}
/* ---- course-requirement links are company policy (TR-39) ---- */
.ku-linkby[b-sd2f0uitlo] { color: #6b7280; }
.ku-policy-note[b-sd2f0uitlo] { margin: -0.25rem 0 0.5rem; color: #6b7280; }
/* The confirmation takes its own line under the course it is about. */
.ku-course:has(.ku-confirm)[b-sd2f0uitlo] { flex-wrap: wrap; }
.ku-confirm[b-sd2f0uitlo] {
    flex-basis: 100%; padding: 0.65rem 0.8rem; border-radius: 8px;
    background: #fff7ed; border-left: 3px solid #fdba74; color: #7c2d12;
}
.ku-confirm p[b-sd2f0uitlo] { margin: 0 0 0.35rem; font-size: 0.85rem; }
.ku-confirm .ku-hint[b-sd2f0uitlo] { color: #9a3412; }
.ku-confirm__acts[b-sd2f0uitlo] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* ---- how far, and why stuck (TR-49) ----
   Each concern is an icon and words; the colour only sits beside them. */
.ku-roster__head[b-sd2f0uitlo] { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.ku-roster__head .ku-h2[b-sd2f0uitlo] { margin-bottom: 0.6rem; }
.ku-roster__filter[b-sd2f0uitlo] { margin-bottom: 0.6rem; min-width: 14rem; }
.ku-roster__filter .ku-select[b-sd2f0uitlo] { min-height: 2.75rem; }
.ku-table--roster td[b-sd2f0uitlo] { vertical-align: top; }
.ku-rlink[b-sd2f0uitlo] {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    color: #1d4ed8; text-decoration: none; font-weight: 600;
}
.ku-rlink:hover[b-sd2f0uitlo] { text-decoration: underline; }
.ku-cert[b-sd2f0uitlo] { margin-left: 0.4rem; }
.ku-concern[b-sd2f0uitlo] { margin: 0.25rem 0.25rem 0 0; gap: 0.25rem; white-space: normal; }
.ku-concern--timeout[b-sd2f0uitlo] { background: #fee2e2; color: #991b1b; }
.ku-concern--unfiled[b-sd2f0uitlo] { background: #fef3c7; color: #92400e; }
.ku-concern--waiting[b-sd2f0uitlo] { background: #dbeafe; color: #1e40af; }
.ku-concern--idle[b-sd2f0uitlo] { background: #f3f4f6; color: #374151; }
.ku-parts[b-sd2f0uitlo] { display: block; }
.ku-seen[b-sd2f0uitlo] { display: block; }
.ku-quiz[b-sd2f0uitlo] { display: flex; flex-direction: column; margin-bottom: 0.25rem; }
.ku-quiz__title[b-sd2f0uitlo] { font-weight: 600; color: #1f2937; }

/* A phone: one block per person-and-course, each value under its own label, nothing wider than the screen. */
@media (max-width: 640px) {
    .ku-roster__filter[b-sd2f0uitlo] { width: 100%; min-width: 0; }
    .ku-table--roster thead[b-sd2f0uitlo] { display: none; }
    .ku-table--roster[b-sd2f0uitlo], .ku-table--roster tbody[b-sd2f0uitlo], .ku-table--roster tr[b-sd2f0uitlo], .ku-table--roster td[b-sd2f0uitlo] { display: block; width: 100%; }
    .ku-table--roster tr[b-sd2f0uitlo] { padding: 0.5rem 0; border-bottom: 1px solid #e5e7eb; }
    .ku-table--roster td[b-sd2f0uitlo] { border: 0; padding: 0.15rem 0; overflow-wrap: anywhere; }
    .ku-table--roster td[b-sd2f0uitlo]::before {
        content: attr(data-label); display: block; font-size: 0.62rem; text-transform: uppercase;
        letter-spacing: 0.04em; color: #6b7280;
    }
}

/* ---- due days (TR-47) and renewals (TR-48) ---- */

/* The optional day beside "Tilldela": a small labelled field, so the button still reads as the action. */
.ku-due-pick[b-sd2f0uitlo] { display: flex; flex-direction: column; gap: 0.15rem; }
.ku-due-pick > span[b-sd2f0uitlo] { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6b7280; }
.ku-input--date[b-sd2f0uitlo] { width: auto; min-width: 9.5rem; min-height: 2.2rem; }

/* Late: a marked badge, and the words beside it — never the colour alone. */
.ku-badge--late[b-sd2f0uitlo] { background: #fee2e2; color: #991b1b; }
.ku-due[b-sd2f0uitlo] { white-space: normal; }
.ku-due__day[b-sd2f0uitlo] { font-variant-numeric: tabular-nums; }
.ku-due .ku-note[b-sd2f0uitlo] { display: block; }
.ku-due__line[b-sd2f0uitlo] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; }
.ku-due__line .ku-btn--small[b-sd2f0uitlo] { min-height: 2rem; padding: 0.2rem 0.6rem; }
.ku-due__edit[b-sd2f0uitlo] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem; }

.ku-late-filter[b-sd2f0uitlo] {
    display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem;
    min-height: 2.2rem; font-size: 0.85rem; color: #374151; cursor: pointer;
}
.ku-late-filter input[b-sd2f0uitlo] { width: 1.1rem; height: 1.1rem; }

/* Who needs renewing: its own panel, amber-edged — something to act on, not yet a failure. */
.ku-renew[b-sd2f0uitlo] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-left: 4px solid #d97706;
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    margin-bottom: 1rem; padding: 1rem 1.1rem;
}
.ku-renew__list[b-sd2f0uitlo] { list-style: none; margin: 0; padding: 0; }
.ku-renew__row[b-sd2f0uitlo] {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.55rem 0; border-bottom: 1px solid #f3f4f6;
}
.ku-renew__row:last-child[b-sd2f0uitlo] { border-bottom: 0; }
.ku-renew__main[b-sd2f0uitlo] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.75rem; min-width: 0; }
.ku-renew__who[b-sd2f0uitlo] { font-weight: 600; color: #1f2937; }
.ku-renew__what[b-sd2f0uitlo] { color: #374151; }
.ku-renew__when[b-sd2f0uitlo] { font-size: 0.8rem; color: #92400e; font-variant-numeric: tabular-nums; }
.ku-renew__right[b-sd2f0uitlo] { flex: none; }
.ku-renew__state[b-sd2f0uitlo] { font-size: 0.82rem; color: #065f46; font-weight: 600; }
.ku-renew__state--warn[b-sd2f0uitlo] { color: #92400e; }

@media (max-width: 640px) {
    .ku-renew__row[b-sd2f0uitlo] { flex-direction: column; align-items: stretch; gap: 0.4rem; }
    .ku-due-pick[b-sd2f0uitlo] { width: 100%; }
    .ku-input--date[b-sd2f0uitlo] { width: 100%; }
    /* The roster keeps its columns on a phone and scrolls inside its own card, never the page. */
    .ku-roster[b-sd2f0uitlo] { overflow-x: auto; }
}

/* ---- who goes on the course (TR-12) ----
   "Tilldela personal…" opens the choice under the course it is about, as the unlink confirmation does — in plain
   colours, because choosing people is not a warning. Who has done the course is listed, not ticked. */
.ku-course:has(.ku-assign)[b-sd2f0uitlo] { flex-wrap: wrap; }
.ku-assign[b-sd2f0uitlo] {
    flex-basis: 100%; min-width: 0; padding: 0.75rem 0.85rem; border-radius: 8px;
    background: #f9fafb; border-left: 3px solid var(--kc-navy, #324158); color: #1f2937;
}
/* Focus is moved into the choice when it opens; the ring shows for a keyboard user, not after a mouse click. */
.ku-assign:focus[b-sd2f0uitlo] { outline: none; }
.ku-assign:focus-visible[b-sd2f0uitlo] { outline: 2px solid var(--kc-blue, #2563eb); outline-offset: 2px; }
.ku-assign p[b-sd2f0uitlo] { margin: 0 0 0.4rem; font-size: 0.85rem; line-height: 1.45; }
.ku-assign__sum[b-sd2f0uitlo] { color: #374151; }
.ku-assign__retake[b-sd2f0uitlo] {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.2rem;
    font-size: 0.88rem; font-weight: 600; color: #1f2937; cursor: pointer;
}
.ku-assign__retake input[b-sd2f0uitlo], .ku-assign__person input[b-sd2f0uitlo] { width: 1.1rem; height: 1.1rem; flex: none; }
.ku-assign p.ku-assign__note[b-sd2f0uitlo] { margin-top: -0.1rem; font-size: 0.78rem; color: #4b5563; }
.ku-assign__people[b-sd2f0uitlo] { border: 0; margin: 0.4rem 0 0; padding: 0; min-width: 0; }
.ku-assign__people legend[b-sd2f0uitlo] {
    padding: 0; margin-bottom: 0.3rem; font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.03em; color: #4b5563;
}
.ku-assign__people ul[b-sd2f0uitlo] {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 0.1rem 1rem;
}
.ku-assign__person label[b-sd2f0uitlo] {
    display: flex; align-items: flex-start; gap: 0.5rem; min-height: 2.2rem; padding: 0.3rem 0;
    font-size: 0.85rem; cursor: pointer;
}
.ku-assign__person input[b-sd2f0uitlo] { margin-top: 0.15rem; }
.ku-assign__person.is-out label[b-sd2f0uitlo] { cursor: default; }
.ku-assign__text[b-sd2f0uitlo] { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ku-assign__name[b-sd2f0uitlo] { font-weight: 600; color: #1f2937; }
.ku-assign__person.is-out .ku-assign__name[b-sd2f0uitlo] { font-weight: 500; color: #374151; }
.ku-assign__why[b-sd2f0uitlo] { font-size: 0.75rem; color: #4b5563; }
.ku-assign p.ku-assign__warn[b-sd2f0uitlo] { color: #991b1b; font-weight: 600; }

/* In the roster: why a place was given — a renewal, or a retake and who required it. */
.ku-basis[b-sd2f0uitlo] { display: block; margin-top: 0.25rem; }
/* /Components/Pages/UtbildningarPerson.razor.rz.scp.css */
.up[b-lcjexhowlz] { max-width: 1180px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.up-loading[b-lcjexhowlz] { color: #4b5563; }

/* Tap targets a thumb can hit (44 px) — this page is opened from a phone, out of a mail. */
.up-back[b-lcjexhowlz], .up-link[b-lcjexhowlz] {
    display: inline-flex; align-items: center; min-height: 2.75rem;
    color: #1d4ed8; text-decoration: none; font-size: 0.85rem;
}
.up-back:hover[b-lcjexhowlz], .up-link:hover[b-lcjexhowlz] { text-decoration: underline; }
.up-link[b-lcjexhowlz] { font-weight: 600; white-space: nowrap; }

.up-alert[b-lcjexhowlz] {
    margin: 0.5rem 0; padding: 0.8rem 1rem; border-radius: 10px; background: #fef2f2; color: #991b1b;
    font-size: 0.9rem; max-width: 70ch;
}

.up-head[b-lcjexhowlz] { margin: 0.25rem 0 1rem; }
.up-title[b-lcjexhowlz] { margin: 0; font-size: 1.35rem; color: var(--kc-navy, #324158); overflow-wrap: anywhere; }
.up-sub[b-lcjexhowlz] { margin: 0.25rem 0 0; color: #4b5563; font-size: 0.85rem; }

.up-panel[b-lcjexhowlz] {
    background: var(--kc-surface, #fff);
    border: 1px solid var(--kc-border-soft, rgba(0, 0, 0, .1));
    border-radius: var(--kc-radius-card, 0.5rem);
    box-shadow: var(--kc-shadow-card, 0 1px 3px rgba(0, 0, 0, .1));
    padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.up-h2[b-lcjexhowlz] { margin: 0 0 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.up-none[b-lcjexhowlz] { margin: 0; font-size: 0.85rem; color: #6b7280; }
.up-note[b-lcjexhowlz] { font-size: 0.78rem; color: #6b7280; }

.up-course[b-lcjexhowlz] { padding: 0.9rem 0; border-bottom: 1px solid #f3f4f6; }
.up-course:last-of-type[b-lcjexhowlz] { border-bottom: 0; }
.up-course__head[b-lcjexhowlz] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.up-course__title[b-lcjexhowlz] { margin: 0; font-size: 1rem; color: #1f2937; overflow-wrap: anywhere; }

.up-badge[b-lcjexhowlz] {
    display: inline-flex; align-items: center; padding: 0.1rem 0.5rem;
    border-radius: var(--kc-radius-pill, 999px); font-size: 0.7rem; font-weight: 700;
}
.up-badge--assigned[b-lcjexhowlz] { background: #f3f4f6; color: #4b5563; }
.up-badge--started[b-lcjexhowlz] { background: #fef3c7; color: #92400e; }
.up-badge--completed[b-lcjexhowlz] { background: #d1fae5; color: #065f46; }

/* Why they are behind: an icon and a sentence, the colour only beside them. */
.up-concerns[b-lcjexhowlz] { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.up-concern[b-lcjexhowlz] {
    display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.7rem; border-radius: 8px;
    border-left: 4px solid #9ca3af; background: #f9fafb; font-size: 0.83rem; color: #374151; line-height: 1.45;
    max-width: 75ch;
}
.up-concern strong[b-lcjexhowlz] { color: #111827; }
.up-concern--blocked[b-lcjexhowlz], .up-concern--timeout[b-lcjexhowlz] { border-left-color: #dc2626; background: #fef2f2; }
.up-concern--unfiled[b-lcjexhowlz] { border-left-color: #d97706; background: #fffbeb; }
.up-concern--waiting[b-lcjexhowlz] { border-left-color: #2563eb; background: #eff6ff; }
.up-concern--idle[b-lcjexhowlz] { border-left-color: #6b7280; background: #f3f4f6; }

.up-facts[b-lcjexhowlz] { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; margin: 0.7rem 0 0; }
.up-facts div[b-lcjexhowlz] { display: flex; flex-direction: column; }
.up-facts dt[b-lcjexhowlz] { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; color: #6b7280; }
.up-facts dd[b-lcjexhowlz] { margin: 0; font-size: 0.85rem; color: #1f2937; }

.up-parts-sum[b-lcjexhowlz] { margin: 0.7rem 0 0.25rem; font-size: 0.85rem; font-weight: 600; color: #1f2937; }
.up-parts[b-lcjexhowlz] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.15rem; }
.up-parts li[b-lcjexhowlz] { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; color: #374151; }
.up-parts li.is-done[b-lcjexhowlz] { color: #065f46; }
.up-mark[b-lcjexhowlz] { width: 1.1rem; flex: none; text-align: center; font-weight: 700; }
.up-part-state[b-lcjexhowlz] { font-size: 0.72rem; color: #6b7280; }

.up-quiz[b-lcjexhowlz] { width: 100%; max-width: 760px; border-collapse: collapse; margin-top: 0.7rem; font-size: 0.84rem; }
.up-quiz th[b-lcjexhowlz] {
    text-align: left; padding: 0.35rem 0.5rem; font-size: 0.65rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: #6b7280; border-bottom: 1px solid #e5e7eb;
}
.up-quiz td[b-lcjexhowlz] { padding: 0.4rem 0.5rem; border-bottom: 1px solid #f3f4f6; }

.up-records[b-lcjexhowlz] { list-style: none; margin: 0; padding: 0; }
.up-record[b-lcjexhowlz] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.35rem 0; border-bottom: 1px solid #f3f4f6;
}
.up-record:last-child[b-lcjexhowlz] { border-bottom: 0; }
.up-record__main[b-lcjexhowlz] { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.up-record__title[b-lcjexhowlz] { font-weight: 600; color: #1f2937; overflow-wrap: anywhere; }
.up-record.is-superseded .up-record__title[b-lcjexhowlz] { color: #6b7280; }

/* A phone: the quiz table becomes one block per quiz, each value under its own label. */
@media (max-width: 640px) {
    .up-quiz thead[b-lcjexhowlz] { display: none; }
    .up-quiz[b-lcjexhowlz], .up-quiz tbody[b-lcjexhowlz], .up-quiz tr[b-lcjexhowlz], .up-quiz td[b-lcjexhowlz] { display: block; width: 100%; }
    .up-quiz tr[b-lcjexhowlz] { padding: 0.4rem 0; border-bottom: 1px solid #e5e7eb; }
    .up-quiz td[b-lcjexhowlz] { border: 0; padding: 0.1rem 0; }
    .up-quiz td[b-lcjexhowlz]::before {
        content: attr(data-label); display: block; font-size: 0.62rem; text-transform: uppercase;
        letter-spacing: 0.04em; color: #6b7280;
    }
    .up-record[b-lcjexhowlz] { align-items: flex-start; flex-direction: column; gap: 0; }
}