/* Shared notebook night theme. Loaded after each client's component styles.
   Accent preferences still apply in light mode; night chrome is monochrome.
   Content colours (ink, graph series, images and explicit text colours) remain
   data, so changing appearance never recolours a user's saved work. */
html.dark,
html.dark body.dark {
  color-scheme: dark;
  --paper: #080808;
  --paper-2: #111111;
  --paper-3: #191919;
  --ink: #ffffff;
  --ink-soft: #dedede;
  --ink-faint: #ababab;
  --line: rgba(255,255,255,.34);
  --line-soft: rgba(255,255,255,.16);
  /* Custom accent preferences are inline; these overrides apply only at night. */
  --green: #ffffff !important;
  --green-700: #ededed !important;
  --green-800: #d6d6d6 !important;
  --green-300: #d6d6d6 !important;
  --mint: rgba(255,255,255,.10) !important;
  --mint-line: rgba(255,255,255,.34) !important;
  --dark: #080808;
  --dark-2: #141414;
  --dark-line: rgba(255,255,255,.34);
  --dark-text: #ffffff;
  --dark-soft: #dedede;
  --glow: #ffffff !important;
  --note-color-ink: #ffffff;
  --accent: #ffffff;
  --accent-soft: rgba(255,255,255,.12);
  --accent-line: rgba(255,255,255,.4);
  --grid: rgba(255,255,255,.018);
  --grid-major: rgba(255,255,255,.032);
  --shadow-sm: inset 0 1px 0 #ffffff14, 0 2px 8px #00000040;
  --shadow-md: inset 0 1px 0 #ffffff1f, 0 10px 30px -12px #000000b3;
  --shadow-lg: inset 0 1px 0 #ffffff26, 0 24px 70px -24px #000000e6;
  --mb-bg: var(--dark);
  --mb-card: #191919;
  --mb-card-2: #111111;
  --mb-line: var(--line);
  --mb-line-soft: var(--line-soft);
  --mb-ink: var(--ink);
  --mb-soft: var(--ink-soft);
  --mb-faint: var(--ink-faint);
  --mb-accent: #ffffff !important;
  --mb-deep: #ededed !important;
  --mb-mint: var(--mint) !important;
  --mb-mint-line: var(--mint-line) !important;
  --mb-flow: linear-gradient(120deg, #ffffff, #d6d6d6 52%, #ffffff);
  --sh-card: var(--shadow-sm);
  --sh-pop: var(--shadow-lg);
  --night-glass: linear-gradient(145deg, #ffffff0f, #ffffff03 40%, #ffffff06), rgba(18,18,18,.88);
  --night-chrome: linear-gradient(135deg, #ffffff0a, #ffffff02 55%), rgba(12,12,12,.88);
  --night-stars:
    radial-gradient(circle at 19px 31px, #ffffff73 0 .7px, transparent 1.3px),
    radial-gradient(circle at 101px 127px, #ffffff4d 0 .8px, transparent 1.4px),
    radial-gradient(circle at 181px 67px, #ffffff33 0 .6px, transparent 1.2px),
    radial-gradient(ellipse at 70% 0%, #ffffff09, transparent 65%);
  --night-star-size: 233px 211px, 347px 307px, 419px 367px, 100% 100%;
}

/* The desktop class picker writes these inline. Theme chrome takes precedence
   over that accent, without modifying the stored class colour. */
body.app-body.dark .app {
  --accent: #ffffff !important;
  --accent-soft: rgba(255,255,255,.12) !important;
  --accent-line: rgba(255,255,255,.4) !important;
}

body.dark { color: var(--ink); }
body.dark ::selection { background: #ffffff; color: #080808; }
body.dark :is(input, textarea, select, math-field) { accent-color: #ffffff; caret-color: #ffffff; }
body.dark :is(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
body.dark :is(input, textarea)::placeholder { color: #ababab; opacity: 1; }

/* The canvas owns four pan/zoom grid layers. Stars live on its existing,
   non-interactive backdrop so inline grid sizes cannot distort them. */
body.dark .canvas {
  isolation: isolate;
  background-color: var(--dark);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
}
body.dark .canvas::before {
  inset: -24px;
  z-index: -1;
  background-image: var(--night-stars);
  background-size: var(--night-star-size);
  pointer-events: none;
}
body.dark .mb-view { isolation: isolate; background: var(--dark); }
body.dark .mb-view::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  pointer-events: none;
  background-image: var(--night-stars);
  background-size: var(--night-star-size);
}
/* A second depth drifts on a different timeline, with fewer brighter stars
   and a broad white glow. The two populations brighten independently. */
body.dark :is(.canvas, .mb-view)::after {
  content: "";
  position: absolute;
  inset: -36px;
  z-index: -1;
  pointer-events: none;
  opacity: .35;
  background-image:
    radial-gradient(circle at 71px 89px, #ffffff99 0 .8px, transparent 1.7px),
    radial-gradient(circle at 233px 173px, #ffffff66 0 .7px, transparent 1.5px),
    radial-gradient(ellipse at 26% 60%, #ffffff08, transparent 62%);
  background-size: 479px 397px, 557px 463px, 100% 100%;
}
body.ma-body.dark {
  background-color: var(--dark);
  background-image: var(--night-stars);
  background-size: var(--night-star-size);
}
body.dark .thread { background: transparent; }
body.dark .aura { display: none; }
body.dark .reader {
  background: transparent;
}

/* A white reflection, translucent black fill, and simple white hairline.
   Blur is reserved for shell/overlay surfaces, not every canvas box. */
body.dark :is(.tb, .sb, .crumb, .agent, .hm-top, .ch-top, .hm-dock, .composer, #note-seg, .student-note-tools) {
  background: var(--night-chrome);
  border-color: var(--line-soft);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
body.dark :is(.menu, .ctx, .cmdk__box, .acct-menu, .textbar, .drawbar, .tbx-picker,
  .settings__card, .confirm__box, .welcome__card, .tour__card, .cpick,
  .sheet__card, .drawer__panel, .pop, .ngen__card,
  .mb-tour__card, .student-dialog, .ml-dialog, .lm-dialog, .ma-card) {
  background: var(--night-glass);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
body.dark :is(.box:not(.box--ink), .page, .agent__composer, .agent__ctx,
  .agent-chip, .chip, .lib__class, .student-section, .student-launch,
  .student-bubble, .cmp-card, .bx-sheet, .rd-graph, .rd-ink, .rd-code, .rd-chip) {
  background: var(--night-glass);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
body.dark .box:not(.box--ink):hover { border-color: #ffffff99; box-shadow: var(--shadow-md); }

/* Attached/generated/grouped are content states, not selection states.
   Removing their decorative pseudo-rings leaves one unambiguous white ring. */
body.dark .box.is-attached::after,
body.dark .box--flash::before { display: none; }
body.dark :is(.box.is-attached, .box--flash, .box--restored) {
  animation: none;
  box-shadow: var(--shadow-sm);
}
body.dark .box.is-grouped:hover:not(.is-selected):not(.is-attached) { outline: none; }
body.dark .box.is-selected:not(.box--ink),
body.dark .box.editing:not(.box--ink) {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #080808, var(--shadow-md);
}
body.dark .box--ink.is-selected { outline: 2px solid #ffffff; outline-offset: 4px; }
body.dark .box.box--ink { background: transparent; border: none; box-shadow: none; }
body.dark .box__handle { background: #ffffff; border-color: #080808; }
body.dark .marquee { border-color: #ffffff; background: #ffffff14; }
body.dark .lemma-focus-ring { border-color: #ffffff; background: #ffffff0d; box-shadow: 0 0 0 2px #080808; }

/* Shared neutral interaction states also cover keyboard and touch selection. */
body.dark :is(.row, .sb__tab, .tbtool, .tbicon, .menu__item, .ctx__item,
  .settings__tab, .textbar__btn, .textbar__move, .set-eye, .agent__headbtn,
  .agent__attachbtn, .settings__close, .footacct, .cmdk__opt):hover {
  background: #ffffff0f;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffff40;
}
body.dark :is(.row.is-selected, .row.is-multisel, .sb__tab.is-active,
  .tbtool.is-active, .tbicon.is-on, .textbar__btn.is-on, .tbx-btn.is-on,
  .settings__tab.is-active, .cmdk__opt.is-active, .dw-note.is-active,
  .seg__btn.is-active, .pop__row.is-active, .pop__row[aria-checked="true"]) {
  background: #ffffff26;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px #ffffffb3;
  border-color: #ffffff;
}
body.dark :is(.newclass, .cb-run, .agent__plan, .foot-signin, .set-plan,
  .agent-msg__bubble, .agent__modethumb, .agent-card, .agent-gate,
  .agent__composer .agent__review.is-on, .rolechip, .who .rolechip,
  .set-accent button[aria-checked="true"], .theme-choice[aria-checked="true"],
  .set-input:focus, .cpick__field input:focus) {
  background: var(--mint);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
body.dark :is(.newclass, .cb-run, .set-eye, .menu__item, .ctx__item):hover {
  background: #ffffff1a;
  color: #ffffff;
  border-color: #ffffff;
}
body.dark :is(.set-input, .cpick__field input):focus { box-shadow: 0 0 0 2px #ffffff40; }
body.dark :is(.agent-slash__opt:hover, .agent-slash__opt.is-active) { background: #ffffff1a; }
body.dark .agent__composer:focus-within { border-color: #ffffff; box-shadow: 0 0 0 2px #ffffff33; }
body.dark .theme-choice[aria-checked="true"] i::after { border-color: #ffffff; }
body.dark .set-accent button[aria-checked="true"] i::after { border-color: #ffffff; }

/* Inverted primary actions need dark glyphs when the accent becomes white. */
body.dark :is(.btn--primary, .set-btn--primary, .set-btn.is-saved, .cpick__ok,
  .student-button--primary, .student-dialog .student-button--primary,
  .hm-avatar, .acct__avatar, .settings__avatar, .avatar, .foot-signin__ic, .btn-flow, .cmp-send, .bx-ed-save,
  .confirm__btn:last-child, .mb-tour__next, .tour__next, .welcome__crest,
  .msg--user, .cmp-intent[aria-expanded="true"], .ma-submit:not(.ma-submit--soft)) {
  background: var(--mb-flow);
  color: #080808;
  border-color: #ffffff;
  text-shadow: none;
}
body.dark :is(.btn--primary, .set-btn--primary, .cpick__ok):hover { background: #dedede; }
body.dark .welcome__crest i { color: #080808; }
body.dark .agent__composer .agent__send.is-ready,
body.dark .student-note-tools .lm-primary,
body.dark .lm-primary {
  background: var(--mb-flow);
  border-color: #ffffff;
  color: #080808;
  box-shadow: var(--shadow-sm);
}
body.dark .agent-gate__btn { background: #ffffff; color: #080808 !important; box-shadow: var(--shadow-sm); }
body.dark .agent__composer .agent__send.is-stop,
body.dark .cmp-send--stop { background: var(--mb-danger, #b3463c); border-color: currentColor; color: #ffffff; }
body.dark :is(.set-sw.is-on, .agent__autoattach.is-on i, .sw.is-on) { background: #ffffff; }
body.dark :is(.set-sw, .agent__autoattach.is-on i, .sw)::after { background: #080808; }
body.dark .pop__tick::after { border-color: #080808; }
body.dark .sw-row[aria-pressed="true"] .sw-track b { background: #080808; }
body.dark .sw-row[aria-checked="true"] .sw-track b { background: #080808; }
body.dark .set-sw.is-on i { background: #080808; }
body.dark .cmp-card:focus-within { border-color: #ffffff; box-shadow: 0 0 0 2px #ffffff33; }
body.dark .box__code-ta::selection { background: #ffffff40; color: transparent; }

/* Voice has an independent orb and segmented control palette. */
body.dark .lemma-interaction { background: #ffffff0f; border: 1px solid var(--line); }
body.dark .lemma-interaction::before { background: #ffffff26; box-shadow: inset 0 0 0 1px #ffffffb3; }
body.dark .lemma-live-start[aria-pressed="true"] { background: transparent; color: #ffffff; }
body.dark :is(.lemma-live-dock, .lemma-live-work, .lemma-focus-panel) { background: var(--night-glass); box-shadow: var(--shadow-sm); }
body.dark .lemma-live-notice .lemma-live-launch,
body.dark .lemma-live-buttons [aria-pressed="true"] { background: var(--mb-flow); color: #080808; box-shadow: var(--shadow-sm); }
body.dark .lemma-live-orb {
  filter: none;
  background: radial-gradient(circle at 33% 25%, #ffffff 5%, #ededed 28%, #ababab 64%, #666666 95%);
  box-shadow: inset 0 0 22px #ffffff80, 0 14px 45px #ffffff14;
}
body.dark .lemma-live-orb i { background: radial-gradient(ellipse at 35% 25%, #ffffffdd, #ffffff40 40%, transparent 65%); }
body.dark .lemma-live-orb i:nth-child(2) { background: radial-gradient(ellipse at 70% 70%, #00000055, transparent 65%); }
body.dark .lemma-live-orb span { color: #080808; }
body.dark .lemma-live-text:focus-within { box-shadow: 0 0 0 2px #ffffff33; }
body.dark .help-settings .support-submit { background: var(--mb-flow); color: #080808; box-shadow: var(--shadow-sm); }
body.dark .support-success__mark { background: var(--night-glass); box-shadow: var(--shadow-sm); }

/* Mobile note blocks use the same glass treatment as desktop boxes. */
body.dark .rd-block--live:not(.rd-block--pending) {
  padding: 12px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  background: var(--night-glass);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}
body.dark .rd-block--live:is(.is-press, :focus-visible),
body.dark .rd-block.rd-block--highlight {
  animation: none;
  border-color: #ffffff;
  background: #ffffff1a;
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* The reader block already provides its glass card and hairline. */
body.dark .rd-block > :is(.rd-graph, .rd-ink) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.dark :is(.rd-code__lang, .rd-chip) { color: var(--ink-soft); }
body.dark :is(.bx-ce, .bx-ta, .bx-langsel, .cmp-att-box, .cmp-att-box__ic,
  .cmp-att-box__preview, .box__code-head, .box__table-head, .box__code-gutter,
  .box__code-out, .box__table td, .settings__nav) {
  background: #ffffff08;
  border-color: var(--line);
  color: var(--ink);
}

/* Advanced Math defines its own local palette; keep its dialogs consistent. */
body.dark :is(.box--mathlab, .ml-dialog, .ml-launch) {
  --ml-bg: #141414;
  --ml-soft: #1b1b1b;
  --ml-tint: #242424;
  --ml-ink: #ffffff;
  --ml-muted: #dedede;
  --ml-line: rgba(255,255,255,.34);
  --ml-accent: #ffffff;
  --ml-hover: #333333;
}
body.dark :is(.ml-head, .ml-summary) { background: var(--ml-tint); color: var(--ml-ink); }
body.dark .ml-badge { background: var(--ml-bg); color: var(--ml-muted); }
body.dark .ml-status { color: var(--ml-muted); }
body.dark :is(.ml-tools, .ml-status, .ml-head) { border-color: var(--ml-line); }
body.dark :is(.ml-stage, .ml-preview) { background: #141414; color: #dedede; }

/* Neutral scrims avoid a green cast around otherwise monochrome dialogs. */
body.dark :is(.settings, .welcome, .tour__shade, .scrim, .bx-scrim) { background-color: #00000099; }
body.dark :is(.student-dialog, .ml-dialog)::backdrop { background: #00000099; }
body.dark :is(.tok-kw, .tok-str, .tok-num, .tok-fn, .tok-lit) { color: #ededed; }
body.dark .tok-com { color: #ababab; }
body.dark .toast { background: #191919; color: #ffffff; border-color: var(--line); }
body.ma-body.dark .ma-field input:focus { box-shadow: 0 0 0 3px #ffffff26; }

/* Only two compositor properties move: a very slow drift and a gentle change
   in brightness. Background content never changes layout or catches a tap. */
html[data-background-effects="on"] body.dark :is(.canvas, .mb-view)::before {
  animation: night-drift 96s ease-in-out infinite alternate, night-breathe 18s ease-in-out infinite alternate;
}
html[data-background-effects="on"] body.dark :is(.canvas, .mb-view)::after {
  animation: night-near-drift 72s ease-in-out -24s infinite alternate, night-breathe 26s ease-in-out -11s infinite alternate-reverse;
}
@keyframes night-drift {
  from { transform: translate3d(-16px, -10px, 0); }
  to { transform: translate3d(16px, 10px, 0); }
}
@keyframes night-near-drift {
  from { transform: translate3d(26px, -18px, 0); }
  to { transform: translate3d(-26px, 18px, 0); }
}
@keyframes night-breathe {
  from { opacity: .5; }
  to { opacity: .9; }
}
html[data-page-visible="false"] body.dark :is(.canvas, .mb-view)::before { animation-play-state: paused; }
html[data-background-effects="off"] body.dark :is(.canvas, .mb-view)::before { display: none; }
html[data-page-visible="false"] body.dark :is(.canvas, .mb-view)::after { animation-play-state: paused; }
html[data-background-effects="off"] body.dark :is(.canvas, .mb-view)::after { display: none; }
.appearance-effects { margin-top: 12px; }
.sw-row[aria-checked="true"] .sw-track { background: var(--mb-accent); }
.sw-row[aria-checked="true"] .sw-track b { left: 21px; }
.sw-row .sw-track { flex: none; }

/* Graph inputs must be able to shrink and wrap at small box sizes. */
.box__graph-head .g-math__display { max-width: 100%; overflow: auto; scrollbar-width: none; }
.box__graph-head .g-range { flex-wrap: wrap; row-gap: 4px; }
.box__graph-head .g-min, .box__graph-head .g-max { max-width: min(120px, 30cqw); }
.box--graph { container-type: inline-size; }
body.dark .box__graph-canvas { background: #101010; }
.set-rowline > .set-sw { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  html[data-background-effects="on"] body.dark :is(.canvas, .mb-view)::before { animation: none; transform: none; opacity: .7; }
  html[data-background-effects="on"] body.dark :is(.canvas, .mb-view)::after { animation: none; transform: none; opacity: .35; }
}
@media (forced-colors: active) {
  body.dark .canvas::before { display: none; }
  body.dark .mb-view::before { display: none; }
  body.dark :is(.canvas, .mb-view)::after { display: none; }
  body.dark .mb-view { background-image: none; }
  body.dark .box.is-selected:not(.box--ink) { outline: 2px solid Highlight; outline-offset: 3px; }
}