:root {
  color-scheme: light;
  --stride-navy: #232356;
  --stride-orange: #e58a27;
  --stride-blue: #76beff;
  --brand: var(--stride-navy);
  --accent: var(--stride-orange);
  --sidebar: #fff;
  --chrome-ink: var(--stride-navy);
  --bg: #f5f6fb;
  --ink: #232356;
  --muted: #575775;
  --border: #d9dceb;
  --surface: #fff;
  --surface-raised: #f1f3fc;
  --input-bg: #fff;
  --link: #373777;
  --warm-ink: #874909;
  --warm-bg: #fff1dd;
  --chrome: #fff;
  --chrome-text: #232356;
  --chrome-border: #e1e2ef;
  --input-edge: #9699b3;
  --motion: 160ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171737;
  --ink: #fff;
  --muted: #cccee7;
  --border: #4e5079;
  --surface: #26264f;
  --surface-raised: #30305d;
  --input-bg: #202046;
  --link: #bfddff;
  --warm-ink: #ffc580;
  --warm-bg: #49384b;
  --chrome: #232356;
  --chrome-text: #fff;
  --chrome-border: #4b4c78;
  --input-edge: #7779a2;
}
:root[data-theme="light"] { --chrome: var(--sidebar); --chrome-text: var(--chrome-ink); }
.content { color: var(--ink); min-width: 0; }
a, .textbtn, .linkcell { color: var(--link); }
a:hover, .textbtn:hover, .linkcell:hover { color: var(--warm-ink); }
a.btn { text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #be6911;
  outline-offset: 3px;
}
:root[data-theme="dark"] :is(a, button, input, textarea, select, summary):focus-visible { outline-color: var(--stride-blue); }
.sidebar, .topbar { background: var(--chrome); color: var(--chrome-text); border-color: var(--chrome-border); }
.sidebar { box-shadow: inset -1px 0 var(--chrome-border); padding-top: 20px; }
.sidebar .brand { align-items: center; gap: 5px; padding: 2px 6px 18px; }
.stride-logo { width: min(142px, 84%); max-height: 76px; margin-inline: auto; object-fit: contain; }
.stride-logo-dark { display: none; }
:root[data-theme="dark"] :is(.sidebar, .login-card) .stride-logo-light,
:root[data-chrome="dark"] .sidebar .stride-logo-light { display: none; }
:root[data-theme="dark"] :is(.sidebar, .login-card) .stride-logo-dark,
:root[data-chrome="dark"] .sidebar .stride-logo-dark { display: block; }
.sidebar .brandsub { color: var(--chrome-text); letter-spacing: .18em; }
.sidebar .navgroup { color: var(--chrome-text); opacity: .78; }
.sidebar .navitem { color: var(--chrome-text); }
.sidebar .navitem:hover { color: var(--chrome-text); background: #e58a2726; }
.sidebar .navitem.active { background: var(--accent); color: var(--stride-navy); }
.sidebar .sidebarfooter { border-color: var(--chrome-border); }
.sidebar .sidebarfooter .person, .sidebar .sidebarfooter .subtle { color: var(--chrome-text); }
.topbar { gap: 10px; }
.topbar .breadcrumb, .topbar .breadcrumb span, .topbar .global-search svg, .topbar .account-chip,
.topbar .account-chip svg, .topbar .signout-link, .topbar .save-status, .topbar .global-search input,
.topbar .mobilemenu { color: var(--chrome-text); }
.topbar .global-search input { min-width: 0; }
.topbar .topicon { background: transparent; color: var(--chrome-text); border-color: var(--chrome-border); }
.topbar .topicon:hover { background: #e58a2721; border-color: var(--accent); }
.topbar .global-search input::placeholder { color: var(--chrome-text); opacity: .74; }
.ask-trigger { background: var(--accent); color: var(--stride-navy); }
.prototype { background: var(--warm-bg); color: var(--ink); border-color: var(--border); }
.prototype button { color: var(--warm-ink); }
#toast { color: var(--stride-navy); background: var(--accent); }
.login-screen { background: var(--bg); color: var(--ink); }
.login-card {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
  box-shadow: 0 16px 60px #23235615;
}
.login-card .stride-logo { width: 160px; max-height: 92px; margin: 0 auto 22px; }
.login-card p { color: var(--muted); }
input, select, textarea { border-color: var(--input-edge); }
input::placeholder, textarea::placeholder { color: var(--muted); }
select option { color: var(--ink); background: var(--input-bg); }
.btn { background: var(--surface-raised); color: var(--ink); border-color: var(--input-edge); }
.btn:hover { background: var(--warm-bg); color: var(--ink); border-color: var(--accent); box-shadow: none; }
.btn.primary, .btn.primary:hover, .btn.lime, .btn.lime:hover { color: var(--stride-navy); }
:root:not([data-theme="dark"]) :is(.person, .eyebrow, .stat .value, .empty h3, .daytitle strong, .modalhead h2, .resource-top h3) { color: var(--ink); }
:root:not([data-theme="dark"]) :is(.goalcard, .biggoal, .floating-task, .checkin-strip, .shade, .daycolumn, .monthday, .monthday.emptyday, .mood, .threads, .rolecard, .quickaction, .permission-summary, .permission-card, .permission-group, .permission-toggle, .access-scope .formcheck, .restricted-state, .nav-jump, .segmented, .badge, .pagehead .datechip, .helpfloat) {
  background: var(--surface-raised);
  border-color: var(--border);
  color: var(--ink);
}
:root:not([data-theme="dark"]) :is(.quickaction:hover, .nav-jump:hover, .clickrow:hover, .thread:hover) { background: #e9edfa; }
:root:not([data-theme="dark"]) :is(.event, .bubble, .timeblock, .fileicon, .stat .iconbox, .guide .stepnum) {
  background: #f1f4fe;
  color: var(--ink);
  border-color: #dce2f5;
}
:root:not([data-theme="dark"]) :is(.event .eventtime, .event p, .tabs button, .permission-card p, .permission-toggle small, .restricted-state p, .segmented button) { color: var(--muted); }
:root:not([data-theme="dark"]) :is(.event.placement, .alert.blue, .resource-top.blue) { background: #e6f2ff; color: #203d65; border-color: #cbdff4; }
:root:not([data-theme="dark"]) :is(.event.wellbeing, .resource-top.purple) { background: #f1ebfb; color: #3f2b61; border-color: #e1d6f5; }
:root:not([data-theme="dark"]) :is(.event.study, .daycolumn.today, .mood.selected, .mood:has(input:checked), .thread.active, .bubble.mine, .permission-toggle:has(input:checked), .resource-top, .security-summary) {
  background: var(--warm-bg); color: var(--ink); border-color: #edc79f;
}
:root:not([data-theme="dark"]) :is(.resource-top.pink, .alert.red) { background: #fce9ee; color: #7d283b; border-color: #edcbd4; }
:root:not([data-theme="dark"]) .event { border-left-color: var(--accent); }
:root:not([data-theme="dark"]) .event:hover { background: var(--warm-bg); }
:root:not([data-theme="dark"]) .tablewrap { scrollbar-color: #9a9cb5 #f4f5fb; }
:root:not([data-theme="dark"]) th { background: #edf0fa; color: var(--ink); }
:root:not([data-theme="dark"]) :is(th, td, .thread, .conversationhead, .messageform, .listrow, .taskrow, .tabs, .permission-section-heading) { border-color: var(--border); }
:root:not([data-theme="dark"]) td { color: var(--ink); }
:root:not([data-theme="dark"]) .welcome {
  background: var(--brand); border-color: var(--brand); border-left-color: var(--accent); color: #fff;
}
:root:not([data-theme="dark"]) .welcome h2 { color: #fff; }
:root:not([data-theme="dark"]) .welcome .eyebrow { color: #ffd4a0; }
:root:not([data-theme="dark"]) .welcome p { color: #f1efff; }
:root:not([data-theme="dark"]) .empty { background: #f8f9fd; color: var(--muted); border-color: #d9ddeb; }
:root:not([data-theme="dark"]) .progress { background: #e0e3f2; }
:root:not([data-theme="dark"]) .chart text { fill: var(--muted); }
:root:not([data-theme="dark"]) .chart line { stroke: #c7cce0; }
:root:not([data-theme="dark"]) .chart circle { fill: #fff; }
:root:not([data-theme="dark"]) .donut circle:first-child { stroke: #e0e3f2; }
:root:not([data-theme="dark"]) .pill { background: #edf0f8; color: var(--ink); border-color: #dfe3f1; }
:root:not([data-theme="dark"]) .pill.green { background: #e4f4eb; color: #20533c; border-color: #d1e9db; }
:root:not([data-theme="dark"]) .pill.blue { background: #e5f0ff; color: #204b74; border-color: #d1e2f8; }
:root:not([data-theme="dark"]) .pill.purple { background: #f1eafa; color: #5b3876; border-color: #e5d9f0; }
:root:not([data-theme="dark"]) .pill.amber, :root:not([data-theme="dark"]) .alert.amber { background: var(--warm-bg); color: #6f3c08; border-color: #f2d6b7; }
:root:not([data-theme="dark"]) .pill.red { background: #f9e4eb; color: #812c3f; border-color: #efc9d4; }
:root:not([data-theme="dark"]) .alert:not(.amber):not(.red):not(.blue) { background: var(--surface-raised); color: var(--ink); border-color: var(--border); }
:root:not([data-theme="dark"]) :is(.permission-group summary, .permission-toggle strong, .permission-summary strong, .security-summary strong) { color: var(--ink); }
:root:not([data-theme="dark"]) :is(.member-state, .positive) { color: #246446 !important; }
:root:not([data-theme="dark"]) :is(.member-state.pending, .approvals, .at-risk, .tabs button.active, .segmented .active) { color: var(--warm-ink) !important; }
:root:not([data-theme="dark"]) :is(.member-state.disabled, .req) { color: #a13049; }
:root:not([data-theme="dark"]) :is(.document, [style*="background:#f5f8f0"]) { background: var(--surface) !important; color: var(--ink) !important; }
:root:not([data-theme="dark"]) .document .toc { background: var(--surface-raised) !important; border-color: var(--border); }
dialog, .modalbody, .ask-drawer { background: var(--surface); color: var(--ink); border-color: var(--input-edge); }
.modalhead, .modalfoot, .ask-drawer .modalhead { background: var(--surface-raised); color: var(--ink); border-color: var(--border); }
.close { color: var(--muted); }
.close:hover { background: var(--warm-bg); color: var(--ink); }
:root:not([data-theme="dark"]) input[type="file"]::file-selector-button { background: var(--surface-raised); color: var(--ink); border-color: var(--input-edge); }

.studio-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding: clamp(21px, 4vw, 40px);
  border-radius: 20px;
  border: 1px solid #4e4e7d;
  color: #fff;
  background: linear-gradient(112deg, var(--brand) 20%, #303064 95%);
}
.studio-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  right: -37px;
  bottom: -133px;
  background: url('/assets/stride-brand-circle.webp') center / contain no-repeat;
  opacity: .53;
}
.studio-hero .eyebrow { color: #ffd19d !important; }
.studio-hero h1 { font-size: clamp(30px, 5vw, 44px); margin: 5px 0; }
.studio-hero p { margin: 5px 0 0; color: #f1efff; max-width: 47ch; }
.studio-date { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 10px; background: #ffffff13; border: 1px solid #ffffff45; border-radius: 9px; font-size: 12px; }
.studio-quick { margin: 0 0 19px; }
.studio-quick .btn { min-height: 42px; background: var(--surface); }
.studio-quick .btn:hover { background: var(--warm-bg); }
.studio-section { min-width: 0; }
.studio-section .cardhead { flex-wrap: wrap; }
.studio-section .cardhead h2 { font-size: 17px; }
.studio-row, .studio-notice {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  min-width: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.studio-row:last-child, .studio-notice:last-child { border-bottom: 0; }
.studio-row h3, .studio-notice h3 { font-size: 14px; overflow-wrap: anywhere; }
.studio-row p, .studio-notice p { margin: 4px 0 0; overflow-wrap: anywhere; }
.studio-labels { margin: -4px 0 15px; }
.studio-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: auto; min-width: 37px; min-height: 37px; padding: 6px 7px; border: 1px solid; border-radius: 9px; }
.studio-badge { position: absolute; right: -5px; top: -6px; min-width: 16px; padding: 2px 4px; border-radius: 99px; color: var(--stride-navy); background: var(--accent); font-size: 10px; line-height: 1.2; font-weight: 700; }
.timer-active #studio-timer-value { color: var(--warm-ink); font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.studio-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); gap: 12px; margin-bottom: 17px; }
.studio-count { padding: 14px 18px; margin: 0; }
.studio-count strong, .studio-count span { display: block; }
.studio-count strong { color: var(--ink); font-size: 24px; line-height: 1.2; }
.studio-count span { color: var(--muted); margin-top: 5px; }
.studio-next { background: var(--surface-raised); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 15px 16px; border-radius: 11px; margin: 0 0 9px; }
.studio-next h3 { margin-top: 5px; }
.studio-notice { padding-inline: 10px; }
.studio-unread { background: var(--surface-raised); border-left: 3px solid var(--accent); }
.studio-notice h3 { margin-top: 6px; }
.studio-profile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; }
.studio-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.studio-avatar {
  display: inline-block;
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--border);
  background-color: var(--surface-raised);
}
.studio-avatar-large { width: 78px; height: 78px; }
.studio-illustration { background-image: url('/assets/studio-avatars.webp'); background-size: 300% 200%; }
.portrait-0 { background-position: left top; }
.portrait-1 { background-position: center top; }
.portrait-2 { background-position: right top; }
.portrait-3 { background-position: left bottom; }
.portrait-4 { background-position: center bottom; }
.portrait-5 { background-position: right bottom; }
.studio-portraits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.studio-portraits label { display: flex; align-items: center; gap: 4px; margin: 0; padding: 5px; }
.studio-portraits input[type="radio"] { width: 15px; min-height: 15px; }
.team-chart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.team-group { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); padding: 11px; }
.team-group .eyebrow { margin: 4px 0 8px; }
.team-people { display: grid; gap: 7px; }
.team-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px;
}
.team-person:hover { border-color: var(--accent); background: var(--warm-bg); }
.team-person strong, .team-person span span { display: block; overflow-wrap: anywhere; }
.team-person span span { color: var(--muted); font-size: 11px; margin-top: 2px; }
.team-compact .team-person .studio-avatar { width: 35px; height: 35px; }
.studio-section fieldset, .modalbody fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0 16px;
  min-width: 0;
}
.studio-section legend, .modalbody legend { font-weight: 700; padding-inline: 5px; }
.studio-check { display: flex; align-items: center; gap: 7px; font-weight: 400; margin-bottom: 6px; }
.studio-check input { flex: none; }
.studio-selection { max-height: 190px; overflow: auto; }
.studio-files { padding-left: 22px; overflow-wrap: anywhere; }
.studio-receipt { color: var(--ink); background: var(--surface-raised); border-radius: 8px; border: 1px solid var(--border); padding: 10px; }
.studio-tabs { flex-wrap: wrap; }
.studio-plan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; border-bottom: 1px solid var(--border); padding: 10px 0; }
.studio-plan-min { display: flex; align-items: center; gap: 5px; margin: 0; }
.studio-plan-min input { width: 68px; min-height: 35px; padding: 4px 7px; }
.studio-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.studio-board .card { margin: 0; }
.studio-board .studio-row { align-items: flex-start; flex-wrap: wrap; }
.studio-focus-dial { margin: 5px auto 18px; padding: 17px; text-align: center; background: var(--surface-raised); border: 2px solid var(--accent); border-radius: 18px; }
.studio-focus-dial strong { display: block; font-size: clamp(41px, 9vw, 66px); line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.studio-focus-dial p { margin-bottom: 0; }
.studio-finish { margin-top: 16px; padding: 12px; border-radius: 10px; background: var(--warm-bg); }
.studio-simple .studio-hero::after { display: none; }
.studio-simple .studio-hero { background: var(--brand); }
.studio-simple :is(.grid2, .team-chart, .studio-board) { grid-template-columns: 1fr; }
.largetext :is(.studio-row h3, .studio-section h2, .navitem, .studio-check, .studio-notice h3, .btn, .cardhead p, .field label, .fieldvalue dd, .notice) { font-size: max(14px, 1em); }

@media (prefers-reduced-motion: no-preference) {
  :is(.btn, .team-person, .studio-icon, .navitem) { transition: background-color var(--motion), border-color var(--motion), color var(--motion); }
  .content > :is(.studio-hero, .pagehead) { animation: studio-enter 170ms ease-out both; }
  .studio-simple .content > :is(.studio-hero, .pagehead) { animation: none; }
  @keyframes studio-enter { from { opacity: .7; transform: translateY(3px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (max-width: 940px) {
  .topbar .save-status { display: none; }
  .team-chart { grid-template-columns: 1fr; }
  .team-people { grid-template-columns: repeat(auto-fit, minmax(min(164px, 100%), 1fr)); }
}
@media (max-width: 650px) {
  .topbar { gap: 6px; padding: 0 10px; }
  .topbar .signout-link, .topbar .account-chip span { display: none; }
  .topbar .account-chip { padding: 5px; }
  .topbar .studio-icon { min-width: 32px; min-height: 35px; padding: 5px; }
  .studio-hero { display: block; }
  .studio-date { margin-top: 12px; }
  .studio-row, .studio-notice { align-items: flex-start; flex-wrap: wrap; }
  .studio-section .cardhead > .actions { flex-basis: 100%; }
  .studio-board, .studio-plan-row { grid-template-columns: 1fr; }
}
@media (max-width: 1020px) {
  .learner-directory th:nth-child(n+2):nth-child(-n+6),
  .learner-directory td:nth-child(n+2):nth-child(-n+6) { display: none; }
  .learner-directory th, .learner-directory td { padding: 9px 8px; }
  .learner-directory .learner-open-record { white-space: normal; line-height: 1.25; }
  .learner-directory table { min-width: 0; }
}
@media (max-width: 410px) {
  .topbar .global-search { display: none; }
  .topbar .account-chip { margin-left: auto; }
  .studio-avatar-large { width: 59px; height: 59px; }
}