/*
 * PHPBB Lab Academy presentation — theme 1.1.1.
 * Design only: School remains responsible for content and functionality.
 * Mirrors the Portal visual language while retaining native phpBB controls.
 */
:root {
    --academy-ink: var(--lab-navy);
    --academy-link: var(--lab-blue);
    --academy-link-dark: var(--lab-navy);
    --academy-muted: var(--lab-muted);
    --academy-canvas: var(--lab-canvas);
    --academy-surface: var(--lab-surface);
    --academy-soft: var(--lab-surface-soft);
    --academy-card: var(--lab-surface-alt);
    --academy-border: var(--lab-border);
    --academy-border-soft: var(--lab-border);
    --academy-focus: var(--lab-navy);
}

.lab-academy-page,
.lab-academy-page * { box-sizing: border-box; }

.lab-academy-page {
    margin: 0;
    color: var(--academy-ink);
    background: var(--academy-canvas);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.65;
}

.lab-academy-page a {
    color: var(--academy-link);
    text-decoration: underline;
    text-decoration-thickness: .075em;
    text-underline-offset: .22em;
    overflow-wrap: anywhere;
}
.lab-academy-page a:hover { color: var(--academy-link-dark); text-decoration-thickness: .15em; }
.lab-academy-page a:focus-visible,
.lab-academy-page button:focus-visible,
.lab-academy-page input:focus-visible,
.lab-academy-page select:focus-visible,
.lab-academy-page textarea:focus-visible,
.lab-academy-page summary:focus-visible {
    outline: 3px solid var(--academy-focus);
    outline-offset: 3px;
}

.lab-academy-page p,
.lab-academy-page li,
.lab-academy-page dd,
.lab-academy-page dt,
.lab-academy-page h1,
.lab-academy-page h2,
.lab-academy-page h3,
.lab-academy-page h4 { overflow-wrap: anywhere; }

.lab-skip-link {
    position: absolute;
    top: .5rem;
    inset-inline-start: 1rem;
    z-index: 1000;
    min-height: 2.75rem;
    padding: .65rem 1rem;
    color: var(--academy-link);
    background: var(--lab-surface);
    border: 2px solid var(--academy-link);
    transform: translateY(-220%);
}
.lab-skip-link:focus { transform: none; }

.lab-header { background: var(--lab-surface); border-bottom: 1px solid var(--academy-border-soft); }
.lab-header-inner {
    width: min(100% - 3rem, 78rem);
    margin-inline: auto;
    padding-block: 1.2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 2rem;
}
.lab-academy-page .lab-brand {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    max-width: 100%;
    color: var(--academy-ink);
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -.025em;
    text-decoration: none;
}
.lab-header .lab-primary-nav { flex: 1 1 auto; min-width: 0; }
.lab-header .lab-nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .15rem .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.lab-header .lab-nav-links li { margin: 0; padding: 0; }
.lab-header .lab-nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem .65rem;
    color: var(--academy-link);
    text-decoration: none;
    border-bottom: .18rem solid transparent;
}
.lab-header .lab-nav-links a[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: .12em;
    text-underline-offset: .28em;
}
.lab-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem 1rem;
}
.lab-account a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9375rem; }

.lab-academy-main {
    width: min(100% - 3rem, 72rem);
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 4rem) 4rem;
}
.lab-academy-main:focus { outline: none; }

.lab-academy-main > h1 {
    margin: 0 0 .75rem;
    max-width: 28ch;
    color: var(--academy-ink);
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.025em;
}
.lab-academy-main > h1 + nav { margin-bottom: 2.2rem; }
.lab-academy-main > nav .linklist,
.lab-academy-main .linklist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lab-academy-main > nav .linklist li,
.lab-academy-main .linklist li { float: none; margin: 0; }
.lab-academy-main > nav .linklist a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 1rem;
}
.lab-academy-main > nav .linklist a[aria-current="page"] { font-weight: 700; }

.lab-academy-main h2 {
    margin: 2.4rem 0 1rem;
    color: var(--academy-ink);
    font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    font-weight: 720;
    line-height: 1.25;
    border: 0;
}
.lab-academy-main h3 {
    margin: 2rem 0 .8rem;
    color: var(--academy-ink);
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    font-weight: 700;
    line-height: 1.35;
    border: 0;
}
.lab-academy-main h4 {
    margin: 1.6rem 0 .65rem;
    color: var(--academy-ink);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}
.lab-academy-main p { margin: .65rem 0; }
.lab-academy-main ul,
.lab-academy-main ol { padding-inline-start: 1.6rem; }
.lab-academy-main li + li { margin-top: .25rem; }

.lab-academy-main .content {
    max-width: 74ch;
    color: var(--academy-ink);
    font-size: 1.0625rem;
    line-height: 1.75;
}
.lab-academy-main .content p { margin: .85rem 0; }

.lab-academy-main .panel {
    margin: 1.2rem 0;
    color: var(--academy-ink);
    background: var(--academy-surface);
    border: 1px solid var(--academy-border);
    border-radius: .55rem;
    box-shadow: none;
}
.lab-academy-main .panel > .inner { padding: clamp(1.1rem, 3vw, 2rem); }
.lab-academy-main article.panel[id^="school-path-summary-"] {
    background: var(--academy-card);
    border-inline-start: .35rem solid var(--academy-link);
}
.lab-academy-main article.panel[id^="school-path-summary-"] h3 { margin-top: 0; }
.lab-academy-main article.panel[id^="school-path-summary-"] p:last-child a { font-weight: 700; }

#school-featured-paths,
#school-followed-paths { margin-block: 2.5rem; }
#school-path-steps { padding-inline-start: 1.4rem; }
#school-path-steps > li { padding-inline-start: .2rem; margin-block: 1rem; }
#school-path-steps .panel { margin: .4rem 0; }

.lab-academy-main .button,
.lab-academy-main a.button,
.lab-academy-main button,
.lab-academy-main input.button1,
.lab-academy-main input.button2,
.lab-academy-main input.button3,
.lab-academy-main .button1,
.lab-academy-main .button2 {
    min-height: 2.75rem;
    max-width: 100%;
    padding: .55rem 1rem;
    border-radius: .35rem;
    font: inherit;
    font-weight: 650;
    line-height: 1.35;
    box-shadow: none;
    text-shadow: none;
}
.lab-academy-main .button1,
.lab-academy-main input.button1,
.lab-academy-main a.button,
.lab-academy-main .button {
    color: var(--lab-surface);
    background: var(--academy-link);
    border: 2px solid var(--academy-link);
    text-decoration: none;
}
.lab-academy-main .button1:hover,
.lab-academy-main input.button1:hover,
.lab-academy-main a.button:hover,
.lab-academy-main .button:hover {
    color: var(--lab-surface);
    background: var(--academy-link-dark);
    border-color: var(--academy-link-dark);
}
.lab-academy-main .button2,
.lab-academy-main input.button2,
.lab-academy-main input.button3,
.lab-academy-main button:not(.button1) {
    color: var(--academy-link);
    background: var(--lab-surface);
    border: 2px solid var(--academy-border);
}
.lab-academy-main button:hover,
.lab-academy-main .button2:hover,
.lab-academy-main input.button2:hover,
.lab-academy-main input.button3:hover { border-color: var(--academy-link); }

.lab-academy-main fieldset {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--academy-border);
    border-radius: .45rem;
}
.lab-academy-main legend { padding-inline: .35rem; color: var(--academy-ink); font-weight: 700; }
.lab-academy-main label { color: var(--academy-ink); }
.lab-academy-main input.inputbox,
.lab-academy-main textarea.inputbox,
.lab-academy-main select,
.lab-academy-main input[type="text"],
.lab-academy-main input[type="search"],
.lab-academy-main input[type="email"],
.lab-academy-main input[type="password"],
.lab-academy-main input[type="file"] {
    min-height: 2.75rem;
    max-width: 100%;
    padding: .5rem .65rem;
    color: var(--academy-ink);
    background: var(--lab-surface);
    border: 1px solid var(--lab-border-strong);
    border-radius: .3rem;
}
.lab-academy-main textarea.inputbox { min-height: 7rem; }

.lab-academy-main details {
    margin: 1rem 0;
    padding: .85rem 1rem;
    background: var(--lab-surface);
    border: 1px solid var(--academy-border);
    border-radius: .45rem;
}
.lab-academy-main summary { cursor: pointer; color: var(--academy-link); font-weight: 700; }

.lab-academy-main .codebox,
.lab-academy-main pre {
    max-width: 100%;
    color: var(--academy-ink);
    background: var(--lab-surface-soft);
    border-color: var(--academy-border);
}
.lab-academy-main pre,
.lab-academy-main .codebox code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.lab-academy-main code { font-size: .95em; }

.lab-academy-main .successbox,
.lab-academy-main .errorbox,
.lab-academy-main .notice,
.lab-notice {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: .4rem;
}
.lab-academy-main .successbox { background: var(--lab-success-bg); border: 1px solid var(--lab-stable); color: var(--lab-stable); }
.lab-academy-main .errorbox { background: var(--lab-error-bg); border: 1px solid var(--lab-experimental); color: var(--lab-experimental); }
.lab-academy-main .notice,
.lab-notice { background: var(--lab-surface-soft); border: 1px solid var(--lab-blue); color: var(--academy-ink); }

.lab-footer { background: var(--lab-surface); border-top: 1px solid var(--academy-border-soft); }
.lab-footer-inner { width: min(100% - 3rem, 72rem); margin-inline: auto; padding-block: 2rem; }
.lab-footer-signature { margin: 0; font-weight: 650; }
.lab-footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; padding: 0; margin: .6rem 0 1rem; }
.lab-footer-links a,
.lab-credits a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.lab-credits { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; color: var(--lab-muted); font-size: .875rem; }
.lab-credits p { margin: 0; align-self: center; }

.lab-academy-page .phpbb_alert { box-sizing: border-box; }

@media (max-width: 62rem) {
    .lab-header-inner { gap: .4rem 1.5rem; }
    .lab-header .lab-primary-nav { flex-basis: 100%; }
    .lab-header .lab-nav-links { justify-content: flex-start; }
    .lab-account { flex-basis: 100%; }
}
@media (max-width: 30rem) {
    .lab-header-inner,
    .lab-academy-main,
    .lab-footer-inner { width: calc(100% - 2rem); }
    .lab-header .lab-nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: .25rem; }
    .lab-header .lab-nav-links a { justify-content: flex-start; padding-inline: .4rem; }
    .lab-academy-main { padding-block: 2.25rem 2.75rem; }
    .lab-academy-main > h1 { font-size: 2.15rem; }
    .lab-academy-main h2 { font-size: 1.55rem; }
    .lab-academy-main .panel > .inner { padding: 1rem; }
    .lab-academy-main fieldset { padding: .75rem; }
}
@media (forced-colors: active) {
    .lab-academy-page a:focus-visible,
    .lab-academy-page button:focus-visible,
    .lab-academy-page input:focus-visible,
    .lab-academy-page select:focus-visible,
    .lab-academy-page textarea:focus-visible,
    .lab-academy-page summary:focus-visible { outline-color: Highlight; }
    .lab-academy-main .panel,
    .lab-footer,
    .lab-header { border-color: CanvasText; }
}
@media print {
    .lab-skip-link,
    .lab-header,
    .lab-footer-links,
    .lab-account { display: none; }
    .lab-academy-page,
    .lab-academy-main .panel { background: var(--lab-surface); color: #000; }
    .lab-academy-main { width: 100%; padding: 0; }
}

/* 1.1.1: one public Academy identity and calmer path titles. */
.lab-academy-main > .lab-academy-brand-title {
    margin: 0 0 .75rem;
    max-width: 28ch;
    color: var(--academy-ink);
    font-size: 1.125rem;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: -.025em;
}
.lab-academy-main article.panel[id^="school-path-summary-"] h3 {
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1.38;
}
.lab-academy-main article.panel[id^="school-path-summary-"] h3 a {
    text-decoration-thickness: .075em;
    text-underline-offset: .2em;
}

/* 1.1.1: School already stores path titles in the intended case.
 * prosilver uppercases generic H3 headings; neutralize that only for Academy path cards. */
.lab-academy-main article.panel[id^="school-path-summary-"] h3,
.lab-academy-main article.panel[id^="school-path-summary-"] h3 a {
    text-transform: none;
}