/* Template workflow UI
 * A calm, document-led layer on top of the existing component bundle.
 * Explicit selectors keep the pages stable without relying on JIT utilities.
 */
:root {
    --vf-ink: #17243b;
    --vf-ink-soft: #506079;
    --vf-paper: #fbfaf6;
    --vf-paper-deep: #f4f1e8;
    --vf-rule: #dce2e9;
    --vf-blue: #245d8f;
    --vf-blue-dark: #19486f;
    --vf-blue-soft: #eaf2f8;
    --vf-green: #26705a;
    --vf-green-soft: #e9f5f0;
    --vf-amber: #99651e;
    --vf-amber-soft: #fff6df;
}

body,
.kt-wrapper { background: #f7f8fa; }

#content {
    background:
        radial-gradient(circle at 88% 0%, rgba(36, 93, 143, .045), transparent 26rem),
        #f7f8fa;
}

#header {
    background: rgba(247, 248, 250, .92);
    backdrop-filter: blur(12px);
}

/* Sidebar chrome is owned by veridica.css (MacroData navy). */
.kt-footer { background: #f7f8fa; }

.vf-sidebar-link {
    position: relative;
    min-height: 2.4rem;
    border-radius: .5rem;
    transition: background-color .16s ease, color .16s ease;
}

.vf-sidebar-link:hover { background: #f0f3f6; }
.vf-sidebar-link.is-active { background: var(--vf-blue-soft); }
.vf-sidebar-link.is-active::before {
    content: "";
    position: absolute;
    left: -.55rem;
    top: .55rem;
    bottom: .55rem;
    width: 3px;
    border-radius: 999px;
    background: var(--vf-blue);
}
.vf-sidebar-link.is-active .kt-menu-title,
.vf-sidebar-link.is-active .kt-menu-icon { color: var(--vf-blue-dark); }

.vf-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0 1.5rem;
}

.vf-eyebrow {
    margin-bottom: .45rem;
    color: var(--vf-blue);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.vf-page-title {
    color: var(--vf-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.12;
}

.vf-page-lead {
    max-width: 43rem;
    margin-top: .65rem;
    color: var(--vf-ink-soft);
    font-size: .92rem;
    line-height: 1.6;
}

.vf-page-header--compact { align-items: flex-start; padding-bottom: 1.75rem; }
.vf-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.15rem;
    color: #68778c;
    font-size: .76rem;
    font-weight: 650;
}
.vf-back-link:hover { color: var(--vf-blue); }

.vf-primary-link,
.vf-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 2.55rem;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.vf-primary-link {
    background: var(--vf-blue);
    color: #fff;
}

.vf-primary-link:hover { background: var(--vf-blue-dark); color: #fff; }

.vf-secondary-link {
    border-color: #cbd5df;
    background: #fff;
    color: var(--vf-ink);
}

.vf-secondary-link:hover { border-color: #93a5b7; background: #f8fafc; color: var(--vf-ink); }

.vf-journey {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: .15rem 0 1.75rem;
    border: 1px solid var(--vf-rule);
    border-radius: .75rem;
    background: #fff;
    overflow: hidden;
}

.vf-journey-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 4.15rem;
    padding: .8rem 1rem;
    border-right: 1px solid var(--vf-rule);
    color: var(--vf-ink-soft);
}

.vf-journey-step:last-child { border-right: 0; }
.vf-journey-step.is-current { background: var(--vf-blue-soft); color: var(--vf-blue-dark); }
.vf-journey-step.is-done { color: var(--vf-green); }

.vf-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.vf-journey-step.is-done .vf-step-number {
    border-color: transparent;
    background: var(--vf-green-soft);
}

.vf-step-copy strong { display: block; color: inherit; font-size: .78rem; }
.vf-step-copy span { display: block; margin-top: .15rem; font-size: .7rem; line-height: 1.3; }

.vf-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.vf-summary-card {
    display: block;
    min-height: 5.2rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--vf-rule);
    border-radius: .7rem;
    background: #fff;
    color: var(--vf-ink-soft);
}

.vf-summary-card:hover { border-color: #aebbc9; color: var(--vf-ink-soft); }
.vf-summary-card.is-active { border-color: #9db9d0; background: var(--vf-blue-soft); }
.vf-summary-value { display: block; color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.65rem; line-height: 1; }
.vf-summary-label { display: block; margin-top: .45rem; font-size: .76rem; font-weight: 600; }

.vf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vf-search {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: min(100%, 26rem);
    min-height: 2.55rem;
    padding: 0 .85rem;
    border: 1px solid var(--vf-rule);
    border-radius: .55rem;
    background: #fff;
}

.vf-search:focus-within { border-color: #8eacc4; box-shadow: 0 0 0 3px rgba(36, 93, 143, .09); }
.vf-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--vf-ink); font-size: .84rem; }

.vf-template-list {
    border: 1px solid var(--vf-rule);
    border-radius: .8rem;
    background: #fff;
    overflow: hidden;
}

.vf-template-row {
    display: grid;
    grid-template-columns: minmax(13rem, 1.6fr) minmax(10rem, .85fr) minmax(13rem, 1.15fr);
    gap: 1.25rem;
    align-items: center;
    min-height: 7.6rem;
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid var(--vf-rule);
}

.vf-template-row:last-child { border-bottom: 0; }
.vf-template-row:hover { background: #fcfcfb; }
.vf-template-title { color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; font-weight: 600; }
.vf-template-title:hover { color: var(--vf-blue); }
.vf-template-meta { margin-top: .35rem; color: #788598; font-size: .74rem; }
.vf-template-next { color: var(--vf-ink); font-size: .82rem; font-weight: 600; }
.vf-template-hint { margin-top: .25rem; color: var(--vf-ink-soft); font-size: .74rem; line-height: 1.45; }
.vf-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }

.vf-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .34rem .55rem;
    border-radius: 999px;
    background: #f0f2f5;
    color: #59677a;
    font-size: .7rem;
    font-weight: 700;
}

.vf-status::before { content: ""; width: .4rem; height: .4rem; border-radius: 999px; background: currentColor; }
.vf-status--approved { background: var(--vf-green-soft); color: var(--vf-green); }
.vf-status--validated { background: var(--vf-blue-soft); color: var(--vf-blue); }
.vf-status--legacy { background: var(--vf-amber-soft); color: var(--vf-amber); }
.vf-status-stack { display: flex; flex-wrap: wrap; gap: .4rem; }

.vf-empty {
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--vf-ink-soft);
}

.vf-empty strong { display: block; margin-bottom: .45rem; color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; }

.vf-create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .75fr);
    gap: 1.25rem;
    align-items: start;
}

.vf-paper-card {
    border: 1px solid var(--vf-rule);
    border-radius: .8rem;
    background: #fff;
    overflow: hidden;
}

.vf-paper-card__header { padding: 1.35rem 1.5rem 1rem; border-bottom: 1px solid var(--vf-rule); }
.vf-paper-card__header h2 { color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 600; }
.vf-paper-card__header p { margin-top: .35rem; color: var(--vf-ink-soft); font-size: .8rem; line-height: 1.5; }
.vf-paper-card__body { padding: 1.5rem; }

.vf-upload-zone {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 9rem;
    padding: 1.25rem;
    border: 1.5px dashed #9fb0bf;
    border-radius: .7rem;
    background: var(--vf-paper);
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.vf-upload-zone:hover,
.vf-upload-zone.is-dragging { border-color: var(--vf-blue); background: var(--vf-blue-soft); }
.vf-upload-icon { display: grid; place-items: center; width: 3.1rem; height: 3.7rem; flex: 0 0 auto; border: 1px solid #b9c4ce; border-radius: .25rem .55rem .25rem .25rem; background: #fff; color: var(--vf-blue); font-size: 1.25rem; box-shadow: 0 5px 16px rgba(23, 36, 59, .07); }
.vf-upload-title { color: var(--vf-ink); font-size: .9rem; font-weight: 700; }
.vf-upload-copy { margin-top: .25rem; color: var(--vf-ink-soft); font-size: .76rem; line-height: 1.45; }
.vf-selected-file { margin-top: .75rem; color: var(--vf-blue-dark); font-size: .78rem; font-weight: 600; }

.vf-checklist { display: flex; flex-direction: column; gap: 1rem; }
.vf-checklist-item { display: grid; grid-template-columns: 1.5rem 1fr; gap: .7rem; }
.vf-checklist-number { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--vf-paper-deep); color: var(--vf-blue-dark); font-size: .68rem; font-weight: 700; }
.vf-checklist-item strong { display: block; color: var(--vf-ink); font-size: .8rem; }
.vf-checklist-item p { margin-top: .18rem; color: var(--vf-ink-soft); font-size: .73rem; line-height: 1.45; }
.vf-quiet-note { padding: 1rem; border-top: 1px solid var(--vf-rule); background: var(--vf-paper); color: var(--vf-ink-soft); font-size: .73rem; line-height: 1.5; }
.vf-form-error { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid #efb5b5; border-radius: .55rem; background: #fff1f1; color: #8e2929; font-size: .78rem; }

.vf-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: .25rem 0 .8rem;
    color: #738095;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.vf-section-heading span:last-child {
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.vf-document-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vf-document-card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) 1.75rem;
    gap: 1rem;
    align-items: start;
    min-height: 10.5rem;
    padding: 1.35rem;
    border: 1px solid var(--vf-rule);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .92);
    color: var(--vf-ink);
    box-shadow: 0 1px 2px rgba(23, 36, 59, .025);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.vf-document-card:hover {
    transform: translateY(-2px);
    border-color: #9eb5c9;
    color: var(--vf-ink);
    box-shadow: 0 8px 24px rgba(36, 93, 143, .08);
}

.vf-document-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid #c7d5e0;
    border-radius: .65rem;
    background: var(--vf-blue-soft);
    color: var(--vf-blue);
    font-size: 1.2rem;
}

.vf-document-card__copy { display: flex; min-width: 0; flex-direction: column; }
.vf-document-card__copy strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; line-height: 1.35; }
.vf-document-version { margin-top: .45rem; color: var(--vf-green); font-size: .7rem; font-weight: 700; }
.vf-document-description { margin-top: .75rem; color: var(--vf-ink-soft); font-size: .78rem; line-height: 1.55; }
.vf-document-arrow { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-top: .6rem; border-radius: 999px; color: #8190a3; transition: background-color .18s ease, color .18s ease; }
.vf-document-card:hover .vf-document-arrow { background: var(--vf-blue); color: #fff; }

.vf-document-list {
    border: 1px solid var(--vf-rule);
    border-radius: .8rem;
    background: rgba(255, 255, 255, .92);
    overflow: hidden;
}

.vf-generated-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(12rem, 1.4fr) minmax(8rem, .65fr) minmax(19rem, auto);
    gap: 1rem;
    align-items: center;
    min-height: 6.4rem;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--vf-rule);
}
.vf-generated-row:last-child { border-bottom: 0; }
.vf-generated-row:hover { background: #fcfcfb; }
.vf-generated-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .55rem; background: var(--vf-blue-soft); color: var(--vf-blue); }
.vf-generated-main { display: flex; min-width: 0; flex-direction: column; gap: .3rem; }
.vf-generated-main a { color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 600; }
.vf-generated-main a:hover { color: var(--vf-blue); }
.vf-generated-main span,
.vf-generated-meta span { color: var(--vf-ink-soft); font-size: .72rem; }
.vf-generated-meta { display: flex; flex-direction: column; gap: .25rem; color: var(--vf-ink); font-size: .76rem; }
.vf-icon-button { display: grid; place-items: center; width: 2.55rem; height: 2.55rem; border: 1px solid transparent; border-radius: .55rem; color: #8995a5; }
.vf-icon-button:hover { border-color: #efc2c2; background: #fff4f4; color: #a63b3b; }

.vf-release-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.vf-finding {
    padding: 1rem;
    border: 1px solid #ead7a8;
    border-radius: .65rem;
    background: #fffaf0;
}

.vf-finding + .vf-finding { margin-top: .75rem; }
.vf-finding--error { border-color: #efb7b7; background: #fff3f3; }

.vf-form-stack { display: grid; gap: 1rem; }
.vf-form-section { padding: 1.4rem 1.5rem; border-color: var(--vf-rule); box-shadow: 0 1px 2px rgba(23, 36, 59, .025); }
.vf-test-data { border: 1px solid #cbd9e5; border-radius: .7rem; background: #f4f8fb; }
.vf-test-data summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    color: var(--vf-blue-dark);
    cursor: pointer;
    list-style: none;
}
.vf-test-data summary::-webkit-details-marker { display: none; }
.vf-test-data summary strong { display: block; font-size: .82rem; }
.vf-test-data summary small { display: block; margin-top: .2rem; color: var(--vf-ink-soft); font-size: .72rem; font-weight: 400; }
.vf-test-data[open] summary { border-bottom: 1px solid #d7e1e9; }
.vf-test-data[open] summary i { transform: rotate(180deg); }
.vf-test-data__body { padding: 1rem 1.2rem; }
.vf-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 0 0;
}

.vf-context-note {
    margin-bottom: 1rem;
    padding: .8rem 1rem;
    border: 1px solid #c8d8e5;
    border-radius: .65rem;
    background: var(--vf-blue-soft);
    color: var(--vf-blue-dark);
    font-size: .78rem;
    line-height: 1.5;
}

/* DOCX preparation guidance — a compact Swiss editorial checklist that keeps
 * mandatory data hygiene visually distinct from optional document polish. */
.vf-upload-guidance {
    margin-bottom: 1.25rem;
    border: 1px solid #c8d8e5;
    border-radius: .7rem;
    background: #f7fafc;
    overflow: hidden;
}

.vf-upload-guidance summary {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 1rem;
    gap: .7rem;
    align-items: center;
    padding: .85rem 1rem;
    color: var(--vf-ink);
    cursor: pointer;
    list-style: none;
}

.vf-upload-guidance summary::-webkit-details-marker,
.vf-guidance-example summary::-webkit-details-marker { display: none; }
.vf-upload-guidance summary:focus-visible,
.vf-guidance-example summary:focus-visible,
.vf-guidance-nav a:focus-visible {
    outline: 3px solid var(--vf-blue);
    outline-offset: -3px;
}
.vf-upload-guidance__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: var(--vf-green-soft);
    color: var(--vf-green);
}
.vf-upload-guidance summary strong { display: block; font-size: .8rem; }
.vf-upload-guidance summary small { display: block; margin-top: .15rem; color: var(--vf-ink-soft); font-size: .7rem; line-height: 1.4; }
.vf-upload-guidance__chevron { color: #66758a; transition: transform .16s ease; }
.vf-upload-guidance[open] .vf-upload-guidance__chevron { transform: rotate(180deg); }
.vf-upload-guidance__body { padding: .85rem 1rem 1rem 3.7rem; border-top: 1px solid #dbe4eb; }
.vf-upload-guidance__body ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1rem; }
.vf-upload-guidance__body li {
    position: relative;
    padding-left: 1.1rem;
    color: #46566c;
    font-size: .72rem;
    line-height: 1.45;
}
.vf-upload-guidance__body li::before {
    position: absolute;
    top: .4rem;
    left: 0;
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
    background: var(--vf-green);
    content: "";
}
.vf-upload-guidance__footer { display: flex; flex-wrap: wrap; gap: .45rem 1rem; align-items: center; margin-top: .85rem; padding-top: .75rem; border-top: 1px solid #dbe4eb; color: var(--vf-ink-soft); font-size: .68rem; }
.vf-upload-guidance__footer a { display: inline-flex; align-items: center; gap: .25rem; margin-left: auto; color: var(--vf-blue); font-weight: 700; }
.vf-upload-guidance__footer a:hover { color: var(--vf-blue-dark); text-decoration: underline; }

.vf-guidance-page { max-width: 76rem; }
.vf-guidance-page [id] { scroll-margin-top: 5rem; }
.vf-guidance-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1.25rem;
    border: 1px solid var(--vf-rule);
    border-radius: .7rem;
    background: #fff;
    overflow: hidden;
}
.vf-guidance-nav a { display: flex; gap: .55rem; align-items: center; min-height: 3rem; padding: .65rem .85rem; border-right: 1px solid var(--vf-rule); color: #536177; font-size: .72rem; font-weight: 650; }
.vf-guidance-nav a:last-child { border-right: 0; }
.vf-guidance-nav a:hover { background: var(--vf-blue-soft); color: var(--vf-blue-dark); }
.vf-guidance-nav span { color: var(--vf-blue); font-family: Georgia, "Times New Roman", serif; font-size: .82rem; }

.vf-guidance-sheet {
    position: relative;
    border: 1px solid #d7d2c5;
    border-radius: .2rem;
    background:
        linear-gradient(90deg, transparent 0, transparent 2rem, rgba(36, 93, 143, .055) 2rem, rgba(36, 93, 143, .055) calc(2rem + 1px), transparent calc(2rem + 1px)),
        var(--vf-paper);
    box-shadow: 0 12px 35px rgba(23, 36, 59, .07);
    overflow: hidden;
}
.vf-guidance-sheet::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: .3rem;
    background: var(--vf-blue);
    content: "";
}
.vf-guidance-sheet__intro { display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding: 1.45rem 1.6rem 1.1rem 2.65rem; border-bottom: 1px solid #ded9cc; }
.vf-guidance-kicker { display: block; margin-bottom: .35rem; color: var(--vf-blue); font-size: .65rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.vf-guidance-sheet__intro h2,
.vf-guidance-heading h2 { color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.18; }
.vf-guidance-sheet__intro > p { max-width: 21rem; color: var(--vf-ink-soft); font-size: .73rem; line-height: 1.5; text-align: right; }
.vf-guidance-columns { display: grid; grid-template-columns: 1.08fr .92fr; }
.vf-guidance-section { min-width: 0; padding: 1.35rem 1.5rem 1.3rem 2.65rem; }
.vf-guidance-section + .vf-guidance-section { padding-left: 1.5rem; border-left: 1px solid #ded9cc; }
.vf-guidance-section__heading { display: flex; gap: .75rem; align-items: start; padding-bottom: .8rem; border-bottom: 1px solid #e1ddd2; }
.vf-guidance-time { display: grid; min-width: 3.1rem; height: 3.1rem; place-items: center; border-radius: 999px; background: var(--vf-blue); color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: .82rem; font-weight: 700; }
.vf-guidance-section--optional .vf-guidance-time { border: 1px solid #b6c3ce; background: #fff; color: var(--vf-blue-dark); }
.vf-guidance-status { color: var(--vf-green); font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.vf-guidance-section--optional .vf-guidance-status { color: var(--vf-ink-soft); }
.vf-guidance-section h3 { margin-top: .12rem; color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 600; }
.vf-guidance-section__heading p { margin-top: .1rem; color: var(--vf-ink-soft); font-size: .75rem; }
.vf-guidance-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .9rem; }
.vf-guidance-list li { display: grid; grid-template-columns: 1.45rem minmax(0, 1fr); gap: .65rem; }
.vf-guidance-list li > span { display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border: 1px solid #b8c5ce; border-radius: 999px; color: var(--vf-blue-dark); font-size: .62rem; font-weight: 750; }
.vf-guidance-section--required .vf-guidance-list li > span { border-color: #96bcae; background: var(--vf-green-soft); color: var(--vf-green); }
.vf-guidance-list strong { display: block; color: var(--vf-ink); font-size: .74rem; }
.vf-guidance-list p { margin-top: .12rem; color: var(--vf-ink-soft); font-size: .75rem; line-height: 1.45; }
.vf-guidance-not-required { padding: .95rem 1.5rem .95rem 2.65rem; border-top: 1px solid #ded9cc; background: rgba(244, 241, 232, .72); }
.vf-guidance-not-required strong { color: var(--vf-ink); font-size: .72rem; }
.vf-guidance-not-required ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem 1rem; margin-top: .6rem; }
.vf-guidance-not-required li { position: relative; padding-left: .9rem; color: #59677a; font-size: .75rem; line-height: 1.4; }
.vf-guidance-not-required li::before { position: absolute; left: 0; color: var(--vf-green); font-weight: 800; content: "✓"; }

.vf-guidance-examples,
.vf-guidance-boundaries { margin-top: 2.5rem; }
.vf-guidance-heading { max-width: 45rem; margin-bottom: 1rem; }
.vf-guidance-heading > p { margin-top: .45rem; color: var(--vf-ink-soft); font-size: .78rem; line-height: 1.55; }
.vf-guidance-example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.vf-guidance-example { border: 1px solid var(--vf-rule); border-radius: .75rem; background: #fff; overflow: hidden; }
.vf-guidance-example summary { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 1rem; gap: .75rem; align-items: center; min-height: 4.5rem; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.vf-guidance-example summary:hover { background: #fafbfd; }
.vf-guidance-example__number { color: var(--vf-blue); font-family: Georgia, "Times New Roman", serif; font-size: 1rem; }
.vf-guidance-example summary strong { display: block; color: var(--vf-ink); font-size: .78rem; }
.vf-guidance-example summary small { display: block; margin-top: .15rem; color: #66758a; font-size: .66rem; line-height: 1.35; }
.vf-guidance-example summary > i { color: #66758a; transition: transform .16s ease; }
.vf-guidance-example[open] summary > i { transform: rotate(180deg); }
.vf-guidance-example__body { padding: 1rem 1.1rem; border-top: 1px solid var(--vf-rule); background: var(--vf-paper); color: var(--vf-ink-soft); font-size: .72rem; line-height: 1.55; }
.vf-guidance-document-line { margin-bottom: .8rem; padding: .85rem 1rem; border-left: 2px solid var(--vf-blue); background: #fff; color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: .88rem; line-height: 1.6; }
.vf-guidance-document-line mark { padding: .08rem .2rem; border-radius: .2rem; background: #dfeef9; color: var(--vf-blue-dark); }
.vf-guidance-document-label { margin-bottom: .4rem; color: var(--vf-blue-dark); font-size: .62rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.vf-guidance-boundary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--vf-rule); border-radius: .75rem; background: #fff; overflow: hidden; }
.vf-guidance-boundary-grid > div { padding: 1.2rem; }
.vf-guidance-boundary-grid > div + div { border-left: 1px solid var(--vf-rule); }
.vf-guidance-boundary-grid i { display: block; margin-bottom: .7rem; color: var(--vf-blue); font-size: 1.15rem; }
.vf-guidance-boundary-grid strong { display: block; color: var(--vf-ink); font-size: .76rem; }
.vf-guidance-boundary-grid p { margin-top: .3rem; color: var(--vf-ink-soft); font-size: .7rem; line-height: 1.5; }
.vf-guidance-action { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 2rem; padding: 1.1rem 1.25rem; border: 1px solid #bfd2c9; border-radius: .75rem; background: var(--vf-green-soft); }
.vf-guidance-action strong { color: var(--vf-ink); font-family: Georgia, "Times New Roman", serif; font-size: .95rem; }
.vf-guidance-action p { margin-top: .2rem; color: #52695f; font-size: .7rem; }

@media (max-width: 800px) {
    .vf-guidance-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vf-guidance-nav a:nth-child(2) { border-right: 0; }
    .vf-guidance-nav a:nth-child(-n+2) { border-bottom: 1px solid var(--vf-rule); }
    .vf-guidance-columns,
    .vf-guidance-example-grid { grid-template-columns: 1fr; }
    .vf-guidance-section + .vf-guidance-section { padding-left: 2.65rem; border-top: 1px solid #ded9cc; border-left: 0; }
    .vf-guidance-not-required ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vf-guidance-boundary-grid { grid-template-columns: 1fr; }
    .vf-guidance-boundary-grid > div + div { border-top: 1px solid var(--vf-rule); border-left: 0; }
}

@media (max-width: 560px) {
    .vf-upload-guidance__body { padding-left: 1rem; }
    .vf-upload-guidance__body ul { grid-template-columns: 1fr; }
    .vf-upload-guidance__footer { align-items: flex-start; flex-direction: column; }
    .vf-upload-guidance__footer a { margin-left: 0; }
    .vf-guidance-sheet__intro { align-items: flex-start; flex-direction: column; padding-left: 1.5rem; }
    .vf-guidance-sheet__intro > p { text-align: left; }
    .vf-guidance-section,
    .vf-guidance-section + .vf-guidance-section,
    .vf-guidance-not-required { padding-left: 1.5rem; }
    .vf-guidance-not-required ul { grid-template-columns: 1fr; }
    .vf-guidance-action { align-items: stretch; flex-direction: column; }
}

@media print {
    @page { size: A4 portrait; margin: 9mm; }
    .vf-guidance-page .vf-page-header,
    .vf-guidance-nav,
    .vf-guidance-examples,
    .vf-guidance-boundaries,
    .vf-guidance-action,
    #sidebar,
    #header,
    .kt-footer { display: none !important; }
    .vf-guidance-page { max-width: none; padding: 0 !important; }
    .kt-wrapper,
    #content { margin: 0 !important; background: #fff !important; }
    .vf-guidance-sheet { border-color: #888; box-shadow: none; break-inside: avoid; }
    .vf-guidance-sheet__intro,
    .vf-guidance-section { padding-top: .8rem; padding-bottom: .7rem; }
    .vf-guidance-list { gap: .45rem; }
    .vf-guidance-not-required { padding-top: .6rem; padding-bottom: .6rem; }
}

/* Editable Word workspace — a document-led shell with persistent review at
 * wide desktop sizes and the same panel as a drawer on smaller viewports. */
.vf-editor-workspace-page {
    --header-height: 72px;
    background: #eef1f4;
}

.vf-editor-workspace-page .kt-wrapper {
    min-width: 0;
    background: #eef1f4;
}

.vf-editor-workspace-page #content {
    min-width: 0;
    background: #eef1f4;
}

.vf-editor-workspace-page #sidebar_toggle { display: none; }

.vf-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0 clamp(1rem, 2vw, 2rem);
    border-bottom: 1px solid #d9dee6;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 1px 0 rgba(23, 36, 59, .03);
    backdrop-filter: blur(12px);
}

.vf-editor-header__main,
.vf-editor-header__actions,
.vf-editor-header__title-row,
.vf-editor-header__save {
    display: flex;
    align-items: center;
}

.vf-editor-header__main { min-width: 0; gap: .85rem; }
.vf-editor-header__actions { flex: 0 0 auto; gap: .55rem; }
.vf-editor-header__identity { min-width: 0; }
.vf-editor-header__title-row { min-width: 0; gap: .75rem; }
.vf-editor-header__title-row h1 {
    max-width: min(34vw, 33rem);
    overflow: hidden;
    color: #182235;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vf-editor-header__back {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid transparent;
    border-radius: .5rem;
    color: #637188;
}
.vf-editor-header__back:hover { border-color: #d6dce5; background: #f6f8fa; color: var(--vf-blue); }

.vf-editor-header__version {
    padding-left: .75rem;
    border-left: 1px solid #d8dde4;
    color: #536177;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.vf-editor-header__state {
    padding: .3rem .55rem;
    border-radius: .4rem;
    background: var(--vf-amber-soft);
    color: var(--vf-amber);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
}
.vf-editor-header__state--validated { background: var(--vf-green-soft); color: var(--vf-green); }

.vf-editor-header__save {
    gap: .3rem;
    margin-top: .28rem;
    color: var(--vf-ink-soft);
    font-size: .7rem;
    line-height: 1;
}
.vf-editor-header__save i { color: var(--vf-green); }
.vf-editor-header__organization { color: #738095; font-size: .72rem; white-space: nowrap; }
.vf-editor-header__release { min-height: 2.65rem; padding-inline: 1.1rem; }
.vf-editor-review-toggle { display: inline-flex; }

.vf-editor-page { min-width: 0; padding: 0; }

.vf-editor-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 60px;
    border-bottom: 1px solid #d9dee6;
    background: rgba(255, 255, 255, .95);
}

.vf-editor-step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .75rem 1rem;
    color: #697587;
    font-size: .78rem;
}
.vf-editor-step:hover { background: #fafbfd; color: #27364d; }
.vf-editor-step.is-current { color: #16243a; }
.vf-editor-step.is-current::after {
    position: absolute;
    right: 20%;
    bottom: -1px;
    left: 20%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--vf-blue);
    content: "";
}
.vf-editor-step__number {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #9ba7b7;
    border-radius: 999px;
    color: #35445a;
    font-size: .72rem;
    font-weight: 700;
}
.vf-editor-step.is-current .vf-editor-step__number { border-color: var(--vf-blue); background: var(--vf-blue); color: #fff; }

.vf-editor-workspace {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.vf-editor-stage {
    min-width: 0;
    /* As a start-aligned flex item the stage's width floors at its content's
       min-content — the fixed A4 sheet — and pushes the page into horizontal
       scroll on small viewports. Capping it keeps the sheet scrolling inside
       .vew-editor's own overflow instead. */
    max-width: 100%;
    padding: clamp(.75rem, 1.4vw, 1.25rem);
    overflow: visible;
}

.vf-editor-document { display: flex; min-width: 0; flex-direction: column; gap: .7rem; }
.vf-editor-source-note {
    padding: .7rem .85rem;
    border-color: #cdd9e4;
    background: #f7fafc;
    color: #33445b;
}
.vf-editor-source-note p { max-width: 54rem; color: var(--vf-ink-soft); font-size: .72rem; line-height: 1.45; }
.vf-editor-source-note .kt-btn { min-height: 2.15rem; font-size: .72rem; }
.vf-editor-canvas-frame { min-width: 0; overflow: hidden; border-radius: .25rem; box-shadow: 0 12px 34px rgba(23, 36, 59, .08); }
.vf-editor-context-status { min-height: 1.25rem; padding-inline: .2rem; }

.vf-editor-review {
    top: 0;
    bottom: 0;
    width: min(22rem, 94vw);
    padding: 1.15rem;
    overflow-y: auto;
    border-left: 1px solid #d9dee6;
    background: #fff;
}
.vf-editor-review__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.vf-editor-review__header .vf-eyebrow { margin-bottom: .2rem; font-size: .62rem; }
.vf-editor-review__header h2 { color: #182235; font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 600; }
.vf-editor-review__summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: .75rem;
    border: 1px solid #dce2e9;
    border-radius: .55rem;
    background: #f8fafb;
}
.vf-editor-review__summary > div { min-width: 0; padding: .65rem .5rem; text-align: center; }
.vf-editor-review__summary > div + div { border-left: 1px solid #e1e5eb; }
.vf-editor-review__summary strong { display: block; color: #182235; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1; }
.vf-editor-review__summary span { display: block; margin-top: .3rem; overflow: hidden; color: var(--vf-ink-soft); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.vf-editor-review__next { width: 100%; margin-bottom: 1rem; }
.vf-editor-review [data-proposal-id] > .flex { flex-wrap: wrap; }

.vew-advanced-nav {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: .25rem;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--border, #e1e5ec);
}
.vew-advanced-nav .editor-tab-link { display: none; }
.vew-advanced-nav.is-open .editor-tab-link { display: flex; }

@media (min-width: 1024px) {
    #editor-tab-nav:not(.vew-advanced-nav) { width: 14rem; flex-direction: column; }
    #editor-tab-content { min-width: 0; width: auto; }
    #findings-panel:not(.vf-editor-review) { width: 20rem; }
}

@media (min-width: 1440px) {
    .vf-editor-review-toggle,
    .vf-editor-review__close { display: none; }
    .vf-editor-workspace { grid-template-columns: minmax(0, 1fr) 20rem; }
    .vf-editor-review {
        position: sticky;
        z-index: 4;
        top: var(--header-height);
        bottom: auto;
        inset-inline-end: auto;
        display: flex !important;
        width: 20rem;
        height: calc(100vh - var(--header-height) - 60px);
        max-width: none;
        flex-direction: column;
        transform: none !important;
        translate: none !important;
        box-shadow: none;
    }
}

@media (max-width: 900px) {
    .vf-editor-header__organization,
    .vf-editor-header__actions form { display: none; }
    .vf-editor-header__title-row h1 { max-width: 34vw; font-size: 1.05rem; }
    .vf-editor-header__version { display: none; }
    .vf-editor-step { font-size: .7rem; }
}

@media (max-width: 680px) {
    .vf-editor-header { gap: .5rem; padding-inline: .65rem; }
    .vf-editor-header__title-row { gap: .35rem; }
    .vf-editor-header__title-row h1 { max-width: 28vw; }
    .vf-editor-header__state { display: none; }
    .vf-editor-review-toggle { width: 2.35rem; padding: 0; font-size: 0; }
    .vf-editor-review-toggle i { font-size: 1rem; }
    .vf-editor-header__release { min-height: 2.35rem; padding-inline: .65rem; font-size: .7rem; }
    .vf-editor-step { min-width: 0; gap: .35rem; padding-inline: .35rem; }
    .vf-editor-step strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vf-editor-step__number { width: 1.45rem; height: 1.45rem; }
    .vf-editor-step.is-current::after { right: 8%; left: 8%; }
    .vf-editor-source-note p { display: none; }
}

/* Login — "Justified Column": ink panel with abstract bar field + paper form column */
.vf-login-shell {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    width: 100%;
    min-height: 100vh;
}

.vf-login-panel {
    position: relative;
    overflow: hidden;
    background: var(--vf-ink);
}
.vf-login-bars {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    padding: 150px 44px 40px;
    opacity: .9;
}
.vf-login-bar-col { display: flex; flex-direction: column; gap: 11px; }
.vf-login-bar {
    height: 7px;
    border-radius: 2px;
    opacity: .4; /* static fallback when animations are off */
    animation: vfBar 8s ease-in-out infinite backwards;
}
.vf-login-bar--a { background: #4d6a8c; }
.vf-login-bar--b { background: #7f96b1; }
.vf-login-bar--c { background: #a3c5e0; }
.vf-login-bar--d { background: var(--vf-blue); }
.vf-login-bar-break { height: 26px; }
.vf-login-sweep {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 340px;
    background: linear-gradient(180deg, transparent, rgba(143, 186, 223, .20), transparent);
    animation: vfSweep 11s linear infinite;
}
.vf-login-wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(23, 36, 59, .30) 0%, rgba(23, 36, 59, .82) 62%, var(--vf-ink) 100%);
}
.vf-login-topfade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(180deg, var(--vf-ink) 55%, rgba(23, 36, 59, 0));
}
.vf-login-panel-content {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px 48px;
}
.vf-login-logo {
    flex: 0 0 auto;
    width: 136px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .92;
}
.vf-login-claim {
    max-width: 430px;
    color: #f2f6fa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    font-weight: 600;
    letter-spacing: -.028em;
    line-height: 1.08;
    text-wrap: pretty;
}
.vf-login-claim-sub { max-width: 400px; margin-top: 18px; color: #a9bdd4; font-size: 15px; line-height: 1.65; }
.vf-login-panel-foot { color: #7f96b1; font-size: 12px; }

.vf-login-form-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 64px;
    background: var(--vf-paper);
}
.vf-login-form { width: 100%; max-width: 380px; }
.vf-auth-title {
    margin-top: 12px;
    color: var(--vf-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -.024em;
}
.vf-auth-lead { margin: 10px 0 30px; color: var(--vf-ink-soft); font-size: 13.5px; line-height: 1.6; }
.vf-form-error {
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #efb5b5;
    border-radius: 8px;
    background: #fff1f1;
    color: #8e2929;
    font-size: 13px;
    line-height: 1.5;
}
.vf-login-fields { display: flex; flex-direction: column; gap: 16px; }
.vf-login-field { display: flex; flex-direction: column; gap: 6px; }
.vf-login-shell .kt-form-label { color: #3c4c64; font-size: 12.5px; font-weight: 600; }
.vf-login-shell .kt-input {
    height: 46px;
    padding: 0 13px;
    border: 1px solid #d8dde4;
    border-radius: 8px;
    background: #fff;
    color: var(--vf-ink);
    font-size: 14px;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.vf-login-shell .kt-input[data-kt-toggle-password] { padding-right: 6px; }
.vf-login-shell .kt-input:focus,
.vf-login-shell .kt-input:focus-within {
    border-color: #8eacc4;
    box-shadow: 0 0 0 3px rgba(36, 93, 143, .12);
    outline: none;
}
.vf-login-shell [data-kt-toggle-password-trigger] {
    border-radius: 6px;
    background: transparent;
    color: #68778c;
    transition: background-color .16s ease, color .16s ease;
}
.vf-login-shell [data-kt-toggle-password-trigger]:hover { background: #f0f3f6; color: var(--vf-blue); }
.vf-login-shell .kt-checkbox-label { color: #3c4c64; font-size: 13px; }
.vf-login-shell .kt-btn-primary {
    width: 100%;
    height: 50px;
    margin-top: 6px;
    border-radius: 8px;
    background: var(--vf-blue);
    font-size: 15px;
    font-weight: 650;
    transition: background-color .16s ease;
}
.vf-login-shell .kt-btn-primary:hover { background: var(--vf-blue-dark); }
.vf-login-note { margin-top: 14px; color: #788598; font-size: 12px; line-height: 1.6; }

@keyframes vfBar {
    0%, 100% { opacity: .18; }
    50% { opacity: .62; }
}
@keyframes vfSweep {
    0% { transform: translateY(-40%); }
    100% { transform: translateY(140%); }
}
@media (prefers-reduced-motion: reduce) {
    .vf-login-bar { animation: none; }
    .vf-login-sweep { display: none; }
}

@media (max-width: 900px) {
    .vf-login-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .vf-login-panel { height: 220px; }
    .vf-login-bars { padding: 90px 24px 24px; }
    .vf-login-panel-content { padding: 28px 24px; }
    .vf-login-claim { font-size: 32px; }
    .vf-login-claim-sub,
    .vf-login-panel-foot { display: none; }
    .vf-login-form-col { padding: 40px 24px; }
    .vf-login-form { max-width: 420px; }
}
@media (max-width: 480px) {
    .vf-login-claim { font-size: 28px; }
    .vf-auth-title { font-size: 30px; }
}

@media (max-width: 900px) {
    .vf-create-layout { grid-template-columns: 1fr; }
    .vf-template-row { grid-template-columns: 1fr; gap: .75rem; }
    .vf-row-actions { justify-content: flex-start; }
    .vf-document-grid { grid-template-columns: 1fr; }
    .vf-generated-row { grid-template-columns: 2.5rem minmax(0, 1fr); }
    .vf-generated-meta { grid-column: 2; }
    .vf-generated-row .vf-row-actions { grid-column: 1 / -1; padding-top: .25rem; }
}

@media (max-width: 720px) {
    .vf-page-header { align-items: flex-start; flex-direction: column; }
    .vf-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vf-journey { grid-template-columns: 1fr 1fr; }
    .vf-journey-step:nth-child(2) { border-right: 0; }
    .vf-journey-step:nth-child(-n+2) { border-bottom: 1px solid var(--vf-rule); }
    .vf-step-copy span { display: none; }
    .vf-toolbar { align-items: stretch; flex-direction: column; }
    .vf-search { width: 100%; }
    .vf-release-summary { grid-template-columns: 1fr; }
}