/* Shared visual language. Page-specific layouts belong to academy-classroom.css. */
:root {
  color-scheme: light;
  --academy-page: #f4f8ff;
  --academy-white: #fff;
  --academy-blue: #4285ed;
  --academy-blue-soft: #eaf2ff;
  --academy-ink: #1c3158;
  --academy-muted: #6e7f9a;
  --academy-line: #e1e9f5;
  --academy-shadow: 0 4px 20px rgb(37 76 134 / 5%);
  --ink: var(--academy-ink);
  --muted: var(--academy-muted);
  --page: var(--academy-page);
  --card: var(--academy-white);
  --line: var(--academy-line);
  /* Legacy modules use teal for their primary action. Keep their API compatible. */
  --teal: var(--academy-blue);
  --teal-soft: var(--academy-blue-soft);
  --blue: var(--academy-blue);
  --radius: 16px;
}

body { background: var(--page); color: var(--ink); accent-color: var(--blue); }

/* Author display rules must never reveal hidden controls or hidden dialogs. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

.appbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgb(37 76 134 / 3%);
}

.appbar .topbar > .brand, .login-header .brand {
  color: var(--ink);
  gap: 9px;
  line-height: 1.35;
}
.brand > .academy-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--blue);
}
.academy-icon { display: inline-block; vertical-align: middle; pointer-events: none; }

/* Preserve the existing sticky header and its two-row brand/navigation structure. */
.appbar .topbar > .nav {
  gap: 4px 6px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
.appbar .topbar > .nav :is(button, a) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #566985;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.appbar .topbar > .nav :is(button, a):hover {
  color: var(--blue);
  background: #f2f6ff;
}
.appbar .topbar > .nav :is(button, a).active,
.appbar .topbar > .nav [aria-current="page"] {
  color: var(--blue);
  background: var(--teal-soft);
  border-color: transparent;
  font-weight: 750;
}
.appbar .topbar > .nav :is(button, a).active::after {
  background: var(--blue);
  border-radius: 2px;
  height: 2px;
  bottom: 3px;
}
.nav .academy-icon { width: 19px; height: 19px; flex: 0 0 19px; }
.appbar .avatar { background: var(--teal-soft); color: var(--blue); }

.main :is(.panel, .metric, .assignment, .question-card, .wrong,
  .course-level-card, .l1-lesson-card, .course-files-panel, .roster-member,
  .code-editor-area, .code-result-area) {
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--academy-shadow);
}
.main :is(.metric, .assignment, .course-level-card, .l1-lesson-card):hover {
  border-color: #c8dbf8;
}
.main .metric span { color: var(--muted); }
.main .metric strong { color: var(--ink); }
.main :is(.panel-head, .learning-section-head, .course-level-card, .lesson-card, .code-heading) :is(h1, h2, h3),
.course-classroom-head h1 { color: var(--ink); }
.main :is(.course-level-label, .lesson-number, .assignment-mark) {
  color: var(--blue);
  background: var(--teal-soft);
}

/* Quiet white learning surfaces; illustrations are reserved for the new home. */
.main .topic-banner {
  min-height: 0;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--academy-shadow);
}
.main .topic-banner-art { display: none; }
.main .topic-banner > div { max-width: 100%; }
.main .topic-banner h1 { color: var(--ink); }
.main .topic-banner p:not(.eyebrow) { color: var(--muted); }
.main.theme-circle .circle-layout > section.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.main .circle-post { overflow-wrap: anywhere; }

:is(.primary, .secondary, .danger, .icon),
.main :is(.option, .number, .code-icon, .code-modes, .code-modes button),
.field :is(input, select, textarea), .comment-form input,
.course-lesson-select select {
  border-radius: var(--radius);
}
.primary, .main .primary {
  background: var(--blue);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 3px 8px rgb(66 133 237 / 13%);
}
.primary:hover:not(:disabled), .main .primary:hover:not(:disabled) {
  background: #3276df;
  transform: none;
}
.secondary, .main .secondary {
  color: #356dc1;
  background: var(--card);
  border-color: #d3e1f4;
}
.secondary:hover:not(:disabled), .main .secondary:hover:not(:disabled) {
  background: #f3f7ff;
  border-color: #acc8f1;
}
.icon { background: var(--teal-soft); color: var(--blue); }
.field { color: #546b8e; }
.field :is(input, select, textarea), .comment-form input, .course-lesson-select select {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}
.appbar .nav :is(button, a):focus-visible,
:is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.main .tag:not(.good):not(.warn) { color: #5b7398; background: #eef4ff; }
.main .option.selected { border-color: #88b3fa; background: #f0f6ff; }
.main .number.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.main :is(.explanation, .code-pane-head, .course-files-panel > header) {
  background: #f6f9ff;
  border-color: var(--line);
  color: #4d678e;
}
.main .code-modes { background: #edf3fc; }
.main .code-modes button.selected { background: #fff; color: var(--blue); }
.main .code-icon { background: #fff; border-color: var(--line); color: #56739a; }

/* Tables keep their intrinsic width, with overflow owned by their wrapper. */
.main .table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overscroll-behavior-x: contain;
}
.main .table th { color: #6c80a0; background: #f6f9ff; }
.main .table :is(th, td) { border-color: var(--line); }
.main .table tbody tr:hover { background: #f6f9ff; }
.main :is(.student-filters, .toolbar, .student-filter-controls) { min-width: 0; }
.main .student-filter-controls .field { min-width: 0; }

/* Appearance only: native dialog display, open/closed state and stacking survive. */
dialog, .modal {
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgb(28 49 88 / 14%);
}
dialog::backdrop { background: rgb(28 49 88 / 25%); }
.toast { border-radius: var(--radius); background: var(--ink); }

@media (max-width: 560px) {
  .appbar .topbar > .nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .appbar .topbar > .nav :is(button, a) {
    min-width: 0;
    min-height: 44px;
    padding: 8px 4px;
    gap: 5px;
    font-size: 13px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .nav .academy-icon { width: 18px; height: 18px; flex-basis: 18px; }
  .appbar .topbar > .brand { font-size: 16px; }
  .brand > .academy-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .main .topic-banner { padding: 20px; }
}