@font-face {
  font-family: "Vamos Rounded";
  src: url("../fonts/Nunito-Variable.1f0e8654e8e5.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Regular.8d72101cad15.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../fonts/Lato-Bold.79203a194744.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #fffdf8;
  --surface: #fff;
  --surface-soft: #f4fbf9;
  --surface-tint: #e9f8f4;
  --text: #071b31;
  --muted: #506a7d;
  --border: #d7e4e5;
  --navy: #061b31;
  --navy-soft: #0d2b43;
  --teal-900: #064e4d;
  --teal-800: #0e5b5a;
  --teal-700: #08766f;
  --teal-600: #079788;
  --teal-500: #06a894;
  --teal-100: #ddf5ef;
  --coral: #ff6b5b;
  --yellow: #f5b61d;
  --blue: #2587dc;
  --green: #15945d;
  --shadow-sm: 0 8px 22px rgb(7 27 49 / 7%);
  --shadow-md: 0 22px 55px rgb(7 27 49 / 13%);
  --radius: 1rem;
  --radius-sm: 0.72rem;
  --shell: min(92vw, 1440px);
}

[data-theme="dark"] {
  color-scheme: dark;
  --page: #071b31;
  --surface: #0c2941;
  --surface-soft: #10334e;
  --surface-tint: #123b57;
  --text: #fffaf0;
  --muted: #c2d0db;
  --border: #244b63;
  --navy: #041525;
  --navy-soft: #0a263d;
  --teal-900: #b7f1e7;
  --teal-800: #79ded0;
  --teal-700: #58d4c4;
  --teal-600: #40c9b8;
  --teal-500: #21b9a8;
  --teal-100: #123f4c;
  --shadow-sm: 0 8px 25px rgb(0 0 0 / 20%);
  --shadow-md: 0 24px 60px rgb(0 0 0 / 34%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 20rem;
  margin: 0;
  overflow-x: hidden;
  background: var(--page);
  color: var(--text);
  font-family: Lato, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  transition: background-color 180ms ease, color 180ms ease;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; bottom: 0.75rem; left: 0.75rem; padding: 0.65rem 1rem; border-radius: 0.5rem; background: var(--navy); color: #fff; transform: translateY(calc(100% + 1.5rem)); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: relative; z-index: 20; min-height: 6rem; border-bottom: 1px solid transparent; background: color-mix(in srgb, var(--page) 94%, transparent); backdrop-filter: blur(16px); }
.header-inner { display: grid; min-height: 6rem; grid-template-columns: 13rem 1fr auto; align-items: center; gap: 2rem; }
.brand-link { display: block; width: 11.6rem; }
.brand-logo { width: 11.6rem; height: auto; }
.brand-logo-dark, .demo-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light, [data-theme="dark"] .demo-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark, [data-theme="dark"] .demo-logo-dark { display: block; }
.primary-navigation { display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 2.8vw, 3.2rem); }
.nav-link { position: relative; padding-block: 0.8rem; font-size: 0.92rem; font-weight: 700; text-decoration: none; }
.nav-link::after { position: absolute; right: 0; bottom: 0.25rem; left: 0; height: 2px; border-radius: 1rem; background: var(--teal-500); content: ""; transform: scaleX(0); transition: transform 150ms ease; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 1.4rem; }
.theme-control { display: flex; align-items: center; gap: 0.55rem; font-size: 0.76rem; font-weight: 800; }
.theme-toggle { position: relative; width: 3.55rem; height: 1.9rem; padding: 0; border: 2px solid var(--navy); border-radius: 999px; background: var(--navy); cursor: pointer; }
.theme-thumb { position: absolute; top: 0.18rem; left: 0.22rem; width: 1.28rem; height: 1.28rem; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgb(0 0 0 / 24%); transition: transform 180ms ease; }
.theme-toggle[aria-checked="true"] { border-color: var(--teal-500); background: var(--teal-500); }
.theme-toggle[aria-checked="true"] .theme-thumb { transform: translateX(1.55rem); }
.nav-toggle { display: none; width: 2.8rem; height: 2.8rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: 0.7rem; background: var(--surface); color: var(--text); }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; margin: 0.25rem 0; background: currentcolor; }

.button { display: inline-flex; min-height: 3.2rem; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.78rem 1.5rem; border: 1px solid transparent; border-radius: 0.62rem; font: inherit; font-size: 0.9rem; font-weight: 850; text-align: center; text-decoration: none; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button svg { width: 1.15rem; fill: currentcolor; stroke: currentcolor; stroke-width: 1.7; }
.button-primary { background: #08766f; color: #fff; box-shadow: 0 10px 22px rgb(8 118 111 / 21%); }
.button-primary:hover { background: var(--teal-800); }
[data-theme="dark"] .button-primary { background: #21b9a8; color: #041a25; }
.button-secondary { border-color: color-mix(in srgb, var(--teal-700) 55%, var(--border)); background: var(--surface); color: var(--text); }
.button-secondary:hover { background: var(--surface-tint); }
.button-small { min-height: 2.8rem; padding: 0.65rem 1.25rem; }

.hero { display: grid; min-height: 39rem; grid-template-columns: minmax(24rem, 0.78fr) minmax(42rem, 1.42fr); align-items: center; gap: 1rem; padding-block: 1.2rem 0.4rem; }
.hero-copy { position: relative; z-index: 5; padding-left: 1rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0 0 1.25rem; color: var(--teal-700); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.035em; text-transform: uppercase; }
.eyebrow svg { width: 1.15rem; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-width: 1.8; }
.hero-copy > .eyebrow { padding: 0.55rem 0.85rem; border-radius: 999px; background: var(--teal-100); text-transform: none; }
.hero h1 { max-width: 12ch; margin: 0 0 1.25rem; font-family: "Vamos Rounded", system-ui, sans-serif; font-size: clamp(3.2rem, 4.45vw, 5rem); font-weight: 900; letter-spacing: -0.045em; line-height: 0.98; }
.hero h1 span { color: var(--teal-600); }
.hero-lead { max-width: 35rem; margin: 0 0 1.7rem; color: var(--muted); font-size: 1.08rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.scope-note { display: flex; max-width: 38rem; align-items: flex-start; gap: 0.45rem; margin: 1rem 0 0; color: var(--muted); font-size: 0.74rem; }
.scope-note span { width: 0.48rem; height: 0.48rem; flex: 0 0 auto; margin-top: 0.35rem; border-radius: 50%; background: var(--teal-500); }
.hero-visual { position: relative; min-height: 37rem; }
.soft-orbit { position: absolute; inset: 0.8rem 0 0 2rem; border-radius: 51% 49% 32% 34%; background: radial-gradient(circle at 30% 42%, rgb(168 213 201 / 48%), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--teal-100) 78%, transparent), transparent 72%); }
.window-lines { position: absolute; z-index: 1; top: 6rem; left: 7%; width: 11rem; height: 14rem; border: solid color-mix(in srgb, var(--teal-500) 17%, transparent); border-width: 0 0.48rem 0.48rem 0; opacity: 0.6; }
.learner-illustration { position: absolute; z-index: 4; bottom: 0.3rem; left: -4.5rem; width: 27rem; height: auto; filter: drop-shadow(0 18px 22px rgb(7 41 66 / 14%)); }
.demo-dashboard { position: absolute; z-index: 2; top: 3.2rem; right: 1.8rem; width: 78%; min-height: 31rem; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: var(--shadow-md); }
.demo-topbar { display: flex; height: 4.25rem; align-items: center; justify-content: space-between; padding: 0.45rem 1rem; border-bottom: 1px solid var(--border); }
.demo-topbar img { width: 7.2rem; height: auto; }
.demo-badge { display: inline-flex; width: max-content; padding: 0.28rem 0.55rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.57rem; font-weight: 900; letter-spacing: 0.035em; text-transform: uppercase; }
.demo-body { display: grid; grid-template-columns: 8.3rem 1fr; }
.demo-sidebar { display: flex; min-height: 26.5rem; flex-direction: column; gap: 0.28rem; padding: 1rem 0.6rem; border-right: 1px solid var(--border); color: var(--muted); font-size: 0.66rem; font-weight: 800; }
.demo-sidebar span { padding: 0.46rem 0.58rem; border-radius: 0.42rem; }
.demo-sidebar .demo-side-active { background: var(--teal-100); color: var(--teal-800); }
.demo-content { min-width: 0; padding: 1rem 1.15rem; }
.demo-kicker { margin: 0; color: var(--teal-700); font-size: 0.63rem; font-weight: 900; }
.demo-content h2 { margin: 0.2rem 0 0; font-size: 1rem; }
.demo-intro { margin: 0.2rem 0 0.75rem; color: var(--muted); font-size: 0.65rem; }
.demo-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.48rem; }
.demo-stats > div { display: grid; min-width: 0; grid-template-columns: auto 1fr; padding: 0.55rem; border: 1px solid var(--border); border-radius: 0.58rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.demo-stats small { overflow: hidden; color: var(--muted); font-size: 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
.demo-stats strong { grid-column: 2; font-size: 1rem; line-height: 1.2; }
.dot { width: 0.46rem; height: 0.46rem; margin: 0.12rem 0.3rem 0 0; border-radius: 50%; }
.dot-blue { background: var(--blue); }.dot-coral { background: var(--coral); }.dot-green { background: var(--green); }.dot-yellow { background: var(--yellow); }
.chart-card { margin-top: 0.7rem; padding: 0.7rem; border: 1px solid var(--border); border-radius: 0.62rem; background: var(--surface); }
.chart-title { display: flex; align-items: center; justify-content: space-between; font-size: 0.68rem; font-weight: 900; }
.chart-title small { padding: 0.18rem 0.4rem; border-radius: 0.28rem; background: var(--surface-soft); color: var(--muted); }
.chart-card svg { margin-top: 0.35rem; }
.chart-grid { fill: none; stroke: var(--border); stroke-width: 1; }.chart-area { fill: url(#chart-fill); }.chart-line { fill: none; stroke: var(--teal-500); stroke-linecap: round; stroke-width: 4; }
.demo-mobile { position: absolute; z-index: 6; right: -1rem; bottom: -0.5rem; width: 13.4rem; min-height: 28rem; padding: 1.1rem 0.9rem 2.6rem; border: 5px solid #182a39; border-radius: 1.75rem; background: #061a2c; color: #fffaf0; box-shadow: 0 22px 38px rgb(0 0 0 / 30%); }
.mobile-speaker { width: 2.7rem; height: 0.32rem; margin: -0.35rem auto 0.55rem; border-radius: 1rem; background: #314455; }
.demo-mobile img { width: 6.8rem; height: auto; }.demo-mobile > small { color: #a9bbc8; font-size: 0.5rem; }.demo-mobile p { margin: 0.85rem 0 0.48rem; font-size: 0.9rem; font-weight: 900; }.demo-mobile p span { font-size: 0.85rem; }
.mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.38rem; }.mobile-grid span { display: flex; flex-direction: column; padding: 0.48rem; border-radius: 0.4rem; background: #102d44; color: #c7d3dc; font-size: 0.48rem; }.mobile-grid b { color: #fff; font-size: 0.9rem; }
.mini-chart { height: 7rem; margin-top: 0.55rem; border-radius: 0.45rem; background: linear-gradient(160deg, transparent 43%, #19c6b2 44% 46%, transparent 47%), repeating-linear-gradient(#102d44 0 1px, transparent 1px 25%); }
.mobile-nav { position: absolute; right: 0.6rem; bottom: 0.45rem; left: 0.6rem; padding-top: 0.5rem; border-top: 1px solid #294258; color: #5ce2d4; text-align: center; }

.benefits { position: relative; z-index: 7; padding-block: 0.5rem 1rem; scroll-margin-top: 5rem; }
.benefit-grid { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.benefit-card { display: grid; min-width: 0; grid-template-columns: auto 1fr; gap: 0.8rem; padding: 1.3rem; border-right: 1px solid var(--border); }
.benefit-card:last-child { border-right: 0; }
.benefit-card h3 { margin: 0 0 0.22rem; font-size: 0.88rem; }.benefit-card p { margin: 0; color: var(--muted); font-size: 0.74rem; }
.benefit-icon { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border-radius: 0.7rem; color: var(--navy); }
.benefit-icon svg { width: 1.65rem; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.benefit-icon.mint { background: #dff5e8; }.benefit-icon.lavender { background: #e9e5ff; }.benefit-icon.cream { background: #fff0c8; }.benefit-icon.sky { background: #dceefe; }.benefit-icon.leaf { background: #e0f4dc; }

.demo-metrics { margin-top: 1rem; padding-block: 2.5rem; background: var(--navy); color: #fffaf0; }
.metrics-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.6rem; }
.metrics-heading .eyebrow { margin-bottom: 0.3rem; color: #5ee0d2; }
.metrics-heading h2 { margin: 0; font-family: "Vamos Rounded", sans-serif; font-size: 2.1rem; line-height: 1.1; }
.metrics-heading > p { max-width: 33rem; margin: 0; color: #c9d7e0; font-size: 0.82rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.metric { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0 0.65rem; padding: 0.5rem 2rem; border-right: 1px solid #5b7184; }
.metric:last-child { border: 0; }.metric-symbol { grid-row: 1 / 3; color: var(--yellow); font-size: 1.9rem; }.metric strong { font-size: 1.6rem; }.metric > span:nth-of-type(2) { grid-column: 2 / 4; color: #e1e9ee; font-size: 0.74rem; }.metric small { grid-column: 2 / 4; color: #a9bac6; font-size: 0.55rem; letter-spacing: 0.04em; text-transform: uppercase; }
.empty-state { grid-column: 1 / -1; padding: 1rem; border: 1px dashed #5b7184; border-radius: var(--radius); }.empty-state h3, .empty-state p { margin: 0; }.empty-state p { color: #c9d7e0; }

.teacher-section { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-block: 1.4rem 2rem; scroll-margin-top: 5rem; }
.teacher-card, .cta-card { display: grid; min-height: 19rem; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-soft); }
.teacher-card { grid-template-columns: 1.12fr 0.88fr; gap: 1rem; padding: 2rem; }.teacher-card h2, .cta-card h2 { margin: 0 0 0.7rem; font-family: "Vamos Rounded", sans-serif; font-size: clamp(1.7rem, 2.4vw, 2.45rem); line-height: 1.06; }.teacher-card p, .cta-card p { color: var(--muted); font-size: 0.87rem; }.teacher-card .eyebrow, .cta-card .eyebrow { margin-bottom: 0.65rem; }
.teacher-preview { display: grid; gap: 0.9rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: 0.9rem; background: var(--surface); box-shadow: var(--shadow-md); transform: rotate(1.5deg); }
.bar-row { display: grid; grid-template-columns: 3.6rem 1fr; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.65rem; }.bar-row i { display: block; height: 0.58rem; border-radius: 1rem; background: linear-gradient(90deg, var(--teal-500) var(--value), var(--border) var(--value)); }
.cta-card { position: relative; grid-template-columns: 1.2fr 0.8fr; padding: 2rem; background: linear-gradient(135deg, var(--surface-soft), color-mix(in srgb, #e7e2ff 54%, var(--surface))); }.cta-card img { align-self: end; margin: 0 -1.5rem -1rem -1rem; }

.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; padding-block: 0.5rem 3.4rem; }
.trust article { display: flex; align-items: flex-start; gap: 0.75rem; }.trust article > span { flex: 0 0 auto; color: var(--teal-700); }.trust article svg { width: 2rem; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }.trust h3 { margin: 0; font-size: 0.86rem; }.trust p { margin: 0.18rem 0 0; color: var(--muted); font-size: 0.72rem; }

.simple-page { min-height: 65vh; padding-block: 5rem; }.simple-page.narrow { max-width: 55rem; }.simple-page h1 { max-width: 18ch; margin: 0 0 0.8rem; font-family: "Vamos Rounded", sans-serif; font-size: clamp(2.4rem, 4vw, 4.2rem); line-height: 1.06; }.simple-page > p { max-width: 48rem; color: var(--muted); font-size: 1.05rem; }.status-list { display: grid; gap: 0.8rem; max-width: 60rem; margin: 2.2rem 0; }.status-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.05rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }.status-item h2, .status-item p { margin: 0; }.status-item h2 { font-size: 0.95rem; }.status-item p { color: var(--muted); font-size: 0.82rem; }.status-item > strong { font-size: 0.78rem; }.status-icon, .notice-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 50%; font-weight: 900; }.is-ok .status-icon { background: #dff5e8; color: #126a3d; }.is-error .status-icon { background: #ffe0dc; color: #9c2d24; }.notice-icon { width: 4rem; height: 4rem; margin-bottom: 1.3rem; background: var(--teal-100); color: var(--teal-800); font-size: 1.5rem; }
.about-page { max-width: 72rem; }.about-page .about-intro { max-width: 62rem; color: var(--text); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }.about-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2.5rem; }.about-sections section { padding: clamp(1.2rem, 2.5vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }.about-sections h2 { margin: 0 0 0.65rem; font-family: "Vamos Rounded", sans-serif; font-size: clamp(1.25rem, 2vw, 1.65rem); }.about-sections p { margin: 0; color: var(--muted); }

.site-footer { padding-top: 3rem; border-top: 1px solid var(--border); background: var(--surface-soft); color: var(--muted); }.footer-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 4rem; padding-bottom: 2.5rem; }.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; }.footer-grid p { margin: 0.22rem 0; }.footer-grid a { margin: 0.2rem 0; color: var(--muted); text-decoration: none; }.footer-grid a:hover { color: var(--teal-700); text-decoration: underline; }.footer-brand, .footer-title { color: var(--text); font-weight: 850; }.footer-brand { font-size: 1.25rem; }.footer-mark { height: auto; margin-bottom: 0.45rem; }.footer-bottom { display: flex; justify-content: space-between; padding-block: 1rem; border-top: 1px solid var(--border); font-size: 0.72rem; }

@media (max-width: 92rem) and (min-width: 78.01rem) {
  .header-inner { grid-template-columns: 10rem 1fr auto; gap: 0.75rem; }
  .brand-link, .brand-logo { width: 9.6rem; }
  .primary-navigation { gap: clamp(0.55rem, 1vw, 1rem); }
  .nav-link { font-size: 0.8rem; }
  .header-actions { gap: 0.65rem; }
  .theme-control { gap: 0.35rem; font-size: 0.7rem; }
  .header-actions .button { padding-inline: 0.9rem; }
}

@media (max-width: 78rem) {
  .header-inner { grid-template-columns: 11.6rem auto 1fr; gap: 1rem; }.nav-toggle { display: block; grid-column: 2; }.primary-navigation { position: absolute; top: calc(100% - 0.4rem); right: 1.5rem; left: 1.5rem; display: none; flex-direction: column; align-items: stretch; gap: 0.2rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-md); }.primary-navigation.is-open { display: flex; }.nav-link { padding: 0.65rem; }.nav-link::after { display: none; }.header-actions { justify-self: end; }.hero { grid-template-columns: minmax(21rem, 0.7fr) minmax(37rem, 1.3fr); }.demo-mobile { right: -0.4rem; transform: scale(0.88); transform-origin: bottom right; }.benefit-card { padding: 1rem; }.benefit-icon { width: 2.4rem; height: 2.4rem; }
}

@media (max-width: 62rem) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 3rem; }.hero-copy { max-width: 44rem; padding-left: 0; }.hero-visual { min-height: 39rem; }.demo-dashboard { right: 3%; width: 82%; }.learner-illustration { left: 0; }.demo-mobile { right: 0; }.benefit-grid { grid-template-columns: repeat(2, 1fr); }.benefit-card { border-bottom: 1px solid var(--border); }.benefit-card:nth-child(even) { border-right: 0; }.benefit-card:last-child { grid-column: 1 / -1; border-bottom: 0; }.metric-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 0; }.metric:nth-child(2) { border-right: 0; }.teacher-section { grid-template-columns: 1fr; }.trust { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 42rem) {
  :root { --shell: min(92vw, 36rem); }.site-header { min-height: 4.8rem; }.header-inner { min-height: 4.8rem; grid-template-columns: 7.4rem auto 1fr; }.brand-link, .brand-logo { width: 7.4rem; }.header-actions .button { display: none; }.theme-control > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }.theme-toggle { width: 3rem; height: 1.7rem; }.theme-thumb { width: 1.1rem; height: 1.1rem; }.theme-toggle[aria-checked="true"] .theme-thumb { transform: translateX(1.28rem); }.nav-toggle { width: 2.45rem; height: 2.45rem; }.hero { padding-top: 2rem; }.hero h1 { font-size: clamp(2.55rem, 13vw, 3.55rem); }.hero-lead { font-size: 0.95rem; }.button-row { flex-direction: column; }.button { width: 100%; }.scope-note { font-size: 0.67rem; }.hero-visual { min-height: 29rem; margin-inline: -0.65rem; }.soft-orbit { inset: 0; }.window-lines { display: none; }.demo-dashboard { top: 1.5rem; right: 0.35rem; width: 89%; min-height: 20rem; }.demo-topbar { height: 3rem; padding: 0.35rem 0.65rem; }.demo-topbar img { width: 5.2rem; }.demo-badge { font-size: 0.43rem; }.demo-body { grid-template-columns: 1fr; }.demo-sidebar { display: none; }.demo-content { padding: 0.7rem; }.demo-content h2 { font-size: 0.82rem; }.demo-intro { display: none; }.demo-stats { gap: 0.25rem; }.demo-stats > div { grid-template-columns: 1fr; padding: 0.35rem; }.demo-stats .dot { display: none; }.demo-stats strong { grid-column: 1; }.demo-stats small { font-size: 0.42rem; }.chart-card { padding: 0.45rem; }.learner-illustration { bottom: -0.2rem; left: -0.5rem; width: 15.5rem; }.demo-mobile { right: -0.1rem; bottom: -0.3rem; width: 8.8rem; min-height: 19rem; padding: 0.8rem 0.55rem 2rem; border-width: 4px; transform: none; }.demo-mobile img { width: 5.4rem; }.demo-mobile p { font-size: 0.72rem; }.mobile-grid { grid-template-columns: 1fr; }.mobile-grid span:nth-child(2) { display: none; }.mini-chart { height: 4rem; }.benefits { padding-top: 0.2rem; }.benefit-grid { grid-template-columns: 1fr; }.benefit-card, .benefit-card:nth-child(even), .benefit-card:last-child { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--border); }.benefit-card:last-child { border-bottom: 0; }.benefit-card p { font-size: 0.72rem; }.metrics-heading { align-items: flex-start; flex-direction: column; gap: 0.7rem; }.metrics-heading h2 { font-size: 1.7rem; }.metric-grid { grid-template-columns: 1fr; }.metric, .metric:nth-child(2) { border-right: 0; border-bottom: 1px solid #5b7184; }.metric:last-child { border-bottom: 0; }.teacher-card, .cta-card { grid-template-columns: 1fr; padding: 1.4rem; }.teacher-preview { margin-top: 1rem; transform: none; }.cta-card img { width: 14rem; margin: 1rem auto -1rem; }.trust { grid-template-columns: 1fr; gap: 1.35rem; padding-bottom: 3rem; }.footer-grid { grid-template-columns: 1fr; gap: 1.7rem; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 0.35rem; }.status-item { grid-template-columns: auto 1fr; }.status-item > strong { grid-column: 2; }
}

@media (max-width: 42rem) {
  .about-page { padding-block: 2.5rem; }.about-sections { grid-template-columns: 1fr; margin-top: 1.5rem; }
}

/* Corrective block before Phase 9.5: direct public login remains visible on mobile. */
@media (max-width: 42rem) {
  .public-site .header-inner { grid-template-columns: 3.25rem 2.45rem minmax(0, 1fr); gap: clamp(0.3rem, 1.6vw, 0.6rem); }
  .public-site .brand-link, .public-site .brand-picture, .public-site .brand-logo { width: 3.25rem; }
  .public-site .header-actions { min-width: 0; gap: clamp(0.25rem, 1.2vw, 0.45rem); }
  .public-site .header-actions .button { display: inline-flex; width: auto; min-height: 2.35rem; flex: 0 0 auto; padding: 0.4rem clamp(0.42rem, 1.8vw, 0.65rem); font-size: clamp(0.67rem, 2.6vw, 0.75rem); white-space: nowrap; }
}

/* Phase 4: student study portal */
.message-list { padding-top: 1rem; }
.student-actions { display: flex; justify-content: flex-end; margin: 1rem 0; }
.study-deck-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin: 2rem 0; }
.study-deck-card { display: flex; min-height: 13rem; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.study-deck-card h2 { margin: 0.35rem 0; }.study-deck-card span, .study-deck-card p { color: var(--muted); }.study-deck-card form, .study-deck-card .button { width: 100%; }
.course-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }.course-summary h2 { width: 100%; }.course-summary span { padding: 0.35rem 0.7rem; border-radius: 99px; background: var(--surface-soft); }
.field-order ul { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }.field-order label, .field-affects_schedule label { display: flex; align-items: center; gap: 0.5rem; }.field-order input, .field-affects_schedule input { width: 1.15rem; min-height: 1.15rem; }
.schedule-choice { display: grid; gap: 0.7rem; padding: 1rem; border: 2px solid var(--teal-500); border-radius: 0.8rem; background: var(--surface-soft); }.schedule-choice > div { display: grid; grid-template-columns: 1.3rem 1fr; align-items: start; gap: 0.7rem; }.schedule-choice input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; }.schedule-choice label { display: grid; gap: 0.25rem; cursor: pointer; }.schedule-choice label span, .schedule-choice p { color: var(--muted); }.schedule-choice p { margin: 0; font-size: 0.8rem; }
.study-page { height: calc(100dvh - 4rem - 2px); min-height: 34rem; padding: 0.75rem 0; overflow: hidden; }.study-shell { display: grid; width: min(94%, 76rem); height: 100%; margin-inline: auto; align-content: start; grid-template-rows: repeat(4, auto); gap: 0.6rem; }.study-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }.study-heading h1 { max-width: 44rem; margin: 0; overflow: hidden; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }.study-heading-line { display: flex; align-items: center; gap: 0.45rem; }.study-heading-line .back-link, .study-heading-line .eyebrow { margin: 0; }.study-heading-actions { display: flex; align-items: end; gap: 0.65rem; }
.study-counters { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); }.study-counters span { display: grid; min-width: 6rem; padding: 0.65rem 0.85rem; border-right: 1px solid var(--border); color: var(--muted); font-size: 0.7rem; }.study-counters span:last-child { border: 0; }.study-counters strong { font-size: 1.25rem; }.counter-new strong { color: var(--blue); }.counter-learning strong { color: var(--coral); }.counter-review strong { color: var(--green); }
.study-notice { margin: 0; padding: 0.45rem 0.75rem; border-left: 0.3rem solid var(--yellow); border-radius: 0.4rem; background: var(--surface-soft); font-size: 0.78rem; }
.study-card { display: grid; min-height: 0; max-height: calc(100dvh - 15rem); padding: 0.8rem; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-md); }.study-card.is-revealed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }.study-side { min-width: 0; max-height: calc(100dvh - 16.6rem); padding: 0.85rem; overflow: auto; border-radius: 0.7rem; background: var(--background); scrollbar-gutter: stable; }.study-card.is-revealed .study-back { border-left: 1px solid var(--border); }.card-side-label { margin: 0 0 0.45rem; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }.card-content { overflow-wrap: anywhere; font-size: clamp(1rem, 1.8vw, 1.35rem); }.card-content img { display: block; width: auto; max-width: min(100%, 220px); height: auto; max-height: min(220px, 34vh); margin: 0.45rem auto; object-fit: contain; }.card-content img.is-expandable { cursor: zoom-in; }.card-content img.is-expandable:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }.card-answer { animation: answer-in 180ms ease-out; }.card-answer audio { width: min(100%, 24rem); margin-top: 0.55rem; }
.authenticated-app .show-answer { min-height: 3.15rem; font-size: 0.94rem; font-weight: 850; letter-spacing: 0.01em; }
.study-controls .show-answer kbd { margin-left: 0.5rem; border-color: rgb(255 255 255 / 75%); color: #064c47; background: #fffdf8; font-size: 0.7rem; font-weight: 850; opacity: 1; box-shadow: 0 1px 2px rgb(4 26 37 / 18%); }
[data-theme="dark"] .study-controls .show-answer kbd { border-color: #fffdf8; color: #064c47; background: #fffdf8; }
@keyframes answer-in { from { opacity: 0; transform: translateY(0.4rem); } }
.study-controls { display: grid; place-items: center; }.study-controls form { margin: 0; }.show-answer { min-width: 16rem; }.study-controls kbd, .undo-button kbd, .study-finish kbd { padding: 0.12rem 0.35rem; border: 1px solid var(--border); border-radius: 0.3rem; color: var(--muted); background: var(--background); font: 700 0.62rem/1.2 inherit; }.show-answer kbd { margin-left: 0.4rem; }.rating-grid { display: grid; width: 100%; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; }.rating-grid button { display: flex; min-height: 2.8rem; align-items: center; justify-content: center; gap: 0.5rem; border: 2px solid transparent; border-radius: 0.7rem; color: var(--text); background: var(--surface); font: inherit; font-weight: 850; cursor: pointer; }.rating-grid button:active { transform: translateY(1px); filter: brightness(0.96); }.rating-grid button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }.rating-again { border-color: var(--coral) !important; }.rating-hard { border-color: var(--yellow) !important; }.rating-good { border-color: var(--green) !important; }.rating-easy { border-color: var(--teal-500) !important; }.undo-button { display: inline-flex; min-height: 2.4rem; align-items: center; gap: 0.35rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 0.6rem; color: var(--teal-600); background: var(--surface); font: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; }.undo-button:disabled { color: var(--muted); opacity: 0.55; cursor: not-allowed; }.study-finish { display: grid; justify-items: start; gap: 0.8rem; }.study-finish h1, .study-finish p { margin: 0; }.study-finish .button { margin-top: 0.4rem; }.study-image-dialog { width: min(92vw, 72rem); max-width: none; height: min(90dvh, 52rem); padding: 0.8rem; border: 1px solid var(--border); border-radius: 1rem; color: var(--text); background: var(--surface); }.study-image-dialog::backdrop { background: rgb(0 0 0 / 0.72); }.image-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.image-dialog-heading h2 { margin: 0; font-size: 1rem; }.image-dialog-heading button { width: 2.6rem; height: 2.6rem; border: 1px solid var(--border); border-radius: 50%; color: var(--text); background: var(--background); font-size: 1.4rem; cursor: pointer; }.study-image-dialog > img { display: block; max-width: 100%; height: calc(100% - 3rem); margin: 0 auto; object-fit: contain; }

@media (max-width: 48rem) {
  .study-deck-grid { grid-template-columns: 1fr; }.study-page { height: auto; min-height: calc(100dvh - 4.5rem); overflow: visible; }.study-shell { height: auto; min-height: inherit; grid-template-rows: auto; }.study-heading { align-items: stretch; flex-direction: column; }.study-heading h1 { white-space: normal; }.study-heading-actions { align-items: stretch; flex-direction: column; }.undo-button { width: 100%; justify-content: center; }.study-counters span { min-width: 0; padding: 0.55rem; }.study-card, .study-card.is-revealed { min-height: 0; max-height: none; grid-template-columns: 1fr; padding: 0.55rem; overflow: visible; }.study-card.is-revealed .study-back { border-top: 1px solid var(--border); border-left: 0; }.study-side { max-height: none; overflow: visible; }.rating-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Fase 9.2: profesores y permisos */
.account-page { padding-block: clamp(2rem, 5vw, 5rem); }
.account-page h1 { margin: 0.35rem 0; }
.narrow-page { max-width: 52rem; }
.account-grid { display: grid; grid-template-columns: minmax(18rem, .65fr) minmax(24rem, 1.35fr); gap: 1.2rem; align-items: start; margin-top: 1.5rem; }
.account-card { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.stack-form { display: grid; gap: 1rem; }
.stack-form > div { display: grid; gap: .4rem; }
.stack-form > div:has(> input[type="checkbox"]) { grid-template-columns: 1.2rem minmax(0, 1fr); align-items: center; column-gap: .65rem; }
.stack-form > div:has(> input[type="checkbox"]) > label { grid-column: 2; grid-row: 1; }
.stack-form > div:has(> input[type="checkbox"]) > input[type="checkbox"] { grid-column: 1; grid-row: 1; width: 1.2rem; height: 1.2rem; margin: 0; justify-self: start; }
.stack-form input:not([type="checkbox"]), .stack-form select { width: 100%; min-height: 2.8rem; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: .55rem; color: var(--text); background: var(--background); font: inherit; }
.stack-form ul { margin: .35rem 0 0; }
.legal-acceptance-page #id_age_mode { display: grid; gap: .65rem; padding: 0; list-style: none; }
.legal-acceptance-page #id_age_mode label { display: flex; align-items: center; gap: .65rem; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--page); }
.legal-acceptance-page #id_age_mode input { width: 1.2rem; height: 1.2rem; margin: 0; }
.legal-document-summary { padding: 1rem; border: 1px solid var(--border); border-radius: .7rem; background: var(--surface-soft); }
.legal-document-summary h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.legal-document-summary p { margin: .25rem 0; }
.guardian-declaration { padding: 1rem; border-left: .3rem solid var(--teal-600); border-radius: .55rem; background: var(--surface-soft); }
.assignment-checkboxes { display: grid; gap: .45rem; max-height: 16rem; overflow: auto; padding: .8rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--background); }
.assignment-checkboxes > div > label { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); align-items: center; gap: .65rem; cursor: pointer; }
.assignment-checkboxes input[type="checkbox"] { width: 1.2rem; height: 1.2rem; margin: 0; }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(8rem, 1fr)) auto; align-items: end; gap: .75rem; margin-block: 1rem; }
.filter-grid label { display: grid; min-width: 0; gap: .3rem; color: var(--muted); font-size: .8rem; font-weight: 800; }
.filter-grid input, .filter-grid select { width: 100%; min-height: 2.8rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: .55rem; color: var(--text); background: var(--background); font: inherit; }
.admin-list { display: grid; margin-top: 1rem; }
.activity-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.activity-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-block: .65rem; border-bottom: 1px solid var(--border); }
.activity-list li:last-child { border-bottom: 0; }
.admin-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.admin-row div { display: grid; gap: .2rem; min-width: 0; }
.admin-row span { color: var(--muted); overflow-wrap: anywhere; }
.safety-note { padding: 1rem; border: 1px solid var(--teal-500); border-radius: .8rem; background: var(--surface-tint); }
@media (max-width: 58rem) { .account-grid { grid-template-columns: 1fr; } .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-grid .button { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .admin-row { grid-template-columns: 1fr; } }

/* Phase 2: safe Anki analysis and deck management */
.import-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 2rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-left: 0.35rem solid var(--teal-500); border-radius: 0.75rem; background: var(--surface); }
.import-status span { color: var(--muted); font-size: 0.8rem; }
.import-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.import-steps li { display: flex; align-items: center; gap: 0.45rem; min-width: 0; color: var(--muted); font-size: 0.75rem; font-weight: 750; }
.import-steps li::after { content: ""; flex: 1; min-width: 0.5rem; height: 2px; background: var(--border); }
.import-steps li:last-child::after { display: none; }
.import-steps li > span { display: grid; flex: 0 0 1.65rem; width: 1.65rem; height: 1.65rem; place-items: center; border: 2px solid var(--border); border-radius: 50%; background: var(--surface); }
.import-steps .step-done, .import-steps .step-current { color: var(--text); }
.import-steps .step-done > span { border-color: var(--teal-600); background: var(--teal-600); color: white; }
.import-steps .step-done::after { background: var(--teal-500); }
.import-steps .step-current > span { border-color: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 18%, transparent); }
.analysis-review { margin-top: 2rem; }
.status-failed { border-left-color: var(--coral); }
.status-completed { border-left-color: var(--green); }
.progress-panel { margin-top: 2rem; }
.progress-panel::after { display: block; width: 4rem; height: 0.35rem; margin-top: 1rem; border-radius: 99px; background: linear-gradient(90deg, var(--teal-500), var(--yellow), var(--teal-500)); background-size: 200% 100%; content: ""; animation: import-progress 1.2s linear infinite; }
@keyframes import-progress { to { background-position: -200% 0; } }
.import-summary { grid-template-columns: repeat(4, 1fr); }
.import-columns { grid-template-columns: minmax(18rem, 0.9fr) minmax(25rem, 1.1fr); }
.deck-tree { display: grid; gap: 0.25rem; margin-bottom: 1.5rem; }
.deck-tree > div { display: grid; margin-left: calc(var(--depth) * 1.1rem); padding: 0.65rem; border-bottom: 1px solid var(--border); }
.deck-tree span { color: var(--muted); font-size: 0.78rem; }
.field-selected_deck_ids ul { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.field-selected_deck_ids label, .field-exclude_incompatible label, .field-confirm label { display: flex; align-items: center; gap: 0.55rem; }
.field-selected_deck_ids input, .field-exclude_incompatible input, .field-confirm input { width: 1.15rem; min-height: 1.15rem; }
.preview-section { margin-top: 2rem; }
.sample-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sample-card { min-width: 0; overflow-wrap: anywhere; padding: 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); }
.sample-card > span { color: var(--muted); font-size: 0.7rem; }
.sample-card h4 { margin: 0.7rem 0 0.35rem; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.sample-card img { max-height: 10rem; margin-inline: auto; object-fit: contain; }
.anki-audio { display: block; width: min(100%, 20rem); margin: 0.5rem 0; color-scheme: light dark; }
.media-reference-list { margin-bottom: 1rem; }
.media-reference-list summary { cursor: pointer; font-weight: 750; }
.media-reference-list ul { max-height: 12rem; overflow: auto; padding-left: 1.25rem; overflow-wrap: anywhere; font-size: 0.8rem; }
.media-ok { color: var(--teal-700); font-weight: 750; }
.result-panel { margin-top: 2rem; }
.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
.result-grid div { padding: 1rem; border-radius: 0.7rem; background: var(--surface-soft); }
.result-grid dt { color: var(--muted); font-size: 0.75rem; }
.result-grid dd { margin: 0.3rem 0 0; font-weight: 850; overflow-wrap: anywhere; }
.deck-management { margin-top: 2rem; }
.reinforced-delete { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; }
.reinforced-delete label { display: grid; gap: 0.2rem; color: var(--muted); font-size: 0.72rem; }
.reinforced-delete input { min-height: 2.3rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 0.45rem; color: var(--text); background: var(--surface); }
.text-button.danger { color: #b42318; }
.app-shell > .back-link { display: block; width: max-content; }
.field-selected_deck_ids ul li label { display: grid; width: max-content; max-width: 100%; grid-template-columns: 1.2rem 1fr; align-items: center; justify-content: start; gap: 0.55rem; }
.field-selected_deck_ids input[type="checkbox"], .field-exclude_incompatible input[type="checkbox"], .field-confirm input[type="checkbox"] { width: 1.2rem !important; height: 1.2rem; min-height: 0; margin: 0; flex: 0 0 auto; }
[data-theme="dark"] .text-button.danger { color: #ff9387; }

@media (max-width: 62rem) {
  .import-summary, .result-grid { grid-template-columns: repeat(2, 1fr); }
  .sample-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 48rem) {
  .import-status { align-items: flex-start; flex-direction: column; }
  .import-steps { grid-template-columns: 1fr; }
  .import-steps li::after { display: none; }
  .import-summary, .result-grid, .sample-grid { grid-template-columns: 1fr; }
  .import-columns { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* Authenticated phase-1 surfaces */
.logout-form { margin: 0; }
.app-section { min-height: 62vh; padding: clamp(3rem, 7vw, 6rem) 0; background: var(--background); }
.app-shell { width: var(--shell); max-width: 76rem; margin-inline: auto; }
.app-shell-narrow { max-width: 34rem; }
.app-section h1 { max-width: 52rem; margin: 0 0 1rem; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.03; }
.app-section h2 { margin: 0 0 1rem; font-size: 1.35rem; }
.app-section > .app-shell > p:not(.eyebrow) { max-width: 48rem; color: var(--muted); }
.app-form { display: grid; gap: 1rem; margin-top: 1.6rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 800; }
.field input, .field textarea, .field select { width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 0.65rem; color: var(--text); background: var(--surface); font: inherit; }
.field select[multiple] { min-height: 7rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid color-mix(in srgb, var(--teal-500) 34%, transparent); border-color: var(--teal-500); }
.field .errorlist { margin: 0; padding: 0; color: #b42318; list-style: none; font-size: 0.88rem; }
.form-alert, .pin-once { margin: 1.25rem 0; padding: 1rem 1.1rem; border-radius: 0.75rem; }
.form-alert { border: 1px solid #f6b6ae; color: #8f1d14; background: #fff0ee; }
.form-alert.message-success { border-color: color-mix(in srgb, var(--green) 55%, var(--border)); color: var(--teal-800); background: var(--teal-100); }
[data-theme="dark"] .form-alert { color: #ffd4cf; background: #481b20; }
[data-theme="dark"] .form-alert.message-success { color: #d8fff8; background: #174d51; }
.pin-once { display: grid; gap: 0.25rem; border: 2px solid var(--sun); background: color-mix(in srgb, var(--sun) 14%, var(--surface)); }
.pin-once strong { font-size: clamp(1.4rem, 4vw, 2.4rem); letter-spacing: 0.08em; }
.pin-once span, .form-note { color: var(--muted); }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
.summary-grid > div, .panel, .management-grid a { border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.summary-grid > div { display: grid; padding: 1.4rem; }
.summary-grid strong { color: var(--teal-500); font-size: 2rem; }
.summary-grid span, .management-grid span, .record-list span { color: var(--muted); }
.management-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.management-grid a { display: grid; gap: 0.45rem; padding: 1.5rem; color: var(--text); text-decoration: none; }
.management-grid a:hover { border-color: var(--teal-500); transform: translateY(-2px); }
.two-column { display: grid; grid-template-columns: minmax(18rem, 0.8fr) minmax(24rem, 1.2fr); gap: 1.4rem; margin-top: 2rem; align-items: start; }
.panel { padding: 1.5rem; }
.panel.app-form { margin-top: 0; }
.record-list { display: grid; gap: 0.65rem; }
.record-list article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.record-list article:last-child { border-bottom: 0; }
.record-list article > div:first-child { display: grid; gap: 0.2rem; }
.record-summary { display: grid; gap: 0.2rem; min-width: 0; }
.record-summary strong, .record-summary span { display: block; }
.selectable-records article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.record-check { align-self: center; }
.bulk-actions { display: grid; gap: 0.8rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 0.8rem; }
.bulk-actions label { display: flex; align-items: center; gap: 0.55rem; }
.bulk-actions label:has(input[type="text"]) { display: grid; }
.detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.detail-heading h1 { margin-bottom: 0.15rem; }
.status-badge { display: inline-flex; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; font-weight: 800; background: var(--surface); }
.status-active { border-color: #4fbf91; }
.status-disabled, .status-inactive { border-color: #f5b61d; }
.status-archived, .status-pending_deletion { border-color: #ff6b5b; }
.dependency-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin: 1rem 0 1.5rem; }
.dependency-grid > div { display: grid; gap: 0.2rem; padding: 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); }
.dependency-grid strong { font-size: 1.65rem; color: var(--teal); }
.dependency-grid span { color: var(--muted); }
.lifecycle-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr); gap: 1.2rem; align-items: start; }
.lifecycle-main, .lifecycle-side { display: grid; gap: 1.2rem; }
.compact-form { margin-top: 0.8rem; }
.field-check label { display: flex; align-items: center; gap: 0.65rem; font-weight: 750; cursor: pointer; }
.field-check input[type="checkbox"] { width: 1.2rem !important; height: 1.2rem; min-height: 0; margin: 0; flex: 0 0 auto; }
.button-stack { display: grid; gap: 0.65rem; }
.danger-zone { border-color: #ff6b5b; background: color-mix(in srgb, var(--surface) 92%, #ff6b5b); }
.button-danger { color: #fff; background: #b42318; border-color: #b42318; }
.button-danger:hover { background: #8f1d14; }
.narrow-shell { width: min(48rem, calc(100% - 2rem)); margin: 0 auto; }
.dependency-list { display: grid; gap: 0.45rem; }
.dependency-list div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding: 0.45rem 0; }
.confirmation-list { padding-left: 2.5rem; }
.record-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.text-button { border: 0; padding: 0.2rem; color: var(--teal-600); background: transparent; font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2rem; }
.back-link { display: inline-block; margin-bottom: 1rem; color: var(--teal-600); font-weight: 800; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem; margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--border); border-radius: 0.85rem; background: var(--surface); }
.filter-bar label { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.filter-bar input, .filter-bar select { min-height: 2.7rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 0.55rem; color: var(--text); background: var(--background); font: inherit; }

@media (max-width: 48rem) {
  .summary-grid, .management-grid, .two-column { grid-template-columns: 1fr; }
  .record-list article { align-items: flex-start; flex-direction: column; }
  .selectable-records article { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .selectable-records .record-actions { grid-column: 2; }
  .dependency-grid { grid-template-columns: repeat(2, 1fr); }
  .lifecycle-layout { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .dependency-grid { grid-template-columns: 1fr; }
  .detail-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 42rem) {
  .hero-visual { overflow: hidden; }
  .learner-illustration { bottom: -1.25rem; left: 0; width: 14rem; height: 22rem; object-fit: cover; object-position: center; }
}

/* Phase 4 responsive corrections: keep study controls legible at every width. */
.mobile-logout-form { display: none; margin: 0; }
.study-heading-copy { display: grid; min-width: 0; gap: 0.45rem; }
.study-heading-copy .back-link { width: max-content; margin: 0 0 0.35rem; }
.study-heading-copy .eyebrow { margin: 0; }
.study-heading-copy h1 { overflow-wrap: anywhere; }
.study-counters { flex: 0 0 auto; min-width: 21rem; }
.study-counters span { min-width: 0; overflow-wrap: normal; }
.field-order ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.field-order li { min-width: 0; }
.field-order label {
  display: flex;
  min-height: 3rem;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--surface);
  white-space: nowrap;
  cursor: pointer;
}
.field-order input[type="radio"] {
  width: 1.2rem !important;
  height: 1.2rem;
  min-height: 0;
  flex: 0 0 1.2rem;
  margin: 0;
  padding: 0;
}

@media (max-width: 70rem) {
  .study-heading { align-items: stretch; flex-direction: column; }
  .study-counters { width: 100%; min-width: 0; }
}

@media (max-width: 42rem) {
  .mobile-logout-form { display: block; }
  .mobile-logout-button {
    width: 100%;
    border: 0;
    text-align: left;
    cursor: pointer;
  }
  .study-counters span { padding: 0.55rem 0.45rem; }
  .field-order ul { grid-template-columns: 1fr; }
}

/* Phase 5: teacher overview, progress and per-deck study pace. */
.teacher-portal .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.teacher-portal .section-heading h1, .teacher-portal .section-heading p { margin-bottom: 0; }
.teacher-summary { grid-template-columns: repeat(4, 1fr); }
.teacher-counter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.2rem 0 2rem; }
.teacher-counter { display: grid; gap: 0.2rem; padding: 1.1rem 1.25rem; border: 1px solid var(--border); border-radius: 1rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.teacher-counter strong { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.teacher-counter span { color: var(--muted); font-size: 0.78rem; font-weight: 750; }
.teacher-counter.counter-new { border-top: 0.28rem solid var(--blue); }.teacher-counter.counter-new strong { color: var(--blue); }
.teacher-counter.counter-learning { border-top: 0.28rem solid var(--coral); }.teacher-counter.counter-learning strong { color: var(--coral); }
.teacher-counter.counter-review { border-top: 0.28rem solid var(--green); }.teacher-counter.counter-review strong { color: var(--green); }
.teacher-counter.counter-due { border-top: 0.28rem solid var(--yellow); }.teacher-counter.counter-due strong { color: var(--teal-700); }
.teacher-two-column { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(17rem, 0.6fr); gap: 1.2rem; margin-bottom: 1.2rem; }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-heading h2, .panel-heading p { margin: 0; }.panel-heading > span { color: var(--muted); font-size: 0.75rem; }
.teacher-callout { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: linear-gradient(145deg, var(--surface), var(--surface-soft)); }
.teacher-callout h2 { margin-bottom: 0.35rem; }.teacher-callout .button { margin-top: 0.8rem; }
.rhythm-chart { display: flex; min-height: 13rem; align-items: end; justify-content: space-around; gap: 0.55rem; }
.rhythm-column { display: grid; min-width: 0; flex: 1 1 0; justify-items: center; gap: 0.35rem; }
.rhythm-value, .rhythm-column small { color: var(--muted); font-size: 0.68rem; }
.rhythm-track { position: relative; width: min(2rem, 72%); height: 9rem; overflow: hidden; border-radius: 99px; background: var(--surface-soft); }
.rhythm-track i { position: absolute; right: 0; bottom: 0; left: 0; min-height: 0.2rem; height: var(--rhythm-height); border-radius: inherit; background: linear-gradient(180deg, var(--teal-500), var(--teal-700)); }
.rhythm-chart-wide { overflow-x: auto; justify-content: flex-start; }.rhythm-chart-wide .rhythm-column { min-width: 3rem; }
.teacher-table-panel { margin: 1.2rem 0 2rem; padding: 0; overflow: hidden; }.teacher-table-panel .panel-heading { padding: 1.4rem 1.4rem 0; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.teacher-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.teacher-table th, .teacher-table td { padding: 0.9rem 1rem; border-top: 1px solid var(--border); text-align: left; vertical-align: middle; }
.teacher-table thead th { color: var(--muted); background: var(--surface-soft); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.teacher-table tbody th { min-width: 10rem; }.teacher-table td { min-width: 8rem; }
.teacher-table strong, .teacher-table small, .teacher-table .state-line { display: block; }.teacher-table small { margin-top: 0.18rem; color: var(--muted); }
.activity-badge { display: inline-flex; padding: 0.3rem 0.55rem; border-radius: 99px; color: var(--teal-800); background: var(--teal-100); font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
[data-theme="dark"] .activity-badge { color: #d8fff8; background: #174d51; }
.teacher-management { margin: 1rem 0 2rem; }
.teacher-filter { display: grid; grid-template-columns: repeat(5, minmax(8rem, 1fr)) auto auto; align-items: end; }
.teacher-filter label { min-width: 0; }.teacher-filter select { width: 100%; }
.teacher-counter-grid.compact { margin-top: 1rem; }.teacher-counter-grid.compact .teacher-counter { padding-block: 0.8rem; }
.progress-table .state-line { font-weight: 750; }.state-new { color: var(--blue); }.state-learning { color: var(--coral); }.state-review { color: var(--green); }
.detail-summary { grid-template-columns: repeat(3, 1fr); }
.settings-layout { grid-template-columns: minmax(18rem, 0.7fr) minmax(25rem, 1.3fr); }
.settings-list article { display: grid; grid-template-columns: minmax(12rem, 1fr) auto auto; }
.settings-list article > div:nth-child(2) { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0.1rem 0.4rem; }
.settings-list article > a { justify-self: end; }

@media (max-width: 70rem) {
  .teacher-filter { grid-template-columns: repeat(3, 1fr); }
  .teacher-filter .button { width: 100%; }
}

@media (max-width: 62rem) {
  .teacher-summary, .teacher-counter-grid { grid-template-columns: repeat(2, 1fr); }
  .teacher-two-column, .settings-layout { grid-template-columns: 1fr; }
  .teacher-portal .section-heading { align-items: flex-start; flex-direction: column; gap: 1rem; }
}

@media (max-width: 48rem) {
  .teacher-filter { grid-template-columns: 1fr; }
  .teacher-summary, .teacher-counter-grid, .detail-summary { grid-template-columns: 1fr 1fr; }
  .teacher-table { min-width: 0; }
  .teacher-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .teacher-table tbody, .teacher-table tr, .teacher-table th, .teacher-table td { display: block; width: 100%; min-width: 0; }
  .teacher-table tr { padding: 1rem; border-top: 1px solid var(--border); }
  .teacher-table th, .teacher-table td { padding: 0.28rem 0; border: 0; }
  .teacher-table tbody th { margin-bottom: 0.5rem; font-size: 1rem; }
  .teacher-table td::before { display: block; margin-bottom: 0.08rem; color: var(--muted); content: attr(data-label); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
  .teacher-table .teacher-row-action { margin-top: 0.55rem; }
  .teacher-table .teacher-row-action::before { display: none; }
  .settings-list article { grid-template-columns: 1fr auto; }
  .settings-list article > div:nth-child(2) { grid-column: 1; }
}

@media (max-width: 30rem) {
  .teacher-summary, .teacher-counter-grid, .detail-summary { grid-template-columns: 1fr; }
}

/* Fas 6: problematiska kort och pedagogiska insatser */
.intervention-filter { display: grid; grid-template-columns: repeat(4, minmax(9rem, 1fr)); }
.intervention-filter label { min-width: 0; }
.intervention-filter input, .intervention-filter select { width: 100%; }
.field-error { color: var(--coral); font-size: 0.72rem; }
.intervention-summary { grid-template-columns: repeat(3, 1fr); }
.intervention-table .quick-side { display: block; max-width: 22rem; margin-bottom: 0.35rem; overflow-wrap: anywhere; }
.intervention-table .quick-side b { color: var(--muted); font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; }
.indicator-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.status-chip { display: inline-flex; align-items: center; min-height: 1.65rem; padding: 0.2rem 0.55rem; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); background: var(--surface-soft); font-size: 0.65rem; font-weight: 800; }
.status-chip.is-paused, .status-callout.is-paused { border-color: color-mix(in srgb, var(--coral) 60%, var(--border)); color: #8f1d14; background: #fff0ee; }
.status-chip.is-individual, .status-callout.is-individual { border-color: color-mix(in srgb, var(--yellow) 65%, var(--border)); color: var(--teal-800); background: color-mix(in srgb, var(--yellow) 14%, var(--surface)); }
.status-chip.is-note { border-color: color-mix(in srgb, var(--teal-500) 55%, var(--border)); color: var(--teal-800); background: var(--teal-100); }
[data-theme="dark"] .status-chip.is-paused, [data-theme="dark"] .status-callout.is-paused { color: #ffd4cf; background: #481b20; }
[data-theme="dark"] .status-chip.is-note { color: #bcefe6; background: #0d3b3a; }
.intervention-detail-summary { grid-template-columns: repeat(4, 1fr); }
.intervention-preview { margin: 1.2rem 0; }
.intervention-card-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.intervention-card-sides article { min-width: 0; padding: clamp(1.3rem, 3vw, 2rem); }
.intervention-card-sides article + article { border-left: 1px solid var(--border); }
.intervention-card-sides .card-content { font-size: clamp(1rem, 2vw, 1.3rem); }
.intervention-card-sides img { display: block; max-width: 100%; max-height: 18rem; margin: 0.8rem auto; object-fit: contain; }
.intervention-card-sides audio { width: min(100%, 28rem); }
.intervention-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.2rem 0 2rem; }
.intervention-action-card { align-content: start; padding: clamp(1.3rem, 3vw, 2rem); }
.intervention-action-card h2 { margin: 0.2rem 0 0.65rem; }
.intervention-action-card > p:not(.eyebrow) { color: var(--muted); }
.stacked-form, .student-picker { display: grid; gap: 0.55rem; }
.stacked-form label, .student-picker label { color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.stacked-form textarea, .student-picker select { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.7rem; color: var(--text); background: var(--background); font: inherit; resize: vertical; }
.stacked-form .button-row { align-items: center; margin-top: 0.35rem; }
.stacked-form .text-button { align-self: center; }
.status-callout { display: grid; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: 0.75rem; font-weight: 800; }
.status-callout span { font-weight: 500; }

@media (max-width: 70rem) {
  .intervention-filter { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 48rem) {
  .intervention-filter { grid-template-columns: 1fr; }
  .intervention-summary, .intervention-detail-summary { grid-template-columns: 1fr 1fr; }
  .intervention-actions-grid, .intervention-card-sides { grid-template-columns: 1fr; }
  .intervention-card-sides article + article { border-top: 1px solid var(--border); border-left: 0; }
}
@media (max-width: 30rem) {
  .intervention-summary, .intervention-detail-summary { grid-template-columns: 1fr; }
}

/* Fase 9.1: cuenta principal y seguridad */
.account-shell { max-width: 72rem; }
.account-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); }
.account-tabs a { padding: 0.65rem 0.9rem; border-radius: 0.65rem; color: var(--muted); font-weight: 800; text-decoration: none; }
.account-tabs a:hover, .account-tabs a.is-current { color: var(--text); background: var(--surface-tint); }
.account-layout { align-items: start; }
.account-layout .panel, .app-form.panel { padding: clamp(1.25rem, 3vw, 2rem); }
.account-summary { position: sticky; top: 1rem; }
.definition-list { display: grid; gap: 0.9rem; margin: 1.2rem 0 0; }
.definition-list div { display: grid; gap: 0.2rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); }
.definition-list dt { color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.definition-list dd { margin: 0; font-weight: 750; }
.checkbox-field label { display: flex; align-items: flex-start; gap: 0.65rem; }
.checkbox-field input { width: 1.2rem; min-height: 1.2rem; margin-top: 0.2rem; flex: 0 0 auto; }
.session-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
.session-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.2rem; padding: 1.25rem; }
.session-card h2, .session-card p { margin: 0; }
.session-card h2 { font-size: 1.05rem; }
.session-card p { margin-top: 0.2rem; color: var(--muted); font-size: 0.82rem; }
.status-pill { display: inline-flex; padding: 0.42rem 0.7rem; border-radius: 999px; color: var(--teal-800); background: var(--teal-100); font-size: 0.78rem; }
.empty-account-state { padding: 1.5rem; }

@media (max-width: 48rem) {
  .account-summary { position: static; }
  .session-card { grid-template-columns: 1fr; }
  .session-card .button { width: 100%; }
}

/* Subfas 9.3.1: säker elevimport */
.student-import-layout { align-items: start; }
.import-history, .import-review, .import-confirmation { margin-top: 1.25rem; }
.status-banner { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0; padding: 1rem 1.2rem; border: 1px solid var(--border); border-left: 0.4rem solid var(--teal-500); border-radius: 0.8rem; background: var(--surface); }
.status-banner span { color: var(--muted); }
.import-metrics { grid-template-columns: repeat(4, 1fr); }
.metric-card { display: grid; gap: 0.25rem; padding: 1rem 1.2rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); }
.metric-card strong { color: var(--teal-600); font: 800 1.8rem/1 var(--font-heading); }
.metric-card span { color: var(--muted); font-size: 0.78rem; }
.responsive-table { max-width: 100%; overflow-x: auto; }
.responsive-table table { width: 100%; border-collapse: collapse; }
.responsive-table th, .responsive-table td { min-width: 8rem; padding: 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.responsive-table th { color: var(--muted); background: var(--surface-tint); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.responsive-table td:first-child, .responsive-table th:first-child { min-width: 4rem; }
.responsive-table input:not([type="checkbox"]), .responsive-table select { width: 100%; min-width: 10rem; padding: 0.6rem; border: 1px solid var(--border); border-radius: 0.55rem; color: var(--text); background: var(--background); }
.responsive-table td > strong, .responsive-table td > span, .responsive-table td > small { display: block; margin-bottom: 0.3rem; }
.status-new { border-color: var(--green); }
.status-incomplete, .status-invalid_email, .status-duplicate, .status-conflict { border-color: var(--coral); }
.status-existing_other, .status-disabled, .status-archived { border-color: var(--yellow); }
.record-actions form { display: inline-flex; margin-left: 0.5rem; }
.record-actions .text-button { border: 0; color: var(--teal-600); background: transparent; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.import-confirmation input[type="checkbox"] { width: 1.2rem; height: 1.2rem; min-height: 0; margin: 0.25rem 0; }
@media (max-width: 62rem) { .import-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) {
  .status-banner { flex-direction: column; }
  .import-metrics { grid-template-columns: 1fr; }
}

/* Subfas 9.3.2: individuell hantering av flera registreringar. */
.enrollment-management { margin-bottom: 1rem; padding: 0; overflow: visible; }
.enrollment-heading { align-items: flex-start; padding: 1rem; }
.enrollment-heading h2, .enrollment-heading p { margin: 0; }
.enrollment-heading p:not(.eyebrow) { margin-top: 0.25rem; color: var(--muted); font-size: 0.78rem; }
.enrollment-add { position: relative; }
.enrollment-add > summary { list-style: none; cursor: pointer; }
.enrollment-add > summary::-webkit-details-marker { display: none; }
.enrollment-add[open] > form { position: absolute; z-index: 20; top: calc(100% + 0.4rem); right: 0; width: min(22rem, 86vw); padding: 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); box-shadow: var(--shadow-md); }
.enrollment-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.enrollment-groups > section { min-width: 0; padding: 1rem; }
.enrollment-groups > section + section { border-left: 1px solid var(--border); }
.enrollment-groups h3 { margin: 0 0 0.65rem; font-size: 0.9rem; }
.enrollment-list { display: grid; gap: 0.55rem; }
.enrollment-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.65rem; background: var(--surface-soft); }
.enrollment-row > div:first-child { display: grid; min-width: 0; gap: 0.2rem; }
.enrollment-row small { color: var(--muted); font-size: 0.7rem; }
.enrollment-row .status-badge { width: max-content; }
.enrollment-row .record-actions { display: grid; justify-items: end; gap: 0.45rem; }
.enrollment-row details { position: relative; }
.enrollment-row details > summary { color: var(--teal-600); font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.enrollment-history { position: absolute; z-index: 18; top: calc(100% + 0.35rem); right: 0; width: min(26rem, 82vw); max-height: 18rem; overflow-y: auto; padding: 0.8rem; border: 1px solid var(--border); border-radius: 0.65rem; background: var(--surface); box-shadow: var(--shadow-md); }
.enrollment-history p { display: grid; gap: 0.15rem; margin: 0; padding: 0.55rem 0; border-bottom: 1px solid var(--border); font-size: 0.72rem; }
.enrollment-history p:last-child { border-bottom: 0; }
.enrollment-history time, .enrollment-history span { color: var(--muted); }
.enrollment-confirmation .confirmation-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.confirmation-summary > div { display: grid; gap: 0.2rem; }
.confirmation-summary span { color: var(--muted); font-size: 0.72rem; }
.consequence-panel { margin-block: 1rem; }
.consequence-panel h2, .consequence-panel h3 { margin-top: 0; }
.consequence-panel h3 { margin-bottom: 0.35rem; font-size: 0.9rem; }
.consequence-panel p, .consequence-panel li { color: var(--muted); font-size: 0.82rem; }
@media (max-width: 48rem) {
  .enrollment-heading, .enrollment-row { align-items: stretch; flex-direction: column; }
  .enrollment-add, .enrollment-add > summary { width: 100%; }
  .enrollment-add[open] > form { position: static; width: 100%; margin-top: 0.5rem; box-shadow: none; }
  .enrollment-groups, .enrollment-confirmation .confirmation-summary { grid-template-columns: 1fr; }
  .enrollment-groups > section + section { border-top: 1px solid var(--border); border-left: 0; }
  .enrollment-row .record-actions { justify-items: start; }
  .enrollment-history { right: auto; left: 0; }
}

/* Subfas 9.3.2: kursens omvända vy över samma elevregistreringar. */
.course-enrollment-management { margin-block: 1.2rem; }
.course-enrollment-management .section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.course-enrollment-management .section-heading-row h2,
.course-enrollment-management .section-heading-row p { margin: 0; }
.course-enrollment-management .section-heading-row p:not(.eyebrow) { margin-top: 0.3rem; color: var(--muted); }
.enrollment-add-disclosure { position: relative; flex: 0 0 auto; }
.enrollment-add-disclosure > summary { list-style: none; cursor: pointer; }
.enrollment-add-disclosure > summary::-webkit-details-marker { display: none; }
.enrollment-add-disclosure[open] .enrollment-add-form { position: absolute; z-index: 25; top: calc(100% + 0.45rem); right: 0; width: min(24rem, 88vw); padding: 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); box-shadow: var(--shadow-md); }
.course-enrollment-filters { display: grid; grid-template-columns: minmax(12rem, 1.4fr) repeat(2, minmax(10rem, 0.8fr)) auto auto; gap: 0.65rem; align-items: end; margin-block: 1rem 0.5rem; }
.course-enrollment-filters .field { margin: 0; }
.enrollment-counts { color: var(--muted); font-size: 0.78rem; }
.course-enrollment-table td:first-child small { display: block; color: var(--muted); }
.course-enrollment-table .enrollment-actions { position: relative; min-width: 13rem; }
.course-enrollment-table .enrollment-actions > a { font-weight: 800; }
.course-enrollment-table .enrollment-history { position: relative; inset: auto; width: auto; max-height: none; margin-top: 0.45rem; overflow: visible; padding: 0; border: 0; background: transparent; box-shadow: none; }
.course-enrollment-table .enrollment-history > summary { color: var(--teal-600); font-size: 0.72rem; font-weight: 800; cursor: pointer; }
.course-enrollment-table .enrollment-history ol { display: grid; gap: 0.45rem; margin: 0.45rem 0 0; padding-left: 1.2rem; }
.course-enrollment-table .enrollment-history li { font-size: 0.72rem; }
.course-enrollment-table .enrollment-history li span { display: block; color: var(--muted); }
.empty-table-message { color: var(--muted); text-align: center !important; }
.course-enrollment-management .pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.course-deck-management { margin-block: 1.2rem; }
.course-deck-management .section-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.course-deck-management .section-heading-row h2,
.course-deck-management .section-heading-row p { margin: 0; }
.course-deck-management .section-heading-row p:not(.eyebrow) { margin-top: 0.3rem; color: var(--muted); }
.deck-assignment-add-disclosure { position: relative; flex: 0 0 auto; }
.deck-assignment-add-disclosure > summary { list-style: none; cursor: pointer; }
.deck-assignment-add-disclosure > summary::-webkit-details-marker { display: none; }
.deck-assignment-add-disclosure[open] .deck-assignment-add-form { position: absolute; z-index: 25; top: calc(100% + 0.45rem); right: 0; width: min(30rem, 90vw); padding: 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); box-shadow: var(--shadow-md); }
.course-deck-table-wrap { margin-top: 1rem; }
.course-deck-table th,
.course-deck-table td { vertical-align: middle; }
.course-deck-table td:last-child { white-space: nowrap; }

@media (max-width: 64rem) {
  .course-enrollment-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .course-enrollment-management .section-heading-row { flex-direction: column; }
  .enrollment-add-disclosure, .enrollment-add-disclosure > summary { width: 100%; }
  .enrollment-add-disclosure[open] .enrollment-add-form { position: static; width: 100%; margin-top: 0.5rem; box-shadow: none; }
  .course-deck-management .section-heading-row { flex-direction: column; }
  .deck-assignment-add-disclosure, .deck-assignment-add-disclosure > summary { width: 100%; }
  .deck-assignment-add-disclosure[open] .deck-assignment-add-form { position: static; width: 100%; margin-top: 0.5rem; box-shadow: none; }
  .course-enrollment-filters { grid-template-columns: 1fr; }
  .course-enrollment-table-wrap { overflow: visible; }
  .course-enrollment-table, .course-enrollment-table tbody, .course-enrollment-table tr, .course-enrollment-table td { display: block; width: 100%; }
  .course-enrollment-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .course-enrollment-table tr { padding: 0.65rem; border: 1px solid var(--border); border-radius: 0.7rem; }
  .course-enrollment-table tr + tr { margin-top: 0.65rem; }
  .course-enrollment-table td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.5rem; min-width: 0 !important; padding: 0.45rem; border: 0; }
  .course-enrollment-table td::before { content: attr(data-label); color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
  .course-enrollment-table .enrollment-actions { min-width: 0; }
  .course-enrollment-table .empty-table-message { display: block; }
  .course-enrollment-table .empty-table-message::before { content: none; }
}

/* Subfas 9.4: skalbar autentiserad navigation och administration. */
.authenticated-app { overflow-x: hidden; background: var(--background, var(--page)); --shell: min(92%, 1440px); }
.app-frame { display: grid; min-height: 100vh; grid-template-columns: 17rem minmax(0, 1fr); }
.app-workspace { min-width: 0; overflow-x: clip; }
.app-sidebar { position: sticky; z-index: 45; top: 0; display: flex; width: 17rem; height: 100vh; flex-direction: column; overflow-y: auto; border-right: 1px solid var(--border); background: var(--surface); transition: transform 180ms ease; }
.sidebar-brand { display: flex; min-height: 6rem; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.sidebar-brand a { width: 10.5rem; }
.sidebar-close { display: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 0.65rem; color: var(--text); background: var(--surface-soft); font: inherit; font-size: 1.45rem; cursor: pointer; }
.app-navigation { display: grid; gap: 1.15rem; padding: 1.2rem 0.8rem; }
.nav-group { display: grid; gap: 0.25rem; }
.nav-group h2 { margin: 0 0 0.25rem; padding: 0 0.65rem; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-group a { display: flex; min-height: 2.65rem; align-items: center; padding: 0.55rem 0.7rem; border-radius: 0.65rem; font-weight: 800; text-decoration: none; }
.nav-group a:hover { background: var(--surface-soft); }
.nav-group a.is-active { color: var(--teal-800); background: var(--teal-100); box-shadow: inset 0.22rem 0 var(--teal-500); }
.sidebar-secondary { display: grid; gap: 0.4rem; margin-top: auto; padding: 1rem 1.45rem 1.4rem; border-top: 1px solid var(--border); }
.sidebar-secondary a { color: var(--muted); font-size: 0.78rem; font-weight: 750; }
.app-topbar { position: sticky; z-index: 35; top: 0; display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem clamp(1rem, 3vw, 2.4rem); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--page) 94%, transparent); backdrop-filter: blur(16px); }
.sidebar-toggle { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 0.7rem; color: var(--text); background: var(--surface); font: inherit; font-size: 1.2rem; cursor: pointer; }
.app-context { display: grid; min-width: 0; margin-right: auto; line-height: 1.2; }
.app-context span { color: var(--muted); font-size: 0.7rem; }
.app-context strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar-actions { display: flex; align-items: center; gap: 1rem; }
.user-menu { position: relative; }
.user-menu summary { display: grid; min-width: 10rem; padding: 0.55rem 2.2rem 0.55rem 0.8rem; border: 1px solid var(--border); border-radius: 0.7rem; background: var(--surface); cursor: pointer; list-style: none; line-height: 1.2; }
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary::after { position: absolute; top: 0.9rem; right: 0.8rem; content: "⌄"; }
.user-menu summary span { font-weight: 850; }
.user-menu summary small { color: var(--muted); }
.user-menu-panel { position: absolute; right: 0; display: grid; width: 14rem; margin-top: 0.4rem; overflow: hidden; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--surface); box-shadow: var(--shadow-md); }
.user-menu-panel a, .user-menu-panel button { display: block; width: 100%; padding: 0.8rem 1rem; border: 0; color: var(--text); background: transparent; font: inherit; font-weight: 750; text-align: left; text-decoration: none; cursor: pointer; }
.user-menu-panel a:hover, .user-menu-panel button:hover { background: var(--surface-soft); }
.user-menu-panel form { margin: 0; border-top: 1px solid var(--border); }
.sidebar-scrim { display: none; }
.sidebar-collapsed .app-frame { grid-template-columns: 0 minmax(0, 1fr); }
.sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
.global-message, .maintenance-message { padding: 0.65rem 1rem; text-align: center; font-weight: 800; }
.global-message { color: var(--teal-900); background: var(--teal-100); }
.maintenance-message { color: #522b00; background: #ffe29a; }
[data-theme="dark"] .maintenance-message { color: #fff4d6; background: #5c3d08; }
.app-shell-wide { max-width: 92rem; }
.admin-centre .section-heading, .student-list-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.admin-summary { grid-template-columns: repeat(4, 1fr); margin: 1.5rem 0; }
.admin-centre-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0; }
.admin-centre-group { margin-top: 1rem; padding: 1rem; }
.admin-centre-group-title { margin: 0 0 0.75rem; color: var(--teal-700); font-size: 0.9rem; letter-spacing: 0.035em; text-transform: uppercase; }
.admin-centre-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.admin-centre-group-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-centre-card { display: block; color: inherit; text-decoration: none; }
.admin-centre-card:hover { border-color: var(--teal-500); transform: translateY(-2px); }
.admin-centre-card h2, .admin-centre-card h3 { margin: 0 0 0.45rem; font-size: 1.12rem; }
.admin-centre-card p { margin: 0; color: var(--muted); }
.service-panel, .history-section, .email-test { margin-top: 1.2rem; }
.service-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.service-status-grid > div { display: grid; gap: 0.2rem; padding: 0.9rem; border: 1px solid var(--border); border-radius: 0.7rem; background: var(--surface-soft); }
.service-status-grid span { color: var(--muted); font-size: 0.78rem; }
.service-status-grid b { color: var(--teal-700); font-size: 0.72rem; }
.configuration-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.configuration-section { padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.configuration-section .eyebrow { margin-bottom: 0.35rem; }
.configuration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.configuration-grid .field { align-content: start; }
.configuration-grid .field:has(textarea) { grid-column: 1 / -1; }
.configuration-grid .field-check { display: flex; align-items: center; }
.sticky-save { position: sticky; z-index: 20; bottom: 0.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: 0.8rem; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(12px); }
.student-filter { display: grid; grid-template-columns: minmax(15rem, 1.5fr) repeat(3, minmax(9rem, 1fr)) auto auto; }
.student-filter input, .student-filter select { width: 100%; }
.student-list-panel { padding: 0; overflow: hidden; }
.student-list-panel .panel-heading { padding: 1.4rem 1.4rem 0; }
.student-records { padding: 0 1.4rem; }
.result-range { color: var(--muted); font-size: 0.85rem; }
.list-empty { padding: 2rem 0; text-align: center; }
.list-empty h3, .list-empty p { margin: 0; }
.list-empty p { color: var(--muted); }
.bulk-disclosure { margin: 0 1.4rem 1.4rem; border-top: 1px solid var(--border); }
.bulk-disclosure summary { padding: 1rem 0; font-weight: 850; cursor: pointer; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem; border-top: 1px solid var(--border); }
.pagination > div { display: flex; gap: 0.6rem; }

@media (max-width: 76rem) {
  .student-filter { grid-template-columns: repeat(3, 1fr); }
  .student-filter label:first-child { grid-column: span 2; }
  .configuration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-status-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 64rem) {
  .app-frame { display: block; }
  .app-sidebar { position: fixed; left: 0; top: 0; width: min(19rem, 86vw); transform: translateX(-105%); box-shadow: var(--shadow-md); }
  .app-sidebar.is-open { transform: translateX(0); }
  .sidebar-close { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar-scrim { position: fixed; z-index: 40; inset: 0; display: block; visibility: hidden; background: rgb(0 0 0 / 42%); opacity: 0; transition: opacity 180ms ease, visibility 180ms ease; }
  .sidebar-mobile-open .sidebar-scrim { visibility: visible; opacity: 1; }
  .app-topbar { min-height: 4.5rem; }
  .admin-centre .section-heading, .student-list-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 48rem) {
  .app-topbar .theme-control > span { display: none; }
  .app-context { display: none; }
  .user-menu summary { min-width: 0; }
  .user-menu summary span { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-summary, .admin-centre-grid, .admin-centre-group-grid, .admin-centre-group-grid-three, .configuration-grid, .service-status-grid, .student-filter { grid-template-columns: 1fr; }
  .student-filter label:first-child { grid-column: auto; }
  .student-list-heading .button-row, .student-list-heading .button { width: 100%; }
  .pagination { align-items: stretch; flex-direction: column; }
  .pagination > div, .pagination .button { width: 100%; }
  .sticky-save { align-items: stretch; flex-direction: column; }
}

/* Subfas 9.4-korrigering: kompakt Klassöversikt med verktyg före rörligt innehåll. */
.teacher-dashboard.app-section { padding-block: 1.4rem 2.5rem; }
.teacher-dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.teacher-dashboard-header .eyebrow { margin-bottom: 0.25rem; }
.teacher-dashboard-header h1 { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1; }
.teacher-dashboard-header p:last-child { max-width: 48rem; margin: 0.45rem 0 0; color: var(--muted); font-size: 0.9rem; }
.teacher-toolbar { position: relative; z-index: 15; display: flex; min-width: 0; align-items: stretch; margin: 1.2rem 0 1rem; border: 1px solid var(--border); border-radius: 0.85rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.teacher-toolbar a { text-decoration: none; }
.teacher-tools-menu { position: relative; min-width: 13rem; border-right: 1px solid var(--border); }
.teacher-tools-menu summary, .teacher-tool-link { display: flex; min-height: 3.4rem; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.65rem 1rem; color: var(--text); font-size: 0.82rem; font-weight: 850; cursor: pointer; list-style: none; white-space: nowrap; }
.teacher-tools-menu summary { justify-content: flex-start; color: var(--teal-700); }
.teacher-tools-menu summary::-webkit-details-marker { display: none; }
.teacher-tools-menu summary:focus-visible, .teacher-tool-link:focus-visible { position: relative; z-index: 2; }
.teacher-tool-link { min-width: 0; flex: 1 1 0; border-right: 1px solid var(--border); }
.teacher-tool-link:last-child { border-right: 0; }
.teacher-tool-link:hover, .teacher-tools-menu summary:hover { background: var(--surface-soft); }
.tool-icon, .teacher-tool-link > span { color: var(--teal-600); font-size: 1.15rem; }
.teacher-tools-popover { position: absolute; z-index: 25; top: calc(100% + 0.4rem); left: 0; display: grid; width: min(22rem, 82vw); overflow: hidden; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); box-shadow: var(--shadow-md); }
.teacher-tools-popover a { display: grid; gap: 0.15rem; padding: 0.8rem 1rem; color: var(--text); border-bottom: 1px solid var(--border); }
.teacher-tools-popover a:last-child { border-bottom: 0; }
.teacher-tools-popover a:hover { background: var(--surface-soft); }
.teacher-tools-popover span { color: var(--muted); font-size: 0.72rem; }
.teacher-metric-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 1rem; }
.teacher-metric { display: grid; min-width: 0; min-height: 4.7rem; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: 0.6rem; padding: 0.65rem; border: 1px solid var(--border); border-radius: 0.75rem; background: var(--surface); box-shadow: var(--shadow-sm); }
.teacher-metric-icon { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 0.65rem; color: var(--teal-700); background: var(--teal-100); font-size: 1.15rem; font-weight: 900; }
.teacher-metric div { display: grid; min-width: 0; gap: 0.15rem; }
.teacher-metric div span { color: var(--muted); font-size: 0.64rem; font-weight: 750; line-height: 1.15; }
.teacher-metric strong { font: 850 1.35rem/1 var(--font-heading); }
.teacher-metric.metric-new { border-color: color-mix(in srgb, var(--yellow) 55%, var(--border)); }
.teacher-metric.metric-new .teacher-metric-icon { color: #805400; background: color-mix(in srgb, var(--yellow) 18%, var(--surface)); }
.teacher-metric.metric-learning .teacher-metric-icon { color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--surface)); }
.teacher-metric.metric-review .teacher-metric-icon { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--surface)); }
.teacher-metric.metric-due { border-color: color-mix(in srgb, var(--coral) 45%, var(--border)); }
.teacher-metric.metric-due .teacher-metric-icon { color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, var(--surface)); }
.teacher-dashboard-main { display: grid; grid-template-columns: minmax(18rem, 0.72fr) minmax(30rem, 1.28fr); gap: 1rem; align-items: start; }
.recent-activity-panel, .dashboard-students-panel { padding: 0; overflow: visible; }
.recent-activity-panel .panel-heading, .dashboard-students-panel .panel-heading { margin: 0; padding: 1rem 1.1rem 0.75rem; }
.recent-activity-list, .dashboard-student-list { border-top: 1px solid var(--border); }
.recent-activity-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.recent-activity-list article > div { display: grid; min-width: 0; gap: 0.15rem; }
.recent-activity-list article span:not(.activity-state), .recent-activity-list time { overflow: hidden; color: var(--muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-state, .student-presence { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--green); }
.panel-footer-link { display: block; padding: 0.85rem 1rem; font-size: 0.78rem; font-weight: 850; text-align: center; text-decoration: none; }
.dashboard-student-filter { display: grid; grid-template-columns: minmax(12rem, 1.4fr) minmax(8rem, 0.8fr) minmax(8rem, 0.8fr) auto; align-items: end; gap: 0.55rem; padding: 0 1rem 0.8rem; }
.dashboard-student-filter label { min-width: 0; }
.dashboard-student-filter label > span { display: block; margin-bottom: 0.25rem; color: var(--muted); font-size: 0.65rem; font-weight: 800; }
.dashboard-student-filter input, .dashboard-student-filter select { width: 100%; padding: 0.55rem 0.65rem; font-size: 0.75rem; }
.dashboard-student-filter .button { min-height: 2.35rem; padding: 0.45rem 0.8rem; }
.dashboard-student-list article { display: grid; grid-template-columns: auto minmax(11rem, 1fr) minmax(7rem, auto) auto; align-items: center; gap: 0.65rem; padding: 0.68rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.76rem; }
.dashboard-student-list article > div { display: grid; min-width: 0; gap: 0.12rem; }
.dashboard-student-list article > div span, .dashboard-student-list article > span { overflow: hidden; color: var(--muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-student-list article > a { justify-self: end; font-weight: 800; }
.dashboard-pagination { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 1rem; color: var(--muted); font-size: 0.68rem; }
.dashboard-pagination a { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 0.5rem; text-decoration: none; }
.dashboard-pagination strong { margin-left: auto; color: var(--text); font-size: 0.68rem; }
.dashboard-pagination strong + a { margin-left: 0; }
.teacher-secondary-modules { margin-top: 1rem; }
.teacher-secondary-modules .panel { min-height: 0; }
.teacher-secondary-modules .rhythm-chart { min-height: 10rem; }
.teacher-secondary-modules .rhythm-track { height: 6rem; }
.empty-state { padding: 1rem; color: var(--muted); font-size: 0.8rem; }

@media (max-width: 82rem) {
  .teacher-metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .teacher-dashboard-main { grid-template-columns: minmax(16rem, 0.65fr) minmax(26rem, 1.35fr); }
  .teacher-tool-link { padding-inline: 0.65rem; }
}
@media (max-width: 64rem) {
  .teacher-dashboard.app-section { padding-top: 1rem; }
  .teacher-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .teacher-tools-menu { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--border); }
  .teacher-tools-menu summary { justify-content: center; }
  .teacher-tool-link { border-bottom: 0; }
  .teacher-dashboard-main { grid-template-columns: 1fr; }
  .dashboard-student-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-student-filter label:first-child { grid-column: 1 / -1; }
  .dashboard-student-filter .button { width: 100%; }
}
@media (max-width: 48rem) {
  .teacher-dashboard-header h1 { font-size: 2rem; }
  .teacher-dashboard-header p:last-child { font-size: 0.8rem; }
  .teacher-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-tool-link { justify-content: flex-start; border-bottom: 1px solid var(--border); }
  .teacher-tool-link:nth-last-child(-n + 2) { border-bottom: 0; }
  .teacher-tool-link:nth-child(odd) { border-right: 0; }
  .teacher-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teacher-metric { min-height: 4.3rem; }
  .dashboard-student-filter { grid-template-columns: 1fr; }
  .dashboard-student-filter label:first-child { grid-column: auto; }
  .dashboard-student-list article { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dashboard-student-list article > span { display: none; }
  .dashboard-pagination { flex-wrap: wrap; }
  .dashboard-pagination strong { order: 3; width: 100%; margin: 0; text-align: center; }
}
@media (max-width: 25rem) {
  .teacher-tools-menu summary, .teacher-tool-link { font-size: 0.74rem; }
  .teacher-metric { grid-template-columns: 1.9rem minmax(0, 1fr); padding: 0.5rem; }
  .teacher-metric-icon { width: 1.9rem; height: 1.9rem; }
}

/* Subfas 9.4 v1.0.12: systemiskt kompakt mönster för hela den autentiserade appen. */
.app-frame { grid-template-columns: 15rem minmax(0, 1fr); }
.app-sidebar { width: 15rem; }
.sidebar-brand { min-height: 4.8rem; padding-block: 0.55rem; }
.sidebar-brand a { width: 8.6rem; }
.app-navigation { gap: 0.75rem; padding: 0.8rem 0.65rem; }
.nav-group { gap: 0.12rem; }
.nav-group h2 { margin-bottom: 0.12rem; }
.nav-group a { min-height: 2.35rem; gap: 0.7rem; padding: 0.42rem 0.62rem; font-size: 0.79rem; }
.nav-icon { width: 1.18rem; height: 1.18rem; flex: 0 0 auto; fill: none; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; }
.nav-group a.is-active { box-shadow: none; }
.app-topbar { min-height: 4rem; padding-block: 0.45rem; }
.sidebar-toggle { width: 2.45rem; height: 2.45rem; }
.user-menu summary { padding-block: 0.42rem; }

.authenticated-app .app-section,
.authenticated-app .section-shell { min-height: 0; padding-block: 1.15rem 2.2rem; }
.authenticated-app .section-shell { width: var(--shell); margin-inline: auto; }
.authenticated-app .app-section h1,
.authenticated-app .section-shell h1 { max-width: 62rem; margin: 0.18rem 0 0.35rem; font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.08; }
.authenticated-app .app-section h2,
.authenticated-app .section-shell h2 { margin-bottom: 0.55rem; font-size: 1.12rem; }
.authenticated-app .eyebrow { margin-bottom: 0.18rem; font-size: 0.67rem; }
.authenticated-app .page-lead,
.authenticated-app .section-lead,
.authenticated-app .app-shell > p:not(.eyebrow),
.authenticated-app .section-shell > p:not(.eyebrow) { max-width: 62rem; margin-block: 0.3rem 0.7rem; color: var(--muted); font-size: 0.86rem; }
.authenticated-app .back-link { display: inline-flex; margin-bottom: 0.35rem; font-size: 0.78rem; }
.authenticated-app .app-shell > .back-link + .eyebrow,
.authenticated-app .section-shell > .back-link + .eyebrow {
  display: flex;
  width: max-content;
  margin-top: 0.2rem;
}
.authenticated-app .section-heading { align-items: center; gap: 1rem; }
.authenticated-app .button-row { gap: 0.5rem; }
.authenticated-app .button { min-height: 2.45rem; padding: 0.5rem 0.9rem; font-size: 0.8rem; }
.authenticated-app .button-small { min-height: 2.2rem; padding: 0.4rem 0.75rem; }

.authenticated-app .summary-grid { gap: 0.6rem; margin: 0.8rem 0; }
.authenticated-app .summary-grid > div { min-height: 4.5rem; align-content: center; padding: 0.65rem 0.8rem; border-radius: 0.72rem; }
.authenticated-app .summary-grid strong { font-size: 1.45rem; line-height: 1; }
.authenticated-app .summary-grid span { font-size: 0.72rem; }
.authenticated-app .teacher-counter-grid { gap: 0.6rem; margin: 0.8rem 0; }
.authenticated-app .teacher-counter { min-height: 4.5rem; grid-template-columns: auto 1fr; align-items: center; gap: 0.65rem; padding: 0.65rem 0.8rem; border-top-width: 1px; border-radius: 0.72rem; }
.authenticated-app .teacher-counter strong { font-size: 1.45rem; }
.authenticated-app .teacher-counter span { font-size: 0.7rem; }
.authenticated-app .management-grid { gap: 0.65rem; }
.authenticated-app .management-grid a { min-height: 4.8rem; align-content: center; gap: 0.22rem; padding: 0.75rem 0.9rem; border-radius: 0.72rem; }
.authenticated-app .management-grid strong { font-size: 0.88rem; }
.authenticated-app .management-grid span { font-size: 0.73rem; }

.authenticated-app .panel,
.authenticated-app .account-card { padding: 0.9rem 1rem; border-radius: 0.78rem; }
.authenticated-app .two-column,
.authenticated-app .account-grid,
.authenticated-app .admin-centre-grid { gap: 0.75rem; margin-top: 0.85rem; }
.authenticated-app .admin-centre-grid { margin-block: 0.85rem; }
.authenticated-app .admin-centre-card { min-height: 6rem; padding: 0.85rem 1rem; }
.authenticated-app .admin-centre-card h2, .authenticated-app .admin-centre-card h3 { margin-bottom: 0.2rem; }
.authenticated-app .admin-centre-card p { font-size: 0.76rem; }
.authenticated-app .panel-heading { margin-bottom: 0.6rem; }
.authenticated-app .teacher-table-panel { margin-block: 0.8rem; }
.authenticated-app .table-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }
.authenticated-app .teacher-table-panel .panel-heading,
.authenticated-app .student-list-panel .panel-heading { padding: 0.8rem 1rem 0.5rem; }
.authenticated-app .teacher-table th,
.authenticated-app .teacher-table td { padding: 0.62rem 0.72rem; }
.authenticated-app .record-list { gap: 0; }
.authenticated-app .record-list article,
.authenticated-app .admin-row { padding: 0.65rem 0; }
.authenticated-app .record-list span,
.authenticated-app .admin-row span { font-size: 0.75rem; }
.authenticated-app .student-records { padding-inline: 1rem; }
.authenticated-app .bulk-disclosure { margin: 0 1rem 1rem; }
.authenticated-app .pagination { padding: 0.7rem 1rem; }

.authenticated-app .filter-bar,
.authenticated-app .filter-grid { gap: 0.5rem; margin-block: 0.75rem; padding: 0.65rem; }
.authenticated-app .filter-grid { padding: 0; }
.authenticated-app .filter-bar label,
.authenticated-app .filter-grid label { gap: 0.2rem; font-size: 0.7rem; }
.authenticated-app .filter-bar input,
.authenticated-app .filter-bar select,
.authenticated-app .filter-grid input,
.authenticated-app .filter-grid select { min-height: 2.3rem; padding: 0.4rem 0.55rem; font-size: 0.78rem; }
.authenticated-app .app-form,
.authenticated-app .configuration-form,
.authenticated-app .stack-form { gap: 0.65rem; margin-top: 0.8rem; }
.authenticated-app .field { gap: 0.22rem; }
.authenticated-app .field label { font-size: 0.76rem; }
.authenticated-app .field input,
.authenticated-app .field textarea,
.authenticated-app .field select,
.authenticated-app .stack-form input:not([type="checkbox"]),
.authenticated-app .stack-form select { min-height: 2.35rem; padding: 0.45rem 0.6rem; font-size: 0.8rem; }
.authenticated-app .configuration-section { padding: 0.8rem 0.9rem; }
.authenticated-app .configuration-grid { gap: 0.65rem; }
.authenticated-app .configuration-section .form-note { margin-block: 0.45rem 0; font-size: 0.7rem; }
.authenticated-app .sticky-save { bottom: 0.5rem; padding: 0.55rem 0.75rem; }
.authenticated-app .service-panel,
.authenticated-app .history-section,
.authenticated-app .email-test { margin-top: 0.75rem; }
.authenticated-app .service-status-grid { gap: 0.55rem; }
.authenticated-app .service-status-grid > div { padding: 0.65rem; }
.authenticated-app .account-page { padding-block: 1.15rem 2.2rem; }
.authenticated-app .account-card > p { font-size: 0.78rem; }
.compact-page-heading { margin-bottom: 0.65rem; }
.compact-page-heading > p:last-child { margin-block: 0.25rem 0; color: var(--muted); font-size: 0.84rem; }
.compact-action-disclosure { padding: 0; }
.compact-action-disclosure > summary { display: grid; gap: 0.12rem; padding: 0.85rem 1rem; cursor: pointer; list-style-position: inside; }
.compact-action-disclosure > summary span { font-weight: 850; }
.compact-action-disclosure > summary small { margin-left: 1.1rem; color: var(--muted); font-size: 0.7rem; }
.compact-action-disclosure[open] > summary { border-bottom: 1px solid var(--border); }
.compact-action-disclosure > p,
.compact-action-disclosure > form { margin-inline: 1rem; }
.compact-action-disclosure > form { margin-bottom: 1rem; }
.structure-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.structure-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.compact-list-panel { margin-top: 0.8rem; padding: 0.2rem 1rem; }

@media (max-width: 64rem) {
  .app-frame { display: block; }
  .app-sidebar { width: min(17rem, 86vw); }
  .authenticated-app .section-heading { align-items: flex-start; }
}
@media (max-width: 48rem) {
  .authenticated-app .app-section,
  .authenticated-app .section-shell,
  .authenticated-app .account-page { padding-block: 0.8rem 1.5rem; }
  .authenticated-app .app-section h1,
  .authenticated-app .section-shell h1 { font-size: 1.75rem; }
  .authenticated-app .summary-grid,
  .authenticated-app .teacher-counter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .authenticated-app .summary-grid > div,
  .authenticated-app .teacher-counter { min-height: 4rem; }
  .authenticated-app .panel,
  .authenticated-app .account-card { padding: 0.8rem; }
  .authenticated-app .teacher-table tr { padding: 0.75rem; }
  .authenticated-app .configuration-section { padding: 0.7rem; }
  .structure-summary,
  .structure-actions { grid-template-columns: 1fr; }
}

/* Phase 9.5: compact audit, export and backup operations. */
.compact-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0.6rem 0 1rem; }
.compact-page-heading h1 { margin: 0.1rem 0 0.25rem; }
.compact-page-heading p { margin: 0; color: var(--muted); }
.compact-operation { margin-bottom: 1rem; }
.async-operation-notice { margin: 0 0 1rem; }
.compact-inline-form { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; align-items: end; gap: 0.65rem; }
.compact-inline-form label { grid-column: 1 / -1; font-weight: 800; }
.data-table-panel { padding: 0; overflow: hidden; }
.data-table-panel .panel-heading { padding: 0.9rem 1rem 0.45rem; }
.responsive-table { overflow-x: auto; }
.responsive-table table { width: 100%; border-collapse: collapse; }
.responsive-table th, .responsive-table td { padding: 0.72rem 0.8rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.responsive-table th { color: var(--muted); background: var(--surface-soft); font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; }
.responsive-table td small { display: block; max-width: 22rem; margin-top: 0.25rem; color: var(--muted); }
.compact-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(9rem, 1fr)); gap: 0.65rem; margin-bottom: 1rem; }
.compact-filter-grid > div { display: grid; gap: 0.25rem; }
.compact-filter-grid label { font-weight: 750; font-size: 0.82rem; }
.compact-filter-grid .button { align-self: end; }
.audit-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.audit-facts div { min-width: 0; }
.audit-facts dt { color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.audit-facts dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
.audit-state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.audit-state-grid pre, .app-section pre { max-height: 24rem; overflow: auto; padding: 0.75rem; border-radius: 0.55rem; background: var(--surface-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-centre-data-tools { margin-top: 0.8rem; }

/* Compact and explicit administrative cleanup lists. */
.cleanup-filter {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(9rem, 0.35fr) minmax(9rem, 0.35fr);
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
}
.cleanup-filter-field, .cleanup-reason { display: grid; gap: 0.35rem; }
.cleanup-filter label, .cleanup-reason label { font-weight: 800; }
.cleanup-selection { display: grid; gap: 1rem; padding: 0; overflow: hidden; }
.cleanup-toolbar {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.cleanup-count, .cleanup-selection-status { margin: 0; }
.cleanup-selection-status { color: var(--muted); font-size: 0.88rem; font-weight: 750; text-align: right; }
.cleanup-table-wrap { overflow-x: auto; }
.cleanup-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cleanup-table th, .cleanup-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.cleanup-table th { color: var(--muted); background: var(--surface); font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; }
.cleanup-table th:nth-child(1) { width: 10.5rem; }
.cleanup-table th:nth-child(2) { width: 24%; }
.cleanup-table th:nth-child(3) { width: 22%; }
.cleanup-table tr:last-child td { border-bottom: 0; }
.cleanup-table .cleanup-row.is-blocked { background: color-mix(in srgb, var(--coral) 5%, var(--surface)); }
.cleanup-select-cell { text-align: center; }
.cleanup-select-all { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); font-size: 0.76rem; font-weight: 800; text-transform: none; }
.cleanup-select-cell input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--teal-500); }
.cleanup-record-cell strong { display: block; overflow-wrap: anywhere; }
.cleanup-effect-cell span { display: inline-block; font-weight: 800; }
.cleanup-status-line { display: flex; align-items: center; gap: 0.55rem; }
.cleanup-status-line > span:last-child:not(.status-badge) { color: var(--muted); font-size: 0.86rem; }
.cleanup-details { margin-top: 0.55rem; }
.cleanup-details summary { width: max-content; cursor: pointer; color: var(--teal-700); font-weight: 800; }
.cleanup-details summary:hover { text-decoration: underline; }
.cleanup-details summary::marker { color: var(--teal-500); }
.cleanup-details .details-close { display: none; }
.cleanup-details[open] .details-open { display: none; }
.cleanup-details[open] .details-close { display: inline; }
.cleanup-detail-count { color: var(--muted); font-weight: 650; }
.cleanup-details dl { display: grid; gap: 0.4rem; margin: 0.7rem 0 0; }
.cleanup-details dl div { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); }
.cleanup-details dl div:last-child { padding-bottom: 0; border-bottom: 0; }
.cleanup-details dt { color: var(--muted); }
.cleanup-details dd { margin: 0; font-weight: 850; }
.cleanup-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 0 1rem; padding: 0.7rem; }
.cleanup-scope legend { padding-inline: 0.35rem; font-weight: 800; }
.cleanup-scope label { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem; border: 1px solid var(--border); border-radius: 0.65rem; cursor: pointer; }
.cleanup-scope label:has(input:checked) { border-color: var(--teal-500); background: var(--mint); color: var(--navy); }
.cleanup-scope input { flex: 0 0 auto; margin-top: 0.2rem; }
.cleanup-scope span { display: grid; gap: 0.15rem; }
.cleanup-scope small { color: var(--muted); font-size: 0.78rem; font-weight: 500; }
.cleanup-action-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) auto; align-items: end; gap: 0.75rem; padding: 0 1rem 1rem; }
.cleanup-action-grid textarea { min-height: 5rem; resize: vertical; }
.cleanup-action-grid .button { min-height: 3.25rem; }
.cleanup-empty { padding: clamp(1.25rem, 4vw, 2.5rem); text-align: center; }
.cleanup-empty h2 { margin-bottom: 0.35rem; }
.cleanup-empty p { max-width: 42rem; margin: 0 auto; color: var(--muted); }

@media (max-width: 64rem) {
  .compact-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cleanup-table th:nth-child(1) { width: 8rem; }
  .cleanup-table th:nth-child(2), .cleanup-table th:nth-child(3) { width: 22%; }
}
@media (max-width: 40rem) {
  .compact-page-heading { display: grid; }
  .compact-inline-form, .compact-filter-grid, .audit-facts, .audit-state-grid { grid-template-columns: 1fr; }
  .compact-inline-form .button, .compact-page-heading .button { width: 100%; }
  .cleanup-filter, .cleanup-scope, .cleanup-action-grid { grid-template-columns: 1fr; }
  .cleanup-filter .button { width: 100%; }
  .cleanup-toolbar { display: grid; }
  .cleanup-selection-status { text-align: left; }
  .cleanup-table, .cleanup-table tbody { display: block; }
  .cleanup-table thead { display: block; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
  .cleanup-table thead tr { display: block; }
  .cleanup-table thead th { display: none; }
  .cleanup-table thead .cleanup-select-cell { display: block; width: auto; padding: 0; border: 0; background: transparent; }
  .cleanup-table tbody tr { display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem 0.75rem; padding: 1rem; border-bottom: 1px solid var(--border); }
  .cleanup-table tbody tr:last-child { border-bottom: 0; }
  .cleanup-table td { display: block; width: auto; padding: 0; border: 0; }
  .cleanup-table tbody .cleanup-select-cell { grid-row: 1 / span 3; grid-column: 1; }
  .cleanup-record-cell, .cleanup-effect-cell, .cleanup-status-cell { grid-column: 2; }
  .cleanup-effect-cell::before, .cleanup-status-cell::before { display: block; margin-bottom: 0.15rem; color: var(--muted); content: attr(data-label); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
  .cleanup-status-line { align-items: flex-start; flex-direction: column; }
  .cleanup-details summary { width: auto; }
  .cleanup-scope, .cleanup-action-grid { margin-inline: 0; }
  .cleanup-action-grid { padding-inline: 1rem; }
}

/* Public contact, privacy and restricted contact administration. */
.public-site .contact-page { width: var(--shell); margin-inline: auto; }
.contact-page { display: grid; grid-template-columns: minmax(15rem, 0.75fr) minmax(20rem, 1.25fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; padding-block: clamp(2rem, 6vw, 5rem); }
.contact-heading { position: sticky; top: 7rem; }
.contact-heading p:last-child { max-width: 34rem; color: var(--muted); font-size: 1.05rem; }
.contact-form { display: grid; gap: 1rem; }
.contact-form .field small { color: var(--muted); }
.contact-form textarea { min-height: 12rem; resize: vertical; }
.contact-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-privacy-note { padding: 0.9rem 1rem; border-left: 0.25rem solid var(--sun); border-radius: 0.5rem; background: var(--surface-soft); }
.contact-privacy-note p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.86rem; }
.contact-confirmation { max-width: 52rem; padding-block: clamp(3rem, 10vw, 8rem); text-align: center; }
.contact-confirmation .panel { padding: clamp(1.5rem, 5vw, 3rem); }
.confirmation-icon { display: grid; width: 4rem; height: 4rem; place-items: center; margin: 0 auto 1rem; border-radius: 50%; color: var(--teal-deep); background: var(--mint); font-size: 2rem; }
.privacy-page { max-width: 58rem; padding-block: clamp(2rem, 6vw, 5rem); }
.privacy-page section { margin-top: 2rem; }
.privacy-page li { margin-block: 0.35rem; }
.privacy-updated { color: var(--muted); font-weight: 750; }
.contact-message { margin-block: 1rem; }
.plain-message { white-space: normal; overflow-wrap: anywhere; }
.contact-admin-actions { margin-block: 1rem; }
.contact-technical { margin-top: 1rem; }
@media (max-width: 48rem) {
  .contact-page { grid-template-columns: 1fr; }
  .contact-heading { position: static; }
}