@font-face {
    font-family: "FSAlbertPro";
    src: url("/assets/font/FSAlbertPro-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --navy: #080d4f;
    --blue: #0754d8;
    --bright-blue: #2477ff;
    --lavender: #919de5;
    --orange: #ff6b00;
    --ink: #101744;
    --muted: #636982;
    --warm: #f6f2ef;
    --warm-strong: #ebe7e4;
    --card: #ffffff;
    --line: #ddd9d7;
    --success: #14805e;
    --danger: #bb2b3b;
    --shadow: 0 22px 55px rgba(8, 13, 79, 0.1);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-width: 320px;
    color: var(--ink);
    background:
        radial-gradient(circle at 95% 10%, rgba(145, 157, 229, 0.22), transparent 30rem),
        var(--warm);
    font-family: "FSAlbertPro", "Segoe UI", sans-serif;
    line-height: 1.45;
}

button, input, textarea { font: inherit; }

button { color: inherit; }

.topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 78px;
    padding: 12px clamp(20px, 4vw, 64px);
    color: white;
    background: rgba(8, 13, 79, 0.97);
    box-shadow: 0 8px 30px rgba(8, 13, 79, 0.16);
    backdrop-filter: blur(16px);
}

.brand {
    display: grid;
    place-items: center;
    width: 100px;
    height: 48px;
    padding-right: 24px;
    border-right: 1px solid rgba(255,255,255,.24);
}

.brand img { width: 72px; max-height: 42px; object-fit: contain; }

.topbar__title { display: flex; flex-direction: column; gap: 1px; padding-left: 24px; }
.topbar__title span { color: #b8c8ff; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.topbar__title strong { font-size: 1.08rem; }
.topbar__meta { display: flex; gap: 10px; }
.topbar__meta span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #e7ebff; font-size: .82rem; }

.competency-tabs {
    position: sticky;
    z-index: 25;
    top: 78px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
    background: white;
    box-shadow: 0 8px 24px rgba(8, 13, 79, .07);
}

.competency-tabs span {
    overflow: hidden;
    padding: 9px 8px;
    color: white;
    background: var(--tab-color);
    font-size: .78rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.competency-tabs span:nth-child(4) { color: var(--navy); }

.layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 960px);
    gap: 32px;
    align-items: start;
    justify-content: center;
    max-width: 1320px;
    margin: 0 auto;
    padding: 38px 30px 64px;
}

.rail {
    position: sticky;
    top: 142px;
    display: grid;
    gap: 16px;
}

.progress-card,
.rail-note {
    padding: 20px;
    border: 1px solid rgba(8, 13, 79, .08);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.8);
    box-shadow: 0 12px 34px rgba(8, 13, 79, .07);
}

.progress-card { display: flex; align-items: center; gap: 15px; }
.progress-card strong { display: block; margin-bottom: 4px; font-size: .94rem; }
.progress-card p { margin: 0; color: var(--muted); font-size: .78rem; }

.progress-ring { position: relative; flex: 0 0 74px; width: 74px; height: 74px; }
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 9; }
.progress-ring__track { stroke: #e7e7ef; }
.progress-ring__bar { stroke: var(--orange); stroke-linecap: round; stroke-dasharray: 314.16; stroke-dashoffset: 314.16; transition: stroke-dashoffset .3s ease; }
.progress-ring span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--navy); font-size: .95rem; font-weight: 700; }

.section-nav { display: grid; gap: 6px; }
.section-nav button {
    display: grid;
    grid-template-columns: 30px 1fr 18px;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    color: var(--muted);
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: .2s ease;
}
.section-nav button:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.section-nav button.is-active { color: var(--ink); background: white; box-shadow: 0 8px 24px rgba(8,13,79,.08); }
.section-nav__number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--navy); background: #e5e9fb; font-size: .77rem; font-weight: 700; }
.section-nav__label { overflow: hidden; font-size: .84rem; text-overflow: ellipsis; white-space: nowrap; }
.section-nav__status { color: #b4b7c5; font-weight: 700; }
.section-nav button.is-complete .section-nav__status { color: var(--success); }
.section-nav button.is-active .section-nav__number { color: white; background: var(--navy); }

.rail-note { color: var(--muted); font-size: .8rem; }
.rail-note span { display: inline-block; margin-bottom: 7px; color: var(--orange); font-weight: 700; letter-spacing: .18em; }
.rail-note p { margin: 0; }

.survey {
    overflow: hidden;
    scroll-margin-top: 136px;
    border: 1px solid rgba(8,13,79,.07);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.86);
    box-shadow: var(--shadow);
}

.screen { display: none; padding: clamp(28px, 5vw, 56px); animation: screen-in .24s ease; }
.screen.is-active { display: block; }

@keyframes screen-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    min-height: 410px;
    overflow: hidden;
    margin: calc(clamp(28px, 5vw, 56px) * -1);
    margin-bottom: 34px;
    padding: clamp(36px, 6vw, 70px);
    color: white;
    background:
        linear-gradient(120deg, rgba(8,13,79,.98), rgba(7,84,216,.87)),
        radial-gradient(circle at 15% 25%, rgba(255,255,255,.14), transparent 40%);
}

.hero::after {
    content: "";
    position: absolute;
    right: -12%;
    bottom: -40%;
    width: 56%;
    aspect-ratio: 1;
    border: 2px solid rgba(255,255,255,.16);
    border-radius: 50%;
}

.hero__content { position: relative; z-index: 2; align-self: center; max-width: 560px; }
.hero h1 { max-width: 520px; margin: 12px 0 20px; font-size: clamp(2.55rem, 6vw, 4.9rem); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.hero p { max-width: 610px; margin: 0; color: #dbe4ff; font-size: clamp(1rem, 2vw, 1.23rem); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: .76rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero .eyebrow { color: #b9cbff; }

.hero-mark { position: relative; z-index: 2; align-self: center; justify-self: center; width: 258px; aspect-ratio: 1; border: 10px solid white; border-radius: 50%; background: conic-gradient(var(--orange) 0 33%, var(--bright-blue) 33% 66%, var(--navy) 66% 100%); transform: rotate(-18deg); }
.hero-mark::before { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: white; }
.hero-mark__core { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: var(--navy); font-size: 1.1rem; font-weight: 700; line-height: .95; text-align: center; transform: rotate(18deg); }

.intro-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
.notice,
.method-card,
.policy-note,
.competency-definition,
.question-picker,
.star-block,
.rating-block,
.recommendation-block,
.field--notes,
.decision-note {
    border-radius: var(--radius-md);
}
.notice { padding: 26px; background: var(--warm); }
.notice h2 { margin: 0 0 14px; font-size: 1.25rem; }
.notice p { margin: 0 0 11px; color: var(--muted); }
.notice p:last-child { margin-bottom: 0; }
.method-card { display: flex; flex-direction: column; justify-content: center; padding: 26px; color: white; background: var(--navy); }
.method-card__badge { align-self: flex-start; margin-bottom: 18px; padding: 6px 10px; border-radius: 8px; color: var(--navy); background: white; font-size: .72rem; font-weight: 700; letter-spacing: .18em; }
.method-card strong { margin-bottom: 7px; font-size: 1.15rem; }
.method-card p { margin: 0; color: #cfd7ff; font-size: .9rem; }

.screen__header { margin-bottom: 30px; }
.screen__header h2 { margin: 8px 0 8px; color: var(--ink); font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; }
.screen__header p { max-width: 720px; margin: 0; color: var(--muted); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > span, .field legend { color: var(--ink); font-size: .9rem; font-weight: 700; }
.field span small { color: var(--muted); font-weight: 400; }
.field input,
.field textarea,
.star-field textarea {
    width: 100%;
    border: 1px solid #d5d6df;
    border-radius: var(--radius-sm);
    outline: 0;
    color: var(--ink);
    background: white;
    transition: border-color .2s, box-shadow .2s;
}
.field input { min-height: 52px; padding: 0 15px; }
.field textarea, .star-field textarea { resize: vertical; padding: 14px 15px; line-height: 1.45; }
.field input:focus, .field textarea:focus, .star-field textarea:focus { border-color: var(--bright-blue); box-shadow: 0 0 0 4px rgba(36,119,255,.12); }
.field input::placeholder, .field textarea::placeholder, .star-field textarea::placeholder { color: #a2a5b4; }

.policy-note { margin-top: 24px; padding: 20px 22px; border-left: 5px solid var(--orange); background: #fff4eb; }
.policy-note strong { display: block; margin-bottom: 4px; }
.policy-note p { margin: 0; color: #6d5c52; font-size: .87rem; }

.competency-head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; margin-bottom: 24px; }
.competency-number { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; color: white; background: var(--competency-color); font-size: 1.25rem; font-weight: 700; box-shadow: 0 10px 24px color-mix(in srgb, var(--competency-color) 28%, transparent); }
.competency-head h2 { margin: 2px 0 5px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; letter-spacing: -.035em; }
.competency-head p { margin: 0; color: var(--muted); }

.competency-definition { display: grid; grid-template-columns: auto 1fr; gap: 16px; margin-bottom: 24px; padding: 22px; background: color-mix(in srgb, var(--competency-color) 8%, white); border: 1px solid color-mix(in srgb, var(--competency-color) 18%, white); }
.competency-definition span { color: var(--competency-color); font-weight: 700; }
.competency-definition p { margin: 0; }

.question-picker { margin: 0 0 24px; padding: 24px; border: 0; background: var(--warm); }
.question-picker legend, .rating-block legend, .recommendation-block legend { padding: 0; color: var(--ink); font-size: 1.06rem; font-weight: 700; }
.question-picker__hint { margin: 5px 0 18px; color: var(--muted); font-size: .86rem; }
.question-list { display: grid; gap: 10px; }
.question-entry { overflow: hidden; border: 1px solid transparent; border-radius: 16px; background: white; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.question-entry:hover { border-color: color-mix(in srgb, var(--competency-color) 35%, white); transform: translateY(-1px); }
.question-option { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 16px; border: 0; border-radius: 0; background: white; cursor: pointer; }
.question-option input { position: absolute; opacity: 0; pointer-events: none; }
.question-option__number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #c9cbd6; border-radius: 9px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.question-option__text { padding-top: 3px; }
.question-entry:has(input:checked) { border-color: var(--competency-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--competency-color) 12%, transparent); }
.question-option:has(input:checked) .question-option__number { color: white; border-color: var(--competency-color); background: var(--competency-color); }
.section-notes { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: var(--radius-md); background: white; box-shadow: 0 10px 28px rgba(8,13,79,.06); }
.section-notes > span { color: var(--ink); font-size: .95rem; font-weight: 700; }
.section-notes textarea { width: 100%; min-height: 150px; resize: vertical; padding: 14px 15px; border: 1px solid transparent; border-radius: 2px; outline: 0; color: var(--ink); background: #eef1ff; line-height: 1.45; transition: border-color .2s, box-shadow .2s; }
.section-notes textarea:focus { border-color: var(--bright-blue); box-shadow: 0 0 0 4px rgba(36,119,255,.12); }
.section-notes textarea::placeholder { color: #959ab2; }
.section-notes .counter { align-self: flex-end; }

.star-block { margin-bottom: 24px; padding: 24px; color: white; background: var(--navy); }
.star-block__head { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 18px; }
.star-block__head h3 { margin: 0 0 4px; font-size: 1.22rem; }
.star-block__head p { margin: 0; color: #bcc7f1; font-size: .86rem; }
.star-badge { flex: 0 0 auto; padding: 7px 11px; border-radius: 9px; color: var(--navy); background: white; font-size: .75rem; font-weight: 700; letter-spacing: .15em; }
.star-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.star-field { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 14px; background: white; }
.star-field__header { min-height: 112px; padding: 15px; color: var(--ink); background: #eef1ff; }
.star-field__header strong { display: block; margin-bottom: 4px; color: var(--blue); }
.star-field__header span { display: block; color: var(--muted); font-size: .8rem; }
.probe-toggle { align-self: start; margin: 9px 0 0; padding: 0; border: 0; color: var(--blue); background: transparent; font-size: .76rem; font-weight: 700; cursor: pointer; }
.probe-list { display: none; margin: 0; padding: 0 15px 12px 30px; color: var(--muted); font-size: .75rem; }
.star-field.is-open .probe-list { display: block; }
.star-field textarea { min-height: 150px; border: 0; border-top: 1px solid #e0e2ec; border-radius: 0; }
.star-field textarea:focus { box-shadow: inset 0 0 0 2px var(--bright-blue); }
.counter { align-self: flex-end; color: var(--muted); font-size: .72rem; font-weight: 400 !important; }
.star-field .counter { padding: 0 12px 10px; }

.rating-block, .recommendation-block { margin: 0; padding: 24px; border: 1px solid var(--line); background: #ece9e7; }
.rating-block__hint { margin: 6px 0 16px; color: var(--muted); font-size: .85rem; }
.rating-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rating-option { position: relative; display: block; cursor: pointer; }
.rating-option input { position: absolute; opacity: 0; }
.rating-option > span { display: block; height: 100%; min-height: 126px; padding: 17px; border: 1px solid transparent; border-radius: 14px; background: white; transition: .18s ease; }
.rating-option strong { display: block; margin-bottom: 7px; }
.rating-option small { display: block; color: var(--muted); line-height: 1.4; }
.rating-option:hover > span { transform: translateY(-1px); }
.rating-option input:checked + span { color: var(--navy); border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,0,.13); }
.rating-option input:checked + span::before { content: "✓"; float: right; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: var(--orange); font-size: .75rem; }

.summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin-bottom: 28px; }
.summary-card { min-width: 0; padding: 14px; border-top: 5px solid var(--summary-color); border-radius: 12px; background: var(--warm); }
.summary-card span { display: block; overflow: hidden; margin-bottom: 6px; color: var(--muted); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.summary-card strong { display: block; font-size: .82rem; line-height: 1.2; }
.summary-card em { display: block; margin-top: 5px; color: var(--muted); font-size: .72rem; font-style: normal; }
.rating-grid--vertical { grid-template-columns: 1fr; margin-top: 17px; }
.rating-grid--vertical .rating-option > span { min-height: 0; }
.recommendation-block { margin-bottom: 24px; }
.field--notes { padding: 22px; background: var(--warm); }
.decision-note { margin: 18px 0 0; padding: 17px; color: var(--muted); background: #f0eff5; font-size: .85rem; text-align: center; }

.error { min-height: 18px; color: var(--danger); font-size: .78rem; font-style: normal; }
.question-picker.has-error, .rating-block.has-error, .recommendation-block.has-error { border: 1px solid var(--danger); }

.screen--done { padding-top: 80px; padding-bottom: 80px; text-align: center; }
.screen--done .screen__header p { margin-inline: auto; }
.completion-mark { display: grid; place-items: center; width: 82px; height: 82px; margin: 0 auto 24px; border-radius: 50%; color: white; background: var(--success); font-size: 2rem; box-shadow: 0 14px 32px rgba(20,128,94,.2); }
.receipt { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 24px auto 0; padding: 15px 18px; border-radius: 12px; color: #0b5d43; background: #e2f5ed; }

.form-actions { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px clamp(24px, 5vw, 56px); border-top: 1px solid #e7e4e2; background: rgba(255,255,255,.95); }
.form-actions__right { display: flex; gap: 10px; align-items: center; }
.button { min-height: 46px; padding: 0 19px; border: 1px solid transparent; border-radius: 999px; font-weight: 700; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .6; cursor: wait; }
.button--primary { color: white; background: var(--orange); box-shadow: 0 10px 20px rgba(255,107,0,.2); }
.button--primary:hover:not(:disabled) { box-shadow: 0 13px 24px rgba(255,107,0,.28); }
.button--secondary { color: var(--navy); border-color: #d7d8e0; background: white; }
.button--ghost { color: var(--navy); background: transparent; }
.save-status { max-width: 180px; color: var(--muted); font-size: .76rem; text-align: right; }

.footer { display: flex; justify-content: space-between; gap: 20px; max-width: 1260px; margin: 0 auto; padding: 0 30px 35px; color: #9698a5; font-size: .68rem; }

@media (max-width: 1050px) {
    .layout { grid-template-columns: 1fr; max-width: 980px; }
    .rail { position: static; grid-template-columns: 1fr; }
    .progress-card { justify-content: flex-start; }
    .section-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .section-nav button { flex: 0 0 auto; width: auto; min-width: 130px; }
    .rail-note { display: none; }
}

@media (max-width: 760px) {
    .topbar { grid-template-columns: auto 1fr; min-height: 68px; padding: 10px 18px; }
    .brand { width: 74px; height: 40px; padding-right: 16px; }
    .brand img { width: 52px; }
    .topbar__title { padding-left: 16px; }
    .topbar__title strong { font-size: .92rem; }
    .topbar__meta { display: none; }
    .competency-tabs { top: 68px; overflow-x: auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); }
    .layout { padding: 24px 14px 46px; }
    .survey { border-radius: 20px; }
    .survey { scroll-margin-top: 118px; }
    .screen { padding: 26px 20px; }
    .hero { grid-template-columns: 1fr; min-height: 0; margin: -26px -20px 26px; padding: 42px 26px 34px; }
    .hero h1 { font-size: 2.8rem; }
    .hero-mark { width: 155px; margin-top: 28px; justify-self: end; }
    .intro-grid, .field-grid, .star-grid, .rating-grid, .summary-grid { grid-template-columns: 1fr; }
    .summary-grid { grid-template-columns: 1fr 1fr; }
    .star-field__header { min-height: 0; }
    .competency-head { gap: 14px; }
    .competency-number { width: 46px; height: 46px; border-radius: 14px; }
    .competency-head h2 { font-size: 2rem; }
    .competency-definition { grid-template-columns: 1fr; }
    .form-actions { position: sticky; z-index: 20; bottom: 0; align-items: stretch; padding: 14px 16px; }
    .form-actions__right { flex: 1; justify-content: flex-end; }
    .save-status { display: none; }
    .button { padding-inline: 15px; }
    .footer { flex-direction: column; padding-inline: 20px; }
}

@media (max-width: 480px) {
    .competency-tabs { display: none; }
    .survey { scroll-margin-top: 78px; }
    .rail { top: 68px; }
    .section-nav button { min-width: 112px; }
    .section-nav__label { max-width: 64px; }
    .progress-card { padding: 14px; }
    .progress-ring { flex-basis: 62px; width: 62px; height: 62px; }
    .screen__header h2 { font-size: 1.85rem; }
    .question-picker, .star-block, .rating-block, .recommendation-block { padding: 18px; }
    .question-option { padding: 13px; }
    .form-actions { gap: 6px; }
    .button { min-height: 43px; padding-inline: 12px; font-size: .84rem; }
    .button--secondary { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}