/* Academy (LMS) learner shell + EN/TR language toggle — Course Session 4.
 *
 * Colours come from static/css/theme.css (loaded on every page via
 * includes/head_meta.html) rather than fresh hexes, so the course pages stay
 * on the brand palette instead of forking a second green.
 */

/* ---------------------------------------------------------------- toggle */

.lang-toggle-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .35rem;
}

.lang-toggle {
    display: inline-flex;
    border: 1px solid var(--ink-muted);
    border-radius: 6px;
    /* Clips the children's corners to the group's radius — which is also why
       the focus ring below has to be INSET; an outline drawn outside the
       button box would be clipped away and keyboard users would see nothing. */
    overflow: hidden;
}

.lang-toggle__btn {
    background: #fff;
    border: 0;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.4;
    padding: .45rem .85rem;
}

.lang-toggle__btn + .lang-toggle__btn {
    border-left: 1px solid var(--ink-muted);
}

.lang-toggle__btn:hover:not(.is-active) {
    background: var(--line-soft);
}

.lang-toggle__btn.is-active {
    background: var(--eu-green-deepest);
    color: #fff;
    cursor: default;
}

.lang-toggle__btn[disabled] {
    cursor: progress;
    opacity: .6;
}

.lang-toggle__btn:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: -2px;
}

.lang-toggle__status {
    color: #b45309;
    font-size: .8rem;
    margin: 0;
    max-width: 22rem;
    text-align: right;
}

.lang-toggle__status:empty {
    display: none;
}

/* ----------------------------------------------------------------- shell */

.academy-shell {
    margin: 0 auto;
    max-width: 1080px;
    padding: 1.5rem 1rem 3rem;
}

.academy-topbar {
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
}

.academy-topbar__text {
    min-width: 0;
}

.academy-breadcrumb {
    color: var(--ink-muted);
    font-size: .85rem;
    margin: 0 0 .35rem;
}

/* --eu-green-deepest, not -dark: 3.68:1 at .85rem fails AA (flagged since
   S6, fixed in S10 — theme.css:22's "AA-passing" note is large-text only). */
.academy-breadcrumb a {
    color: var(--eu-green-deepest);
}

.academy-title {
    color: var(--ink);
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0;
}

.academy-subtitle {
    color: var(--ink-soft);
    margin: .4rem 0 0;
}

/* base.html's .main-container already pads the page; don't compound it on the
   narrow viewports where the column has least room to give. */
@media (max-width: 640px) {
    .academy-shell {
        padding: 1rem .25rem 2.5rem;
    }

    .academy-topbar {
        flex-direction: column;
    }

    .academy-title {
        font-size: 1.4rem;
    }

    .lang-toggle-wrap {
        align-items: flex-start;
    }

    .lang-toggle__status {
        text-align: left;
    }
}

/* ================================================================== S6 ====
   Learner player: catalog cards, course landing, module player.
   Mobile-first — single column by default, two columns from 900px up.
   ========================================================================= */

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* base.html loads NO Bootstrap CSS, so .btn-primary resolves to admin.css's
   white-on-#4CAF50 (2.78:1 — fails AA) on the Academy's most important
   controls. Re-anchor buttons to the brand token that passes (white on
   --eu-green-deepest = 7.95:1). S6 review, CRITICAL. */
.academy-shell .btn-primary {
    background: var(--eu-green-deepest);
    border-color: var(--eu-green-deepest);
    color: #fff;
}

.academy-shell .btn-primary:hover:not([disabled]),
.academy-shell .btn-primary:focus-visible {
    background: #234c34;
    border-color: #234c34;
    color: #fff;
}

/* The background shift alone is 1.22:1 — invisible as a focus indicator
   (S10 frontend review H2; latent since S6). A real ring, offset so it
   reads against the button fill on any backdrop. */
.academy-shell .btn-primary:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.academy-shell .btn-primary[disabled] {
    cursor: progress;
    opacity: .65;
}

/* The fixed top nav is ~80px tall (base.html pads .main-container by it);
   sticky panels must clear it or they slide underneath on scroll. */
.landing-aside,
.player-side {
    --academy-sticky-top: calc(80px + 1rem);
}

/* ------------------------------------------------------- progress bar -- */

.course-progress {
    background: var(--line-soft);
    border-radius: 999px;
    height: .55rem;
    overflow: hidden;
}

.course-progress__fill {
    background: linear-gradient(90deg, var(--eu-green-mid), var(--eu-green-dark));
    border-radius: 999px;
    height: 100%;
    min-width: 0;
    transition: width .4s ease;
}

/* ------------------------------------------------------------ catalog -- */

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

.course-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--eu-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.course-card__media {
    aspect-ratio: 16 / 8;
    background: linear-gradient(135deg, var(--eu-green-deepest), var(--eu-green-dark));
    display: block;
    overflow: hidden;
}

.course-card__media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.course-card__media-fallback {
    align-items: center;
    display: flex;
    font-size: 3rem;
    height: 100%;
    justify-content: center;
}

.course-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.25rem 1.25rem;
}

.course-card__track {
    color: var(--eu-green-deepest);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin: 0;
    text-transform: uppercase;
}

.course-card__title {
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0;
}

.course-card__title a {
    color: var(--ink);
    text-decoration: none;
}

.course-card__title a:hover,
.course-card__title a:focus-visible {
    color: var(--eu-green-dark);
    text-decoration: underline;
}

.course-card__subtitle {
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0;
}

.course-card__meta {
    color: var(--ink-muted);
    font-size: .8rem;
    margin: 0;
}

.course-card__price {
    color: var(--ink);
    font-size: 1.15rem;
    font-weight: 700;
    margin: auto 0 0;
    padding-top: .5rem;
}

.course-card__bonus {
    color: var(--eu-green-deepest);
    font-size: .8rem;
    font-weight: 600;
    margin-left: .5rem;
}

.course-card__cta {
    align-self: flex-start;
    margin-top: .35rem;
}

.course-card .course-progress {
    margin-top: auto;
}

.academy-empty {
    color: var(--ink-soft);
    padding: 3rem 1rem;
    text-align: center;
}

.academy-empty__icon {
    font-size: 2.5rem;
    margin: 0 0 .5rem;
}

/* --------------------------------------------------- payment banner ----- */

.academy-banner {
    border-left: 4px solid var(--ink-muted);
    border-radius: 8px;
    font-size: .95rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    padding: .9rem 2.6rem .9rem 1.1rem;
    position: relative;
}

.academy-banner.is-success {
    background: #dcfce7;
    border-left-color: #10b981;
    color: #166534;
}

.academy-banner.is-pending {
    background: #fef3c7;
    border-left-color: #f59e0b;
    color: #92400e;
}

.academy-banner.is-cancelled {
    background: #fee2e2;
    border-left-color: #dc2626;
    color: #991b1b;
}

.academy-banner__close {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
    opacity: .6;
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
}

.academy-banner__close:hover,
.academy-banner__close:focus-visible {
    opacity: 1;
}

/* ------------------------------------------------------------ landing -- */

.landing-layout {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .landing-layout {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) 20rem;
    }

    .landing-aside {
        position: sticky;
        top: var(--academy-sticky-top);
    }
}

.landing-hero {
    border-radius: 12px;
    display: block;
    margin-bottom: 1.5rem;
    max-width: 100%;
}

.landing-description {
    color: var(--ink-soft);
    line-height: 1.7;
}

.landing-description h2,
.landing-description h3 {
    color: var(--ink);
    line-height: 1.3;
    margin: 1.5em 0 .5em;
}

.landing-modules h2 {
    color: var(--ink);
    font-size: 1.3rem;
    margin: 2rem 0 1rem;
}

.landing-modlist {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.landing-modlist__item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .9rem 1.1rem;
}

.landing-modlist__item.is-done {
    border-left: 4px solid var(--eu-green-mid);
}

.landing-modlist__item.is-locked {
    background: var(--line-soft);
}

.landing-modlist__head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
}

.landing-modlist__state {
    color: var(--eu-green-deepest);
    font-weight: 700;
    min-width: 1.4rem;
}

.landing-modlist__title {
    font-size: 1rem;
    margin: 0;
}

.landing-modlist__title a {
    color: var(--ink);
}

.landing-modlist__duration {
    color: var(--ink-muted);
    font-size: .8rem;
    margin-left: auto;
    white-space: nowrap;
}

.landing-modlist__summary {
    color: var(--ink-soft);
    font-size: .88rem;
    line-height: 1.55;
    margin: .45rem 0 0 2rem;
}

.landing-modlist__unlock {
    color: var(--ink-muted);
    font-size: .8rem;
    margin: .3rem 0 0 2rem;
}

.landing-cta-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--eu-shadow);
    padding: 1.4rem 1.4rem 1.5rem;
}

.landing-cta-card__badge {
    color: var(--eu-green-deepest);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0 0 .75rem;
    text-transform: uppercase;
}

.landing-cta-card__price {
    color: var(--ink);
    font-size: 1.9rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.landing-cta-card__bonus {
    color: var(--eu-green-deepest);
    font-size: .88rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}

.landing-cta-card__list {
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.7;
    margin: 0 0 1.1rem;
    padding-left: 1.2rem;
}

.landing-cta-card__btn {
    display: block;
    text-align: center;
    width: 100%;
}

.landing-cta-card__meta {
    color: var(--ink-muted);
    font-size: .85rem;
    margin: .6rem 0 .9rem;
}

.landing-cta-card__status {
    color: #b45309;
    font-size: .85rem;
    margin: .6rem 0 0;
}

.landing-cta-card__status:empty {
    display: none;
}

/* ------------------------------------------------------------- player -- */

.player-progress {
    align-items: center;
    display: flex;
    gap: .9rem;
    margin-bottom: 1.5rem;
}

.player-progress .course-progress {
    flex: 1;
}

.player-progress__label {
    color: var(--ink-muted);
    font-size: .85rem;
    margin: 0;
    white-space: nowrap;
}

.player-layout {
    display: grid;
    gap: 1.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .player-layout {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) 19rem;
    }

    .player-side {
        position: sticky;
        top: var(--academy-sticky-top);
    }
}

.player-main {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

.player-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.4rem 1.5rem;
}

.player-panel__heading {
    color: var(--ink);
    font-size: 1.15rem;
    margin: 0 0 .75rem;
}

/* video slot */

.player-video {
    overflow: hidden;
    padding: 0;
}

.player-video__mount,
.player-video__placeholder {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.player-video__placeholder {
    align-items: center;
    background: linear-gradient(135deg, var(--eu-green-deepest), #1d3d2a);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.player-video__icon {
    font-size: 2.2rem;
}

.player-video__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.player-video__note {
    color: rgba(255, 255, 255, .85);
    font-size: .88rem;
    line-height: 1.5;
    margin: 0;
    max-width: 34rem;
}

.player-video__frame {
    aspect-ratio: 16 / 9;
    border: 0;
    display: block;
    width: 100%;
}

/* lesson body (rendered, sanitized markdown) */

.player-body {
    color: var(--ink-soft);
    font-size: 1.02rem;
    line-height: 1.75;
}

.player-body h2 {
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1.3;
    margin: 1.6em 0 .6em;
    padding-bottom: .35rem;
}

.player-body h2:first-child {
    margin-top: 0;
}

.player-body h3,
.player-body h4 {
    color: var(--ink);
    margin: 1.4em 0 .5em;
}

.player-body ul,
.player-body ol {
    margin: .8em 0;
    padding-left: 1.4rem;
}

.player-body li {
    margin: .35em 0;
}

.player-body blockquote {
    border-left: 4px solid var(--eu-green-mid);
    color: var(--ink-soft);
    font-style: italic;
    margin: 1.2em 0;
    padding: .3rem 0 .3rem 1.1rem;
}

.player-body a {
    color: var(--eu-green-deepest);
}

/* reflection + do + quiz */

.player-reflection {
    background: var(--line-soft);
    border-color: transparent;
}

.player-reflection__prompt {
    color: var(--ink-soft);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.65;
    margin: 0;
}

.player-do {
    border-left: 4px solid var(--eu-green-mid);
}

.player-do__head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
}

.player-do__kind {
    background: var(--line-soft);
    border-radius: 999px;
    color: var(--eu-green-deepest);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: .25rem .7rem;
    text-transform: capitalize;
}

.player-do__title {
    color: var(--ink);
    font-size: 1.02rem;
    margin: .4rem 0;
}

.player-do__prompt {
    color: var(--ink-soft);
    line-height: 1.65;
}

.player-do__steps {
    color: var(--ink-soft);
    line-height: 1.65;
    margin: .8em 0;
    padding-left: 1.4rem;
}

.player-do__steps li {
    margin: .4em 0;
}

.player-do__note {
    background: var(--line-soft);
    border-radius: 8px;
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.6;
    margin: .9rem 0 0;
    padding: .8rem 1rem;
}

.player-quiz__note {
    color: var(--ink-soft);
    margin: 0;
}

/* actions + prev/next */

.player-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
}

.player-actions__status {
    color: var(--eu-green-deepest);
    font-size: .9rem;
    margin: 0;
}

.player-actions__status:empty {
    display: none;
}

.player-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.player-nav__link {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: .15rem;
    max-width: 100%;
    min-width: 0;
    padding: .75rem 1rem;
    text-decoration: none;
}

.player-nav__link--next {
    align-items: flex-end;
    text-align: right;
}

.player-nav__link:hover:not(.is-locked),
.player-nav__link:focus-visible {
    border-color: var(--eu-green-dark);
    color: var(--eu-green-deepest);
}

.player-nav__link.is-locked {
    color: var(--ink-muted);
    cursor: not-allowed;
}

.player-nav__dir {
    color: var(--ink-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.player-nav__name {
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* sidebar course map */

.player-side {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.2rem 1.1rem;
}

.player-side__title {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.35;
    margin: 0 0 .9rem;
}

.player-modlist {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.player-modlist__link {
    align-items: baseline;
    border-radius: 8px;
    color: var(--ink-soft);
    display: flex;
    gap: .6rem;
    padding: .5rem .6rem;
    text-decoration: none;
}

a.player-modlist__link:hover,
a.player-modlist__link:focus-visible {
    background: var(--line-soft);
    color: var(--ink);
}

.player-modlist__item.is-current > .player-modlist__link {
    background: var(--eu-green-deepest);
    color: #fff;
}

.player-modlist__item.is-current .player-modlist__state {
    color: #fff;
}

.player-modlist__state {
    color: var(--eu-green-deepest);
    flex-shrink: 0;
    font-size: .85rem;
    font-weight: 700;
    min-width: 1.15rem;
    text-align: center;
}

.player-modlist__label {
    font-size: .9rem;
    line-height: 1.4;
    min-width: 0;
}

.player-modlist__unlock {
    color: var(--ink-muted);
    font-size: .75rem;
    margin-left: auto;
    white-space: nowrap;
}

.player-modlist__link.is-locked {
    color: var(--ink-muted);
}

/* Keyboard focus on the mounted video iframe must stay visible — the video
   panel is overflow:hidden for its rounded corners, which would clip a UA
   outline drawn on the iframe itself (the S4 lang-toggle lesson, again). */
.player-video:focus-within {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

/* Locked landing rows sit on --line-soft, where --ink-muted is only 4.33:1;
   their small text needs --ink-soft to hold AA. */
.landing-modlist__item.is-locked .landing-modlist__duration,
.landing-modlist__item.is-locked .landing-modlist__unlock {
    color: var(--ink-soft);
}

/* ================================================================== S7 ====
   Quizzes, the certificate page, and the public credential verifier.
   Same rules as the S6 section: brand tokens only (no fresh hexes), AA
   contrast on every text colour, focus rings that survive the panels'
   overflow, and mobile-first single-column layouts.
   ========================================================================= */

/* base.html loads admin.css + theme.css and NOTHING else — admin.css styles
   .btn-primary (badly, see the S6 override above) and does not style
   .btn-secondary at ALL, so an unqualified secondary button renders as a raw
   UA button. Define it here rather than importing another stylesheet. White
   on --eu-green-deepest is 7.95:1; this outline pairs --eu-green-deepest text
   on white (same ratio) with a visible border. */
.academy-shell .btn-secondary {
    background: #fff;
    border: 1px solid var(--eu-green-deepest);
    border-radius: 4px;
    color: var(--eu-green-deepest);
    cursor: pointer;
    display: inline-block;
    font-size: .9em;
    font-weight: 600;
    padding: 8px 15px;
    text-decoration: none;
    transition: background-color .3s, color .3s;
}

.academy-shell .btn-secondary:hover:not([disabled]),
.academy-shell .btn-secondary:focus-visible {
    background: var(--line-soft);
    color: var(--eu-green-deepest);
}

.academy-shell .btn-secondary[disabled] {
    cursor: progress;
    opacity: .65;
}

/* ---------------------------------------------------------------- quiz -- */

.player-quiz__best {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: .35rem 0 .9rem;
}

.player-quiz__attempts {
    color: var(--ink-soft);
}

.player-quiz__status {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: .6rem 0 0;
    min-height: 1.2em;
}

.quiz-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}

/* A fieldset per question: the legend IS the prompt, so a screen reader
   announces it with every option. */
.quiz-question {
    border: 1px solid var(--line);
    border-radius: 10px;
    margin: 0;
    padding: 1rem 1.1rem 1.1rem;
}

.quiz-question__prompt {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    padding: 0 .25rem;
}

.quiz-question__number {
    color: var(--eu-green-deepest);
}

.quiz-option {
    align-items: flex-start;
    border-radius: 8px;
    display: flex;
    gap: .6rem;
    margin-top: .5rem;
    padding: .45rem .55rem;
}

/* style.css — loaded on every page — has a bare `form input, form select
   { width: 100%; padding: 10px 12px; border: 1px solid #ddd }`. It was
   written for text fields, and the quiz is the Academy's first <form>: it
   turned every radio into a 620px bordered box and pushed the option label
   clean out of the panel (caught in local browser QA, not by any test).
   Reset it here rather than touching a stylesheet the whole app shares. */
.academy-shell .quiz-option__input {
    accent-color: var(--eu-green-deepest);
    border: 0;
    block-size: 1.05rem;
    flex: 0 0 auto;
    inline-size: 1.05rem;
    margin: .2rem 0 0;
    padding: 0;
}

.quiz-option__label {
    color: var(--ink-soft);
    cursor: pointer;
    flex: 1 1 auto;
    font-size: .95rem;
    line-height: 1.45;
    /* style.css's `form label { margin-top: 15px; margin-bottom: 5px }` is
       for stacked text fields; in a radio row it drops the label a line
       below its own radio. */
    margin: 0;
    min-width: 0;
}

.quiz-option__input:disabled + .quiz-option__label {
    cursor: default;
}

/* The same global stylesheet also does `form input:focus { outline: none }`
   (replacing it with a 25%-alpha shadow that all but disappears on a radio)
   and styles `form button` as an uppercase pill. Inside the Academy that
   costs a keyboard user their focus ring and makes the quiz buttons the only
   ones on the page that don't match. Re-assert both. */
.academy-shell .quiz-option__input:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.academy-shell form button {
    border-radius: 4px;
    font-size: .9em;
    letter-spacing: normal;
    padding: 8px 15px;
    text-transform: none;
}

/* The learner's pick, and (only when the server revealed it) the key. */
.quiz-option.is-chosen {
    background: var(--line-soft);
}

.quiz-option.is-answer {
    background: rgba(44, 90, 62, .1);
    box-shadow: inset 0 0 0 1px var(--eu-green-deepest);
}

.quiz-question.is-correct {
    border-color: var(--eu-green-deepest);
}

.quiz-question.is-wrong {
    border-color: var(--eu-warning);
}

.quiz-question__result {
    font-size: .875rem;
    font-weight: 600;
    margin: .7rem 0 0;
}

.quiz-question.is-correct .quiz-question__result {
    color: var(--eu-green-deepest);
}

/* --eu-warning (#ff9800) is 2.1:1 on white — fine as a border, nowhere near
   AA as text. The "not quite" line uses body ink instead. */
.quiz-question.is-wrong .quiz-question__result {
    color: var(--ink-soft);
}

.quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.quiz-score {
    background: var(--line-soft);
    border-radius: 10px;
    padding: 1rem 1.1rem;
}

.quiz-score__value {
    color: var(--eu-green-deepest);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.quiz-score__note {
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.5;
    margin: .35rem 0 0;
}

.quiz-score__best {
    color: var(--ink-soft);
    font-size: .85rem;
    margin: .35rem 0 0;
}

.quiz-complete,
.player-complete {
    background: rgba(44, 90, 62, .08);
    border: 1px solid var(--eu-green-deepest);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.25rem;
    padding: 1.1rem 1.2rem;
}

.quiz-complete .btn,
.player-complete .btn {
    align-self: flex-start;
}

.quiz-complete__title,
.player-complete__title {
    color: var(--eu-green-deepest);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

/* --------------------------------------------------------- certificate -- */

.cert-wrap,
.cert-pending,
.verify-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 auto;
    max-width: 46rem;
}

.cert-card {
    background: #fff;
    border: 2px solid var(--eu-green-deepest);
    border-radius: 14px;
    box-shadow: var(--eu-shadow);
    padding: 2rem 1.5rem;
    text-align: center;
}

.cert-card.is-revoked {
    border-color: var(--line);
    opacity: .75;
}

.cert-card__issuer {
    color: var(--eu-green-deepest);
    font-size: .85rem;
    letter-spacing: .08em;
    margin: 0 0 .75rem;
    text-transform: uppercase;
}

.cert-card__title {
    color: var(--eu-green-deepest);
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 1.25rem;
}

.cert-card__lead {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: 0;
}

.cert-card__holder {
    color: var(--ink);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    margin: .35rem 0 .75rem;
}

.cert-card__course {
    color: var(--eu-green-deepest);
    font-size: 1.15rem;
    font-weight: 600;
    margin: .35rem 0 1.1rem;
}

.cert-card__statement {
    color: var(--ink-soft);
    font-size: .9rem;
    font-style: italic;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 34rem;
}

.cert-card__meta {
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin: 1.5rem 0 0;
    padding-top: 1.1rem;
}

.cert-card__meta-row {
    text-align: center;
}

.cert-card__meta dt {
    color: var(--ink-muted);
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cert-card__meta dd {
    color: var(--ink);
    font-size: .95rem;
    font-weight: 600;
    margin: .2rem 0 0;
}

.cert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
}

.cert-revoked {
    background: rgba(231, 76, 60, .08);
    border: 1px solid var(--eu-danger);
    border-radius: 10px;
    color: var(--ink-soft);
    padding: 1rem 1.1rem;
}

.cert-revoked__title {
    color: #a02c1e;          /* --eu-danger darkened to 5.3:1 for text */
    font-weight: 700;
    margin: 0 0 .35rem;
}

.cert-verify {
    background: var(--line-soft);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
}

.cert-verify__heading {
    color: var(--eu-green-deepest);
    font-size: 1.05rem;
    margin: 0 0 .4rem;
}

.cert-verify__note {
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.55;
    margin: 0 0 .8rem;
}

.cert-verify__row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.cert-verify__url {
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-soft);
    flex: 1 1 18rem;
    font-size: .85rem;
    min-width: 0;
    padding: .5rem .6rem;
}

.cert-verify__status {
    color: var(--ink-soft);
    font-size: .85rem;
    margin: .5rem 0 0;
    min-height: 1.2em;
}

.cert-pending__lead {
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

.cert-pending__list {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cert-pending__list li {
    align-items: baseline;
    color: var(--ink-soft);
    display: flex;
    gap: .6rem;
}

.cert-pending__list li.is-done {
    color: var(--eu-green-deepest);
    font-weight: 600;
}

.cert-pending__state {
    color: var(--eu-green-deepest);
    font-weight: 700;
}

.cert-pending .btn {
    align-self: flex-start;
}

/* ------------------------------------------------------------- verify -- */

.verify-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--eu-shadow);
    padding: 1.75rem 1.5rem;
}

.verify-card--valid {
    border-color: var(--eu-green-deepest);
}

.verify-card--revoked {
    border-color: var(--eu-danger);
}

.verify-badge {
    border-radius: 999px;
    display: inline-block;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 1.1rem;
    padding: .35rem .9rem;
    text-transform: uppercase;
}

.verify-badge--valid {
    background: var(--eu-green-deepest);
    color: #fff;
}

.verify-badge--revoked {
    background: #a02c1e;
    color: #fff;
}

.verify-badge--unknown {
    background: var(--line);
    color: var(--ink-soft);
}

.verify-card__note {
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.verify-facts {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 0;
}

.verify-facts__row {
    border-bottom: 1px solid var(--line-soft);
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding-bottom: .8rem;
}

.verify-facts dt {
    color: var(--ink-muted);
    flex: 0 0 10rem;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.verify-facts dd {
    color: var(--ink);
    font-size: 1rem;
    margin: 0;
}

.verify-facts__name {
    font-size: 1.2rem;
    font-weight: 700;
}

.verify-card__statement {
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .85rem;
    font-style: italic;
    line-height: 1.6;
    margin: 1.2rem 0 0;
    padding-top: 1rem;
}

.verify-foot {
    color: var(--ink-soft);
    font-size: .9rem;
    text-align: center;
}

@media (min-width: 600px) {
    .cert-card {
        padding: 2.5rem;
    }

    .cert-card__title {
        font-size: 1.9rem;
    }

    .cert-card__holder {
        font-size: 2rem;
    }
}

/* ---- S7 review remediation ------------------------------------------- */

/* style.css also has a global `section:hover { transform: translateY(-3px) }`
   with a shadow and no prefers-reduced-motion guard. Harmless on the S6
   read-only panels; on the quiz — a panel the learner works inside for
   minutes — the whole thing lifts and stays lifted under the pointer. */
.academy-shell section:hover {
    box-shadow: none;
    transform: none;
}

/* Unanswered questions on a rejected submit: named, not just counted. */
.quiz-question.is-missing {
    border-color: var(--eu-green-deepest);
    box-shadow: inset 3px 0 0 var(--eu-green-deepest);
}

/* Fieldsets ignore `min-width: 0` unless min-inline-size is set explicitly,
   so one long unbroken token in an admin-authored option could push the form
   past the viewport. */
.quiz-question {
    min-inline-size: 0;
}

.quiz-option__label,
.quiz-score__note,
.verify-facts dd,
.cert-card__holder,
.cert-card__course {
    overflow-wrap: anywhere;
}

/* <button> inherits neither font nor line-height, and nothing outside a
   <form> sets them — the certificate page had a DM Sans link, a DM Sans input
   and a system-font button side by side at three different heights. */
.academy-shell .btn-primary,
.academy-shell .btn-secondary {
    font-family: inherit;
    line-height: 1.4;
}

.academy-shell .btn-secondary:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

/* The score card takes focus when it appears (so the result is announced and
   scrolled to); it is not an interactive control, so the ring is the only
   thing that should say so. */
.quiz-score:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 3px;
}

.cert-actions__status {
    color: var(--ink-soft);
    flex-basis: 100%;
    font-size: .85rem;
    margin: 0;
    text-align: center;
}

/* It is a flex-basis:100% row; empty, it would break the two action buttons
   onto separate lines for a message that isn't there. */
.cert-actions__status:empty,
.cert-verify__status:empty,
.player-quiz__status:empty {
    display: none;
}

/* The "check unavailable" / "not found" card, which was applied but never
   defined. Neutral on purpose: neither valid nor revoked. */
.verify-card--unknown {
    border-color: var(--ink-muted);
}

/* At 360px a 10rem label column leaves ~88px for the value, so every fact
   wraps under a half-empty label. Stack them instead. */
@media (max-width: 480px) {
    .verify-facts dt {
        flex: 1 1 100%;
    }
}

/* ================================================================== S8 ====
   Engagement layer: streak chip, week-1 activation card, badge case, and
   the class discussion. Same rules as the S6/S7 sections: brand tokens
   only, AA contrast on every text colour, visible focus rings, and every
   global style.css form rule that reaches into the Academy gets reset here
   (the S7 lesson: the quiz was the first <form>; the discussion is the
   second).
   ========================================================================= */

/* ---- streak chip (mechanic 2 of 3) ------------------------------------ */

/* Any author-origin `display` beats the UA's non-important [hidden] rule —
   .streak-chip's inline-flex was silently un-hiding the chip for learners
   under 2 days ("0-day streak", exactly the noise the template hides). A
   shell-wide guard so the next flex/grid element doesn't re-grow the same
   footgun (S8 frontend review). */
.academy-shell [hidden] {
    display: none !important;
}

/* .player-progress lays out bar + meta; the meta row holds the label and
   the chip without breaking the bar's flex sizing. */
.player-progress__meta {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.streak-chip {
    align-items: center;
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: .8rem;
    font-weight: 600;
    gap: .3rem;
    margin: 0;
    padding: .2rem .65rem;
    white-space: nowrap;
}

/* ---- week-1 activation card (the 14x lever) ---------------------------- */

.activation-card {
    background: rgba(44, 90, 62, .06);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem 1.1rem;
}

.activation-card__title {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.activation-card__note {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: 0 0 .75rem;
}

.activation-card__steps {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.activation-card__step {
    align-items: baseline;
    color: var(--ink);
    display: flex;
    font-size: .95rem;
    gap: .55rem;
}

.activation-card__step a {
    color: var(--eu-green-deepest);
    font-weight: 600;
    text-decoration: underline;
}

.activation-card__step.is-done {
    color: var(--ink-soft);
}

.activation-card__state {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-soft);
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    height: 1.35rem;
    line-height: 1.35rem;
    text-align: center;
    width: 1.35rem;
}

.activation-card__step.is-done .activation-card__state {
    background: var(--eu-green-deepest);
    border-color: var(--eu-green-deepest);
    color: #fff;
}

.activation-card__celebrate {
    color: var(--eu-green-deepest);
    font-weight: 700;
    margin: .85rem 0 0;
}

/* Landing-card variant: tighter, inherits the CTA card's padding. */
.activation-card--compact {
    margin: 1rem 0 0;
    padding: .85rem 1rem .95rem;
}

.activation-card--compact .activation-card__title {
    font-size: .9rem;
}

.activation-card--compact .activation-card__step {
    font-size: .85rem;
}

/* ---- badge case (mechanic 3 of 3) -------------------------------------- */

.badge-case {
    margin: 1rem 0 0;
}

.badge-case__title {
    color: var(--ink-soft);
    font-size: .85rem;
    font-weight: 600;
    margin: 0 0 .45rem;
}

.badge-case__count {
    color: var(--ink-muted);
    font-weight: 500;
}

.badge-case__list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.badge-chip {
    align-items: center;
    background: #fff;
    border: 1px dashed var(--ink-muted);
    border-radius: 50%;
    color: var(--ink-soft);
    display: inline-flex;
    font-size: .85rem;
    font-weight: 600;
    height: 2.1rem;
    justify-content: center;
    width: 2.1rem;
}

.badge-chip.is-earned {
    background: rgba(44, 90, 62, .1);
    border: 1px solid var(--eu-green-deepest);
    font-size: 1rem;
}

/* ---- class discussion --------------------------------------------------- */

.player-discussion__head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
}

.player-discussion__count {
    color: var(--ink-muted);
    font-size: .85rem;
    white-space: nowrap;
}

/* The specific prompt — visually a gentle callout, not a system warning. */
.player-discussion__prompt {
    border-left: 3px solid var(--eu-green-deepest);
    color: var(--ink-soft);
    font-size: .95rem;
    margin: .75rem 0 1rem;
    padding: .1rem 0 .1rem .8rem;
}

/* style.css has a global `textarea { min-width: 80%; min-height: 150px }`
   plus `textarea:focus { outline: none }` — written for the project forms.
   In a discussion box that's a skyscraper input with no keyboard focus
   ring. Reset both here (the S7 pattern: fix it in the Academy's file,
   never in the stylesheet the whole app shares). */
.academy-shell .discussion-form__input {
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    display: block;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.5;
    margin: 0 0 .6rem;
    min-height: 4.5rem;
    min-width: 0;
    padding: .6rem .75rem;
    resize: vertical;
    width: 100%;
}

.academy-shell .discussion-form__input:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.discussion-form__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.discussion-form__status {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: 0;
}

.discussion-form__status:empty {
    display: none;
}

.discussion-form__replying {
    color: var(--ink-soft);
    font-size: .85rem;
    margin: 0 0 .4rem;
}

.discussion-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
}

.discussion-post {
    border-top: 1px solid var(--line-soft);
    padding: .85rem 0 .6rem;
}

.discussion-post__meta {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .75rem;
}

.discussion-post__author {
    color: var(--ink);
    font-size: .9rem;
    font-weight: 700;
}

.discussion-post__you {
    color: var(--ink-muted);
    font-weight: 500;
}

.discussion-post__time {
    color: var(--ink-muted);
    font-size: .8rem;
}

/* Post bodies are PLAIN TEXT rendered under autoescape — pre-line keeps the
   learner's paragraphs; anywhere-wrap keeps one long token from pushing the
   panel past the viewport (the S7 fieldset lesson). */
.discussion-post__body {
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.55;
    margin: .35rem 0 .4rem;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.discussion-post__actions {
    display: flex;
    gap: .9rem;
}

/* style.css's `form button:hover` lifts every in-form button 2px and adds a
   drop shadow — on the discussion's text-link Cancel (and the Post button)
   that reads as a glitch, not a style (S8 frontend review). */
.academy-shell form button:hover {
    box-shadow: none;
    transform: none;
}

/* Plain <button>s outside a <form>: the UA default (grey bevel) is the only
   styling they'd get — make them the quiet text actions they are. */
.academy-shell .discussion-post__action {
    background: none;
    border: 0;
    color: var(--eu-green-deepest);
    cursor: pointer;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    padding: .15rem 0;
    text-decoration: underline;
}

.academy-shell .discussion-post__action:hover {
    color: var(--ink);
}

.academy-shell .discussion-post__action:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.academy-shell .discussion-post__action[disabled] {
    cursor: progress;
    opacity: .6;
}

/* Delete reads as caution on hover — #b45309 is this file's existing
   amber-brown (lang-toggle status), 4.5:1 on white. */
.academy-shell .discussion-post__action--delete:hover {
    color: #b45309;
}

.discussion-replies {
    border-left: 2px solid var(--line);
    list-style: none;
    margin: .35rem 0 0;
    padding: 0 0 0 1rem;
}

.discussion-replies .discussion-post {
    border-top: 0;
    padding: .6rem 0 .35rem;
}

.discussion-empty {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: 1rem 0 0;
}

@media (max-width: 640px) {
    .player-progress {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
    }

    .player-progress .course-progress {
        align-self: stretch;
    }

    .discussion-replies {
        padding-left: .6rem;
    }
}

/* ================================================================== S9 ====
   Assignment submissions + My Place (Course Session 9).
   Same rules as the S6/S7/S8 sections: brand tokens only, every global
   style.css form rule that reaches into the Academy gets reset here (the
   S7 lesson: the quiz was the first <form>; the assignment form is the
   third, and inherits the same `form input { width:100% }` / `outline:none`
   / uppercase-pill-button problems). */

/* ---- the submission form -------------------------------------------- */

/* The post-submit reload lands on #do-heading — without a scroll margin
   the fixed 80px header hides the heading AND the top of the fresh
   submission card, the one thing the reload exists to show (S9 frontend
   review). */
#do-heading {
    scroll-margin-top: var(--academy-sticky-top, 96px);
}

.assignment-form {
    border-top: 1px solid var(--line-soft);
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.academy-shell .assignment-form__label {
    color: var(--ink);
    display: block;
    font-size: .9rem;
    font-weight: 700;
    margin: .9rem 0 .35rem;
}

.assignment-form__hint {
    color: var(--ink-muted);
    font-weight: 500;
}

/* style.css: `textarea { min-width:80%; min-height:150px }` +
   `textarea:focus { outline:none }` — same reset as the discussion box. */
.academy-shell .assignment-form__input {
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    display: block;
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.5;
    margin: 0;
    min-height: 6.5rem;
    min-width: 0;
    padding: .6rem .75rem;
    resize: vertical;
    width: 100%;
}

.academy-shell .assignment-form__input:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

/* style.css's :focus glow (green box-shadow + --primary-color border)
   also fires on MOUSE focus, which :focus-visible resets don't cover —
   neutralize it under plain :focus without touching the outline rules
   (S9 frontend review). */
.academy-shell .assignment-form__input:focus,
.academy-shell .assignment-form__file:focus,
.academy-shell .myplace-graduate__select:focus {
    border-color: var(--line);
    box-shadow: none;
}

/* style.css's `form input { width:100%; padding:12px }` turns a file input
   into a giant empty box — keep it compact and give keyboard users a ring. */
.academy-shell .assignment-form__file {
    background: none;
    border: 0;
    color: var(--ink-soft);
    display: block;
    font-family: inherit;
    font-size: .9rem;
    margin: 0;
    padding: .15rem 0;
    width: auto;
}

.academy-shell .assignment-form__file:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.assignment-form__previews {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: .5rem 0 0;
}

.assignment-form__preview {
    align-items: center;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    font-size: .75rem;
    gap: .25rem;
    max-width: 7.5rem;
}

.assignment-form__preview img {
    border: 1px solid var(--line);
    border-radius: 6px;
    height: 4.5rem;
    object-fit: cover;
    width: 100%;
}

.assignment-form__preview span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignment-form__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.assignment-form__status {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: 0;
}

.assignment-form__status:empty {
    display: none;
}

/* ---- the submission view -------------------------------------------- */

/* #f7f9f6: the S9 card tint (no --paper-soft token exists — the literal
   is the sanctioned value, not a fallback). */
.player-submission {
    background: #f7f9f6;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    margin-top: 1.25rem;
    padding: 1rem 1.1rem;
}

.player-submission__head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    justify-content: space-between;
}

.player-submission__title {
    color: var(--ink);
    font-size: 1.05rem;
    margin: 0;
}

.player-submission__grade {
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .2rem .7rem;
}

.player-submission__grade--pending {
    background: var(--line-soft);
    color: var(--ink-soft);
}

.player-submission__grade--pass {
    background: var(--eu-green-deepest);
    color: #fff;
}

/* Same amber family as the discussion delete caution — 4.5:1+ on its tint. */
.player-submission__grade--revise {
    background: #fdf3e0;
    color: #8a4a04;
}

/* --ink-soft, not --ink-muted: the muted token is 4.4952:1 on the card's
   #f7f9f6 tint — a hair under AA (it passes on white, where the myplace
   meta keeps it) (S9 frontend review). */
.player-submission__meta {
    color: var(--ink-soft);
    font-size: .85rem;
    margin: .3rem 0 0;
}

.player-submission__photos {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
}

.player-submission__photos img {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: block;
    height: 5.5rem;
    object-fit: cover;
    width: 5.5rem;
}

/* display on the BASE rule, not the focus rule — flipping display at
   focus time reflows the box under the keyboard user (S9 frontend
   review). */
.player-submission__photos a {
    display: block;
}

.player-submission__photos a:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.player-submission__artifact {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: .75rem 0 0;
}

/* Learner-authored plain text: pre-line keeps their paragraphs,
   anywhere-wrap keeps one long token inside the panel (the S7 lesson). */
.player-submission__reflection {
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.55;
    margin: .6rem 0 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.player-submission__myplace {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: .75rem 0 0;
}

/* Text-button (outside a form): same quiet-action shape as the discussion
   post actions. */
.academy-shell .player-do__reopen {
    background: none;
    border: 0;
    color: var(--eu-green-deepest);
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    margin-top: .75rem;
    padding: .15rem 0;
    text-decoration: underline;
}

.academy-shell .player-do__reopen:hover {
    color: var(--ink);
}

.academy-shell .player-do__reopen:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

/* ---- My Place page --------------------------------------------------- */

.myplace {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

/* The cards are <section>s: style.css gives every section a resting
   box-shadow (which the shell's section:hover reset then ANIMATES away —
   a fade flicker) and margin-bottom: 25px (which stacks on the grid gap
   to ~45px). Neutralize both (S9 frontend review). */
.myplace-card {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    box-shadow: none;
    margin-bottom: 0;
    padding: 1.25rem 1.35rem;
}

.myplace-card__heading {
    color: var(--ink);
    font-size: 1.15rem;
    margin: 0 0 .75rem;
}

.myplace-graduated {
    background: #f7f9f6;
}

.myplace-empty {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: 0;
}

.myplace-gallery {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.myplace-gallery__item img {
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.myplace-gallery__item a {
    display: block;
}

.myplace-gallery__item a:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.myplace-work {
    list-style: none;
    margin: 0;
    padding: 0;
}

.myplace-work__item {
    border-top: 1px solid var(--line-soft);
    padding: 1rem 0 .85rem;
}

.myplace-work__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.myplace-work__head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    justify-content: space-between;
}

.myplace-work__module {
    color: var(--ink);
    font-size: 1rem;
    margin: 0;
}

.myplace-work__meta {
    color: var(--ink-muted);
    font-size: .85rem;
    margin: .2rem 0 0;
    text-transform: capitalize;
}

.myplace-work__artifact {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: .5rem 0 0;
}

.myplace-work__reflection {
    color: var(--ink-soft);
    font-size: .95rem;
    line-height: 1.55;
    margin: .5rem 0 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.myplace-work__link {
    color: var(--eu-green-deepest);
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    margin-top: .5rem;
}

/* In-text links (artifact "view it", work links): brand color + the house
   ring — UA-default blue read as off-brand inside the shell (S9 frontend
   review). */
.player-submission__artifact a,
.myplace-work__artifact a,
.myplace-work__link {
    color: var(--eu-green-deepest);
    text-decoration: underline;
}

.player-submission__artifact a:hover,
.myplace-work__artifact a:hover,
.myplace-work__link:hover {
    color: var(--ink);
}

.player-submission__artifact a:focus-visible,
.myplace-work__artifact a:focus-visible,
.myplace-work__link:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.myplace-graduate__intro {
    color: var(--ink-soft);
    font-size: .95rem;
    margin: 0 0 .75rem;
}

/* style.css styles `form select` too (100% width, 12px padding) — keep the
   graduation picker compact and consistent. */
.academy-shell .myplace-graduate__select {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    display: block;
    font-family: inherit;
    font-size: .95rem;
    margin: 0;
    max-width: 24rem;
    min-width: 0;
    padding: .55rem .7rem;
    width: 100%;
}

.academy-shell .myplace-graduate__select:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .myplace-card {
        padding: 1rem;
    }

    .player-submission__photos img {
        height: 4.5rem;
        width: 4.5rem;
    }
}

/* ================================================================== S10 ===
   The Intro interactive tools: the shared tool shell, the form tools
   (observation / design lens / plant plan) and the annotation canvas.
   Same rules as the S6-S9 sections: brand tokens only; every interactive
   element gets an explicit focus-visible ring (the recurring lesson);
   the tool inputs reuse .assignment-form__input, which already resets
   style.css's global form drag-ins. The tool markup keeps its buttons
   OUTSIDE any <form>, so the S7 global-form trap does not reach them --
   they are still styled explicitly, never left to element defaults.

   State-tint pairs (fill + ink) shared by the canvas chips and the
   photo-tag chips -- tokenized so the two surfaces cannot drift
   (S10 code-quality review). All pass AA under near-black text. */

.academy-shell {
    --s10-green-tint: #e5f2e8;
    --s10-amber-tint: #fdf3e0;
    --s10-amber-ink: #8a4a04;
    --s10-red-tint: #fdeaea;
    --s10-red-ink: #a33025;
    --s10-blue-tint: #e3edf9;
    --s10-blue-ink: #1d5ca8;
    --s10-card-tint: #f7f9f6;   /* the S9 card tint (no global token) */
}

/* ---- shell ------------------------------------------------------------ */

.tool-shell {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 auto;
    max-width: 60rem;
}

.tool-brief,
.tool-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}

.tool-brief {
    background: var(--s10-card-tint);
}

.tool-brief__heading,
.tool-panel__heading {
    align-items: baseline;
    color: var(--eu-green-deepest);
    display: flex;
    flex-wrap: wrap;
    font-size: 1.05rem;
    gap: .5rem;
    margin: 0 0 .5rem;
}

.tool-panel__note {
    color: var(--ink-soft);
    font-size: .92rem;
    margin: 0 0 1rem;
}

.tool-panel__count {
    color: var(--ink-soft);
    font-size: .85rem;
    font-weight: 600;
    margin-left: auto;
}

.tool-panel--aside {
    background: var(--s10-card-tint);
}

/* ---- fields ----------------------------------------------------------- */

.tool-fields {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.tool-field .assignment-form__hint {
    display: block;
    font-weight: 400;
}

/* The S9 input class carries min-height 6.5rem for the reflection
   TEXTAREA; the tools reuse the class on single-line inputs and selects,
   which must stay one line tall. */
.academy-shell .tool-shell input.assignment-form__input,
.academy-shell .tool-shell select.assignment-form__input {
    min-height: 0;
    resize: none;
}

/* base.html loads NO Bootstrap: a bare .btn is UNSTYLED in the Academy
   (the S6 note covered only .btn-primary), so the tools' secondary
   buttons (Add / Add plant / Add entry) rendered as UA-default slivers.
   :not(.btn-primary) keeps this 3-class rule from out-specifying the
   S6 .btn-primary override. */
.academy-shell .tool-shell .btn:not(.btn-primary) {
    align-self: center;
    background: #fff;
    border: 1px solid var(--eu-green-deepest);
    border-radius: var(--radius-md);
    color: var(--eu-green-deepest);
    cursor: pointer;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
    padding: .5rem 1.1rem;
    white-space: nowrap;
    width: auto;
}

.academy-shell .tool-shell .btn:not(.btn-primary):hover {
    background: var(--line-soft);
}

.academy-shell .tool-shell .btn:not(.btn-primary):focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

/* ---- actions bar ------------------------------------------------------ */

.tool-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    justify-content: flex-end;
}

.tool-actions .assignment-form__status {
    margin-right: auto;
}

.tool-actions__buttons {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.tool-actions__back {
    color: var(--eu-green-deepest);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: underline;
}

.tool-actions__back:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

/* ---- generic rows (plants, log entries, principles, canvas list) ------ */

.tool-rows {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tool-row {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem .9rem;
}

.tool-row__head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}

.tool-row__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tool-row__chip {
    background: var(--line-soft);
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
    font-size: .78rem;
    font-weight: 600;
    padding: .15rem .6rem;
    white-space: nowrap;
}

.tool-row__controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

.tool-row__label {
    flex: 1 1 12rem;
}

.academy-shell .tool-row__remove,
.academy-shell .tool-row__status,
.academy-shell .tool-row__move,
.academy-shell .canvas-chip,
.academy-shell .tool-picker__result {
    background: #fff;
    border: 1px solid var(--ink-muted);
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
    cursor: pointer;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    padding: .3rem .8rem;
    width: auto;
}

.academy-shell .tool-row__remove:hover,
.academy-shell .tool-row__status:hover,
.academy-shell .tool-row__move:hover,
.academy-shell .canvas-chip:hover,
.academy-shell .tool-picker__result:hover {
    background: var(--line-soft);
}

.academy-shell .tool-row__remove:focus-visible,
.academy-shell .tool-row__status:focus-visible,
.academy-shell .tool-row__move:focus-visible,
.academy-shell .canvas-chip:focus-visible,
.academy-shell .tool-picker__result:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.academy-shell .tool-row__move[disabled] {
    cursor: default;
    opacity: .45;
}

/* Plant/log rows append Remove straight into the column flex — without
   this it stretches into a full-width pill. */
.tool-row > .tool-row__remove {
    align-self: flex-start;
}

/* ---- plant picker ------------------------------------------------------ */

.tool-picker {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1rem;
}

.tool-picker__results {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    list-style: none;
    margin: 0;
    max-height: 14rem;
    overflow-y: auto;
    padding: .6rem;
}

.academy-shell .tool-picker__result {
    border-radius: var(--radius-sm);
    text-align: left;
    width: 100%;
}

.tool-picker__empty {
    color: var(--ink-soft);
    font-size: .88rem;
    padding: .25rem .35rem;
}

.tool-picker__customrow {
    display: flex;
    gap: .6rem;
}

.tool-picker__customrow .assignment-form__input {
    flex: 1;
}

/* ---- care log ---------------------------------------------------------- */

.tool-log__add {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.academy-shell .tool-log__date {
    flex: 0 1 11rem;
}

.tool-log__add .assignment-form__input:not(.tool-log__date) {
    flex: 1 1 14rem;
}

/* ---- canvas: add form + suggestions ------------------------------------ */

.canvas-add {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1rem;
}

.canvas-add__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.canvas-add__row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.canvas-add__row .assignment-form__input {
    flex: 1 1 12rem;
}

.academy-shell .canvas-add__group {
    flex: 0 1 12rem;
    width: auto;
}

/* ---- canvas: stage ------------------------------------------------------ */

.canvas-stage {
    background: #fbfdfa;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.canvas-stage svg {
    display: block;
    height: auto;
    width: 100%;
}

/* touch-action on the CHIPS, not the stage: a full-width no-touch zone
   blocked page scrolling from anywhere on the canvas (S10 frontend
   review M6) — only an active drag needs the gesture. */
.canvas-item {
    touch-action: none;
}

.canvas-legend {
    color: var(--ink-soft);
    font-size: .85rem;
    margin: .5rem 0 0;
}

/* Chip fills: light tints under near-black text -- AA everywhere by
   construction; state is ALWAYS icon + list control, never color alone. */
.canvas-item rect {
    fill: #fff;
    stroke: var(--ink-muted);
    stroke-width: 1.5;
}

.canvas-item text {
    fill: var(--ink);
    font-family: inherit;
    font-size: 17px;
    -webkit-user-select: none;   /* Safari still needs the prefix */
    user-select: none;
}

.canvas-item {
    cursor: grab;
}

.canvas-item.is-dragging {
    cursor: grabbing;
}

.canvas-item:focus {
    outline: none;   /* replaced by the rect ring below -- never removed */
}

/* Focus = thick DASHED stroke: visible on every chip color, including
   the green chips whose resting stroke already matches the old ring
   color (S10 frontend review H2). */
.canvas-item:focus rect,
.canvas-item:focus-visible rect {
    stroke-dasharray: 6 3;
    stroke-width: 4;
}

.canvas-item--healthy rect,
.canvas-item--strength rect {
    fill: var(--s10-green-tint);
    stroke: var(--eu-green-deepest);
}

.canvas-item--redesign rect {
    fill: var(--s10-amber-tint);
    stroke: var(--s10-amber-ink);
}

.canvas-item--vulnerability rect {
    fill: var(--s10-red-tint);
    stroke: var(--s10-red-ink);
}

.canvas-item--leak rect,
.canvas-item--action rect {
    fill: var(--s10-blue-tint);
    stroke: var(--s10-blue-ink);
}

.canvas-hub ellipse {
    fill: var(--eu-green-deepest);
}

.canvas-hub text {
    fill: #fff;
    font-family: inherit;
    font-size: 19px;
    font-weight: 600;
}

.canvas-link {
    stroke: var(--ink-muted);
    stroke-width: 1.5;
}

.canvas-link--healthy {
    stroke: var(--eu-green-deepest);
    stroke-width: 2.5;
}

.canvas-link--redesign {
    stroke: var(--s10-amber-ink);
    stroke-dasharray: 7 5;
    stroke-width: 2.5;
}

.canvas-flowline {
    stroke: var(--ink-soft);
    stroke-width: 2.5;
}

.canvas-flowline--leak {
    stroke: var(--s10-blue-ink);
    stroke-dasharray: 7 5;
}

.canvas-arrowhead {
    fill: var(--ink-soft);
}

/* ---- small screens ------------------------------------------------------ */

@media (max-width: 640px) {
    .tool-brief,
    .tool-panel {
        padding: 1rem;
    }

    .tool-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tool-actions .assignment-form__status {
        margin-right: 0;
    }

    .tool-actions__buttons {
        justify-content: space-between;
    }

    .tool-row__controls {
        margin-left: 0;
    }

    /* The stage SCROLLS at phone widths instead of shrinking: scaled to
       a 330px container, 17px viewBox text renders at ~6px — a smear
       (S10 frontend review H4). A 640px floor keeps labels ~12px+ and
       drag targets thumb-sized; the pan gesture works because
       touch-action:none sits on the chips, not the stage. */
    .canvas-stage {
        overflow-x: auto;
    }

    .canvas-stage svg {
        min-width: 640px;
    }

    /* Thumb-sized controls (the 28.7px computed height missed the house
       ~44px bar; review M8). */
    .academy-shell .tool-row__remove,
    .academy-shell .tool-row__status,
    .academy-shell .tool-row__move,
    .academy-shell .canvas-chip,
    .academy-shell .tool-picker__result {
        padding: .55rem 1rem;
    }
}


/* ---- photo-journal tags (M1) + M8 share link --------------------------- */

.assignment-form__hint--journal {
    color: var(--ink-soft);
    font-size: .88rem;
    margin: 0 0 .5rem;
}

/* Per-photo controls inside a preview card (JS-built, journal kind only).
   min-height 0: these are single-line controls reusing the textarea-sized
   S9 input class. */
.academy-shell .assignment-form__phototag,
.academy-shell .assignment-form__photonote {
    font-size: .85rem;
    margin-top: .35rem;
    max-width: 100%;
    min-height: 0;
    padding: .35rem .5rem;
    resize: none;
    width: 100%;
}

/* Tag chips: same tint families as the canvas states -- icon-free but
   always paired with the note/name text, never meaning by color alone. */
.photo-tag {
    border-radius: var(--radius-pill);
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    margin-top: .35rem;
    padding: .12rem .55rem;
}

.photo-tag--problem {
    background: var(--s10-red-tint);
    color: var(--s10-red-ink);
}

.photo-tag--resource {
    background: var(--s10-blue-tint);
    color: var(--s10-blue-ink);
}

.photo-tag--life {
    background: var(--s10-green-tint);
    color: var(--eu-green-deepest);
}

.photo-note {
    color: var(--ink-soft);
    display: block;
    font-size: .82rem;
    margin-top: .2rem;
    overflow-wrap: anywhere;
}

.myplace-graduated__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
}

.myplace-graduated__share {
    color: var(--eu-green-deepest);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: underline;
}

.myplace-graduated__share:focus-visible {
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}


/* =======================================================================
   Session 11 — AI mentor feedback + course tutor
   =======================================================================
   Same rules as S6-S10: brand tokens only; explicit focus-visible ring on
   every interactive element (the recurring lesson); the tutor input reuses
   .assignment-form__input (global-form resets included). The met chips
   reuse the S10 state-tint pairs so verdict colors cannot drift from the
   canvas/photo chips; correctness is never conveyed by color alone (the
   chip carries the word — the S7 quiz lesson). */

.mentor-feedback {
    border-top: 1px dashed var(--line-soft);
    margin-top: .9rem;
    /* Model output can contain unbroken tokens/URLs — every sibling
       learner/model-text surface wraps; a bare card would overflow at
       390px (S11 frontend review). Inherited by all the text children. */
    overflow-wrap: anywhere;
    padding-top: .9rem;
}

.mentor-feedback__title {
    color: var(--ink);
    font-size: 1rem;
    margin: 0 0 .45rem;
}

.mentor-feedback__summary {
    color: var(--ink);
    margin: 0 0 .6rem;
    white-space: pre-line;
}

.mentor-feedback__label {
    color: var(--eu-green-deepest);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin: .7rem 0 .2rem;
    text-transform: uppercase;
}

.mentor-feedback__list {
    color: var(--ink-soft);
    margin: 0 0 .4rem;
    padding-left: 1.2rem;
}

.mentor-feedback__list li {
    margin-bottom: .25rem;
}

.mentor-feedback__criteria {
    display: grid;
    gap: .45rem;
    list-style: none;
    margin: .7rem 0 .4rem;
    padding: 0;
}

.mentor-feedback__criterion {
    align-items: baseline;
    display: flex;
    gap: .55rem;
}

.mentor-feedback__met {
    border-radius: 999px;
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .55rem;
    white-space: nowrap;
}

.mentor-feedback__met--yes {
    background: var(--s10-green-tint);
    color: var(--eu-green-deepest);
}

.mentor-feedback__met--partial {
    background: var(--s10-amber-tint);
    color: var(--s10-amber-ink);
}

.mentor-feedback__met--no {
    background: var(--s10-red-tint);
    color: var(--s10-red-ink);
}

.mentor-feedback__criterion-body {
    color: var(--ink-soft);
    font-size: .92rem;
}

.mentor-feedback__site {
    color: var(--ink-soft);
    font-style: italic;
    margin: .5rem 0 0;
}

.mentor-feedback__closing {
    color: var(--eu-green-deepest);
    font-weight: 600;
    margin: .5rem 0 0;
}

.mentor-feedback__cost,
.player-tutor__cost {
    font-weight: 400;
    opacity: .85;
}

.mentor-feedback__hint {
    color: var(--ink-soft);
    font-size: .85rem;
    margin: .4rem 0 0;
}

.mentor-feedback__status,
.player-tutor__status {
    color: var(--ink-soft);
    font-size: .88rem;
    margin: .5rem 0 0;
    min-height: 1.2em;
}

/* ---- the tutor panel -------------------------------------------------- */

.player-tutor__note {
    color: var(--ink-soft);
    margin: 0 0 .8rem;
}

.player-tutor__thread {
    display: grid;
    gap: .6rem;
    list-style: none;
    margin: 0 0 .9rem;
    max-height: 24rem;
    overflow-y: auto;
    padding: 0;
}

.tutor-message {
    border-radius: 10px;
    max-width: 92%;
    padding: .55rem .8rem;
}

.tutor-message--user {
    background: var(--s10-card-tint);
    border: 1px solid var(--line-soft);
    justify-self: end;
}

.tutor-message--assistant {
    background: var(--s10-green-tint);
    justify-self: start;
}

.tutor-message--pending {
    opacity: .6;
}

.tutor-message__who {
    color: var(--eu-green-deepest);
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: .15rem;
    text-transform: uppercase;
}

.tutor-message__body {
    color: var(--ink);
    font-size: .95rem;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.player-tutor__form {
    align-items: flex-end;
    display: flex;
    gap: .6rem;
}

.player-tutor__input {
    flex: 1;
    resize: vertical;
}

.player-tutor__send {
    flex-shrink: 0;
    /* style.css's tablet band (@media max-width:767px: form button
       { width:100%; margin-bottom:10px }) would make this button an
       unshrinkable 100% flex item in the 641-767px row layout, crushing
       the textarea — the S7 global-form trap in media-query form (S11
       frontend review HIGH). Explicit resets out-specify it. */
    margin: 0;
    width: auto;
}

@media (max-width: 640px) {
    .player-tutor__form {
        flex-direction: column;
        align-items: stretch;
    }

    .tutor-message {
        max-width: 100%;
    }
}

/* --------------------------------------------------- PDC portfolio (S13) -- */

.portfolio {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0 auto;
    max-width: 900px;
}

.portfolio-claim__label {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
}

.portfolio-claim__row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.portfolio-claim__row .form-select {
    flex: 1 1 260px;
    min-width: 0;
    /* style.css's `form select` margins (5px 0 15px) misalign the flex
       row — the same legacy-form trap the myplace picker resets (S13
       frontend review M1). */
    margin: 0;
}

/* style.css kills the select's :focus outline and leaves a ~1.1:1 halo —
   invisible keyboard focus on an IRREVERSIBLE designation control. Same
   treatment as .myplace-graduate__select (S13 frontend review H2). */
.portfolio-claim__row .form-select:focus-visible {
    box-shadow: none;
    outline: 2px solid var(--eu-green-deepest);
    outline-offset: 2px;
}

.portfolio-claim__row .btn {
    /* Out-specify style.css's tablet band (form button { width:100% }) —
       the S7/S11 global-form trap — AND its legacy in-form button chrome
       (uppercase 50px pill + hover lift), which the academy .btn-primary
       override doesn't reset (S13 frontend review M2). */
    margin: 0;
    width: auto;
    border-radius: 4px;
    letter-spacing: normal;
    text-transform: none;
}

.portfolio-claim__row .btn:hover {
    transform: none;
}

.portfolio-claim__create {
    border-top: 1px solid var(--line-soft);
    margin-top: 1rem;
    padding-top: 1rem;
}

.portfolio-claim__or {
    color: var(--ink-soft);
    margin: 0 0 .5rem;
}

.portfolio-claim__note {
    color: var(--ink-soft);
    font-size: .85rem;
    margin: .5rem 0 0;
}

.portfolio-claim__status {
    color: var(--ink-soft);
    margin: .6rem 0 0;
    min-height: 1.2em;
}

.portfolio-progress {
    color: var(--ink-soft);
    margin: 0 0 .9rem;
}

.portfolio-checklist {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.portfolio-checklist__item {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    display: flex;
    gap: .6rem;
    padding: .55rem .75rem;
}

.portfolio-checklist__item.is-done {
    background: #f2f8ee;
}

.portfolio-checklist__state {
    color: var(--ink-soft);
    flex-shrink: 0;
    font-weight: 700;
    width: 1.2em;
}

.portfolio-checklist__item.is-done .portfolio-checklist__state {
    color: var(--eu-green-deepest);
}

.portfolio-checklist__body {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    min-width: 0;
}

.portfolio-checklist__title {
    color: var(--eu-green-deepest);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.portfolio-checklist__kind {
    background: var(--line-soft);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: .75rem;
    padding: .15rem .6rem;
    white-space: nowrap;
}

.portfolio-checklist__artifact,
.portfolio-checklist__missing {
    color: var(--ink-soft);
    flex-basis: 100%;
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.portfolio-present__note {
    color: var(--ink-soft);
    font-size: .9rem;
    margin: .75rem 0 0;
}

@media (max-width: 640px) {
    .portfolio-claim__row {
        flex-direction: column;
        align-items: stretch;
    }

    /* In the column layout flex-basis:260px becomes HEIGHT — the picker
       rendered ~260px tall on phones (S13 frontend review H1). */
    .portfolio-claim__row .form-select {
        flex: none;
        width: 100%;
    }
}