/* Page layout */
.container {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-2xl);
}

.stack > * + * { margin-top: var(--space-md); }
.row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* Child header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-surface) 85%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--border-width-sm) solid var(--color-divider);
}
.app-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-xs) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 4rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: var(--tracking-heading);
}
.brand:hover { color: var(--color-text); }
.brand .logo { width: 2rem; height: 2rem; }
.brand-accent { color: var(--color-primary); }
.header-spacer { flex: 1; }

/* Centered auth layout */
.auth-layout {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--space-lg) var(--space-md);
}
.auth-layout .auth-card { width: 100%; max-width: 26rem; }
.auth-corner { position: fixed; top: var(--space-md); right: var(--space-md); }

/* Subject grid */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: var(--space-lg);
}
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-md);
}

/* Quiz session: progress / question / actions */
.quiz-session {
  display: grid;
  grid-template-rows: auto 1fr auto;
  flex: 1 0 auto;
}
.quiz-top {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.quiz-top-inner, .quiz-main, .quiz-actions-inner { max-width: 820px; margin: 0 auto; width: 100%; }
.quiz-main { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.quiz-actions {
  position: sticky;
  bottom: 0;
  padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: var(--border-width-sm) solid var(--color-divider);
}
.quiz-actions-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "lead go";
  gap: var(--space-sm);
  align-items: center;
}
.quiz-reveal { grid-area: lead; justify-self: start; }
.quiz-go { grid-area: go; }
/* Result and explanation are placed in the grid of the action row. */
.quiz-feedback { display: contents; }
.quiz-actions.feedback .quiz-actions-inner { grid-template-areas: "lead go" "text text"; }

/* Phones keep the bar at the bottom: the stage does not exist for layout there. */
.quiz-stage { display: contents; }
@media (max-width: 640px) {
  .quiz-actions.feedback { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .quiz-actions.feedback .quiz-actions-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lead" "text" "go";
  }
  .quiz-actions.feedback .quiz-go { justify-content: flex-end; }
  .quiz-actions.feedback .feedback-body { max-height: 34vh; max-height: 34dvh; overflow-y: auto; }
  /* Keep toasts above the sticky bar. */
  .quiz-session ~ .toasts { bottom: calc(6rem + env(safe-area-inset-bottom)); }
}
/* Wider screens: the action row follows the answers and covers nothing (decision 155). */
@media (min-width: 641px) {
  .quiz-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-self: start;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-md);
  }
  .quiz-main { padding: 0; max-width: none; margin: 0; }
  .quiz-actions {
    position: static;
    padding: var(--space-sm) var(--space-md);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: var(--border-width-sm) solid transparent;
    border-radius: var(--radius-lg);
  }
}

/* Teacher portal: sidebar + main */
.teacher-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  flex: 1 0 auto;
}
/* Fixed, not sticky: at full height inside the layout it would push the footer
   below the fold on every page. */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border-right: var(--border-width-sm) solid var(--color-card-border);
}
.sidebar-nav { display: flex; flex-direction: column; gap: var(--space-2xs); }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--control-height);
  padding: 0 var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
button.sidebar-link { border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; }
.sidebar-link:hover { background: var(--color-surface-alt); color: var(--color-text); }
.sidebar-link[aria-current="page"] { background: var(--color-secondary-soft); color: var(--color-secondary); }
.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-xs); }
.sidebar-user { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; padding: 0 var(--space-sm); }
.teacher-main { grid-column: 2; padding: var(--space-xl) var(--space-xl) var(--space-3xl); min-width: 0; }
.teacher-main-inner { max-width: 1100px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.page-head h1 { margin: 0; }
.page-head p { margin: var(--space-2xs) 0 0; color: var(--color-text-muted); }

.toolbar {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(8rem, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.toolbar .form-group { margin-bottom: 0; }
.section-stack > * + * { margin-top: var(--space-lg); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Footer with the operator's links (decision 33). The designs choose its
 * surface through tokens (decision 157). */
.site-footer {
  margin-top: auto;
  padding: 0 var(--space-md) env(safe-area-inset-bottom);
  font-size: var(--font-size-sm);
  background: var(--color-footer-bg);
  border-top: var(--border-width-sm) solid var(--color-footer-line);
}
.site-footer nav { display: flex; justify-content: center; flex-wrap: wrap; column-gap: var(--space-lg); }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--control-height); color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-text); }
.teacher-layout ~ .site-footer { margin-left: var(--sidebar-width); }
@media print {
  .site-footer { display: none; }
}

/* Tablet & below: sidebar becomes a top bar */
@media (max-width: 1023px) {
  .teacher-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar {
    position: sticky;
    width: auto;
    height: auto;
    z-index: 40;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-right: 0;
    border-bottom: var(--border-width-sm) solid var(--color-divider);
  }
  .sidebar-nav { flex-direction: row; flex: 1; overflow-x: auto; scrollbar-width: none; }
  .sidebar-footer { margin-top: 0; flex-direction: row; align-items: center; }
  .sidebar-user { display: none; }
  .sidebar-footer .sidebar-link { width: auto; }
  .sidebar-footer .row { flex-wrap: nowrap; gap: 0; }
  .teacher-main { grid-column: auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); }
  .teacher-layout ~ .site-footer { margin-left: 0; }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  h1 { font-size: 1.6rem; }
  .sidebar-link .label { display: none; }
  .sidebar-link { padding: 0 var(--space-sm); }
  .sidebar .brand-text { display: none; }
  .toolbar { grid-template-columns: 1fr; }
  .subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
}

/* Room for the navigation with the admin entry on phones (decision 107). */
@media (max-width: 479px) {
  .sidebar { gap: var(--space-2xs); padding-inline: var(--space-xs); }
  .sidebar-nav { gap: 0; }
  .sidebar-link { padding: 0 var(--space-xs); }
}

/* Room for the language switcher on phones (decision 81): the child header
   shows only the logo, whose wordmark stays the accessible name of the link,
   and no level name, the teacher bar drops its logo, and the switcher shows
   only the globe. */
@media (max-width: 640px) {
  .has-language-switch .brand-text,
  .has-language-switch .level-chip .level-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sidebar.has-language-switch .brand { display: none; }
  .has-language-switch .language-code { display: none; }
}

@media (min-width: 1440px) {
  .container { max-width: 960px; }
}

#subject-head { gap: var(--space-md); margin-bottom: var(--space-xs); }
#subject-head h1 { margin: 0; }

/* Counter of open notices in the navigation (decision 29) */
.nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4em; padding: 0 0.35em;
  margin-left: auto;
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg); color: var(--color-warning);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.5;
}
.nav-count[hidden] { display: none; }
/* Without labels the counter sits on the icon, so all icons fit a phone. */
@media (max-width: 640px) {
  .sidebar-link { position: relative; }
  .nav-count { position: absolute; top: 0; right: 0; margin: 0; min-width: 1.3em; padding: 0 0.25em; }
}