/* kep7 look: calm and quiet, like a well-kept notebook. Warm dark-grey text on white, a light grey sidebar,
   thin soft borders, grey hover highlights, one blue for actions. */
:root {
    --k-text: #37352f;
    --k-muted: rgba(55, 53, 47, 0.72);
    --k-faint: rgba(55, 53, 47, 0.5);
    --k-bg: #ffffff;
    --k-sidebar: #f7f7f5;
    --k-hover: rgba(55, 53, 47, 0.06);
    --k-active: rgba(55, 53, 47, 0.1);
    --k-border: rgba(55, 53, 47, 0.16);
    --k-border-soft: rgba(55, 53, 47, 0.09);
    --k-accent: #2383e2;
    --k-accent-dark: #0b6bcb;
    --k-accent-soft: rgba(35, 131, 226, 0.1);
    --k-red: #d44c47;
    --k-red-soft: #fdebec;
    --k-yellow-soft: #fbf3db;
    --k-green-soft: #edf3ec;
    --k-blue-soft: #e7f3f8;
    --k-radius: 6px;

    --bs-body-color: var(--k-text);
    --bs-body-bg: var(--k-bg);
    --bs-border-color: var(--k-border);
    --bs-secondary-color: var(--k-muted);
    --bs-link-color: var(--k-text);
    --bs-link-color-rgb: 55, 53, 47;
    --bs-link-hover-color: var(--k-text);
    --bs-body-font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif;
}

html, body {
    font-family: var(--bs-body-font-family);
    color: var(--k-text);
    background: var(--k-bg);
    -webkit-font-smoothing: antialiased;
}

body { font-size: 16px; line-height: 1.5; }

h1, .h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
h2, .h2 { font-size: 1.5rem; font-weight: 600; margin-top: 2rem; }
h3, .h3 { font-size: 1.25rem; font-weight: 600; }
.h4 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; }
.h5 { font-size: 1.05rem; font-weight: 600; }
.h6 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--k-faint); }
@media (max-width: 767.98px) { h1, .h1 { font-size: 1.9rem; } }
h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none !important; }

a { color: var(--k-text); text-decoration: underline; text-decoration-color: var(--k-border); text-underline-offset: 3px; }
a:hover { color: var(--k-text); text-decoration-color: var(--k-text); }
.text-muted { color: var(--k-muted) !important; }
hr { border-color: var(--k-border-soft); opacity: 1; }
code { color: #eb5757; background: rgba(135, 131, 120, 0.15); padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.85em; }

/* Buttons */
.btn { border-radius: var(--k-radius); font-weight: 500; font-size: 0.95rem; padding: 0.4rem 0.85rem; box-shadow: none !important; }
.btn-lg { font-size: 1.05rem; padding: 0.6rem 1rem; }
.btn-sm { font-size: 0.85rem; padding: 0.2rem 0.55rem; }
.btn-primary { background: var(--k-accent); border-color: var(--k-accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--k-accent-dark) !important; border-color: var(--k-accent-dark) !important; color: #fff !important; }
.btn-outline-primary, .btn-outline-secondary { background: #fff; border-color: var(--k-border); color: var(--k-text); }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-primary:active, .btn-outline-secondary:active { background: var(--k-hover) !important; border-color: var(--k-border) !important; color: var(--k-text) !important; }
.btn-outline-danger { background: #fff; border-color: var(--k-border); color: var(--k-red); }
.btn-outline-danger:hover, .btn-outline-danger:active { background: var(--k-red-soft) !important; border-color: var(--k-red) !important; color: var(--k-red) !important; }
.btn-danger { background: var(--k-red); border-color: var(--k-red); }
.btn-link { color: var(--k-text); }
.btn:disabled { opacity: 0.45; }
:focus-visible { outline: 2px solid var(--k-accent) !important; outline-offset: 2px; }

/* Inputs */
.form-control, .form-select { border-color: var(--k-border); border-radius: var(--k-radius); color: var(--k-text); background-color: #fff; }
.form-control::placeholder { color: var(--k-faint); }
.form-control:focus, .form-select:focus { border-color: var(--k-accent); box-shadow: 0 0 0 3px var(--k-accent-soft); }
.form-label { font-size: 0.85rem; font-weight: 500; color: var(--k-muted); margin-bottom: 0.3rem; }
.form-text, .small { color: var(--k-muted); }
.form-check-input { border-color: var(--k-border); }
.form-check-input:checked { background-color: var(--k-accent); border-color: var(--k-accent); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--k-accent-soft); }
.input-group-text { background: var(--k-sidebar); border-color: var(--k-border); color: var(--k-muted); }
.form-floating > label { color: var(--k-faint); }
.darker-border-checkbox.form-check-input { border-color: var(--k-border); }
.form-floating > .form-control::placeholder { color: transparent; }
.valid.modified:not([type=checkbox]) { outline: none; }
.invalid { border-color: var(--k-red) !important; }
.validation-message, .text-danger { color: var(--k-red) !important; }

/* Callouts instead of loud alerts */
.alert { border: 0; border-radius: var(--k-radius); color: var(--k-text); padding: 0.75rem 1rem; }
.alert-success { background: var(--k-green-soft); }
.alert-danger { background: var(--k-red-soft); }
.alert-warning { background: var(--k-yellow-soft); }
.alert-info { background: var(--k-blue-soft); }

/* Cards and badges */
.card { border: 1px solid var(--k-border-soft); border-radius: 8px; box-shadow: none; }
.card-body { padding: 1.25rem; }
.badge { font-weight: 500; border-radius: 4px; padding: 0.25em 0.5em; }
.text-bg-light { background: rgba(227, 226, 224, 0.6) !important; color: var(--k-text) !important; }
.text-bg-primary { background: var(--k-accent-soft) !important; color: var(--k-accent-dark) !important; }
.text-bg-warning { background: var(--k-yellow-soft) !important; color: #956400 !important; }
.nav-pills .nav-link { color: var(--k-muted); border-radius: var(--k-radius); padding: 0.35rem 0.75rem; font-size: 0.95rem; }
.nav-pills .nav-link:hover { background: var(--k-hover); color: var(--k-text); }
.nav-pills .nav-link.active { background: var(--k-active); color: var(--k-text); }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ---------- Lists of projects, workflows, forms: quiet rows that highlight on hover ---------- */
.k-list { display: flex; flex-direction: column; gap: 2px; margin: 0.5rem 0 1rem; }
.k-tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 10px; border-radius: var(--k-radius);
          text-decoration: none; color: var(--k-text); }
.k-tile::before { content: "📄"; font-size: 0.95rem; }
.k-tile:hover { background: var(--k-hover); color: var(--k-text); }
.k-tile strong { font-weight: 500; }
.k-tile .text-muted { font-size: 0.9rem; flex-basis: 100%; padding-left: 1.6rem; }
.k-tile .badge { margin-left: auto; }

/* ---------- A workflow's form buttons: big enough to tap, quiet to look at ---------- */
.k-menu { display: grid; gap: 10px; }
@media (min-width: 576px) { .k-menu { grid-template-columns: 1fr 1fr; } }
.k-menu-btn { display: flex; align-items: center; min-height: 64px; padding: 12px 16px; border: 1px solid var(--k-border); border-radius: 10px;
              font-size: 1.05rem; font-weight: 500; text-decoration: none; color: var(--k-text); background: #fff;
              transition: background 0.1s; }
.k-menu-btn::after { content: "→"; margin-left: auto; color: var(--k-faint); }
.k-menu-btn:hover, .k-menu-btn:focus-visible { background: var(--k-hover); color: var(--k-text); }

/* ---------- Filling in a form ---------- */
.k-form { margin-top: 1.5rem; }
.k-q { margin-bottom: 28px; }
.k-q-label { font-weight: 600; font-size: 1.05rem; margin-bottom: 10px; }
.k-q-error .k-q-label { color: var(--k-red); }
.k-choices { display: grid; gap: 8px; }
.k-choice { min-height: 52px; padding: 6px 10px; border: 1px solid var(--k-border); border-radius: 8px; background: #fff; font-weight: 500;
            color: var(--k-text); transition: background 0.1s, border-color 0.1s; }
.k-choice:hover { background: var(--k-hover); }
.k-choice.on { background: var(--k-accent-soft); border-color: var(--k-accent); color: var(--k-accent-dark); font-weight: 600; }
.k-slider-value { display: block; text-align: center; font-size: 2rem; font-weight: 700; }
.k-slider .form-range { height: 2.2rem; }
.k-slider .form-range::-webkit-slider-thumb { background: var(--k-accent); }
.k-slider .form-range::-moz-range-thumb { background: var(--k-accent); }
.k-slider-ends { display: flex; justify-content: space-between; color: var(--k-muted); font-size: 0.9rem; }
.k-counter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-items: center; text-align: center; }
.k-counter output { font-size: 2rem; font-weight: 700; }
.k-duration { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.k-save { min-height: 52px; margin-top: 8px; }

/* ---------- Entries ---------- */
.k-entries { margin: 0; }
.k-entries li { padding: 10px 10px; border-bottom: 1px solid var(--k-border-soft); }
.k-entries li.k-late { background: var(--k-yellow-soft); border-radius: var(--k-radius); }
.k-answer { display: inline-block; margin-right: 14px; color: var(--k-muted); font-size: 0.93rem; }
.k-answer strong { color: var(--k-text); font-weight: 500; }

/* ---------- Designer screens ---------- */
.k-editor { padding-bottom: 24px; }
.k-editor .card { margin-bottom: 1rem; }
.k-editor .border.rounded { border-color: var(--k-border-soft) !important; border-radius: 8px !important; }
.k-editor .border-primary { border-color: var(--k-accent) !important; box-shadow: 0 0 0 3px var(--k-accent-soft); }
.k-editor-bar { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0;
                background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(4px); border-top: 1px solid var(--k-border-soft); z-index: 10; }

/* ---------- The form canvas: everything sized in em / container units so it scales with the screen ---------- */
.k-fill.k-wide { max-width: 1280px; margin: 0 auto; }
.kc-wrap { container-type: inline-size; width: 100%; margin: 0 auto; }
.kc-canvas { position: relative; width: 100%; line-height: 1.35; }
.kc-canvas:focus, .kc-canvas:focus-visible { outline: none !important; }
.kc-item { position: absolute; box-sizing: border-box; }
.kc-el-question, .kc-el-heading, .kc-el-text, .kc-el-save { z-index: 1; }
.kc-box { position: absolute; inset: 0; border: 1px solid var(--k-border); border-radius: 0.5em; }
.kc-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 0.125em solid var(--k-border); }
.kc-el-heading { font-size: 1.5em; }
.kc-heading { font-weight: 700; line-height: 1.2; white-space: pre-wrap; }
.kc-text { white-space: pre-wrap; }
.kc-q-label { font-weight: 600; font-size: 1.05em; margin-bottom: 0.6em; }
.kc-req { color: var(--k-red); margin-left: 0.15em; }
.kc-help { color: var(--k-muted); font-size: 0.9em; margin: -0.4em 0 0.6em; }
.kc-error { color: var(--k-red); font-size: 0.9em; margin-top: 0.35em; }
.kc-choices { display: grid; gap: 0.5em; }
.kc-when { grid-template-columns: repeat(3, 1fr); }
.kc-choice { min-height: 3.25em; padding: 0.35em 0.6em; border: 1px solid var(--k-border); border-radius: 0.5em; background: #fff;
             font: inherit; font-weight: 500; color: var(--k-text); transition: background 0.1s, border-color 0.1s; }
.kc-choice:hover { background: var(--k-hover); }
.kc-choice.on { background: var(--k-accent-soft); border-color: var(--k-accent); color: var(--k-accent-dark); font-weight: 600; }
.kc-input { display: block; width: 100%; min-height: 2.9em; padding: 0.45em 0.75em; border: 1px solid var(--k-border); border-radius: 0.4em;
            font: inherit; color: var(--k-text); background: #fff; margin-top: 0.5em; }
.kc-row .kc-input, .kc-q-label + .kc-input, .kc-help + .kc-input { margin-top: 0; }
.kc-input:focus { outline: none; border-color: var(--k-accent); box-shadow: 0 0 0 0.2em var(--k-accent-soft); }
.kc-note { min-height: 6em; resize: vertical; }
.kc-row { display: flex; align-items: center; gap: 0.5em; }
.kc-unit { color: var(--k-muted); }
.kc-slider output, .kc-counter output { display: block; text-align: center; font-size: 2em; font-weight: 700; line-height: 1.2; }
.kc-slider input[type=range] { width: 100%; height: 2.2em; accent-color: var(--k-accent); }
.kc-ends { display: flex; justify-content: space-between; color: var(--k-muted); font-size: 0.9em; }
.kc-counter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5em; align-items: center; }
.kc-duration { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.kc-save-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; }
.kc-save { width: 100%; flex: 1; min-height: 2.8em; border: 0; border-radius: 0.5em; background: var(--k-accent); color: #fff;
           font: inherit; font-weight: 600; }
.kc-save:hover { background: var(--k-accent-dark); }
.kc-save:disabled { opacity: 0.5; }
.kc-problem { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 0.4em; }

/* ---------- Designer ---------- */
.k-designer { max-width: none; }
.k-dbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -40px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--k-border-soft); }
@media (max-width: 767.98px) { .k-dbar { margin-top: 0; } }
.k-dbar-back { text-decoration: none; font-size: 1.2rem; padding: 2px 8px; border-radius: var(--k-radius); }
.k-dbar-back:hover { background: var(--k-hover); }
.k-dbar-name { font-size: 1.4rem; font-weight: 700; border: 0; border-radius: var(--k-radius); padding: 2px 6px; color: var(--k-text); min-width: 8rem; max-width: 22rem; }
.k-dbar-name:hover { background: var(--k-hover); }
.k-dbar-name:focus { outline: none; background: var(--k-hover); }
.k-dbar-status { color: var(--k-muted); font-size: 0.85rem; }
.k-dgrid { display: grid; grid-template-columns: 190px minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .k-dgrid { grid-template-columns: 170px minmax(0, 1fr); } .k-props { grid-column: 1 / -1; } }
@media (max-width: 700px) { .k-dgrid { grid-template-columns: 1fr; } }
.k-toolbox, .k-props { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.k-tool-group { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--k-faint); margin: 10px 0 4px; }
.k-tool { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: var(--k-radius); background: none;
          color: var(--k-text); font-size: 0.9rem; text-align: left; cursor: grab; }
.k-tool:hover { background: var(--k-hover); }
.k-tool-ico { display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 24px; border: 1px solid var(--k-border);
              border-radius: 5px; font-size: 0.7rem; font-weight: 600; color: var(--k-muted); background: #fff; flex-shrink: 0; }
.k-stage { min-width: 0; }
.kc-design { background: #fff; box-shadow: 0 0 0 1px var(--k-border-soft), 0 4px 18px rgba(15, 15, 15, 0.06); border-radius: 8px; }
.kc-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none;
           background-image: radial-gradient(circle, rgba(55, 53, 47, 0.18) 1px, transparent 1.2px); }
.kc-design .kc-item { cursor: move; }
.kc-design .kc-item * { pointer-events: none; }
.kc-design .kc-item:hover { outline: 1px dashed rgba(35, 131, 226, 0.5); outline-offset: 2px; }
.kc-design .kc-selected { outline: 2px solid var(--k-accent) !important; outline-offset: 2px; z-index: 5; }
.kc-design .kc-handle { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--k-accent); border-radius: 2px;
             pointer-events: auto; z-index: 6; }
.kc-h-nw { left: -7px; top: -7px; cursor: nwse-resize; } .kc-h-n { left: calc(50% - 5px); top: -7px; cursor: ns-resize; }
.kc-h-ne { right: -7px; top: -7px; cursor: nesw-resize; } .kc-h-e { right: -7px; top: calc(50% - 5px); cursor: ew-resize; }
.kc-h-se { right: -7px; bottom: -7px; cursor: nwse-resize; } .kc-h-s { left: calc(50% - 5px); bottom: -7px; cursor: ns-resize; }
.kc-h-sw { left: -7px; bottom: -7px; cursor: nesw-resize; } .kc-h-w { left: -7px; top: calc(50% - 5px); cursor: ew-resize; }
.kc-guide { position: absolute; z-index: 7; pointer-events: none; background: #e03e9a; }
.kc-guide-v { top: 0; bottom: 0; width: 1px; }
.kc-guide-h { left: 0; right: 0; height: 1px; }
.k-props { font-size: 0.9rem; }
.k-props .form-label { font-size: 0.78rem; margin-bottom: 2px; margin-top: 6px; }
.k-prop-section { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--k-faint);
                  margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid var(--k-border-soft); }
.k-prop-card { border: 1px solid var(--k-border-soft); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.k-xywh { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.k-xywh label { font-size: 0.75rem; color: var(--k-muted); }
.k-seg { display: inline-flex; border: 1px solid var(--k-border); border-radius: var(--k-radius); overflow: hidden; background: #fff; }
.k-seg > button, .k-seg > label > span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 8px;
                  border: 0; border-right: 1px solid var(--k-border-soft); background: none; color: var(--k-muted); cursor: pointer; }
.k-seg > :last-child, .k-seg > label:last-child > span { border-right: 0; }
.k-seg > button:hover, .k-seg > label > span:hover { background: var(--k-hover); color: var(--k-text); }
.k-seg > button.on, .k-shape-pick input:checked + span { background: var(--k-active); color: var(--k-text); }
.k-shape-pick { margin: 0; }
.k-shape-pick input { position: absolute; opacity: 0; pointer-events: none; }
.k-shape-pick input:focus-visible + span { outline: 2px solid var(--k-accent); }
.k-shapes > button, .k-shapes .k-shape-pick > span { min-width: 42px; height: 34px; }
.k-seg-btn { min-width: 30px; height: 30px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: #fff; color: var(--k-muted); }
.k-seg-btn.on { background: var(--k-active); color: var(--k-text); }
.k-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.k-swatch { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--k-border); padding: 0; }
.k-swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--k-accent); }
.k-order { padding-left: 1.2rem; margin: 0 0 8px; }
.k-order li { display: flex; align-items: center; gap: 4px; padding: 2px 0; }
.k-order-name { flex: 1; text-align: left; border: 0; background: none; padding: 2px 4px; border-radius: 4px; color: var(--k-text);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-order-name:hover { background: var(--k-hover); }

.k-stage-scroll { overflow-x: auto; padding: 4px; }

/* Menu element: buttons that open the workflow's other forms */
.kc-menu { display: grid; gap: 0.6em; }
.kc-menu-btn { display: flex; align-items: center; min-height: 3.6em; padding: 0.5em 0.9em; border: 1px solid var(--k-border); border-radius: 0.6em;
               background: #fff; color: var(--k-text); font-weight: 500; text-decoration: none; }
.kc-menu-btn::after { content: "→"; margin-left: auto; color: var(--k-faint); }
.kc-menu-btn:hover { background: var(--k-hover); color: var(--k-text); }
.k-autosave { color: var(--k-muted); font-size: 0.85rem; margin: 0 0 0.5rem; }

/* ---------- Sidebar tree (projects and the Designer's library) ---------- */
.k-tree-head { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--k-faint);
               padding: 14px 10px 4px; }
.k-tree { margin: 0; }
.k-tree > summary { list-style: none; display: flex; align-items: center; border-radius: 6px; cursor: pointer; }
.k-tree > summary::-webkit-details-marker { display: none; }
.k-tree > summary::before { content: "›"; display: inline-flex; justify-content: center; width: 18px; flex-shrink: 0; margin-left: 4px;
                            color: var(--k-faint); font-size: 1rem; transition: transform 0.12s; }
.k-tree[open] > summary::before { transform: rotate(90deg); }
.k-tree > summary:hover { background: var(--k-hover); }
.k-tree .k-tree { margin-left: 14px; }
.k-tree-link { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 8px 3px 2px; border-radius: 6px; flex: 1; min-width: 0;
               color: var(--k-muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.k-tree-link:hover { background: var(--k-hover); color: var(--k-text); }
.k-tree-link.active { background: var(--k-active); color: var(--k-text); }
.k-tree-link.k-drop-over { background: var(--k-active); outline: 2px dashed var(--k-accent); outline-offset: -2px; }
.k-tree-leaf { margin-left: 22px; }
.k-tree-ico { font-size: 0.85rem; width: 18px; text-align: center; flex-shrink: 0; }
.k-tree-empty { display: block; margin-left: 28px; padding: 3px 0; color: var(--k-faint); font-size: 13px; }

/* Reminder: like the j-app "Weigh in today", it stands out until done today */
.kc-reminder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
               padding: 0.4em 0.8em; border: 1px solid var(--k-border); border-radius: 0.7em; background: #fff; color: var(--k-text);
               font-weight: 600; font-size: 1.1em; text-align: center; text-decoration: none; }
.kc-reminder small { font-weight: 400; font-size: 0.8em; color: var(--k-muted); }
.kc-reminder:hover { background: var(--k-hover); color: var(--k-text); }
.kc-reminder.due { background: var(--k-accent); border-color: var(--k-accent); color: #fff; }
.kc-reminder.due:hover { background: var(--k-accent-dark); color: #fff; }

/* No white space between objects when filling in: questions are as tall as their content (with a little room
   inside for their own bottom edge), and the script packs them. Spacers only show in the designer. */
.kc-wrap:not(.kc-design) .kc-el-question { min-height: 0 !important; }
.kc-el-question { padding-bottom: 0.9em; }
.kc-spacer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
             background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(35, 131, 226, 0.08) 6px 12px);
             border: 1px dashed rgba(35, 131, 226, 0.35); border-radius: 4px; }
.kc-spacer span { font-size: 0.7em; color: var(--k-accent-dark); background: #fff; padding: 0 0.4em; border-radius: 3px; }

/* Designer preview */
.k-preview { max-width: 100%; }
.k-preview-note { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between;
                  padding: 8px 12px; margin-bottom: 10px; border-radius: var(--k-radius); background: var(--k-blue-soft); font-size: 0.9rem; }
.k-preview .kc-wrap { box-shadow: 0 0 0 1px var(--k-border-soft); border-radius: 8px; padding: 16px; background: #fff; }

/* Conditions: combinations */
.k-conds-or, .k-conds-and { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--k-faint); margin: 4px 0; }
.k-conds-or { text-align: center; }

/* ---------- Dashboards ---------- */
.k-dash { --s0: #2a78d6; --s1: #eb6834; --s2: #1baf7a; --s3: #eda100; --s4: #e87ba4; --s5: #008300; --s6: #6250d6; --s7: #e34948; }
.k-dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.k-dash-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.k-dash-range .k-seg > a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; color: var(--k-muted); text-decoration: none;
                           border-right: 1px solid var(--k-border-soft); }
.k-dash-range .k-seg > a:last-child { border-right: 0; }
.k-dash-range .k-seg > a.on { background: var(--k-active); color: var(--k-text); }
.k-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 767.98px) { .k-dash-grid { grid-template-columns: minmax(0, 1fr); } }
.k-block { border: 1px solid var(--k-border-soft); border-radius: 10px; padding: 14px 16px; background: #fff; min-width: 0; }
.k-block-full { grid-column: 1 / -1; }
.k-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.k-block-title { font-size: 0.95rem; font-weight: 600; margin: 0; }
.k-block-csv { font-size: 0.75rem; color: var(--k-faint); text-decoration: none; }
.k-block-csv:hover { color: var(--k-text); }
.k-number { font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.k-number-sub { color: var(--k-muted); font-size: 0.85rem; }
.k-chart { display: block; width: 100%; height: auto; overflow: visible; }
.k-chart .k-grid { stroke: var(--k-border-soft); stroke-width: 1; }
.k-chart .k-axis { fill: var(--k-muted); font-size: 11px; }
.k-chart .k-day { font-size: 11px; font-weight: 600; fill: var(--k-text); }
.k-chart .k-line { fill: none; stroke: var(--s0); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.k-chart .k-point { fill: var(--s0); stroke: #fff; stroke-width: 2; }
.k-chart .k-point:hover, .k-chart .k-dot-mark:hover { stroke: var(--k-text); }
.k-chart .k-track { stroke: var(--k-border); stroke-width: 1; }
.k-chart .k-dot-mark { stroke: #fff; stroke-width: 2; }
.k-trend-read { font-size: 0.85rem; color: var(--k-muted); margin-bottom: 4px; }
.k-trend-read strong { color: var(--k-text); }
.k-s0 { fill: var(--s0); background: var(--s0); } .k-s1 { fill: var(--s1); background: var(--s1); }
.k-s2 { fill: var(--s2); background: var(--s2); } .k-s3 { fill: var(--s3); background: var(--s3); }
.k-s4 { fill: var(--s4); background: var(--s4); } .k-s5 { fill: var(--s5); background: var(--s5); }
.k-s6 { fill: var(--s6); background: var(--s6); } .k-s7 { fill: var(--s7); background: var(--s7); }
.k-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8rem; color: var(--k-muted); margin-bottom: 4px; }
.k-legend span { display: inline-flex; align-items: center; gap: 5px; }
.k-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.k-band-key { width: 16px; height: 5px; border-radius: 2px; display: inline-block; }
.k-bars { display: flex; flex-direction: column; gap: 6px; }
.k-bar-row { display: grid; grid-template-columns: minmax(6rem, 34%) 1fr auto; gap: 8px; align-items: center; font-size: 0.88rem; }
.k-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-bar-track { height: 12px; }
.k-bar { display: block; height: 12px; background: var(--s0); border-radius: 0 4px 4px 0; }
.k-bar-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-table-view { margin-top: 6px; font-size: 0.85rem; }
.k-table-view summary { color: var(--k-muted); cursor: pointer; }
.k-dash-entries li { padding: 6px 0; border-bottom: 1px solid var(--k-border-soft); font-size: 0.9rem; }
.k-dash-when { color: var(--k-muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.k-dash-by { color: var(--k-faint); margin-left: 6px; font-size: 0.8rem; }
.k-tile-dash::before { content: "📊"; }
.k-dash-edit .k-block { cursor: grab; }
.k-dash-edit .k-drop { outline: 2px dashed var(--k-accent); outline-offset: 2px; }

/* Each person's answers on a dashboard */
.k-people { margin: 0; display: grid; gap: 4px; }
.k-people > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--k-border); padding: 2px 0; }
.k-people dt { font-weight: 400; color: var(--k-muted); }
.k-people dd { margin: 0; font-size: 1.25rem; font-weight: 600; }
.k-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }

/* Knob: a slider shown as a round dial */
.kc-knob { display: flex; flex-direction: column; align-items: center; position: relative; }
.kc-knob-dial { width: 100%; max-width: 15em; touch-action: none; cursor: grab; display: block; }
.kc-knob-track, .kc-knob-fill { fill: none; stroke-width: 7; stroke-linecap: round; }
.kc-knob-track { stroke: var(--k-border); }
.kc-knob-fill { stroke: var(--k-accent); }
.kc-knob-thumb { fill: #fff; stroke: var(--k-accent); stroke-width: 3; }
.kc-knob-value { font-size: 22px; font-weight: 700; fill: var(--k-text); }
.kc-knob-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kc-knob:has(.kc-knob-input:focus-visible) .kc-knob-dial { outline: 2px solid var(--k-accent); outline-offset: 2px; border-radius: 50%; }
.kc-knob-row { display: flex; align-items: center; gap: 0.5em; width: 100%; max-width: 15em; margin-top: -0.6em; }
.kc-knob-ends { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 0.4em; font-size: 0.75em; color: var(--k-muted); }
.kc-knob-step { width: 2.2em; height: 2.2em; border-radius: 50%; border: 1px solid var(--k-border); background: #fff; font-size: 1.1em; line-height: 1; }
.kc-knob-step:disabled { opacity: 0.4; }

/* Sidebar tree: right-click menu and its small dialogs (js/tree.js). */
.k-ctx { position: fixed; z-index: 2000; min-width: 180px; padding: 4px; background: var(--k-bg); color: var(--k-text);
  border: 1px solid var(--k-border); border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.k-ctx button { display: block; width: 100%; text-align: left; padding: 6px 10px; border: 0; background: none; color: inherit;
  border-radius: 5px; font-size: 0.92rem; }
.k-ctx button:hover, .k-ctx button:focus { background: var(--k-hover); outline: none; }
.k-ctx button.danger { color: #b42318; }
.k-ctx-sep { height: 1px; margin: 4px 6px; background: var(--k-border); }
.k-dlg { border: 1px solid var(--k-border); border-radius: 10px; padding: 18px; width: min(420px, calc(100vw - 32px));
  background: var(--k-bg); color: var(--k-text); }
.k-dlg::backdrop { background: rgba(0,0,0,.35); }
.k-dlg h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; }
.k-dlg label { display: block; font-size: 0.9rem; margin-bottom: 10px; }
.k-dlg label .form-control { margin-top: 4px; }
.k-dlg-err { color: #b42318; font-size: 0.9rem; min-height: 1em; margin: 0 0 8px; }
.k-dlg-bar { display: flex; justify-content: flex-end; gap: 8px; }

/* Assessments: the latest people's answers per group, under the question. */
.kc-assess { margin-top: 0.5em; display: flex; flex-direction: column; gap: 0.25em; font-size: 0.85em; }
.kc-assess-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em 0.8em; }
.kc-assess-g { font-weight: 600; color: var(--k-muted); min-width: 7em; }
.kc-assess-p small { color: var(--k-muted); }
.kc-assess-older, .kc-assess-outofdate { opacity: 0.45; }

/* Entry history: saved versions and every change while filling in. */
.k-history { padding-left: 1.2rem; }
.k-history li { margin-bottom: 10px; }
.k-hist-changed { background: var(--k-warn-bg, #fff4d6); border-radius: 4px; padding: 0 4px; }
.k-trail { border-left: 3px solid var(--k-border, #d0d7de); padding: 4px 0 4px 12px; margin-bottom: 12px; }
.k-trail-q { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 4px; }
.k-trail-steps { overflow-wrap: anywhere; }
.k-trail-step small { color: var(--k-muted); }
.kc-assess-note { color: var(--k-text); font-weight: 500; }
.k-number-note { font-size: 0.85rem; margin-top: 4px; }
.k-qr { display: inline-block; padding: 16px; background: #fff; border: 1px solid var(--bs-border-color); border-radius: var(--k-radius); text-align: center; }
.k-qr code { color: #000; }
.k-sample-done { padding: 8px 4px; }

/* Coloured buttons and icons (owner, 3 Nov 2026). --kc-c is a readable dark shade, --kc-f its light fill (Palette). */
.kc-choice.kc-col, .kc-menu-btn.kc-col, .kc-reminder.kc-col { background: var(--kc-f); border-color: var(--kc-c); color: var(--kc-c); }
.kc-choice.kc-col:hover, .kc-menu-btn.kc-col:hover, .kc-reminder.kc-col:hover { background: var(--kc-f); color: var(--kc-c); filter: brightness(0.96); }
.kc-choice.kc-col.on, .kc-reminder.kc-col.due, .kc-save.kc-col { background: var(--kc-c); border-color: var(--kc-c); color: #fff; }
.kc-choice.kc-col.on { box-shadow: 0 0 0 0.15em #fff inset; }
.kc-save.kc-col:hover, .kc-reminder.kc-col.due:hover { background: var(--kc-c); color: #fff; filter: brightness(0.92); }
.kc-menu-btn.kc-col::after { color: var(--kc-c); }
.kc-choice.kc-has-ico { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2em; padding-top: 0.5em; padding-bottom: 0.45em; }
.kc-ico { display: block; line-height: 0; }
.kc-ico svg { width: 1.7em; height: 1.7em; }
.kc-ico-inline { display: inline-block; vertical-align: -0.2em; margin-right: 0.4em; line-height: 0; }
.kc-ico-inline svg { width: 1.25em; height: 1.25em; }
.k-iconpick > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85rem; padding: 2px 6px; border: 1px solid var(--k-border); border-radius: 6px; }
.k-iconpick-cur svg { width: 18px; height: 18px; display: block; }
.k-iconpick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 6px; }
.k-iconpick-btn { aspect-ratio: 1; display: grid; place-items: center; padding: 4px; border: 1px solid var(--k-border); border-radius: 6px; background: #fff; color: var(--k-text); }
.k-iconpick-btn svg { width: 20px; height: 20px; }
.k-iconpick-btn.on { border-color: var(--k-accent); background: var(--k-accent-soft); }
.k-optlook { border-top: 1px solid var(--k-border); padding: 6px 0; }
.k-optlook-name { font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; overflow-wrap: anywhere; }
/* Pictures (owner, 3 Nov 2026) */
.kc-pic { display: block; max-width: 100%; object-fit: contain; border-radius: 0.3em; }
.kc-image { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.kc-image img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0.4em; }
.kc-image-empty { color: var(--k-muted); border: 1px dashed var(--k-border); border-radius: 0.4em; width: 100%; height: 100%; display: grid; place-items: center; }

.k-imgpick > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85rem; padding: 2px 6px; border: 1px solid var(--k-border); border-radius: 6px; }
.k-imgpick-cur { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.k-imgpick-body { margin-top: 6px; }
.k-imgpick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 220px; overflow-y: auto; }
.k-imgpick-btn { aspect-ratio: 1; padding: 2px; border: 1px solid var(--k-border); border-radius: 6px; background: #fff; }
.k-imgpick-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.k-imgpick-btn.on { border-color: var(--k-accent); box-shadow: 0 0 0 2px var(--k-accent-soft); }
.k-crop { position: relative; display: inline-block; max-width: 100%; cursor: crosshair; touch-action: none; user-select: none; overflow: hidden; }
.k-crop img { display: block; max-width: 100%; max-height: 320px; }
.k-crop-sel { position: absolute; border: 2px solid var(--k-accent); background: rgba(255,255,255,0.25); box-shadow: 0 0 0 9999px rgba(0,0,0,0.35); pointer-events: none; }
.k-pic-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--k-border); }