/* Neutral graphite surfaces. Lime is reserved for actions and meaningful status. */
:root { --bg: #151618; --panel: #202225; --line: #383b40; --muted: #a8abb3; --text: #f0f1f4; --lime: #c6f36a; --report-surface: #202225; }
html, body { background: var(--bg); color: var(--text); }
body.has-mobile-nav #header, #header, #study-progress { background: #17181bf7; border-color: #35373c; }
footer { border-color: #35373c; }
body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]), body textarea {
  background: #1b1d20; border-color: #45484f; color: #f0f1f4; box-shadow: inset 0 1px 0 #ffffff03;
}
body input::placeholder, body textarea::placeholder { color: #92969f; }
body input:not(:disabled):hover, body textarea:not(:disabled):hover { border-color: #69707b; }
body input:focus-visible, body textarea:focus-visible { border-color: var(--lime); box-shadow: 0 0 0 3px #c6f36a12; }
body .number-field { background: #1b1d20; border-color: #45484f; }
body .number-field > input { background: transparent; }
body .number-field > span { color: #b1b5be; }
body .lyckis-select-trigger { background: #24262b; color: #eceef2; border-color: #484c54; box-shadow: inset 0 1px 0 #ffffff04; }
body .lyckis-select-trigger:hover:enabled { background: #2b2e34; color: #fff; border-color: #737985; }
body .lyckis-select-trigger:focus-visible, body .lyckis-select-trigger[aria-expanded="true"] { background: #282b30; border-color: #a7c773; box-shadow: 0 0 0 3px #c6f36a10; }
body .lyckis-select-trigger.is-placeholder { color: #a3a8b2; }
body .lyckis-select-menu { background: #25272c; color: #f0f1f4; border-color: #555b65; box-shadow: 0 14px 45px #0008; scrollbar-color: #777d88 #25272c; }
body .lyckis-select-option { color: #d8dbe2; }
body .lyckis-select-option:hover:enabled, body .lyckis-select-option[data-active="true"] { background: #34373e; border-color: #606773; color: #fff; }
body .lyckis-select-option[aria-selected="true"] { background: #303339; color: var(--lime); border-color: #606b4f; }
body .lyckis-select-option[aria-selected="true"]::after { color: var(--lime); }
body input[type="checkbox"] { background: #24262c; border-color: #6c727d; }
body input[type="checkbox"]:checked { background: var(--lime); border-color: var(--lime); }
body input[type="file"]::file-selector-button { background: #303339; border-color: #555b66; color: #e3e6ec; }
body input[type="range"] { background: #444850; }
body .button { background: var(--lime); border-color: var(--lime); color: #19230f; box-shadow: none; }
body .button:hover:enabled { background: #d4ff84; border-color: #d4ff84; box-shadow: none; }
body .button.secondary { background: #26282d; color: #e0e3ea; border-color: #50555f; box-shadow: none; }
body .button.secondary:hover:enabled { background: #34373e; border-color: #89919d; color: #fff; }
.text-button { color: var(--lime); }.text-button:hover:enabled { color: #d5ff8c; background: #ffffff05; }
#header nav .nav-button { color: #aeb2bc; }
#header nav .nav-button.active { color: #eff1f5; background: #292c32; }
#header nav .nav-button:hover:enabled { background: #30333a; color: #fff; }
#header nav .desktop-back { color: #bcc1ca; }
#header .profile-trigger { border-color: #747d68; background: #292c30; box-shadow: 0 0 0 4px #ffffff04; }
#mobile-navigation { background: #202227f7; border-top-color: #40444d; }
#mobile-navigation > button { color: #aab0bd; }
#mobile-navigation > button[aria-current] { color: var(--lime); background: #30343a; }
body.has-mobile-nav #header:has(.mobile-subject-back) .mobile-subject-back { background: #292c32; border-color: #505862; color: #e0e4eb; }
.admin-home .roster-card, .admin-home .roster-card:hover { background: #222428; border-color: #3e424a; box-shadow: none; }
.admin-home .roster-card:hover { border-color: #747c88; }
.admin-home .admin-user-open > .roster-avatar, .student-report-focused .student-heading-identity > .student-avatar, .board-avatar { background: #303339; border-color: #555c65; color: var(--lime); }
.admin-home .admin-view-switch { background: #1e2024; border-color: #3b3f46; }
.admin-home .admin-view-switch > button { color: #aeb4be; }
.admin-home .admin-view-switch > button[aria-pressed="true"] { background: #32353c; color: var(--lime); box-shadow: none; }
.admin-home .admin-user-courses > div > small { color: #a0a6b0; }
.admin-course-chip { background: #282a2f; border-color: #3a3e46; color: #e3e6ed; }
.linked-subject-icon, .student-course-icon, .student-course-card .student-course-icon { background: #34373d; color: var(--lime); }
.linked-course-name small { color: #a1a7b1; }.linked-course-name strong { color: #eceef3; }.linked-course-tag { color: #b4bac5; }
.student-report-focused .student-account-summary, .student-report-clean .student-account-summary { background: #22252a; border-color: #444a53; }
.student-report-clean .student-course-card, .student-linked-course { background: #202328; border-color: #41464f; }
.student-course-card > summary:hover, .student-course-card[open] > summary { background: #2a2d33; border-bottom-color: #41464f; }
.student-course-reward-setting { background: #292c32; border-color: #444b55; }
.student-report-focused .student-support-panel { background: #292b2d; border-color: #55594e; }
.student-course-key, .student-course-subject { color: #a8afbb; }
.course-reward-edit { background: #2c2f35; border-color: #4d555f; }
.admin-directory-course, .reward-editor-dialog, .course-manager-dialog { background: #22252a; border-color: #4a515b; }
.admin-no-course { color: #b9bec8; }
.student-daily-goal { background: #25272b; border-color: #41464e; }
.student-daily-goal strong { color: #e9ecf2; }.student-daily-goal > div > span { color: #aab0bc; }
.daily-goal-dots i > small { color: #a1a8b4; }.daily-goal-dots i.done > small { color: var(--lime); }
.coach-home .coach-feature, .coach-home .welcome-letter { background: #22252a; border-color: #454c56; }
.coach-home .today-flow li, .coach-home .student-subject { background: #202328; border-color: #3d434c; }
.coach-home .coach-greeting > p, .coach-home .coach-feature-copy > p, .coach-home .coach-feature .hero-actions > span { color: #b5bdca; }
.coach-play .play-layout > .panel { background: #202328; border-color: #414854; }
.coach-play .exercise-step-strip { background: #25282e; border-color: #444c58; }
.exercise-step-strip li { background: #32363d; border-color: #5b6572; color: #c6f36a; }
.exercise-step-strip li + li::before { background: #616a76; }
.exercise-step-strip li.step-is-current, .exercise-step-strip li.step-is-done { background: var(--lime); border-color: var(--lime); color: #18210e; }
.exercise-step-strip li.step-is-current { box-shadow: 0 0 0 4px #c6f36a12; }
.study-progress-copy, .study-progress-copy > strong { color: #bac3d0; }.study-progress-track { background: #3c424d; }
.course-overview .course-hero h1 > .course-level { display: block; white-space: nowrap; }
.exercise-experiment { background: #21242a; border-color: #454d59; }
.coach-play .focus-line { background: #2a2e35; border-color: var(--lime); }
.practice-return-note { background: #292d34; color: #c8d0db; border-color: #a1bb77; }
.journey .stop-details > summary, .journey .stop-details[open] > summary { background: #2a2e35; border-color: #59616f; color: #dfe5ef; }
.journey .stop-details > summary:hover { background: #373d46; border-color: #8994a4; color: #fff; }
.journey .stop-details > div { background: #22262d; border-color: #4a5362; }
.journey .stop-details > div > button { color: #d8e0ec; }.journey .stop-details > div > button:hover { background: #343b46; }
.journey .stop-details, .journey .stop-details[open] { background: transparent; border: 0; padding: 0; box-shadow: none; }
.journey .stop-details > summary { font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; min-height: 44px; padding: 10px 12px; }
.journey .stop-details > div > button { font-family: inherit; font-size: 14px; line-height: 1.5; min-height: 44px; }
.knowledge-board .leaderboard-mine { background: #262a30; border-color: #596353; }
.knowledge-board .leaderboard-list { background: #22252a; border-color: #424851; }.knowledge-board .leaderboard-list li.is-me { background: #2e333a; }
.board-person-copy, .board-explanation p { color: #b3bdca; }
.lyckis-splash { background: radial-gradient(ellipse at 50% 40%, #2c3037, #1c1f24 40%, #151618 75%); }
.lyckis-splash p { color: #b4bcc8; }.streak-preview-page > header > strong { color: #bec6d2; }
.gnista-release-dialog { background: radial-gradient(ellipse at 50% 10%, #343a42, #24282e 45%, #1b1e23); border-color: #687160; }
.gnista-release-dialog::backdrop { background: #0b0d10df; }
.daily-celebration p, .daily-celebration p > strong { color: #b9c1cd; }
.student-daily-goal { border: 0; border-bottom: 1px solid #393e46; border-radius: 0; background: transparent; padding: 18px 0; gap: 14px; }
.student-daily-goal strong { font-size: 18px; line-height: 1.4; color: #f0f2f6; }
.student-daily-goal > div > span { font-size: 14px; line-height: 1.5; color: #bec5cf; }
.student-daily-goal > div > .daily-current-streak { color: var(--lime); font-size: 14px; }
.student-daily-goal .daily-goal-dots { gap: 12px; }
.daily-goal-dots i > small { font-size: 12px; color: #c2cad5; }
.daily-goal-dots i > .gnista { opacity: .65; }
@media(max-width: 480px) {
  .student-daily-goal { gap: 12px; padding: 16px 0; }
  .student-daily-goal strong { font-size: 17px; }
  .student-daily-goal > div > span { font-size: 14px; }
  .student-daily-goal .daily-goal-dots { margin-left: 60px; gap: 16px; }
  .daily-goal-dots i > small { font-size: 12px; }
}
.release-close { background: #30343c; border-color: #5a626f; }.release-xp { background: #30363d; border-color: #5a6550; }
.knowledge-board .leaderboard-toolbar { display: block; margin: 18px 0 20px; }
.knowledge-board .leaderboard-toolbar label { max-width: none; }
.knowledge-board .leaderboard-list { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.knowledge-board .leaderboard-list-heading { padding: 12px 0; border-bottom: 1px solid #424751; }
.knowledge-board .leaderboard-list li { padding: 18px 0; border-top: 0; border-bottom: 1px solid #383f49; background: transparent; border-radius: 0; }
.knowledge-board .leaderboard-list li.is-me { background: transparent; }
.knowledge-board .leaderboard-mine { border: 0; border-left: 3px solid var(--lime); border-radius: 0; background: transparent; padding: 10px 0 10px 16px; }
.support-overview-dialog { width: min(640px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 1px solid #515965; border-radius: 16px; background: #202329; color: var(--text); overflow: auto; }
.support-overview-dialog::backdrop { background: #090c11cf; backdrop-filter: blur(6px); }
.support-overview-dialog > header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.support-overview-dialog h2 { font-size: 27px; margin: 9px 0 18px; }
.support-student h3 { font-size: 20px; margin: 18px 0 12px; }.support-student h3 small { font-size: 11px; color: var(--muted); margin-left: 10px; }
.support-student article { padding: 16px 0; border-top: 1px solid #424954; }
.support-step-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.support-step-heading > strong { font-size: 14px; }.support-step-heading > span { font-size: 11px; color: #e1ca91; }
.support-student article > small { font-size: 11px; color: #a2afc2; line-height: 1.6; }
.support-student article p { font-size: 13px; color: #c2cad6; line-height: 1.8; margin: 10px 0; }
.support-student article .text-button { padding: 6px 0; min-height: 36px; font-size: 12px; }
.admin-support-total { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border: 0; padding: 0; background: none; text-align: left; }
.admin-support-total:hover { transform: none; }.admin-support-total:hover span { color: #eee2bf; }
.admin-home-heading { padding: 4px 0 22px; }
.admin-home-heading .kicker { font-size: 10px; letter-spacing: 1.7px; color: #939ba8; }
.admin-home-heading h1 { font-size: 36px; letter-spacing: -1.3px; margin: 10px 0; line-height: 1.2; }
.admin-home-heading p { font-size: 14px; line-height: 1.6; margin: 0; color: #b0b8c5; }
.admin-home .admin-view-switch { display: flex; width: 100%; gap: 24px; padding: 0; border: 0; border-bottom: 1px solid #3c424b; border-radius: 0; background: none; }
.admin-home .admin-view-switch > button { position: relative; min-height: 46px; padding: 10px 0 14px; border-radius: 0; font-size: 14px; color: #a0a9b7; background: none; }
.admin-home .admin-view-switch > button[aria-pressed="true"] { background: none; color: #eff3f8; box-shadow: none; }
.admin-home .admin-view-switch > button[aria-pressed="true"]::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 3px; background: var(--lime); border-radius: 3px; }
.admin-home .admin-view-switch > button:hover { transform: none; color: #fff; }
.admin-home .admin-dashboard-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 24px; padding: 24px 0; border-bottom: 1px solid #363c46; }
.admin-home .admin-dashboard-totals > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 24px; border-left: 1px solid #3c424c; }
.admin-home .admin-dashboard-totals > div:first-child { padding-left: 0; border-left: 0; }
.admin-home .admin-dashboard-totals strong { font-size: 34px; line-height: 1; font-weight: 500; letter-spacing: -1px; color: #eff2f7; }
.admin-home .admin-dashboard-totals span { font-size: 13px; line-height: 1.5; color: #b3bdcc; }
.admin-home .admin-dashboard-totals > div:nth-child(3) strong { color: #e2cb91; }
@media(max-width: 680px) {
  .admin-home-heading { padding: 2px 0 18px; }
  .admin-home-heading h1 { font-size: 30px; margin: 9px 0; }
  .admin-home-heading p { font-size: 13px; }
  .admin-home .admin-view-switch { gap: 28px; }
  .admin-home .admin-dashboard-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 18px 0; margin-bottom: 20px; row-gap: 22px; }
  .admin-home .admin-dashboard-totals > div { padding: 0 0 0 22px; gap: 7px; }
  .admin-home .admin-dashboard-totals > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .admin-home .admin-dashboard-totals strong { font-size: 30px; }
  .admin-home .admin-dashboard-totals span { font-size: 13px; }
}
@media(min-width: 681px) and (max-width: 760px) {
  /* Behåll menyn centrerad även på en smal desktopvy: visa loggans symbol. */
  #header .logo { font-size: 0; width: 40px; flex: 0 0 40px; gap: 0; }
}
@media(min-width: 681px) {
  #header { position: relative; justify-content: space-between; }
  body.has-mobile-nav #header { position: sticky; }
  #header > nav[aria-label="Huvudmeny"] { position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex: none; width: max-content; margin: 0; padding: 0; gap: 5px; border: 0; background: none; }
  #header > nav[aria-label="Huvudmeny"]::-webkit-scrollbar { display: none; }
  #header > nav .nav-button { flex-shrink: 0; white-space: nowrap; font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: normal; line-height: 1.4; padding: 10px; }
  #header > nav .nav-button[data-nav="library"] { display: inline-flex; align-items: center; }
  #header > .user-menu { margin-left: auto; gap: 12px; }
  #header .user-menu .header-admin-link { display: inline-flex !important; align-items: center; min-height: 40px; padding: 9px 13px; margin: 0; border: 1px solid transparent; border-radius: 10px; background: none; color: #b8bec8; font-size: 12px; }
  #header .user-menu .header-admin-link.active { color: var(--lime); background: #2d3036; border-color: #454b54; }
  #header .user-menu .header-admin-link:hover { background: #34383f; color: #fff; transform: none; }
  #header > .desktop-back { display: inline-flex; position: static; gap: 8px; align-items: center; flex-shrink: 0; width: auto; max-width: 180px; min-height: 44px; margin: 0; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #e0e5ed; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: left; }
  #header:has(> .desktop-back) { margin-bottom: 0; }
  #header > .desktop-back:hover { background: #303640; color: #c6f36a; }
  #header > .desktop-back > span:first-child { font-size: 20px; }
  #header .user-name { display: none; }
}
@media(min-width: 681px) and (max-width: 1050px) {
  #header > .user-menu { gap: 7px; }
  #header .user-menu .header-admin-link { padding-inline: 8px; font-size: 11px; }
}
@media(min-width: 681px) and (max-width: 1200px) {
  #header:has(> .desktop-back) { height: 80px; min-height: 80px; padding-block: 0; flex-wrap: nowrap; gap: 12px; }
  body.has-study-progress:has(#header > .desktop-back) #study-progress { top: 80px; }
}
@media(min-width: 681px) and (max-width: 1100px) {
  #header > .desktop-back { width: 44px; justify-content: center; padding: 8px; }
  #header > .desktop-back > .desktop-back-label { display: none; }
}
@media(min-width: 681px) and (max-width: 900px) {
  #header, #header:has(> .desktop-back) { padding-inline: 18px; gap: 8px; }
  #header .logo { font-size: 24px; gap: 3px; letter-spacing: -1px; }
  #header .logo .gnista { width: 32px; height: 38px; }
  #header > .user-menu { display: grid; grid-template-columns: auto auto 38px; column-gap: 6px; row-gap: 0; align-items: center; }
  #header .user-menu > .xp { grid-column: 1; grid-row: 1; font-size: 12px; gap: 4px !important; }
  #header .user-menu > .top-cash { grid-column: 2; grid-row: 1; font-size: 12px; padding-left: 6px; gap: 4px; }
  #header .user-menu > .header-admin-link { grid-column: 1 / 3; grid-row: 2; justify-self: end; min-height: 24px; padding: 2px 6px; }
  #header .user-menu > .profile-trigger { grid-column: 3; grid-row: 1 / 3; width: 36px; height: 36px; }
  #header .user-menu .reward-heart { width: 14px; height: 14px; }
}
@media(max-width: 680px) {
  #header > .desktop-back, #header .user-menu .header-admin-link { display: none !important; }
  body.has-mobile-nav #header:has(.mobile-subject-back) .mobile-subject-back { min-height: 40px; bottom: -20px; padding: 7px 16px; font-size: 14px; }
  body.has-study-progress #study-progress { padding-top: 32px; }
}
.admin-home .admin-home-heading { padding: 0 0 12px; }
.admin-home .admin-home-heading .kicker { font-size: 9px; }
.admin-home .admin-home-heading h1 { font-size: 30px; margin: 6px 0; }
.admin-home .admin-home-heading p { font-size: 12px; }
.admin-home .admin-dashboard-totals { padding: 16px 0; margin-bottom: 12px; }
.admin-home .admin-dashboard-totals strong { font-size: 27px; }
.admin-home .admin-dashboard-totals span { font-size: 12px; }
.admin-home .admin-roster-controls { margin: 10px 0 14px; gap: 10px; }
.admin-home .admin-roster-controls label { gap: 5px; font-size: 10px; }
.admin-home .roster-card { padding: 16px; }
.admin-home .admin-user-copy { gap: 4px; }.admin-home .admin-user-copy > strong { font-size: 19px; }
.admin-home .admin-user-copy > small { font-size: 10px; }
.admin-home .admin-user-open { gap: 12px; grid-template-columns: 44px minmax(0,1fr) auto 16px; }
.admin-home .admin-user-open > .roster-avatar { width: 44px; height: 44px; min-width: 44px; max-width: 44px; font-size: 20px; }
.admin-home .roster-progress { margin: 9px 0 0; }
.admin-home .admin-user-courses { margin-top: 10px; padding-top: 10px; gap: 12px; }
.admin-home .admin-user-courses > div > small { display: none; }
.admin-home .admin-course-chips { margin-top: 0; gap: 5px; }
.admin-home .admin-course-chip { padding: 7px 9px; gap: 8px; }
.admin-home .linked-subject-icon { width: 25px; height: 28px; flex-basis: 25px; font-size: 20px; }
.admin-home .linked-course-name small { display: none; }.admin-home .linked-course-name strong { font-size: 11px; }
.admin-home .admin-user-courses > button { margin: 0; min-height: 32px; padding: 6px 9px; font-size: 10px; }
@media(max-width: 680px) {
  body.has-mobile-nav #app > .admin-home { padding-top: 12px; }
  .admin-home .admin-home-heading h1 { font-size: 26px; margin: 5px 0; }
  .admin-home .admin-view-switch { gap: 24px; }.admin-home .admin-view-switch > button { min-height: 38px; padding-block: 8px 11px; font-size: 13px; }
  .admin-home .admin-dashboard-totals { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; padding: 12px 0; margin-bottom: 10px; }
  .admin-home .admin-dashboard-totals > div, .admin-home .admin-dashboard-totals > div:nth-child(odd) { padding: 0 10px; border-left: 1px solid #3c424c; gap: 5px; }
  .admin-home .admin-dashboard-totals > div:first-child { padding-left: 0; border-left: 0; }
  .admin-home .admin-dashboard-totals strong { font-size: 24px; }
  .admin-home .admin-dashboard-totals span { font-size: 10px; line-height: 1.5; }
  .admin-support-total { gap: 5px; }
  .admin-home .admin-roster-controls { grid-template-columns: minmax(0,1fr) 112px; margin: 8px 0 12px; }
  .admin-home .admin-roster-controls label { font-size: 10px; }
  .admin-home .admin-roster-controls input { min-height: 40px; padding: 8px 10px; font-size: 13px; }
  .admin-home .admin-roster-controls .lyckis-select-trigger { min-height: 40px; padding: 8px 10px; font-size: 11px; gap: 5px; }
  .admin-home .admin-user-list { gap: 10px; }
  .admin-home .roster-card { padding: 12px; border-radius: 11px; }
  .admin-home .admin-user-open { grid-template-columns: 34px minmax(0,1fr) auto; gap: 6px 9px; }
  .admin-home .admin-user-open > .roster-avatar { grid-column: 1; grid-row: 1; width: 34px; height: 34px; min-width: 34px; max-width: 34px; align-self: center; font-size: 17px; }
  .admin-home .admin-user-copy { grid-column: 2; gap: 3px; }
  .admin-home .admin-user-copy > strong { font-size: 17px; }.admin-home .admin-user-copy > small { display: none; }
  .admin-home .admin-user-copy .admin-user-status { font-size: 10px; }
  .admin-home .roster-rewards { grid-column: 3; grid-row: 1; display: grid; justify-content: end; gap: 4px; }
  .admin-home .roster-rewards > span { justify-content: flex-end; gap: 5px; }.admin-home .roster-rewards strong { font-size: 15px; }.admin-home .roster-rewards .reward-heart { width: 14px; height: 14px; }
  .admin-home .roster-open-arrow { display: none; }
  .admin-home .roster-progress { margin-top: 9px; font-size: 10px; }.admin-home .roster-progress > small { display: none; }
  .admin-home .admin-user-courses { flex-direction: row; align-items: center; padding-top: 8px; margin-top: 8px; gap: 7px; }
  .admin-home .admin-user-courses > div { min-width: 0; }
  .admin-home .admin-course-chip { border: 0; background: none; padding: 0; gap: 6px; }
  .admin-home .linked-subject-icon { width: 22px; height: 25px; flex-basis: 22px; font-size: 18px; border-radius: 5px; }
  .admin-home .linked-course-name strong { font-size: 10px; }.admin-home .linked-course-tag { display: none; }
  .admin-home .admin-user-courses > button { width: auto; align-self: center; font-size: 9px; padding: 6px 7px; min-height: 32px; }
  .support-overview-dialog { padding: 20px; }
}

/* One course row; only additional courses are disclosed. */
.roster-structured .roster-course-disclosure,
.roster-structured .roster-course-list { width: 100%; min-width: 0; }
.roster-structured .roster-course-disclosure > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; border-radius: 8px; }
.roster-structured .roster-course-disclosure > summary::-webkit-details-marker { display: none; }
.roster-structured .roster-course-disclosure > summary:focus-visible { outline: 2px solid var(--accent, #c3c9ff); outline-offset: 5px; }
.roster-structured .roster-course-disclosure .admin-course-chips,
.roster-structured .roster-course-list .admin-course-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; min-width: 0; flex: 1; }
.roster-structured .roster-course-disclosure .admin-course-chip,
.roster-structured .roster-course-list .admin-course-chip { min-width: 0; }
.roster-structured .linked-course-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-structured .roster-course-disclosure .linked-course-tag,
.roster-structured .roster-course-list .linked-course-tag { display: none; }
.roster-structured .roster-course-chevron { flex: none; color: var(--muted); transition: transform .15s; }
.roster-structured .roster-course-disclosure[open] .roster-course-chevron { transform: rotate(180deg); }
.roster-structured .roster-course-disclosure .roster-course-rest { margin-top: 8px; margin-right: 24px; }