:root {
    --ink: #1f2a30;
    --muted: #627078;
    --paper: #ffffff;
    --canvas: #f3f5f4;
    --line: #dce2df;
    --green: #24705f;
    --green-dark: #174d42;
    --green-soft: #e3f1eb;
    --coral: #be584c;
    --coral-soft: #fae9e5;
    --yellow: #f1c453;
    --blue: #2f6685;
    --shadow: 0 12px 30px rgba(31, 42, 48, .09);
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.55;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--blue);
    text-underline-offset: .2em;
}

button,
.button {
    font: inherit;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 4.5rem;
    padding: .65rem max(1rem, calc((100% - 1120px) / 2));
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--ink);
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--green);
    color: white;
    font-size: 1.25rem;
    font-weight: 900;
    box-shadow: inset -.35rem -.25rem 0 rgba(0, 0, 0, .12);
}

.brand strong,
.brand small {
    display: block;
}

.brand small {
    color: var(--muted);
    font-size: .77rem;
}

.topbar nav {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.topbar nav a {
    padding: .55rem .75rem;
    border-radius: 6px;
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.topbar nav a:hover,
.topbar nav a:focus-visible {
    background: var(--green-soft);
}

.topbar nav .nav-admin {
    color: var(--muted);
    font-weight: 600;
}

.page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 2.4rem 1rem 4.5rem;
}

.eyebrow,
.section-label {
    margin: 0 0 .35rem;
    color: var(--coral);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    margin: 0;
    letter-spacing: 0;
    line-height: 1.15;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 1.55rem;
}

p {
    margin: .6rem 0 0;
}

.lead {
    max-width: 42rem;
    color: var(--muted);
    font-size: 1.1rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .65rem 1rem;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
}

.button.primary {
    background: var(--green);
    color: white;
}

.button.primary:hover,
.button.primary:focus-visible {
    background: var(--green-dark);
}

.button.secondary {
    border-color: var(--line);
    background: white;
    color: var(--ink);
}

.button.secondary:hover,
.button.secondary:focus-visible {
    border-color: var(--green);
    color: var(--green-dark);
}

.catalog-header {
    padding: 1.25rem 0 2rem;
}

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.25rem;
}

.challenge-tile {
    display: grid;
    grid-template-rows: 15rem 1fr;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.challenge-tile > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.challenge-tile-body {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 1.25rem;
}

.challenge-tile-body h2 {
    margin-top: .7rem;
}

.challenge-tile-body p {
    flex: 1;
    color: var(--muted);
}

.challenge-tile-body .button {
    margin-top: 1.1rem;
}

.challenge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.challenge-meta span {
    padding: .28rem .55rem;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .8rem;
    font-weight: 800;
}

.empty-state {
    padding: 3rem 0;
    border-top: 2px solid var(--yellow);
}

.empty-state p {
    color: var(--muted);
}

.breadcrumbs {
    margin-bottom: 1rem;
}

.breadcrumbs a {
    color: var(--muted);
    font-weight: 700;
    text-decoration: none;
}

.challenge-detail {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    box-shadow: var(--shadow);
}

.challenge-hero {
    position: relative;
    min-height: 31rem;
    background: var(--green-dark);
}

.challenge-hero > img {
    width: 100%;
    height: 31rem;
    object-fit: cover;
}

.challenge-title-band {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.6rem 2rem;
    background: rgba(23, 43, 39, .88);
    color: white;
}

.challenge-title-band h1 {
    max-width: 54rem;
}

.challenge-title-band p:last-child {
    max-width: 48rem;
    color: #eef6f2;
    font-size: 1.08rem;
}

.challenge-title-band .eyebrow {
    color: #ffd66e;
}

.challenge-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line);
    background: #fbfcfb;
}

.challenge-facts > span {
    min-width: 0;
    padding: 1rem 1.25rem;
    border-right: 1px solid var(--line);
}

.challenge-facts > span:last-child {
    border-right: 0;
    border-top: 4px solid var(--badge-color, var(--yellow));
}

.challenge-facts strong {
    display: block;
    margin-bottom: .15rem;
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.challenge-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .85fr);
}

.challenge-main {
    padding: .5rem 2rem 1rem;
}

.challenge-main section {
    padding: 2rem 0;
    border-bottom: 1px solid var(--line);
}

.challenge-main section:last-child {
    border-bottom: 0;
}

.challenge-main section > p:not(.section-label),
.challenge-aside section > p:not(.section-label) {
    max-width: 46rem;
    color: #39474d;
}

.story-section {
    position: relative;
}

.story-section::before {
    position: absolute;
    top: 2rem;
    left: -2rem;
    width: .35rem;
    height: 4rem;
    background: var(--yellow);
    content: "";
}

.challenge-aside {
    border-left: 1px solid var(--line);
    background: #f7f9f8;
}

.challenge-aside section {
    padding: 1.5rem;
    border-bottom: 1px solid var(--line);
}

.challenge-aside .parent-note {
    border-top: 4px solid var(--coral);
    background: var(--coral-soft);
}

.criteria-list,
.resource-list {
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
}

.criteria-list {
    display: grid;
    gap: .65rem;
}

.criteria-list li {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--line);
}

.check-mark {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    border: 2px solid var(--green);
    border-radius: 4px;
}

.criteria-list small {
    display: block;
    margin-top: .2rem;
    color: var(--coral);
    font-weight: 800;
}

.resource-list li {
    padding: .85rem 0;
    border-bottom: 1px solid var(--line);
}

.resource-list li:last-child {
    border-bottom: 0;
}

.resource-list strong,
.resource-list span,
.resource-list a {
    display: block;
}

.resource-list span {
    margin-top: .2rem;
    color: var(--muted);
    font-size: .92rem;
}

.resource-list a {
    margin-top: .35rem;
    font-weight: 750;
}

.challenge-actions {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 2rem;
    border-top: 1px solid var(--line);
    background: #fbfcfb;
}

.messages {
    display: grid;
    gap: .5rem;
    margin-bottom: 1rem;
}

.message {
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--green-soft);
}

.curriculum-hero {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: flex-end;
    padding: 1.25rem 0 2.5rem;
}

.map-key {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    max-width: 25rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 750;
}

.map-key span {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}

.key-dot {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--green);
}

.key-dot.school {
    background: var(--blue);
}

.key-dot.family {
    background: var(--coral);
}

.curriculum-layers {
    padding: 1.5rem;
    border: 1px solid #d6dfda;
    border-radius: 10px;
    background: #eaf1ed;
}

.layer-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: .85rem;
    align-items: stretch;
    margin-top: 1.25rem;
}

.layer-card {
    display: flex;
    gap: .85rem;
    padding: 1rem;
    border: 1px solid rgba(31, 42, 48, .12);
    border-top: 4px solid var(--green);
    border-radius: 7px;
    background: rgba(255, 255, 255, .88);
}

.layer-card.path {
    border-top-color: var(--coral);
}

.layer-card.evidence {
    border-top-color: var(--yellow);
}

.layer-number {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--ink);
    color: white;
    font-weight: 900;
}

.layer-card h3 {
    font-size: 1rem;
}

.layer-card p {
    color: var(--muted);
    font-size: .86rem;
}

.layer-arrow {
    align-self: center;
    color: var(--green);
    font-size: 1.4rem;
    font-weight: 900;
}

.curriculum-context-note {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-left: 4px solid var(--yellow);
    background: rgba(255, 255, 255, .72);
    color: #46565d;
    font-size: .84rem;
}

.curriculum-context-note strong {
    color: var(--ink);
}

.curriculum-board {
    margin-top: 2rem;
}

.curriculum-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: end;
}

.curriculum-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.curriculum-filters label {
    display: grid;
    gap: .25rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.curriculum-filters select {
    min-width: 10rem;
    height: 2.65rem;
    padding: 0 2.4rem 0 .75rem;
    border: 1px solid #c9d2ce;
    border-radius: 6px;
    background: white;
    color: var(--ink);
    font: inherit;
    font-size: .88rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.map-summary {
    display: flex;
    gap: 0;
    margin-top: 1.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
}

.map-summary span {
    padding: .8rem 1rem;
    border-right: 1px solid var(--line);
    color: var(--muted);
    font-size: .84rem;
}

.map-summary span:last-child {
    border-right: 0;
}

.map-summary strong {
    margin-right: .2rem;
    color: var(--ink);
    font-size: 1.15rem;
}

.source-map {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
}

.source-lane {
    --source-color: var(--green);
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: 6px solid var(--source-color);
    border-radius: 8px;
    background: white;
    box-shadow: 0 7px 22px rgba(31, 42, 48, .06);
}

.source-lane.source-school {
    --source-color: var(--blue);
}

.source-lane.source-family {
    --source-color: var(--coral);
}

.source-lane.source-custom {
    --source-color: #7a6591;
}

.source-lane-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    background: #fafcfb;
}

.source-lane-heading h3 {
    font-size: 1.2rem;
}

.source-lane-heading > a {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 750;
}

.source-type {
    margin: 0 0 .2rem;
    color: var(--source-color);
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1px;
    background: var(--line);
}

.competency-area {
    min-width: 0;
    padding: 1rem;
    background: #f8faf9;
}

.competency-area > header {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: center;
    min-height: 2.25rem;
    margin-bottom: .7rem;
}

.competency-area h4 {
    margin: 0;
    font-size: .93rem;
}

.competency-area > header span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    background: var(--source-color);
    color: white;
    font-size: .75rem;
    font-weight: 900;
}

.competency-stack {
    display: grid;
    gap: .65rem;
}

.competency-node {
    padding: .9rem;
    border: 1px solid #dce2df;
    border-radius: 6px;
    background: white;
}

.competency-node-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .4rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 750;
}

.competency-node-meta .competency-code {
    color: var(--source-color);
}

.competency-node h5 {
    margin: .35rem 0 0;
    font-size: .94rem;
    line-height: 1.3;
}

.requirement-badge {
    display: inline-flex;
    margin-top: .5rem;
    padding: .18rem .4rem;
    border-radius: 3px;
    background: color-mix(in srgb, var(--source-color) 12%, white);
    color: var(--source-color);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.competency-node > p.competency-component {
    display: block;
    color: #46565d;
    font-weight: 700;
    -webkit-line-clamp: unset;
}

.competency-node > p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .4rem;
    color: var(--muted);
    font-size: .8rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.alignment-list {
    display: grid;
    gap: .35rem;
    margin-top: .7rem;
}

.alignment-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .4rem;
    align-items: center;
    padding: .4rem .5rem;
    border-left: 3px solid var(--yellow);
    background: #fff8dd;
    color: #46565d;
    font-size: .7rem;
    text-decoration: none;
}

.alignment-item.status-approved {
    border-left-color: var(--green);
    background: var(--green-soft);
}

.alignment-item span,
.alignment-item small {
    color: var(--muted);
}

.alignment-empty {
    padding: .45rem .5rem;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-size: .7rem;
    text-decoration: none;
}

.alignment-item:hover,
.alignment-empty:hover {
    border-color: var(--blue);
}

.alignment-workbench-shell {
    width: min(1480px, calc(100vw - 2rem));
    margin-left: 50%;
    transform: translateX(-50%);
}

.workbench-hero {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    padding: 1.25rem 0 1.5rem;
}

.workbench-hero .lead {
    max-width: 58rem;
}

.workbench-hero .button {
    flex: 0 0 auto;
}

.workbench-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1.25rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: white;
    color: var(--muted);
    font-size: .82rem;
}

.workbench-summary span {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
}

.workbench-summary strong {
    color: var(--ink);
}

.mapping-dot {
    width: .65rem;
    height: .65rem;
    border: 2px solid #aeb7b3;
    border-radius: 50%;
    background: white;
}

.mapping-dot.approved {
    border-color: var(--green);
    background: var(--green);
}

.mapping-dot.suggested {
    border-color: #bd8a0f;
    background: var(--yellow);
}

.mapping-dot.reviewed {
    border-color: var(--blue);
    background: var(--blue);
}

.alignment-workbench {
    display: grid;
    grid-template-columns: minmax(19rem, 1fr) minmax(18rem, .78fr) minmax(19rem, 1fr);
    gap: 1rem;
    align-items: start;
}

.mapping-column,
.mapping-editor {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: white;
    box-shadow: 0 8px 24px rgba(31, 42, 48, .06);
}

.mapping-column {
    overflow: hidden;
}

.mapping-column-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.1rem .8rem;
}

.mapping-column-header h2,
.mapping-editor h2 {
    font-size: 1.25rem;
}

.mapping-column-header > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green-dark);
    font-size: .78rem;
    font-weight: 900;
}

.school-column .mapping-column-header > span {
    background: #e6eef3;
    color: var(--blue);
}

.mapping-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    padding: 0 1rem .55rem;
}

.mapping-filters label {
    display: grid;
    gap: .25rem;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mapping-filters .mapping-search-wide,
.mapping-filters .mapping-filter-wide {
    grid-column: 1 / -1;
}

.mapping-filters input,
.mapping-filters select {
    width: 100%;
    height: 2.55rem;
    padding: 0 .75rem;
    border: 1px solid #c9d2ce;
    border-radius: 6px;
    background: #fbfcfb;
    color: var(--ink);
    font: inherit;
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.mapping-filter-note {
    margin: 0;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.35;
}

.mapping-filter-footer {
    display: flex;
    gap: .6rem;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
    padding: 0 1rem .75rem;
}

.mapping-clear-selection {
    flex: 0 0 auto;
    padding: .2rem 0;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: transparent;
    color: var(--blue);
    font: inherit;
    font-size: .68rem;
    font-weight: 800;
    cursor: pointer;
}

.mapping-clear-selection:disabled {
    border-bottom-color: transparent;
    color: #a2aaa7;
    cursor: default;
}

.mapping-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    height: min(64rem, calc(100vh - 18rem));
    min-height: 32rem;
    padding: .8rem;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    background: #f5f7f6;
    scrollbar-gutter: stable;
}

.mapping-card {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid #d8dedb;
    border-left: 5px solid #aeb7b3;
    border-radius: 7px;
    background: white;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.mapping-card[hidden] {
    display: none;
}

.mapping-card:hover {
    border-color: #9daca5;
    transform: translateY(-1px);
}

.mapping-card.is-selected {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(47, 102, 133, .16);
}

.mapping-card.is-filter-exception {
    background: #fffdf4;
}

.mapping-card.state-approved {
    border-left-color: var(--green);
}

.mapping-card.state-suggested {
    border-left-color: var(--yellow);
}

.mapping-card.state-reviewed {
    border-left-color: var(--blue);
}

.mapping-card.state-rejected {
    border-left-color: #939ca0;
    background: #f6f6f6;
}

.mapping-card-select {
    display: grid;
    gap: .42rem;
    width: 100%;
    padding: .8rem .85rem;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.mapping-card-select:focus-visible {
    outline: 3px solid rgba(47, 102, 133, .3);
    outline-offset: -3px;
}

.mapping-card-topline {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    color: var(--muted);
    font-size: .67rem;
    font-weight: 800;
}

.mapping-card-flags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem .4rem;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
}

.filter-exception-label {
    display: none;
    padding: .12rem .35rem;
    border-radius: 999px;
    background: #fff0bd;
    color: #765b12;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mapping-card.is-filter-exception .filter-exception-label {
    display: inline-flex;
}

.mapping-state {
    display: inline-flex;
    gap: .35rem;
    align-items: center;
}

.mapping-state i {
    width: .55rem;
    height: .55rem;
    border: 2px solid #aeb7b3;
    border-radius: 50%;
}

.state-approved .mapping-state i {
    border-color: var(--green);
    background: var(--green);
}

.state-suggested .mapping-state i {
    border-color: #bd8a0f;
    background: var(--yellow);
}

.state-reviewed .mapping-state i {
    border-color: var(--blue);
    background: var(--blue);
}

.mapping-code {
    color: var(--green-dark);
}

.rvp-link-indicator {
    color: var(--muted);
}

.rvp-card.is-linked .rvp-link-indicator {
    font-weight: 900;
}

.mapping-card-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: .88rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.mapping-card-meta,
.mapping-card-placement {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
}

.mapping-card-placement {
    color: var(--blue);
    font-weight: 700;
}

.mapping-full-text {
    border-top: 1px dashed var(--line);
    color: var(--muted);
    font-size: .73rem;
}

.mapping-full-text summary {
    padding: .45rem .85rem;
    cursor: pointer;
    font-weight: 750;
}

.mapping-full-text p,
.mapping-full-text small {
    display: block;
    margin: 0;
    padding: 0 .85rem .55rem;
}

.mapping-editor {
    position: sticky;
    top: 5.5rem;
    padding: 1rem;
}

.mapping-editor > header {
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.selected-competency {
    display: grid;
    gap: .2rem;
    margin-top: .8rem;
    padding: .75rem;
    border-radius: 7px;
    background: #f4f7f6;
}

.selected-competency > span {
    color: var(--blue);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.selected-competency strong {
    font-size: .83rem;
    line-height: 1.35;
}

.selected-competency small {
    color: var(--muted);
    font-size: .68rem;
}

.rvp-selection > span {
    color: var(--green);
}

.mapping-connector {
    display: grid;
    place-items: center;
    height: 1.35rem;
    color: var(--muted);
    font-weight: 900;
}

.pair-state {
    margin: .8rem 0;
    padding: .55rem .7rem;
    border-left: 4px solid #aeb7b3;
    background: #f4f5f5;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 800;
}

.pair-state.state-suggested {
    border-left-color: var(--yellow);
    background: #fff8dd;
}

.pair-state.state-reviewed {
    border-left-color: var(--blue);
    background: #e6eef3;
}

.pair-state.state-approved {
    border-left-color: var(--green);
    background: var(--green-soft);
    color: var(--green-dark);
}

.pair-state.state-rejected {
    border-left-color: #858f94;
    text-decoration: line-through;
}

.mapping-form {
    display: grid;
    gap: .7rem;
}

.mapping-form label {
    display: grid;
    gap: .25rem;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
}

.mapping-form select,
.mapping-form textarea {
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid #c9d2ce;
    border-radius: 6px;
    background: white;
    color: var(--ink);
    font: inherit;
    font-size: .8rem;
    resize: vertical;
}

.mapping-form :disabled {
    opacity: .55;
    cursor: not-allowed;
}

.mapping-help {
    margin: 0;
    color: var(--muted);
    font-size: .7rem;
}

.mapping-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
}

.mapping-form-actions .button {
    min-height: 2.45rem;
    padding: .5rem .65rem;
    font-size: .76rem;
}

.mapping-form-actions .mapping-reject {
    grid-column: 1 / -1;
    border: 1px solid #d4b7b2;
    background: var(--coral-soft);
    color: #8b3e36;
}

.current-links {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.current-links h3 {
    margin-bottom: .5rem;
    font-size: .78rem;
}

.current-links [data-current-links] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.current-links p {
    margin: 0;
    color: var(--muted);
    font-size: .72rem;
}

.current-link {
    padding: .35rem .5rem;
    border: 1px solid var(--line);
    border-left: 3px solid #aeb7b3;
    border-radius: 4px;
    background: white;
    color: var(--ink);
    font-size: .68rem;
    font-weight: 750;
    cursor: pointer;
}

.current-link.state-suggested {
    border-left-color: var(--yellow);
}

.current-link.state-reviewed {
    border-left-color: var(--blue);
}

.current-link.state-approved {
    border-left-color: var(--green);
}

.mapping-list-empty {
    padding: 2rem 1rem;
    color: var(--muted);
    text-align: center;
}

.coverage-state {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin-top: .7rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--line);
    color: #7b858a;
    font-size: .74rem;
    font-weight: 750;
}

.coverage-state i {
    width: .55rem;
    height: .55rem;
    border: 2px solid #9da6aa;
    border-radius: 50%;
}

.coverage-state.connected {
    color: var(--green-dark);
}

.coverage-state.connected i {
    border-color: var(--green);
    background: var(--green);
    box-shadow: 0 0 0 3px var(--green-soft);
}

.curriculum-empty {
    display: grid;
    justify-items: center;
    margin-top: 1rem;
    padding: 3.5rem 1rem;
    border: 1px dashed #bfcac5;
    border-radius: 8px;
    background: white;
    text-align: center;
}

.curriculum-empty > span {
    color: var(--yellow);
    font-size: 2.25rem;
}

.curriculum-empty p {
    max-width: 35rem;
    color: var(--muted);
}

.curriculum-empty .button {
    margin-top: 1.25rem;
}

.print-view {
    background: #e8ebea;
}

.print-toolbar {
    display: flex;
    justify-content: space-between;
    width: min(100% - 2rem, 210mm);
    margin: 1.25rem auto;
}

.print-sheet {
    width: min(100% - 2rem, 210mm);
    min-height: 297mm;
    margin: 0 auto 2rem;
    padding: 14mm;
    background: white;
    box-shadow: var(--shadow);
}

.print-header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 62mm;
    gap: 8mm;
    align-items: center;
    padding-bottom: 6mm;
    border-bottom: 3px solid var(--green);
}

.print-header h1 {
    font-size: 2.25rem;
}

.print-header img {
    width: 62mm;
    height: 42mm;
    object-fit: cover;
    border-radius: 6px;
}

.print-meta {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 6mm;
    padding: 5mm 0;
    font-weight: 700;
}

.print-meta i {
    display: inline-block;
    width: 35mm;
    border-bottom: 1px solid var(--ink);
}

.print-sheet section {
    break-inside: avoid;
    margin-top: 6mm;
}

.print-sheet h2 {
    margin-bottom: 2mm;
    color: var(--green-dark);
    font-size: 1.15rem;
}

.print-sheet p {
    margin-top: 1mm;
}

.print-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8mm;
}

.print-checklist {
    display: grid;
    gap: 2.5mm;
    margin: 3mm 0 0;
    padding: 0;
    list-style: none;
}

.print-checklist li {
    display: grid;
    grid-template-columns: 5mm minmax(0, 1fr);
    gap: 3mm;
    align-items: start;
}

.print-checklist li span {
    width: 5mm;
    height: 5mm;
    border: 1.5px solid var(--ink);
}

.notes-area div {
    height: 8mm;
    border-bottom: 1px solid #9ba6a1;
}

.print-parent-note {
    margin-top: 8mm;
    padding: 4mm;
    border-left: 3px solid var(--coral);
    background: #f7f7f7;
    font-size: .84rem;
}

@media (max-width: 1100px) {
    .alignment-workbench {
        grid-template-columns: 1fr 1fr;
    }

    .mapping-editor {
        position: static;
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .mapping-list {
        height: 34rem;
        min-height: 24rem;
    }
}

@media (max-width: 760px) {
    h1 {
        font-size: 2.2rem;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: .65rem 1rem;
    }

    .topbar nav {
        width: 100%;
        overflow-x: auto;
    }

    .page {
        padding-top: 1.25rem;
    }

    .challenge-hero,
    .challenge-hero > img {
        height: 26rem;
        min-height: 26rem;
    }

    .challenge-title-band {
        padding: 1.25rem;
    }

    .challenge-facts,
    .challenge-layout {
        grid-template-columns: 1fr;
    }

    .challenge-facts > span {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .challenge-aside {
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .challenge-main {
        padding: .25rem 1.25rem;
    }

    .story-section::before {
        left: -1.25rem;
    }

    .curriculum-hero,
    .curriculum-toolbar,
    .workbench-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .alignment-workbench-shell {
        width: 100%;
        margin-left: 0;
        transform: none;
    }

    .alignment-workbench {
        grid-template-columns: 1fr;
    }

    .mapping-editor {
        grid-column: auto;
    }

    .mapping-list {
        height: 30rem;
    }

    .mapping-filters {
        grid-template-columns: 1fr;
    }

    .mapping-filters .mapping-search-wide,
    .mapping-filters .mapping-filter-wide {
        grid-column: auto;
    }

    .layer-flow {
        grid-template-columns: 1fr;
    }

    .layer-arrow {
        justify-self: center;
        transform: rotate(90deg);
    }

    .curriculum-filters,
    .curriculum-filters label,
    .curriculum-filters select {
        width: 100%;
    }

    .map-summary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .map-summary span {
        padding: .65rem;
        border-right: 0;
        text-align: center;
    }

    .map-summary strong {
        display: block;
    }

    .challenge-actions {
        justify-content: stretch;
        padding: 1rem 1.25rem;
    }

    .challenge-actions .button {
        width: 100%;
    }

    .print-header,
    .print-columns,
    .print-meta {
        grid-template-columns: 1fr;
    }

    .print-header img {
        width: 100%;
    }
}

@page {
    size: A4;
    margin: 10mm;
}

@media print {
    body.print-view {
        background: white;
        color: #000;
        font-size: 10.5pt;
    }

    .print-toolbar {
        display: none;
    }

    .print-sheet {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .print-header h1 {
        font-size: 24pt;
    }

    .print-parent-note {
        background: transparent;
    }
}