/**
 * Playinform Secretary — teacher workspace shell.
 *
 * Self-contained token set: the workspace is a fixed-viewport app shell and does
 * not mount `SiteScene`, so it declares its own semantic palette instead of
 * inheriting `.site-scene` tokens. Palettes only swap colour, never density.
 */

.secretary-app,
.secretary-boot,
.sec-overlay {
  /* Classic: neutral cold work surface + blue accent (~20% accent surfaces). */
  --sec-bg: #eef1f5;
  --sec-surface: #ffffff;
  --sec-surface-2: #f7f9fb;
  --sec-surface-3: #e8edf3;
  --sec-ink: #122033;
  --sec-ink-2: #3d5166;
  --sec-ink-3: #5d7388;
  --sec-line: #d5dee8;
  --sec-line-strong: #aebeca;
  --sec-accent: #0b57c7;
  --sec-accent-ink: #ffffff;
  --sec-accent-soft: #e8f0fc;
  --sec-ok-bg: #e8f6ee;
  --sec-ok-ink: #146338;
  --sec-ok-line: #6fba90;
  --sec-warn-bg: #fdf3e3;
  --sec-warn-ink: #7a4a08;
  --sec-warn-line: #d4a24c;
  --sec-danger-bg: #fdecee;
  --sec-danger-ink: #8f1f2b;
  --sec-danger-line: #d98189;
  --sec-info-bg: #eaf1fc;
  --sec-info-ink: #164b96;
  --sec-info-line: #7ba6e4;
  --sec-shadow: 0 1px 2px rgba(15, 34, 51, .05), 0 6px 18px rgba(15, 34, 51, .05);
  --sec-radius: 10px;
  --sec-radius-sm: 7px;
  --sec-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sec-sidebar-width: 208px;
  --sec-sidebar-collapsed: 64px;
  --sec-work-max: 1400px;
  --sec-rail-width: 300px;
}

html[data-palette="poisoned"] :is(.secretary-app, .secretary-boot, .sec-overlay) {
  /* Neutral deep charcoal + green accent. */
  --sec-bg: #121418;
  --sec-surface: #1a1d22;
  --sec-surface-2: #22262c;
  --sec-surface-3: #2b3038;
  --sec-ink: #f2f4f6;
  --sec-ink-2: #b8c0c9;
  --sec-ink-3: #87919d;
  --sec-line: #323841;
  --sec-line-strong: #4a525e;
  --sec-accent: #8fd94a;
  --sec-accent-ink: #121418;
  --sec-accent-soft: #24301c;
  --sec-ok-bg: #1a2e20;
  --sec-ok-ink: #b6f2c4;
  --sec-ok-line: #46955f;
  --sec-warn-bg: #322714;
  --sec-warn-ink: #ffdf9c;
  --sec-warn-line: #a67f2f;
  --sec-danger-bg: #351c24;
  --sec-danger-ink: #ffb3c1;
  --sec-danger-line: #b45f75;
  --sec-info-bg: #1c2430;
  --sec-info-ink: #b7c8ff;
  --sec-info-line: #5d6fb5;
  --sec-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .28);
}

html[data-palette="immolated"] :is(.secretary-app, .secretary-boot, .sec-overlay) {
  /* Neutral deep warm charcoal + amber accent. */
  --sec-bg: #141210;
  --sec-surface: #1c1916;
  --sec-surface-2: #25211d;
  --sec-surface-3: #302a24;
  --sec-ink: #f7f1ea;
  --sec-ink-2: #cbb9a8;
  --sec-ink-3: #9a8775;
  --sec-line: #3a322b;
  --sec-line-strong: #56483c;
  --sec-accent: #ffb02e;
  --sec-accent-ink: #1c1206;
  --sec-accent-soft: #33260f;
  --sec-ok-bg: #1a2c1c;
  --sec-ok-ink: #bdf0c3;
  --sec-ok-line: #4d9260;
  --sec-warn-bg: #3a2a0c;
  --sec-warn-ink: #ffe0a3;
  --sec-warn-line: #b07f2b;
  --sec-danger-bg: #3a1c18;
  --sec-danger-ink: #ffbdb5;
  --sec-danger-line: #bd6257;
  --sec-info-bg: #2a2218;
  --sec-info-ink: #ffd3a5;
  --sec-info-line: #a86f42;
  --sec-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .3);
}

html[data-palette="flayed"] :is(.secretary-app, .secretary-boot, .sec-overlay) {
  /* Neutral deep forest charcoal + lime accent with a cool violet whisper. */
  --sec-bg: #101412;
  --sec-surface: #171c19;
  --sec-surface-2: #1e2521;
  --sec-surface-3: #27302b;
  --sec-ink: #f1f6f2;
  --sec-ink-2: #b4c4ba;
  --sec-ink-3: #86968c;
  --sec-line: #2c3831;
  --sec-line-strong: #405248;
  --sec-accent: #a8f03c;
  --sec-accent-ink: #101410;
  --sec-accent-soft: #24301c;
  --sec-ok-bg: #163024;
  --sec-ok-ink: #8dffa7;
  --sec-ok-line: #3b9c56;
  --sec-warn-bg: #32280d;
  --sec-warn-ink: #ffd875;
  --sec-warn-line: #9c710f;
  --sec-danger-bg: #351a1a;
  --sec-danger-ink: #ffaaaa;
  --sec-danger-line: #b34747;
  --sec-info-bg: #1a2430;
  --sec-info-ink: #c4b6ff;
  --sec-info-line: #6d63b0;
  --sec-shadow: 0 1px 2px rgba(0, 0, 0, .42), 0 10px 28px rgba(0, 0, 0, .32);
}

/* The workspace owns the viewport: the legacy staff island would overlap it. */
html[data-secretary-shell="true"] [data-staff-console],
html[data-secretary-shell="true"] .staff-console {
  display: none !important;
}

body[data-secretary-locked] {
  overflow: hidden;
}

/*
 * Neutralize prod-parity `components.css` bare `button` rules that load globally
 * from the root layout (padding 14px 22px, gradient, hover lift). Those are not
 * scoped to design-scene and leak into Secretary chrome — e.g. `.sec-iconbtn`
 * grew to ~46×32 with 14/22 padding and looked miniaturized.
 *
 * `:where(button)` keeps specificity at (0,1,0) so `.sec-btn` / `.sec-iconbtn`
 * in this file still own padding, background, and radius. Also clears the
 * native `appearance: button` chrome for bare workspace controls.
 */
.secretary-app :where(button),
.secretary-boot :where(button),
.sec-overlay :where(button) {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  font-weight: inherit;
  letter-spacing: inherit;
  transform: none;
}

.secretary-app :where(button):hover,
.secretary-boot :where(button):hover,
.sec-overlay :where(button):hover {
  transform: none;
  box-shadow: none;
}

/* Secretary shell owns layout; never inherit prod-parity main flex/max-width/padding. */
html[data-secretary-shell="true"] main.sec-content,
.secretary-app main.sec-content {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  flex: none !important;
  padding: 14px 18px 24px !important;
}

/* Staff-only entry point in the global header, next to the account button. */
.platform-header .secretary-entry {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--action-secondary-border, #a9bfd0);
  border-radius: 9px;
  background: var(--action-secondary-bg, #fff);
  color: var(--action-secondary-text, #102736);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.platform-header .secretary-entry:hover {
  border-color: var(--action-primary-border, #0f57be);
  color: var(--action-primary-bg, #1769e0);
}

@media (max-width: 1080px) {
  .platform-header .secretary-entry {
    display: none;
  }
}

/* -------------------------------------------------------------------- shell */

.secretary-app {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--sec-bg);
  color: var(--sec-ink);
  font-family: var(--sec-font);
  font-size: 14px;
  line-height: 1.45;
}

.secretary-boot {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 40px 20px;
  background: var(--sec-bg);
  color: var(--sec-ink);
  font-family: var(--sec-font);
  text-align: center;
}

.secretary-boot h1 {
  margin: 0;
  font-size: 22px;
}

.secretary-boot p {
  margin: 0;
  color: var(--sec-ink-2);
}

/* ------------------------------------------------------------------ sidebar */

.sec-sidebar {
  width: var(--sec-sidebar-width);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px;
  background: var(--sec-surface);
  border-right: 1px solid var(--sec-line);
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .16s ease;
}

.sec-sidebar[data-collapsed="true"] {
  width: var(--sec-sidebar-collapsed);
}

.sec-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--sec-line);
}

.sec-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  font-weight: 650;
}

.sec-sidebar__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--sec-accent);
  color: var(--sec-accent-ink);
  font-weight: 800;
}

.sec-sidebar__wordmark {
  white-space: nowrap;
  letter-spacing: -.01em;
}

.sec-sidebar__collapse {
  margin-left: auto;
}

.sec-sidebar[data-collapsed="true"] .sec-sidebar__wordmark,
.sec-sidebar[data-collapsed="true"] .sec-navitem__label,
.sec-sidebar[data-collapsed="true"] .sec-sidebar__profile-text,
.sec-sidebar[data-collapsed="true"] .sec-theme__label,
.sec-sidebar[data-collapsed="true"] .sec-sidebar__logout {
  display: none;
}

.sec-sidebar[data-collapsed="true"] .sec-sidebar__collapse {
  margin: 0;
}

.sec-sidebar[data-collapsed="true"] .sec-sidebar__brand {
  flex-direction: column;
  gap: 6px;
}

.sec-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sec-navitem {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--sec-radius-sm);
  color: var(--sec-ink-2);
  text-decoration: none;
  font-weight: 500;
}

.sec-navitem:hover {
  background: var(--sec-surface-2);
  color: var(--sec-ink);
}

.sec-navitem[data-active="true"] {
  background: var(--sec-accent-soft);
  color: var(--sec-ink);
  font-weight: 650;
  box-shadow: inset 2px 0 0 var(--sec-accent);
}

.sec-navitem[data-legacy="true"] .sec-navitem__label::after {
  content: "↗";
  margin-left: 6px;
  font-size: 11px;
  color: var(--sec-ink-3);
}

.sec-navitem__icon {
  width: 20px;
  flex: none;
  text-align: center;
  font-size: 13px;
  opacity: .9;
}

.sec-sidebar__foot {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sec-line);
}

.sec-sidebar__profile {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sec-sidebar__profile-text {
  display: grid;
  min-width: 0;
}

.sec-sidebar__profile-text strong {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-sidebar__profile-text span {
  font-size: 11px;
  color: var(--sec-ink-3);
}

.sec-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--sec-surface-3);
  border: 1px solid var(--sec-line);
  font-weight: 700;
  font-size: 13px;
}

.sec-themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.sec-theme {
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--sec-line-strong);
  cursor: pointer;
  overflow: hidden;
  text-indent: -999em;
}

.sec-theme[data-palette="classic"] { background: linear-gradient(135deg, #f4f7fb, #0b57c7); }
.sec-theme[data-palette="poisoned"] { background: linear-gradient(135deg, #22103b, #c3f44d); }
.sec-theme[data-palette="immolated"] { background: linear-gradient(135deg, #36130d, #ffb02e); }
.sec-theme[data-palette="flayed"] { background: linear-gradient(135deg, #0a2419, #93f23f); }

.sec-theme[data-active="true"] {
  outline: 2px solid var(--sec-accent);
  outline-offset: 1px;
}

.sec-sidebar[data-collapsed="true"] .sec-themes {
  grid-template-columns: repeat(2, 1fr);
}

/* ------------------------------------------------------------------- topbar */

.sec-main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
}

.sec-topbar {
  display: block;
  min-height: 56px;
  padding: 8px 18px;
  background: var(--sec-surface);
  border-bottom: 1px solid var(--sec-line);
}

.sec-topbar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, var(--sec-work-max));
  margin-inline: auto;
}

.sec-topbar__menu {
  display: none;
}

.sec-topbar__titles {
  min-width: 0;
}

.sec-topbar__titles h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.sec-topbar__titles p {
  margin: 0;
  color: var(--sec-ink-3);
  font-size: 12px;
}

.sec-topbar__create-label {
  margin-left: 2px;
}

.sec-topbar__search {
  margin-left: auto;
}

.sec-search {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
  color: var(--sec-ink-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sec-search:hover {
  border-color: var(--sec-line-strong);
  color: var(--sec-ink-2);
}

.sec-search__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-search kbd {
  margin-left: auto;
  padding: 1px 6px;
  border: 1px solid var(--sec-line);
  border-radius: 5px;
  background: var(--sec-surface);
  font-family: inherit;
  font-size: 11px;
}

.sec-bell {
  position: relative;
}

.sec-bell__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--sec-danger-ink);
  color: var(--sec-surface);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.sec-bell__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 300px;
  padding: 12px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
  box-shadow: var(--sec-shadow);
}

.sec-bell__panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.sec-bell__panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}

.sec-bell__panel button {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--sec-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sec-bell__panel button:hover {
  background: var(--sec-surface-2);
}

.sec-bell__panel button span {
  font-size: 12px;
  color: var(--sec-ink-3);
}

.sec-content {
  min-width: 0;
  padding: 14px 18px 24px;
  overflow: auto;
}

.sec-content[data-secretary-screen="submissions"],
.sec-content[data-secretary-screen="assignments"],
.sec-content[data-secretary-screen="cohorts"] {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 12px;
}

.sec-content > * {
  width: min(100%, var(--sec-work-max));
  max-width: var(--sec-work-max);
  margin-inline: auto;
}

.sec-content[data-secretary-screen="submissions"] > *,
.sec-content[data-secretary-screen="assignments"] > *,
.sec-content[data-secretary-screen="cohorts"] > * {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
}

.sec-scrim {
  display: none;
}

/* ----------------------------------------------------------------- controls */

.sec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--sec-line-strong);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
  color: var(--sec-ink);
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.sec-btn:hover:not(:disabled) {
  background: var(--sec-surface-2);
  border-color: var(--sec-ink-3);
}

.sec-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.sec-btn.is-primary {
  background: var(--sec-accent);
  border-color: var(--sec-accent);
  color: var(--sec-accent-ink);
}

.sec-btn.is-primary:hover:not(:disabled) {
  filter: brightness(1.06);
  background: var(--sec-accent);
  border-color: var(--sec-accent);
}

.sec-btn.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sec-ink-2);
}

.sec-btn.is-ghost:hover:not(:disabled) {
  background: var(--sec-surface-2);
  border-color: var(--sec-line);
  color: var(--sec-ink);
}

.sec-btn.is-danger {
  background: var(--sec-danger-bg);
  border-color: var(--sec-danger-line);
  color: var(--sec-danger-ink);
}

.sec-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  flex: none;
  border: 1px solid transparent;
  border-radius: var(--sec-radius-sm);
  background: transparent;
  color: var(--sec-ink-2);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.sec-iconbtn:hover {
  background: var(--sec-surface-2);
  border-color: var(--sec-line);
  color: var(--sec-ink);
}

.sec-iconbtn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.secretary-app :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.sec-overlay :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sec-accent);
  outline-offset: 2px;
  border-radius: var(--sec-radius-sm);
}

.secretary-app :is(input, select, textarea),
.sec-overlay :is(input, select, textarea) {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--sec-line-strong);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
  color: var(--sec-ink);
  font: inherit;
}

.secretary-app textarea,
.sec-overlay textarea {
  min-height: 60px;
  resize: vertical;
}

.sec-muted {
  margin: 4px 0;
  color: var(--sec-ink-3);
  font-size: 12.5px;
}

.sec-warn {
  color: var(--sec-warn-ink);
  font-weight: 550;
}

.sec-segmented {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
}

.sec-segmented button {
  min-height: 26px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--sec-ink-2);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}

.sec-segmented button[data-active="true"] {
  background: var(--sec-surface);
  color: var(--sec-ink);
  box-shadow: var(--sec-shadow);
}

/* ------------------------------------------------------------ today summary */

.sec-today {
  display: grid;
  gap: 12px;
}

.sec-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  min-height: 72px;
  max-height: 82px;
  padding: 1px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-line);
  overflow: hidden;
}

.sec-summary__tile {
  display: grid;
  align-content: center;
  gap: 0;
  padding: 8px 12px;
  background: var(--sec-surface);
}

.sec-summary__label {
  font-size: 11.5px;
  color: var(--sec-ink-3);
}

.sec-summary__value {
  font-size: 18px;
  font-weight: 680;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.sec-summary__hint {
  font-size: 11.5px;
  color: var(--sec-ink-3);
}

.sec-today__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sec-rail-width);
  gap: 14px;
  align-items: start;
}

.sec-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.sec-section-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  text-transform: capitalize;
}

.sec-section-head .sec-btn {
  margin-left: auto;
}

.sec-timeline-wrap {
  min-width: 0;
}

.sec-timeline-day {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.sec-timeline-item {
  display: grid;
  gap: 0;
}

.sec-timeline-row {
  display: grid;
  grid-template-columns: 52px 18px minmax(0, 1fr);
  gap: 0 8px;
  align-items: stretch;
  padding: 4px 0;
}

.sec-timeline-gutter {
  display: grid;
  align-content: start;
  gap: 0;
  padding-top: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sec-timeline-gutter strong {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.sec-timeline-gutter span {
  font-size: 11px;
  color: var(--sec-ink-3);
}

.sec-timeline-track {
  position: relative;
  display: flex;
  justify-content: center;
}

.sec-timeline-track::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--sec-line);
  transform: translateX(-50%);
}

.sec-timeline-node {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-top: 14px;
  border: 2px solid var(--sec-accent);
  border-radius: 50%;
  background: var(--sec-surface);
}

.sec-timeline-node[data-tone="completed"] { border-color: var(--sec-ok-line); background: var(--sec-ok-bg); }
.sec-timeline-node[data-tone="cancelled"] { border-color: var(--sec-danger-line); }
.sec-timeline-node[data-tone="scheduled"] { border-color: var(--sec-accent); }

.sec-timeline-row[data-live="true"] .sec-timeline-node {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec-accent) 25%, transparent);
}

.sec-timeline-body {
  min-width: 0;
}

.sec-gap {
  display: grid;
  grid-template-columns: 52px 18px minmax(0, 1fr);
  gap: 0 8px;
  width: 100%;
  margin: 2px 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sec-gap__times {
  display: grid;
  align-content: center;
  gap: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sec-ink-3);
}

.sec-gap__times strong,
.sec-gap__times span {
  font-size: 11px;
  font-weight: 500;
}

.sec-gap__track {
  position: relative;
  display: flex;
  justify-content: center;
}

.sec-gap__track::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 0;
  border-left: 2px dashed var(--sec-line-strong);
  transform: translateX(-50%);
}

.sec-gap__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px dashed var(--sec-line-strong);
  border-radius: var(--sec-radius-sm);
  background: color-mix(in srgb, var(--sec-surface-2) 70%, transparent);
  color: var(--sec-ink-2);
  font-size: 12.5px;
}

.sec-gap:hover .sec-gap__body,
.sec-gap:focus-visible .sec-gap__body {
  border-color: var(--sec-accent);
  background: var(--sec-accent-soft);
}

.sec-gap__action {
  color: var(--sec-accent);
  font-weight: 600;
  white-space: nowrap;
}

.sec-nowline {
  display: grid;
  grid-template-columns: 52px 18px minmax(0, 1fr);
  gap: 0 8px;
  align-items: center;
  margin: 4px 0;
  color: var(--sec-danger-ink);
  font-size: 11.5px;
  font-weight: 700;
}

.sec-nowline__gutter {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sec-nowline__track {
  position: relative;
  height: 0;
  border-top: 2px solid currentColor;
}

.sec-nowline__track::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.sec-nowline__label {
  letter-spacing: .02em;
}

.sec-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 32px 16px;
  border: 1px dashed var(--sec-line-strong);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
  color: var(--sec-ink-3);
}

/* -------------------------------------------------------------- lesson card */

.sec-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--sec-line);
  border-left: 3px solid var(--sec-line-strong);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
  cursor: pointer;
}

.sec-card:hover {
  border-color: var(--sec-line-strong);
  box-shadow: var(--sec-shadow);
}

.sec-card:focus-visible {
  outline: 2px solid var(--sec-accent);
  outline-offset: 2px;
}

.sec-card[data-tone="attention"] { border-left-color: var(--sec-warn-line); }
.sec-card[data-tone="completed"] { border-left-color: var(--sec-ok-line); }
.sec-card[data-tone="cancelled"] { border-left-color: var(--sec-danger-line); opacity: .72; }
.sec-card[data-tone="rescheduled"] { border-left-color: var(--sec-info-line); }
.sec-card[data-tone="scheduled"] { border-left-color: var(--sec-accent); }

.sec-card__time {
  display: grid;
  gap: 0;
  align-content: start;
  font-variant-numeric: tabular-nums;
}

.sec-card__time strong {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
}

.sec-card__time span {
  font-size: 11px;
  color: var(--sec-ink-3);
}

.sec-timeline-body .sec-card__time {
  display: none;
}

.sec-card__main {
  min-width: 0;
  grid-column: 2;
}

.sec-card__actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  grid-column: 3;
  grid-row: 1;
}

.sec-timeline-body .sec-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sec-timeline-body .sec-card__main {
  grid-column: 1;
}

.sec-timeline-body .sec-card__actions {
  grid-column: 2;
}

.sec-card__headline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sec-card__title {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-card__topic {
  margin: 2px 0 0;
  color: var(--sec-ink-2);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.sec-card__error {
  margin: 6px 0 0;
  color: var(--sec-danger-ink);
  font-size: 12px;
}

.sec-card[data-compact="true"] {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 8px 10px;
}

.sec-card[data-compact="true"] .sec-card__actions .sec-btn.is-primary {
  display: none;
}

.sec-menu {
  position: relative;
}

.sec-menu__list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 8;
  min-width: 180px;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
  box-shadow: var(--sec-shadow);
}

.sec-menu__list button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sec-menu__list button:hover,
.sec-menu__list button:focus-visible {
  background: var(--sec-accent-soft);
}

.sec-sheet__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.sec-sheet__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
  color: inherit;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}

.sec-sheet__item.is-primary {
  border-color: var(--sec-accent);
  background: var(--sec-accent);
  color: var(--sec-accent-ink);
}

/* ------------------------------------------------------------ chips + pills */

.sec-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border: 1px solid var(--sec-line);
  border-radius: 20px;
  background: var(--sec-surface-2);
  color: var(--sec-ink-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.sec-chip[data-tone="ok"] {
  background: var(--sec-ok-bg);
  border-color: var(--sec-ok-line);
  color: var(--sec-ok-ink);
}

.sec-chip[data-tone="warning"] {
  background: var(--sec-warn-bg);
  border-color: var(--sec-warn-line);
  color: var(--sec-warn-ink);
}

.sec-chip[data-tone="exam"] {
  background: var(--sec-info-bg);
  border-color: var(--sec-info-line);
  color: var(--sec-info-ink);
  font-weight: 650;
}

.sec-chip__icon {
  font-size: 10px;
}

.sec-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border: 1px solid var(--sec-line);
  border-radius: 20px;
  background: var(--sec-surface-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.sec-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.sec-pill[data-tone="scheduled"] { background: var(--sec-info-bg); border-color: var(--sec-info-line); color: var(--sec-info-ink); }
.sec-pill[data-tone="completed"] { background: var(--sec-ok-bg); border-color: var(--sec-ok-line); color: var(--sec-ok-ink); }
.sec-pill[data-tone="attention"] { background: var(--sec-warn-bg); border-color: var(--sec-warn-line); color: var(--sec-warn-ink); }
.sec-pill[data-tone="cancelled"] { background: var(--sec-danger-bg); border-color: var(--sec-danger-line); color: var(--sec-danger-ink); }
.sec-pill[data-tone="rescheduled"] { background: var(--sec-surface-3); border-color: var(--sec-line-strong); color: var(--sec-ink-2); }

/* ----------------------------------------------------------- attention rail */

.sec-aside {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  position: sticky;
  top: 8px;
}

.sec-aside[data-empty="true"] {
  gap: 0;
}

.sec-aside__calm {
  padding: 14px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
}

.sec-aside__calm strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 650;
}

.sec-aside__calm p {
  margin: 0;
  color: var(--sec-ink-2);
  font-size: 12.5px;
  line-height: 1.4;
}

.sec-aside-toggle {
  display: grid;
  gap: 8px;
}

.sec-aside-toggle > .sec-btn {
  justify-content: flex-start;
  min-height: 44px;
}

.sec-aside__block {
  padding: 11px 12px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
}

.sec-aside__block h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 650;
  color: var(--sec-ink);
}

.sec-aside__count {
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--sec-warn-bg);
  color: var(--sec-warn-ink);
  font-size: 11px;
  text-align: center;
}

.sec-aside__count[data-empty="true"] {
  background: var(--sec-surface-3);
  color: var(--sec-ink-3);
}

.sec-aside__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}

.sec-aside__item {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.sec-aside__item:disabled {
  cursor: default;
}

.sec-aside__item:hover:not(:disabled) {
  background: var(--sec-surface-3);
}

.sec-aside__item strong {
  font-size: 13px;
  font-weight: 600;
}

.sec-aside__item span {
  font-size: 12px;
  color: var(--sec-ink-2);
}

.sec-aside__list li[data-priority="high"] .sec-aside__item {
  box-shadow: inset 2px 0 0 var(--sec-danger-line);
}

.sec-aside__list li[data-priority="medium"] .sec-aside__item {
  box-shadow: inset 2px 0 0 var(--sec-warn-line);
}

/* ----------------------------------------------------------------- schedule */

.sec-schedule {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sec-schedule__toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sec-schedule__nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-schedule__range {
  margin-left: 4px;
  font-size: 14px;
  text-transform: capitalize;
}

.sec-schedule__toolbar .is-primary {
  margin-left: auto;
}

.sec-schedule__body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.sec-schedule__main {
  min-width: 0;
}

.sec-mini {
  padding: 10px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
}

.sec-mini__head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  font-size: 12.5px;
  text-transform: capitalize;
}

.sec-mini__head strong {
  flex: 1;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-mini__head .sec-iconbtn {
  width: 24px;
  height: 24px;
}

/* `minmax(0, …)` is required: the default `auto` floor lets the day cells push
   the calendar wider than its 210px column and spill over the week grid. */
.sec-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}

.sec-mini__weekday {
  padding-bottom: 3px;
  color: var(--sec-ink-3);
  font-size: 10.5px;
  text-align: center;
}

.sec-mini__day {
  position: relative;
  min-width: 0;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sec-ink);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.sec-mini__day:hover {
  background: var(--sec-surface-2);
}

.sec-mini__day[data-outside="true"] {
  color: var(--sec-ink-3);
  opacity: .6;
}

.sec-mini__day[data-today="true"] {
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sec-mini__day[data-current="true"] {
  background: var(--sec-accent);
  color: var(--sec-accent-ink);
  font-weight: 700;
}

.sec-mini__dot {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

/* ---------------------------------------------------------- week / day grid */

.sec-grid {
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
  overflow: hidden;
}

/* Column template is set inline from the visible day count. */
.sec-grid__head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  border-bottom: 1px solid var(--sec-line);
  background: var(--sec-surface-2);
}

.sec-grid__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 4px;
  border-left: 1px solid var(--sec-line);
  font-size: 12px;
  line-height: 1.3;
  text-transform: capitalize;
}

.sec-grid__date {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.sec-grid__day strong {
  font-size: 14px;
}

.sec-grid__day[data-today="true"] {
  background: var(--sec-accent-soft);
  font-weight: 700;
}

.sec-grid__count {
  color: var(--sec-ink-3);
  font-size: 10.5px;
  font-weight: 400;
  white-space: nowrap;
}

.sec-grid__scroll {
  max-height: calc(100dvh - 250px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.sec-grid__body {
  position: relative;
  display: grid;
}

.sec-grid__gutter {
  display: grid;
  border-right: 1px solid var(--sec-line);
}

.sec-grid__gutter span {
  display: block;
  padding: 2px 6px 0 0;
  color: var(--sec-ink-3);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sec-grid__column {
  position: relative;
  border-left: 1px solid var(--sec-line);
  min-width: 0;
}

.sec-grid__column[data-today="true"] {
  background: color-mix(in srgb, var(--sec-accent-soft) 45%, transparent);
}

.sec-grid__slot {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--sec-line);
  background: none;
  cursor: cell;
}

.sec-grid__slot:hover {
  background: var(--sec-accent-soft);
}

.sec-event {
  position: absolute;
  display: grid;
  gap: 0;
  align-content: start;
  line-height: 1.25;
  padding: 3px 6px;
  border: 1px solid var(--sec-line-strong);
  border-left: 3px solid var(--sec-accent);
  border-radius: 6px;
  background: var(--sec-surface);
  color: var(--sec-ink);
  font: inherit;
  font-size: 11.5px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}

.sec-event:hover {
  z-index: 3;
  box-shadow: var(--sec-shadow);
}

.sec-event[data-tone="attention"] { border-left-color: var(--sec-warn-line); background: var(--sec-warn-bg); color: var(--sec-warn-ink); }
.sec-event[data-tone="completed"] { border-left-color: var(--sec-ok-line); background: var(--sec-ok-bg); color: var(--sec-ok-ink); }
.sec-event[data-tone="cancelled"] { border-left-color: var(--sec-danger-line); background: var(--sec-danger-bg); color: var(--sec-danger-ink); text-decoration: line-through; }
.sec-event[data-tone="rescheduled"] { border-left-color: var(--sec-info-line); background: var(--sec-info-bg); color: var(--sec-info-ink); }

.sec-event[data-compact="true"] {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.sec-event__time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.sec-event__name {
  min-width: 0;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-event__meta {
  font-size: 10.5px;
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sec-grid__now {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: 0;
  border-top: 2px solid var(--sec-danger-ink);
  pointer-events: none;
}

.sec-grid__now span {
  position: absolute;
  top: -8px;
  left: 2px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--sec-danger-ink);
  color: var(--sec-surface);
  font-size: 10px;
  font-weight: 700;
}

/* -------------------------------------------------------------- month + list */

.sec-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-line);
  overflow: hidden;
}

.sec-month__weekday {
  padding: 5px;
  background: var(--sec-surface-2);
  color: var(--sec-ink-3);
  font-size: 11px;
  text-align: center;
}

.sec-month__cell {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 96px;
  padding: 4px;
  background: var(--sec-surface);
}

.sec-month__cell[data-outside="true"] {
  background: var(--sec-surface-2);
  opacity: .75;
}

.sec-month__cell[data-today="true"] {
  box-shadow: inset 0 0 0 2px var(--sec-accent);
}

.sec-month__date {
  justify-self: start;
  min-width: 22px;
  padding: 1px 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.sec-month__date:hover {
  background: var(--sec-surface-3);
}

.sec-month__event {
  display: block;
  width: 100%;
  padding: 2px 5px;
  border: 0;
  border-left: 3px solid var(--sec-accent);
  border-radius: 4px;
  background: var(--sec-surface-2);
  color: var(--sec-ink);
  font: inherit;
  font-size: 11px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.sec-month__event[data-tone="attention"] { border-left-color: var(--sec-warn-line); }
.sec-month__event[data-tone="completed"] { border-left-color: var(--sec-ok-line); }
.sec-month__event[data-tone="cancelled"] { border-left-color: var(--sec-danger-line); text-decoration: line-through; }

.sec-month__event span {
  font-variant-numeric: tabular-nums;
  color: var(--sec-ink-3);
}

.sec-month__more {
  padding-left: 5px;
  color: var(--sec-ink-3);
  font-size: 11px;
}

.sec-agenda {
  display: grid;
  gap: 12px;
}

.sec-datestrip {
  display: flex;
  gap: 6px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.sec-datestrip__day {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  flex: none;
  width: 52px;
  min-height: 52px;
  padding: 6px 0;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
  color: var(--sec-ink-2);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.sec-datestrip__day strong {
  font-size: 15px;
  color: var(--sec-ink);
}

.sec-datestrip__day[data-today="true"] {
  border-color: var(--sec-line-strong);
  font-weight: 650;
}

.sec-datestrip__day[data-active="true"] {
  background: var(--sec-accent);
  border-color: var(--sec-accent);
  color: var(--sec-accent-ink);
}

.sec-datestrip__day[data-active="true"] strong {
  color: var(--sec-accent-ink);
}

.sec-datestrip__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.sec-agenda__day {
  display: grid;
  gap: 8px;
}

.sec-agenda__day h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  text-transform: capitalize;
  color: var(--sec-ink-2);
}

/* ----------------------------------------------------------------- overlays */

.sec-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  font-family: var(--sec-font);
  font-size: 14px;
  color: var(--sec-ink);
}

.sec-overlay__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(6, 14, 22, .48);
  cursor: pointer;
}

.sec-overlay__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sec-surface);
  box-shadow: var(--sec-shadow);
}

.sec-overlay[data-variant="drawer"] {
  justify-content: flex-end;
}

.sec-overlay[data-variant="drawer"] .sec-overlay__panel {
  width: min(var(--sec-overlay-width, 520px), 100vw);
  height: 100%;
  border-left: 1px solid var(--sec-line);
}

.sec-overlay[data-variant="modal"] {
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sec-overlay[data-variant="modal"] .sec-overlay__panel {
  width: min(var(--sec-overlay-width, 560px), 100%);
  max-height: min(720px, 100%);
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
}

.sec-overlay[data-variant="sheet"] {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.sec-overlay[data-variant="sheet"] .sec-overlay__panel {
  width: 100%;
  max-height: 88dvh;
  border-radius: var(--sec-radius) var(--sec-radius) 0 0;
  border: 1px solid var(--sec-line);
}

.sec-overlay__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sec-line);
  flex-shrink: 0;
}

.sec-overlay__titles {
  min-width: 0;
}

.sec-overlay__titles h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}

.sec-overlay__titles p {
  margin: 2px 0 0;
  color: var(--sec-ink-3);
  font-size: 12.5px;
  text-transform: capitalize;
}

.sec-overlay__head .sec-iconbtn {
  margin-left: auto;
}

.sec-overlay__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 20px;
  overflow: auto;
}

.sec-overlay__foot {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--sec-line);
  background: var(--sec-surface);
}

.sec-notice {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--sec-info-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-info-bg);
  color: var(--sec-info-ink);
  font-size: 12.5px;
}

.sec-notice[data-tone="warning"] { border-color: var(--sec-warn-line); background: var(--sec-warn-bg); color: var(--sec-warn-ink); }
.sec-notice[data-tone="danger"] { border-color: var(--sec-danger-line); background: var(--sec-danger-bg); color: var(--sec-danger-ink); }
.sec-notice[data-tone="success"] { border-color: var(--sec-ok-line); background: var(--sec-ok-bg); color: var(--sec-ok-ink); }

.sec-notice a {
  color: inherit;
}

/* -------------------------------------------------------------------- forms */

.sec-form {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.sec-form label {
  display: grid;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--sec-ink-2);
}

.sec-form__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sec-form__submit {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.sec-check,
.sec-form label.sec-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-check input {
  width: 16px;
  min-height: 16px;
  height: 16px;
  flex: none;
}

.sec-radios {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.sec-radios legend {
  padding: 0;
  font-size: 12.5px;
  color: var(--sec-ink-3);
}

.sec-radios label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-radios input {
  width: 16px;
  min-height: 16px;
  height: 16px;
}

.sec-panel {
  padding: 10px 12px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
}

.sec-panel h4 {
  margin: 0 0 6px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--sec-ink-3);
}

.sec-panel p {
  margin: 4px 0;
  font-size: 12.5px;
}

.sec-details {
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
}

.sec-details summary {
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.sec-details > label {
  display: grid;
  gap: 3px;
  padding: 0 10px 10px;
  font-size: 12.5px;
  color: var(--sec-ink-2);
}

/* ------------------------------------------------------------ lesson drawer */

.sec-drawer__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.sec-drawer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sec-line);
}

.sec-drawer__section {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--sec-line);
}

.sec-drawer__section:first-of-type {
  margin-top: 0;
}

.sec-drawer__section h3 {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--sec-ink-3);
}

.sec-field {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
}

.sec-field__label {
  color: var(--sec-ink-3);
}

.sec-field__value {
  min-width: 0;
  /* Prefer natural wrapping; never break dates/emails into single-character columns. */
  overflow-wrap: break-word;
  word-break: normal;
}

.sec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.sec-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
  font-size: 12.5px;
}

.sec-timeline {
  margin: 0;
  padding: 0 0 0 14px;
  display: grid;
  gap: 8px;
  border-left: 2px solid var(--sec-line);
  list-style: none;
}

.sec-timeline li {
  display: grid;
  gap: 1px;
  font-size: 12.5px;
}

.sec-timeline p {
  margin: 2px 0 0;
  color: var(--sec-ink-2);
}

.sec-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.sec-notes li {
  padding: 8px 10px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
  font-size: 12.5px;
}

.sec-notes p {
  margin: 0 0 4px;
}

/* ------------------------------------------------------------- command menu */

.sec-command__input {
  margin-bottom: 10px;
  font-size: 15px !important;
  min-height: 40px !important;
}

.sec-command__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 46dvh;
  overflow: auto;
}

.sec-command__group {
  display: block;
  padding: 10px 6px 4px;
  color: var(--sec-ink-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sec-command__item {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--sec-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sec-command__item[data-active="true"] {
  background: var(--sec-accent-soft);
}

.sec-command__item span {
  font-size: 12px;
  color: var(--sec-ink-3);
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1400px) {
  .sec-today__split {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1024px) {
  .sec-today__split {
    grid-template-columns: minmax(0, 1fr);
  }

  .sec-schedule__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .sec-schedule__side {
    display: none;
  }

  .sec-content > * {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .secretary-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sec-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    width: 280px;
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: var(--sec-shadow);
  }

  .sec-sidebar[data-collapsed="true"] {
    width: 280px;
  }

  .secretary-app[data-drawer="true"] .sec-sidebar {
    transform: translateX(0);
  }

  .secretary-app[data-drawer="true"] .sec-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    border: 0;
    background: rgba(6, 14, 22, .45);
  }

  .sec-topbar__menu {
    display: inline-grid;
  }

  .sec-topbar {
    min-height: 52px;
    padding: 6px 10px;
    gap: 8px;
  }

  .sec-topbar[data-compact="true"] .sec-topbar__titles h1 {
    font-size: 16px;
  }

  .sec-topbar[data-compact="true"] .sec-topbar__create {
    min-width: 44px;
    width: 44px;
    padding: 0;
  }

  .sec-topbar[data-compact="true"] .sec-topbar__create-label {
    display: none;
  }

  .sec-content {
    padding: 10px 12px 20px !important;
  }

  html[data-secretary-shell="true"] main.sec-content,
  .secretary-app main.sec-content {
    padding: 10px 12px 20px !important;
  }

  .sec-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    max-height: 160px;
  }

  .sec-summary__tile {
    padding: 8px 10px;
    gap: 1px;
  }

  .sec-summary__value {
    font-size: 17px;
  }

  .sec-timeline-row,
  .sec-gap,
  .sec-nowline {
    grid-template-columns: 44px 14px minmax(0, 1fr);
    gap: 0 6px;
  }

  .sec-timeline-gutter strong {
    font-size: 11px;
  }

  .sec-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px;
    padding: 8px 10px;
  }

  .sec-card__actions {
    grid-column: 2;
    grid-row: 1;
  }

  .sec-card__chips {
    margin-top: 4px;
  }

  .sec-section-head .sec-btn.is-primary {
    min-height: 44px;
  }

  /* Safe mobile touch targets: 44×44. */
  .sec-btn,
  .sec-iconbtn,
  .sec-menu__trigger,
  .sec-topbar__create,
  .sec-topbar__search,
  .sec-topbar__menu,
  .sec-navitem,
  .sec-theme,
  .sec-sidebar__logo,
  .sec-aside__item,
  .sec-command__item,
  .sec-sheet__item,
  .sec-datestrip__day,
  .sec-gap,
  .sec-segmented button {
    min-height: 44px;
  }

  .sec-iconbtn,
  .sec-menu__trigger,
  .sec-topbar__search,
  .sec-topbar__menu {
    width: 44px;
    height: 44px;
  }

  .sec-month__date,
  .sec-month__event {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sec-form__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sec-field {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .sec-overlay[data-variant="drawer"] .sec-overlay__panel,
  .sec-overlay[data-variant="modal"] .sec-overlay__panel {
    width: 100%;
    max-height: 100%;
  }

  .sec-overlay[data-variant="modal"],
  .sec-overlay[data-variant="sheet"] {
    padding: 0;
    align-items: flex-end;
  }

  .sec-overlay[data-variant="modal"] .sec-overlay__panel,
  .sec-overlay[data-variant="sheet"] .sec-overlay__panel {
    width: 100%;
    max-height: 88dvh;
    border-radius: var(--sec-radius) var(--sec-radius) 0 0;
  }

  .sec-datestrip__day {
    width: 56px;
    min-height: 56px;
  }
}

@media (max-width: 520px) {
  .sec-topbar__titles h1 {
    font-size: 15px;
  }

  .sec-summary__label {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sec-sidebar,
  .secretary-app * {
    transition: none !important;
  }
}

/* ---------------------------------------------------------- students (2A) */

.sec-students {
  display: grid;
  grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
  gap: 12px;
  min-height: calc(100dvh - 120px);
}

.sec-students[data-screen="review"],
.sec-students[data-screen="homework"],
.sec-students[data-screen="groups"] {
  height: calc(100dvh - 96px);
  max-height: calc(100dvh - 96px);
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

.sec-students[data-screen="review"] .sec-students__list,
.sec-students[data-screen="homework"] .sec-students__list,
.sec-students[data-screen="groups"] .sec-students__list,
.sec-students[data-screen="review"] .sec-students__detail,
.sec-students[data-screen="homework"] .sec-students__detail,
.sec-students[data-screen="groups"] .sec-students__detail {
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
}

.sec-students[data-mobile-detail="true"] {
  grid-template-columns: minmax(0, 1fr);
}

.sec-students__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
}

.sec-students__list-head {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--sec-line);
}

.sec-students__list-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}

.sec-students__search input {
  width: 100%;
}

.sec-students__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sec-students__filter {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--sec-line);
  border-radius: 999px;
  background: var(--sec-surface-2);
  color: var(--sec-ink-2);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}

.sec-students__filter[data-active="true"] {
  border-color: var(--sec-accent);
  background: color-mix(in srgb, var(--sec-accent) 12%, var(--sec-surface));
  color: var(--sec-ink);
}

.sec-students__list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 8px;
}

.sec-students__item {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-bottom: 6px;
  padding: 10px 12px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
  text-align: left;
  cursor: pointer;
}

.sec-students__item:hover {
  border-color: var(--sec-line-strong);
}

.sec-students__item[data-selected="true"] {
  border-color: var(--sec-accent);
  background: color-mix(in srgb, var(--sec-accent) 8%, var(--sec-surface));
}

.sec-students__item-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sec-students__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sec-warn-line);
  flex-shrink: 0;
}

.sec-students__item--ghost {
  min-height: 72px;
  background: linear-gradient(90deg, var(--sec-surface-2), var(--sec-surface), var(--sec-surface-2));
  background-size: 200% 100%;
  animation: sec-skeleton 1.2s ease infinite;
  border: 0;
}

.sec-students__detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius);
  background: var(--sec-surface);
  overflow: hidden;
}

.sec-students__detail-head {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--sec-line);
  flex: 0 0 auto;
}

.sec-students__back {
  justify-self: start;
  min-height: 44px;
}

.sec-students__detail-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
}

.sec-students__detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.sec-students__detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sec-students__detail-actions .sec-btn,
.sec-students__detail-actions .sec-iconbtn {
  min-height: 44px;
}

.sec-students__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sec-line);
  overflow: auto;
}

.sec-students[data-screen="groups"] .sec-students__tabs,
.sec-groups-tabs {
  padding-inline: 16px 12px;
  scroll-padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

.sec-students[data-screen="groups"] .sec-students__tab {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 44px;
  padding: 10px 14px;
}

.sec-member-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.sec-add-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sec-add-result {
  width: 100%;
  min-height: 44px;
  text-align: left;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 80%, transparent);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
  color: inherit;
  cursor: pointer;
}

.sec-add-result[data-active="true"] {
  border-color: var(--sec-accent, #2f6fed);
  background: color-mix(in srgb, var(--sec-accent, #2f6fed) 8%, var(--sec-surface));
}

.sec-add-result__name {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.sec-add-result__meta {
  color: var(--sec-ink-2);
  font-size: 12px;
}

.sec-add-preview {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 80%, transparent);
}

.sec-add-preview__name {
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sec-add-preview__facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.sec-add-preview__facts > div {
  display: grid;
  gap: 2px;
}

.sec-add-preview__facts dt {
  font-size: 12px;
  color: var(--sec-ink-2);
}

.sec-add-preview__facts dd {
  margin: 0;
}

.sec-eligibility {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.sec-eligibility li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
}

.sec-eligibility li[data-tone="ok"] {
  background: color-mix(in srgb, #1f8a4c 12%, var(--sec-surface));
}

.sec-eligibility li[data-tone="bad"] {
  background: color-mix(in srgb, #c0392b 12%, var(--sec-surface));
}

.sec-eligibility li[data-tone="warn"] {
  background: color-mix(in srgb, #c47d16 12%, var(--sec-surface));
}

.sec-att-row {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 70%, transparent);
}

.sec-att-row__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sec-att-row__controls .sec-btn {
  min-height: 44px;
}

.sec-pay-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.sec-pay-row {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 70%, transparent);
}

@media (max-width: 900px) {
  .sec-students[data-screen="groups"] .sec-students__detail-head {
    padding-inline: 12px;
  }

  .sec-students[data-screen="groups"] .sec-students__tabs {
    padding-inline: 12px 8px;
  }
}

.sec-students__tab {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--sec-radius-sm);
  background: transparent;
  color: var(--sec-ink-2);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
}

.sec-students__tab[data-active="true"] {
  background: var(--sec-surface-2);
  color: var(--sec-ink);
}

.sec-students__panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

.sec-students__overview,
.sec-students__group,
.sec-students__package-actions {
  display: grid;
  gap: 10px;
}

.sec-students__group h4 {
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 650;
  color: var(--sec-ink-2);
}

.sec-students__sessions,
.sec-students__ledger,
.sec-students__orders,
.sec-students__homework,
.sec-students__notes,
.sec-students__warnings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sec-hw-recipient {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
}

.sec-hw-recipient__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 180px;
}

.sec-hw-recipient__name {
  display: block;
  margin: 0;
  font-weight: 650;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.sec-hw-recipient__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  color: var(--sec-ink-3);
  font-size: 13px;
  line-height: 1.35;
}

.sec-hw-recipient__status {
  display: inline-block;
  color: var(--sec-ink-2);
  font-weight: 550;
}

.sec-hw-recipient__when::before {
  content: "·";
  margin-inline-end: 8px;
  color: var(--sec-ink-3);
}

.sec-hw-recipient__actions {
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 900px) {
  .sec-hw-recipient {
    flex-direction: column;
    align-items: stretch;
  }

  .sec-hw-recipient__actions {
    margin-left: 0;
    width: 100%;
  }

  .sec-hw-recipient__actions .sec-btn {
    flex: 1 1 auto;
  }
}

.sec-students__session,
.sec-students__order {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
  text-align: left;
  cursor: pointer;
}

.sec-students__session:hover {
  border-color: var(--sec-line-strong);
}

.sec-students__package-actions {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.sec-students__skeleton {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.sec-students__skeleton-head,
.sec-students__skeleton-tabs,
.sec-students__skeleton-block {
  border-radius: var(--sec-radius-sm);
  background: linear-gradient(90deg, var(--sec-surface-2), var(--sec-surface), var(--sec-surface-2));
  background-size: 200% 100%;
  animation: sec-skeleton 1.2s ease infinite;
}

.sec-students__skeleton-head { height: 88px; }
.sec-students__skeleton-tabs { height: 44px; }
.sec-students__skeleton-block { height: 120px; }

@keyframes sec-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.sec-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* Full-width rows (e.g. «Действует до») must not share a metric cell. */
.sec-metrics > .sec-field {
  grid-column: 1 / -1;
}

.sec-metrics--preview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sec-metrics__item {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
}

.sec-metrics__label {
  font-size: 11px;
  color: var(--sec-ink-3);
}

.sec-metrics__item strong {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.sec-drawer__foot-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

.sec-drawer__foot-actions .sec-btn {
  min-height: 44px;
}

.sec-aside__more {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 900px) {
  .sec-students {
    min-height: calc(100dvh - 96px);
  }

  .sec-students[data-mobile-detail="true"] .sec-students__detail {
    position: fixed;
    inset: 52px 0 0;
    z-index: 40;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .sec-students__detail-actions {
    position: sticky;
    bottom: 0;
    padding-top: 8px;
    background: linear-gradient(180deg, transparent, var(--sec-surface) 24%);
  }

  .sec-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sec-students__filter,
  .sec-students__tab {
    min-height: 44px;
  }
}

.sec-hw-tasks {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.sec-hw-tasks ul,
.sec-hw-tasks__selected {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.sec-hw-tasks__selected li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
}

.sec-students[data-screen="review"] .sec-students__detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sec-students[data-screen="review"] .sec-students__panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 12px;
}

.sec-students[data-screen="review"] .sec-drawer__foot-actions,
.sec-students[data-screen="homework"] .sec-drawer__foot-actions,
.sec-students[data-screen="groups"] .sec-drawer__foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 80%, transparent);
  background: var(--sec-surface);
  position: sticky;
  bottom: 0;
  z-index: 3;
}

.sec-students[data-screen="review"] .sec-drawer__foot-actions .sec-btn,
.sec-students[data-screen="homework"] .sec-drawer__foot-actions .sec-btn {
  min-height: 44px;
  min-width: 44px;
}

.sec-filter-sheet {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sec-filter-sheet__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, #101010 45%, transparent);
  cursor: pointer;
}

.sec-filter-sheet__panel {
  position: relative;
  z-index: 1;
  max-height: min(72vh, 640px);
  overflow: auto;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0;
  background: var(--sec-surface);
  box-shadow: 0 -8px 32px color-mix(in srgb, #101010 18%, transparent);
}

.sec-filter-sheet__panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 12px;
}

.sec-filter-sheet__panel .sec-students__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sec-filter-sheet__panel .sec-students__filter {
  min-height: 44px;
  min-width: 44px;
}

/*
 * Next.js Dev Tools floating “N” (and similar portals) must never sit above
 * Secretary overlays / filter sheets. Hide on the whole secretary shell.
 */
html[data-secretary-shell="true"] nextjs-portal,
html[data-secretary-shell="true"] [data-nextjs-toast],
html[data-secretary-shell="true"] [data-next-badge],
html[data-secretary-shell="true"] [data-next-mark],
html[data-secretary-shell="true"] #__next-build-watcher,
html[data-sec-overlay] nextjs-portal,
html[data-sec-overlay] [data-nextjs-toast],
html[data-sec-overlay] [data-next-badge],
html[data-sec-overlay] [data-next-mark],
html[data-sec-overlay] #__next-build-watcher {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sec-analytics {
  display: grid;
  gap: 16px;
  padding: 4px 0 24px;
}

.sec-analytics__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.sec-analytics__filters,
.sec-analytics__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.sec-analytics__filters select {
  min-height: 44px;
}

.sec-analytics__tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.sec-analytics__section {
  display: grid;
  gap: 12px;
}

.sec-analytics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.sec-analytics__metric {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 80%, transparent);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface);
  color: inherit;
  min-height: 88px;
}

button.sec-analytics__metric {
  cursor: pointer;
}

.sec-analytics__metric-label,
.sec-analytics__metric-hint {
  color: var(--sec-ink-2);
  font-size: 12px;
}

.sec-analytics__metric-value {
  font-size: 1.25rem;
}

.sec-analytics__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.sec-analytics__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sec-analytics__bars li {
  display: grid;
  grid-template-columns: minmax(72px, 120px) 1fr auto;
  gap: 8px;
  align-items: center;
}

.sec-analytics__bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--sec-surface-2);
  overflow: hidden;
}

.sec-analytics__bar-track > span {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--sec-accent, #2f6fed) 70%, transparent);
}

  .sec-analytics__drill {
  border: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 80%, transparent);
  border-radius: var(--sec-radius-sm);
  padding: 12px;
  background: var(--sec-surface);
  display: grid;
  gap: 10px;
  overflow-x: hidden;
  max-width: 100%;
}

.sec-analytics__drill header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.sec-analytics__drill table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sec-analytics__drill th,
.sec-analytics__drill td {
  text-align: left;
  padding: 8px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 70%, transparent);
  vertical-align: top;
}

.sec-analytics__empty {
  padding: 32px 16px;
  border: 1px dashed color-mix(in srgb, var(--sec-border, #c9c3b8) 80%, transparent);
  border-radius: var(--sec-radius-sm);
  text-align: center;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.sec-analytics__empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.sec-analytics__empty-actions .sec-btn {
  min-height: 44px;
  min-width: 44px;
}

.sec-analytics__formula {
  border: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 80%, transparent);
  border-radius: var(--sec-radius-sm);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--sec-surface, #fff) 92%, var(--sec-accent, #2f6fed) 8%);
}

.sec-analytics__formula h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.sec-analytics__formula ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.sec-analytics__formula li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  align-items: center;
}

.sec-analytics__formula li[data-total="true"] {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 70%, transparent);
  font-weight: 600;
}

.sec-analytics__date {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 44px;
}

.sec-analytics__date input {
  min-height: 44px;
}

.sec-analytics__drill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sec-analytics__drill-list li {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--sec-border, #c9c3b8) 75%, transparent);
  border-radius: var(--sec-radius-sm);
  min-height: 44px;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

@media (max-width: 720px) {
  .sec-analytics__bars li {
    grid-template-columns: 1fr;
  }

  .sec-analytics__drill {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    max-height: 78vh;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: var(--sec-radius-sm) var(--sec-radius-sm) 0 0;
    box-shadow: 0 -8px 24px color-mix(in srgb, #000 18%, transparent);
  }
}

/* ------------------------------------------------------------ first-student UX */

.sec-create-menu__list {
  min-width: 280px;
}

.sec-create-menu__list button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 44px;
  padding: 10px 12px;
}

.sec-create-menu__list button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sec-create-menu__reason {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--sec-muted, #6b7280);
  font-weight: 450;
  white-space: normal;
}

.sec-create-menu__sheet .sec-sheet__item {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 52px;
  height: auto;
  padding: 12px 14px;
  text-align: left;
}

.sec-create-menu__sheet .sec-sheet__item:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sec-students__list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sec-students__list-title-row h2 {
  min-width: 0;
}

.sec-students__add {
  flex-shrink: 0;
  min-height: 44px;
}

.sec-students__list .sec-empty {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 16px 12px;
}

.sec-session-empty {
  display: grid;
  gap: 10px;
  padding: 8px 0 4px;
}

.sec-session-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sec-session-empty__actions .sec-btn {
  min-height: 44px;
}

.sec-add-student__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

.sec-add-student__tabs button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
  color: inherit;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}

.sec-add-student__tabs button[data-active="true"] {
  border-color: var(--sec-accent);
  background: var(--sec-accent-soft);
}

.sec-add-student__results {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.sec-add-student__result {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--sec-line);
  border-radius: var(--sec-radius-sm);
  background: var(--sec-surface-2);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sec-add-student__result:hover,
.sec-add-student__result:focus-visible {
  border-color: var(--sec-accent);
  background: var(--sec-accent-soft);
}

.sec-add-student__preview {
  margin-bottom: 12px;
}

.sec-add-student__link {
  width: 100%;
}

.sec-add-student__submit {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(to top, var(--sec-surface) 70%, transparent);
}

.sec-add-student__submit .sec-btn {
  min-height: 44px;
}

.sec-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 900px) {
  .sec-students__list-title-row {
    flex-wrap: wrap;
  }

  .sec-students__add {
    width: 100%;
  }

  .sec-create-menu {
    position: static;
  }
}


/* ------------------------------------------------------------ notification settings */
.sec-settings {
  display: grid;
  gap: 14px;
  max-width: 720px;
}

.sec-settings__channels {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.sec-settings__channel {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--sec-line);
}

.sec-settings__channel:last-child {
  border-bottom: 0;
}

.sec-settings__badge {
  font-weight: 600;
}

.sec-settings__confirm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sec-settings .sec-btn,
.sec-settings .sec-check {
  min-height: 44px;
}