@charset "UTF-8";
/* Modus Mac auxiliary surfaces. Order: modus.css, this file, modus-paper.css.
 * Palette: ivory #f7f5ee, ink #171914, green #407b47. No external assets.
 * Header, navigation, catalogue and paper daily-item tiles belong to
 * modus-paper.css / modus-paper.js. No .dw-items or sprite rules live here.
 * Do not move shell aliases onto body: practice, remediation and research
 * stimuli still consume the original --ink/--accent/--line variables.
 * Runner arenas, response controls, correctness feedback, SVG and canvas
 * retain their typography, colours, dimensions and timing. Only their outer
 * dialog frame, header and explicitly separate service controls are themed.
 * Green is used for outlines/indicators; small text is ink for contrast.
 * No display rule on closed dialogs: showModal(), [hidden] and JS own state.
 */

body[data-modus] {
  --ms-ivory: #f7f5ee;
  --ms-ink: #171914;
  --ms-green: #407b47;
  --ms-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ms-serif: Georgia, "Times New Roman", serif;
}

/* Specificity covers legacy #main > #contextPanel aliases and both themes.
 * Aliases are confined to NON-measured screens and document/form dialogs. */
:root[data-theme] body[data-modus] :is(
  #main > #taskView.view, #settingsView.view, #sessionView.view, #resultView.view,
  #resultsView.view, #resources.view, #resources, #toolsView.view,
  #desktopView.view, #desktopCommand.desktop-command, #desktopLayout,
  .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog,
  .tools-delete-dialog, #dailyObservationDialog, .modus-plan
) {
  --desktop-bg: var(--ms-ivory);
  --desktop-surface: var(--ms-ivory);
  --desktop-raised: var(--ms-ivory);
  --desktop-sunken: var(--ms-ivory);
  --desktop-paper: var(--ms-ivory);
  --desktop-ink: var(--ms-ink);
  --desktop-muted: var(--ms-ink);
  --desktop-faint: var(--ms-ink);
  --desktop-line: var(--ms-ink);
  --desktop-control: var(--ms-ink);
  --desktop-heading: var(--ms-ink);
  --desktop-accent: var(--ms-ink);
  --desktop-accent-ink: var(--ms-ivory);
  --desktop-accent-soft: var(--ms-ivory);
  --desktop-accent-line: var(--ms-ink);
  --desktop-primary: var(--ms-green);
  --desktop-primary-ink: var(--ms-ivory);
  --desktop-primary-hover: var(--ms-ink);
  --desktop-focus: var(--ms-ink);
  --desktop-warn: var(--ms-ink);
  --desktop-warn-soft: var(--ms-ivory);
  --desktop-danger: var(--ms-ink);
  --desktop-danger-soft: var(--ms-ivory);
  --desktop-ok: var(--ms-green);
  --desktop-shadow: none;
  --desktop-radius: 2px;
  --desktop-font: var(--ms-sans);
  --bg: var(--ms-ivory);
  --surface: var(--ms-ivory);
  --surface-2: var(--ms-ivory);
  --raised: var(--ms-ivory);
  --sunken: var(--ms-ivory);
  --ink: var(--ms-ink);
  --text: var(--ms-ink);
  --muted: var(--ms-ink);
  --faint: var(--ms-ink);
  --line: var(--ms-ink);
  --line-strong: var(--ms-ink);
  --accent: var(--ms-ink);
  --accent-ink: var(--ms-ivory);
  --accent-soft: var(--ms-ivory);
  --accent-line: var(--ms-ink);
  --warn: var(--ms-ink);
  --warn-soft: var(--ms-ivory);
  --danger: var(--ms-ink);
  --danger-soft: var(--ms-ivory);
  --ok: var(--ms-green);
  --shadow: none;
  --radius: 2px;
  --radius-s: 2px;
  --sans: var(--ms-sans);
  --display: var(--ms-sans);
  --modus-paper: var(--ms-ivory);
  --modus-ink: var(--ms-ink);
  --modus-muted: var(--ms-ink);
  --modus-line: var(--ms-ink);
  --modus-blue: var(--ms-ink);
  --modus-red: var(--ms-ink);
  --motion-border-style: solid;
  color-scheme: light;
  color: var(--ms-ink);
  background: var(--ms-ivory);
  font-family: var(--ms-sans);
  line-height: 1.55;
  scrollbar-color: var(--ms-ink) var(--ms-ivory);
}

/* App screens: readable hierarchy, flat panels and disclosures. */
body[data-modus] :is(#taskView, #settingsView, #sessionView, #resultView, #resultsView, #resources, #toolsView, #desktopView) {
  min-width: 0;
  overflow-wrap: anywhere;
}

body[data-modus] :is(#taskView, #settingsView, #resultView, #resultsView, #resources, #desktopView) :is(
  .block, .aside-card, .result-row, .resource-row, .desktop-card,
  .desktop-metric, .desktop-readable-report, .desktop-context,
  .desktop-session-note, .desktop-next, .desktop-empty, .empty,
  .param, .choice, .raw pre, .resource-document-text, #resultFacts
) {
  color: var(--ms-ink);
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  box-shadow: none;
  background-image: none;
}

body[data-modus] :is(#taskView, #settingsView, #resultView) .block {
  padding: clamp(16px, 2.3vw, 24px);
}

body[data-modus] :is(#taskView, #settingsView, #resultView) :is(.disclosure, .motion-disclosure) {
  padding: 0;
  border-style: solid;
}

body[data-modus] :is(#taskView, #settingsView, #resultView) :is(.disclosure, .motion-disclosure) > summary {
  min-height: 44px;
  padding: 14px 18px;
  color: var(--ms-ink);
  font: 600 15px/1.45 var(--ms-sans);
  letter-spacing: 0;
  text-transform: none;
  border-radius: 0;
  cursor: pointer;
}

body[data-modus] :is(#taskView, #settingsView, #resultView) :is(.disclosure, .motion-disclosure) > :not(summary) {
  margin: 0 18px 18px;
}

body[data-modus] :is(#taskView, #settingsView, #sessionView, #resultView, #resultsView, #resources, #toolsView, #desktopView) :is(h1, h2, h3, h4, legend) {
  color: var(--ms-ink);
  font-family: var(--ms-sans);
  letter-spacing: -.02em;
  text-transform: none;
  overflow-wrap: anywhere;
}

body[data-modus] :is(#taskView, #settingsView, #resultView) .page-head h1,
body[data-modus] #desktopView :is(.desktop-title, .desktop-heading h1) {
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.16;
  font-weight: 650;
}

body[data-modus] :is(#taskView, #settingsView, #resultView) .block > :is(h2, h3, legend) {
  font: 600 16px/1.4 var(--ms-sans);
  letter-spacing: 0;
  margin-bottom: 12px;
}

body[data-modus] :is(#taskView, #settingsView, #resultView, #resultsView, #resources, #toolsView, #desktopView) :is(
  .muted, .note, .help, .optional, .eyebrow, .summary-note,
  .result-meta, .resource-meta, .resource-path, .file-size, .status-line,
  .desktop-plan-status, .desktop-card p, .desktop-list-row small,
  .desktop-list-row p, .desktop-plan-row small, .desktop-plan-row p
) {
  color: var(--ms-ink);
  opacity: 1;
}

body[data-modus] :is(#taskView, #settingsView, #resultView) :is(.lead, .prose, #taskMeasures, #plainLimitations, #professionalPurpose, #professionalUse, #professionalContext, #professionalLimits),
body[data-modus] #resources .resource-intro,
body[data-modus] .desktop-readable-report p {
  color: var(--ms-ink);
  font: 400 16px/1.65 var(--ms-serif);
  max-width: 72ch;
}

body[data-modus] :is(#taskView, #settingsView, #resultView) .facts {
  grid-template-columns: minmax(92px, .4fr) minmax(0, 1fr);
}

body[data-modus] :is(#taskView, #settingsView, #resultView) .facts :is(dt, dd) {
  min-width: 0;
  color: var(--ms-ink);
  overflow-wrap: anywhere;
}

/* Controls are confined to shell pages and non-measured form dialogs. */
body[data-modus] :is(
  #taskView, #settingsView, #sessionView, #resultView, #resultsView,
  #resources, #toolsView, #desktopView,
  .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog,
  .desktop-command, #desktopLayout, .tools-delete-dialog,
  #dailyObservationDialog, .modus-plan
) :is(button, input, select, textarea, summary) {
  box-sizing: border-box;
  font-family: var(--ms-sans);
  text-shadow: none;
  box-shadow: none;
  transition: none;
}

body[data-modus] :is(
  #taskView, #settingsView, #sessionView, #resultView, #resultsView,
  #resources, #toolsView, #desktopView,
  .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog,
  .desktop-command, #desktopLayout, .tools-delete-dialog,
  #dailyObservationDialog, .modus-plan
) button {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 12px;
  color: var(--ms-ink);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  background: var(--ms-ivory);
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-modus] :is(
  #taskView, #settingsView, #sessionView, #resultView, #resultsView,
  #resources, #toolsView, #desktopView,
  .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog,
  .desktop-command, #desktopLayout, .tools-delete-dialog,
  #dailyObservationDialog, .modus-plan
) :is(.primary, .secondary, .danger, .ghost-button, .icon-button, .tools-button, .modus-button, .modus-primary) {
  padding: 10px 14px;
  border: 1px solid var(--ms-ink);
  font-size: 15px;
  font-weight: 600;
}

body[data-modus] :is(#taskView, #settingsView, #sessionView, #resultView, #resultsView, #resources, #desktopView, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #desktopLayout, .tools-delete-dialog, #dailyObservationDialog, .modus-dialog, .modus-plan) :is(.primary, .modus-primary),
body[data-modus] #toolsView #toolsSave {
  background: var(--ms-ivory);
  color: var(--ms-ink);
  border: 1px solid var(--ms-green);
}

body[data-modus] :is(#taskView, #settingsView, #sessionView, #resultView, #resultsView, #resources, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #desktopLayout, #dailyObservationDialog, .modus-plan) button:hover:enabled {
  background: var(--ms-ivory);
  color: var(--ms-ink);
  border-color: var(--ms-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}

body[data-modus] :is(#taskView, #settingsView, #resultView, #resultsView, #resources, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, .desktop-command, #dailyObservationDialog, .modus-plan) button:is([aria-pressed="true"], [aria-selected="true"]) {
  background: var(--ms-ivory);
  color: var(--ms-ink);
  border-color: var(--ms-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-modus] :is(#taskView, #settingsView, #sessionView, #resultView, #resultsView, #resources, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #desktopLayout, #dailyObservationDialog, .modus-plan) :is(button, input, select, textarea):disabled {
  opacity: 1;
  color: var(--ms-ink);
  background: var(--ms-ivory);
  border-color: var(--ms-ink);
  border-style: dashed;
  cursor: not-allowed;
}

body[data-modus] :is(#taskView, #settingsView, #sessionView, #resultView, #resultsView, #resources, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #desktopLayout, .tools-delete-dialog, #dailyObservationDialog, .modus-plan) :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ms-ink);
  outline-offset: 3px;
  box-shadow: none;
}

body[data-modus] :is(#taskView, #settingsView, #resultView, #resultsView, #resources, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #dailyObservationDialog, .modus-plan) a {
  color: var(--ms-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

body[data-modus] :is(#taskView, #settingsView, #resultView, #resultsView, #resources, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, .doc-dialog, .desktop-command, #dailyObservationDialog, .modus-plan) ::selection {
  color: var(--ms-ivory);
  background: var(--ms-ink);
}

/* Text fields; segmented radios retain their original transparent hit area. */
body[data-modus] :is(#settingsView, #resultsView, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, .desktop-command, #desktopLayout, #dailyObservationDialog) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select
) {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  color: var(--ms-ink);
  background: var(--ms-ivory);
  font: 400 15px/1.45 var(--ms-sans);
  caret-color: var(--ms-ink);
}

body[data-modus] :is(#toolsView, #desktopView, .modus-dialog, .pilot-dialog, .desktop-command, #desktopLayout, #dailyObservationDialog) select {
  -webkit-appearance: auto;
  appearance: auto;
  background-image: none;
}

body[data-modus] :is(#settingsView, #resultsView, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, .desktop-command, #dailyObservationDialog) :is(input, textarea)::placeholder {
  color: var(--ms-ink);
  opacity: 1;
}

body[data-modus] :is(#settingsView, #resultsView, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, #desktopLayout, #dailyObservationDialog) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--ms-green);
}

body[data-modus] :is(#toolsView, #desktopView, .modus-dialog, .pilot-dialog, #dailyObservationDialog) :is(input[type="checkbox"], input[type="radio"]) {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex-shrink: 0;
}

body[data-modus] :is(#toolsView, .modus-dialog, .pilot-dialog, #dailyObservationDialog) textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
}

body[data-modus] #settingsView .segmented {
  max-width: 100%;
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  background: var(--ms-ivory);
}

body[data-modus] #settingsView .segmented :is(label, span) { min-width: 0; }
body[data-modus] #settingsView .segmented span {
  color: var(--ms-ink);
  border: 1px solid transparent;
  border-radius: 0;
}
body[data-modus] #settingsView .segmented input:checked + span {
  background: var(--ms-ivory);
  color: var(--ms-ink);
  border-color: var(--ms-green);
}
body[data-modus] #settingsView .segmented input:focus-visible + span {
  outline: 2px solid var(--ms-ink);
  outline-offset: 2px;
}
body[data-modus] #settingsView .segmented input:disabled + span {
  color: var(--ms-ink);
  background: var(--ms-ivory);
  opacity: 1;
  text-decoration: line-through;
}
body[data-modus] #settingsView .choice:has(input:checked) {
  outline: 1px solid var(--ms-ink);
  outline-offset: -4px;
  background: var(--ms-ivory);
  border-color: var(--ms-ink);
}
body[data-modus] #settingsView .choice:focus-within {
  outline: 2px solid var(--ms-ink);
  outline-offset: 3px;
}

/* System warnings/errors: existing words plus a full ink frame, never red.
 * Local --danger also resolves the legacy .error-note colour declaration. */
body[data-modus] :is(#taskView, #settingsView, #sessionView, #resultView, #resultsView, #toolsView, #desktopView, .modus-dialog, .pilot-dialog, #dailyObservationDialog) :is(
  .warning, .issues li, .pilot-error, [role="alert"],
  .tools-notice[data-error="true"], .error-note
) {
  --danger: var(--ms-ink);
  color: var(--ms-ink);
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  padding: 10px 12px;
  font-weight: 600;
  box-shadow: none;
}

body[data-modus] :is(#taskView, #settingsView, #resultView, #resultsView, #desktopView) :is(.badge, .tag, [data-tone]) {
  color: var(--ms-ink);
  border-color: var(--ms-ink);
  background: var(--ms-ivory);
  border-radius: 2px;
}

body[data-modus] :is(#settingsView, #toolsView, .modus-dialog, .pilot-dialog, #dailyObservationDialog) :is([aria-invalid="true"], input:invalid:not(:placeholder-shown)) {
  border: 1px solid var(--ms-ink);
  outline: 1px dashed var(--ms-ink);
  outline-offset: 2px;
}

/* Native dialogs: preserve top-layer semantics and default closed display. */
body[data-modus] dialog:is(.modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, .tools-delete-dialog, #desktopLayout, #dailyObservationDialog) {
  box-sizing: border-box;
  width: min(880px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  background: var(--ms-ivory);
  color: var(--ms-ink);
  box-shadow: none;
  overflow: auto;
  overscroll-behavior: contain;
  color-scheme: light;
}

body[data-modus] dialog:is(.confirm-dialog, .tools-delete-dialog) { width: min(480px, calc(100vw - 32px)); }
body[data-modus] dialog.desktop-command { width: min(720px, calc(100vw - 32px)); }
body[data-modus] dialog:is(.modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #desktopLayout, #dailyObservationDialog):focus-visible {
  outline: 2px solid var(--ms-ink);
  outline-offset: 3px;
}

/* Opaque ivory backdrop uses only the approved palette in both old themes. */
body[data-modus] dialog:is(
  .modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command,
  .tools-delete-dialog, #desktopLayout, #dailyObservationDialog,
  .training-dialog, .mac-practice, .remediation-dialog, .rem-v2,
  #extraRemediationDialog, .additional-training-dialog, .research-dialog
)::backdrop {
  background: #f7f5ee;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-modus] :is(.modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #desktopLayout, #dailyObservationDialog) :is(h2, h3, h4) {
  color: var(--ms-ink);
  font-family: var(--ms-sans);
  letter-spacing: -.02em;
  line-height: 1.3;
}
body[data-modus] :is(.modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #dailyObservationDialog) h2 { font-size: 25px; }
body[data-modus] :is(.modus-dialog, .pilot-dialog, #dailyObservationDialog) :is(p, .modus-field, .modus-muted, .pilot-note, label, summary) {
  color: var(--ms-ink);
  overflow-wrap: anywhere;
}
body[data-modus] :is(.modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command) :is(.dialog-head, .pilot-header, .dialog-actions, .pilot-actions, .modus-actions) {
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
body[data-modus] .pilot-dialog .pilot-section { border-top: 1px solid var(--ms-ink); }
body[data-modus] .pilot-dialog :is(.pilot-item, .pilot-notice) {
  background: var(--ms-ivory);
  color: var(--ms-ink);
  border-color: var(--ms-ink);
  border-radius: 2px;
}
body[data-modus] .pilot-dialog .pilot-notice { position: static; }
body[data-modus] .doc-dialog .resource-document-text {
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  background: var(--ms-ivory);
  color: var(--ms-ink);
  max-height: 60vh;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
}

/* Courses, goals, method history, template editing and unsaved-draft prompt. */
body[data-modus] .modus-dialog :is(
  .modus-course-list-item, .modus-course-timeline > li, .modus-course-goal,
  .modus-course-summary, .modus-template-editor > li, .modus-discard,
  .modus-instruction-block, .modus-selection-reason, .modus-stop-signals,
  .modus-case-summary
) {
  min-width: 0;
  padding: 14px 16px;
  color: var(--ms-ink);
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  box-shadow: none;
}
body[data-modus] .modus-dialog :is(.modus-field, .modus-history, .modus-course-linked, .modus-template-management, .modus-template-actions) {
  min-width: 0;
  color: var(--ms-ink);
  border-color: var(--ms-ink);
}
body[data-modus] .modus-dialog :is(.modus-method-result h4, .modus-course-summary h3, .modus-course-timeline summary, .modus-options strong, .modus-options label) { color: var(--ms-ink); }
body[data-modus] .modus-dialog :is(.modus-options, .modus-field select[multiple]) {
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  background: var(--ms-ivory);
  color: var(--ms-ink);
}
body[data-modus] .modus-dialog .modus-field:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
}
body[data-modus] .modus-dialog .modus-discard button { margin: 8px 12px 0 0; }

/* Prefer a single dialog scroll for long editors. A fixed flex body can clip
 * action rows and discard prompts when the available height is small. */
body[data-modus] dialog:is(.modus-template-edit-dialog, .modus-course-fixed)[open] {
  display: block;
  height: auto;
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
body[data-modus] .modus-dialog:is(.modus-template-edit-dialog, .modus-course-fixed) > form {
  display: block;
  overflow: visible;
}
body[data-modus] .modus-dialog :is(.modus-template-edit-body, .modus-course-body) {
  overflow: visible;
  min-height: 0;
}
body[data-modus] .modus-dialog:is(.modus-template-edit-dialog, .modus-course-fixed) .modus-actions {
  padding-top: 14px;
  border-top: 1px solid var(--ms-ink);
  background: var(--ms-ivory);
}

/* Both legacy desktop and current Modus session plans. */
body[data-modus] #desktopView :is(.desktop-heading, .desktop-toolbar, .desktop-list-row, .desktop-plan-row, .desktop-readable-report p:last-of-type) {
  border-color: var(--ms-ink);
  border-style: solid;
  box-shadow: none;
  background: var(--ms-ivory);
}
body[data-modus] #desktopView .desktop-heading { border-radius: 2px; }
body[data-modus] #desktopPlan .desktop-plan-row:is([aria-current="step"], [data-current="true"]) {
  border: 1px solid var(--ms-ink);
  padding: 14px;
  background: var(--ms-ivory);
}
body[data-modus] #desktopView :is(.desktop-metric strong, .desktop-queue-badge, .desktop-plan-settings > summary) { color: var(--ms-ink); }
body[data-modus] #desktopView .desktop-queue-badge {
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
}
body[data-modus] .modus-plan {
  min-width: 0;
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  background: var(--ms-ivory);
  box-shadow: none;
}
body[data-modus] .modus-plan :is(summary, .modus-plan-title, .modus-plan-progress, .modus-plan-row-settings, .modus-session-title, .modus-plan-controls button, li > .modus-icon) {
  color: var(--ms-ink);
}
body[data-modus] .modus-plan :is(li, .modus-session-heading) { border-color: var(--ms-ink); }
body[data-modus] .modus-plan li::before { color: var(--ms-ink); }
body[data-modus] .modus-plan li { flex-wrap: wrap; }
body[data-modus] .modus-plan .modus-plan-copy { flex: 1 1 160px; }
body[data-modus] .modus-plan .modus-plan-controls { flex-wrap: wrap; gap: 6px; }
body[data-modus] .modus-plan .modus-plan-controls button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--ms-ink);
  padding: 8px 10px;
}

/* Results, file lists, resource library and practical tools. */
body[data-modus] :is(#resultView, #resultsView) :is(.result-score, .result-meta, .grid-facts dt, .grid-facts dd) { color: var(--ms-ink); }
body[data-modus] :is(#resultView, #resultsView) .files li {
  min-width: 0;
  flex-wrap: wrap;
  color: var(--ms-ink);
  background: var(--ms-ivory);
  border-radius: 0;
  border-bottom: 1px solid var(--ms-ink);
}
body[data-modus] #resultView #resultFacts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
body[data-modus] #resultView .page-aside { display: flex; }
body[data-modus] :is(#resources) :is(.resource-row, .resource-collections) { min-width: 0; }
body[data-modus] #toolsView :is(.tools-group, .tools-note, .tools-cycles li) { border-color: var(--ms-ink); border-radius: 0; }
body[data-modus] #toolsView :is(.tools-hint, .tools-group-description, .tools-note time, .tools-note dt, .tools-cycles time, .tools-notice) {
  color: var(--ms-ink);
  opacity: 1;
}
body[data-modus] #toolsView :is(.tools-header, .tools-step-actions, .tools-actions, .tools-timer-display) { min-width: 0; flex-wrap: wrap; }
body[data-modus] #toolsView .tools-clock { font-family: var(--ms-sans); color: var(--ms-ink); font-variant-numeric: tabular-nums; }
body[data-modus] #dailyObservationDialog :is(.do-fact, td, th) { border-color: var(--ms-ink); }
body[data-modus] #dailyObservationDialog :is(summary, label, pre) { color: var(--ms-ink); }
body[data-modus] #dailyObservationDialog summary { min-height: 44px; padding-block: 10px; }
body[data-modus] #dailyObservationDialog .do-meta label { width: min(100%, 320px); margin-right: 12px; }
body[data-modus] #dailyObservationDialog .do-meta select { width: 100%; }
body[data-modus] #dailyObservationDialog .do-registry { overflow-x: auto; }

/* Session/service chrome. Do NOT add aliases, font or colour to these roots;
 * arena descendants inherit the pre-existing stimulus palette and metrics. */
body[data-modus] dialog:is(.training-dialog, .mac-practice, .remediation-dialog, .rem-v2, #extraRemediationDialog, .additional-training-dialog, .research-dialog) {
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  box-shadow: none;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  overscroll-behavior: contain;
}

body[data-modus] :is(
  .training-header, .practice-header, .rem-top, .extra-top,
  .rem-v2 > header, .day-plan-top, .research-top
) {
  color: var(--ms-ink);
  background: var(--ms-ivory);
  font-family: var(--ms-sans);
  box-shadow: none;
  gap: 12px;
  flex-wrap: wrap;
}
body[data-modus] :is(.training-header, .practice-header, .rem-top, .extra-top, .rem-v2 > header, .day-plan-top, .research-top) :is(h2, .eyebrow, .practice-caption, .muted, .training-tools > span) {
  color: var(--ms-ink);
  font-family: var(--ms-sans);
  letter-spacing: 0;
}
body[data-modus] :is(.training-tools, .practice-tools) { flex-wrap: wrap; }

body[data-modus] :is(#trainingHint, #macPractice-trainingHint, #macPractice-trialCounter),
body[data-modus] :is(.remediation-dialog, .rem-v2, #extraRemediationDialog, .additional-training-dialog, .research-dialog) > p:first-of-type {
  color: var(--ms-ink);
  font-family: var(--ms-sans);
}

/* Only bars counting completed attempts; arena progress/timing is untouched. */
body[data-modus] :is(.training-dialog, .mac-practice, .remediation-dialog, .rem-v2, #extraRemediationDialog, .additional-training-dialog, .research-dialog) > progress,
body[data-modus] #desktopView .desktop-progress {
  accent-color: var(--ms-green);
  color: var(--ms-ink);
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  box-shadow: none;
}
body[data-modus] :is(.training-dialog, .mac-practice, .remediation-dialog, .rem-v2, #extraRemediationDialog, .additional-training-dialog, .research-dialog) > progress::-webkit-progress-bar,
body[data-modus] #desktopView .desktop-progress::-webkit-progress-bar {
  background: var(--ms-ivory);
}
body[data-modus] :is(.training-dialog, .mac-practice, .remediation-dialog, .rem-v2, #extraRemediationDialog, .additional-training-dialog, .research-dialog) > progress::-webkit-progress-value,
body[data-modus] #desktopView .desktop-progress::-webkit-progress-value {
  background: var(--ms-green);
}
body[data-modus] :is(.training-dialog, .mac-practice, .remediation-dialog, .rem-v2, #extraRemediationDialog, .additional-training-dialog, .research-dialog) > progress::-moz-progress-bar,
body[data-modus] #desktopView .desktop-progress::-moz-progress-bar {
  background: var(--ms-green);
}
body[data-modus] :is(
  .training-header, .practice-header, .rem-top, .extra-top,
  .rem-v2 > header, .day-plan-top, .research-top,
  .remediation-dialog > .rem-actions, .rem-v2 > .rv-actions,
  #extraRemediationDialog > .extra-actions,
  .additional-training-dialog > .day-plan-actions,
  .research-dialog > .research-controls
) button {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  color: var(--ms-ink);
  background: var(--ms-ivory);
  font: 600 15px/1.4 var(--ms-sans);
  white-space: normal;
  box-shadow: none;
}
body[data-modus] :is(.training-header, .practice-header, .rem-top, .extra-top, .rem-v2 > header, .day-plan-top, .research-top, .remediation-dialog > .rem-actions, .rem-v2 > .rv-actions, #extraRemediationDialog > .extra-actions, .additional-training-dialog > .day-plan-actions, .research-dialog > .research-controls) button:focus-visible {
  outline: 2px solid var(--ms-ink);
  outline-offset: 3px;
}
body[data-modus] :is(.training-header, .practice-header, .rem-top, .extra-top, .rem-v2 > header, .day-plan-top, .research-top) button:hover:enabled {
  background: var(--ms-ink);
  color: var(--ms-ivory);
}
body[data-modus] :is(.training-header, .practice-header, .rem-top, .extra-top, .rem-v2 > header, .day-plan-top, .research-top) button:disabled { opacity: 1; border-style: dashed; }

/* Save errors are service messages. .correct/.error feedback remains intact. */
body[data-modus] :is(#saveStatus, #macPractice-saveStatus) {
  --danger: var(--ms-ink);
  color: var(--ms-ink);
  font-family: var(--ms-sans);
}
body[data-modus] :is(#saveStatus, #macPractice-saveStatus).error-note {
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  padding: 10px 12px;
  background: var(--ms-ivory);
  font-weight: 600;
}
body[data-modus] :is(.remediation-dialog, .rem-v2, #extraRemediationDialog, .additional-training-dialog, .research-dialog) > [role="status"] {
  color: var(--ms-ink);
  font-family: var(--ms-sans);
}
body[data-modus] .research-dialog > .research-error {
  color: var(--ms-ink);
  border: 1px solid var(--ms-ink);
  background: var(--ms-ivory);
}

/* Explicitly non-measured notes and assistance forms. Recall, prediction,
 * organization, task answers and all stimulus controls are excluded. */
body[data-modus] :is(#remediationDialog, #remediationV2Dialog, #extraRemediationDialog) label:has(> :is(
  [data-field="goal"], [data-field="reflection"], [data-field="everydayPlan"],
  [data-field="transferStatus"], [data-field="transferComment"],
  [data-field="burden"], [data-field="load-reason"],
  [data-field="humanHelp"], [data-field="listUse"], [data-field="assistance"]
)),
body[data-modus] #macPracticeDialog :is(.practice-assistance, .practice-option) {
  color: var(--ms-ink);
  font-family: var(--ms-sans);
}
body[data-modus] :is(#remediationDialog, #remediationV2Dialog, #extraRemediationDialog) :is(textarea, select, input):is(
  [data-field="goal"], [data-field="reflection"], [data-field="everydayPlan"],
  [data-field="transferStatus"], [data-field="transferComment"],
  [data-field="burden"], [data-field="load-reason"],
  [data-field="humanHelp"], [data-field="listUse"]
),
body[data-modus] #macPracticeDialog .practice-assistance textarea {
  box-sizing: border-box;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 12px;
  color: var(--ms-ink);
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  box-shadow: none;
  font: 400 15px/1.5 var(--ms-sans);
  color-scheme: light;
}
body[data-modus] :is(#remediationDialog, #remediationV2Dialog, #extraRemediationDialog) input[data-field="assistance"],
body[data-modus] #macPracticeDialog .practice-option input {
  accent-color: var(--ms-green);
  color-scheme: light;
}
body[data-modus] :is(#remediationDialog, #remediationV2Dialog, #extraRemediationDialog) :is(textarea, select, input):is(
  [data-field="goal"], [data-field="reflection"], [data-field="everydayPlan"],
  [data-field="transferStatus"], [data-field="transferComment"],
  [data-field="burden"], [data-field="load-reason"],
  [data-field="humanHelp"], [data-field="listUse"], [data-field="assistance"]
):focus-visible,
body[data-modus] #macPracticeDialog :is(.practice-assistance textarea, .practice-option input):focus-visible {
  outline: 2px solid var(--ms-ink);
  outline-offset: 3px;
}

body[data-modus] :is(.remediation-dialog, .rem-v2, #extraRemediationDialog, .additional-training-dialog, .research-dialog) > [role="alert"] {
  color: var(--ms-ink);
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  padding: 10px 12px;
}

body[data-modus] .remediation-hub { color: var(--ms-ink); font-family: var(--ms-sans); }
body[data-modus] .remediation-hub > details {
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
}
body[data-modus] .remediation-hub :is(summary, p, .text-button) { color: var(--ms-ink); }
body[data-modus] .remediation-hub summary { min-height: 44px; padding-block: 10px; }

/* Neutralize only known shell ornament; never blanket-filter a runner. */
body[data-modus] :is(#taskView, #settingsView, #resultView, #resultsView, #desktopView) :is(.page-head, .desktop-heading)::after {
  content: none;
  animation: none;
  box-shadow: none;
  background: none;
}
body[data-modus] :is(#desktopView .desktop-empty, #resultsView .empty)::before { content: none; }
body[data-modus] #sessionView .session-panel {
  background: var(--ms-ivory);
  border: 1px solid var(--ms-ink);
  border-radius: 2px;
  box-shadow: none;
}
body[data-modus] #sessionView .hints { border-top: 1px solid var(--ms-ink); }
body[data-modus] :is(#toast.toast, .modus-notice) {
  max-width: min(560px, calc(100vw - 32px));
  background: var(--ms-ivory);
  color: var(--ms-ink);
  border-color: var(--ms-ink);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--ms-sans);
  overflow-wrap: anywhere;
}
body[data-modus] .modus-notice:not(:empty) { border: 1px solid var(--ms-ink); }

/* At 900x700, side actions join the reading flow; no utility disappears. */
@media (max-width: 1100px) {
  body[data-modus] :is(#taskView, #settingsView, #resultView) .page-grid,
  body[data-modus] #desktopView .desktop-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-modus] :is(#taskView, #settingsView, #resultView) .page-aside {
    position: static;
    display: flex;
  }
  body[data-modus] #resultView > .page-grid > .page-aside { display: flex; }
}

@media (max-width: 900px), (max-height: 700px) {
  body[data-modus] :is(#taskView, #settingsView) .page-aside { position: static; }
  body[data-modus] .modus-dialog :is(.modus-template-preview, .modus-options) { max-height: 200px; }
}

@media (max-width: 650px) {
  body[data-modus] :is(#taskView, #settingsView, #resultView) .facts,
  body[data-modus] .modus-dialog :is(.modus-course-toolbar, .modus-course-form-grid, .modus-template-row-settings),
  body[data-modus] #toolsView .tools-timer-settings { grid-template-columns: minmax(0, 1fr); }
  body[data-modus] :is(#taskView, #settingsView, #resultView) .facts dd { margin-bottom: 10px; }
  body[data-modus] :is(#taskView, #settingsView) :is(.field, .choice-list, .param-control) { min-width: 0; flex-wrap: wrap; }
  body[data-modus] #settingsView .choice-list { grid-template-columns: minmax(0, 1fr); }
  body[data-modus] :is(#resultView, #resultsView, #resources) :is(.result-row, .resource-row) { flex-wrap: wrap; }
  body[data-modus] #desktopPlan .desktop-plan-row { grid-template-columns: minmax(0, 1fr); }
  body[data-modus] #desktopPlan .desktop-plan-prepare { justify-self: start; }
  body[data-modus] :is(.modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #desktopLayout, #dailyObservationDialog) :is(.dialog-actions, .pilot-actions, .modus-actions) > button { flex: 1 1 160px; }
  body[data-modus] .modus-dialog .modus-actions { justify-content: flex-start; }
  body[data-modus] #toolsView .tools-header { align-items: stretch; }
  body[data-modus] #dailyObservationDialog .do-meta label { width: 100%; margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-modus] :is(.modus-dialog, .pilot-dialog, .confirm-dialog, .doc-dialog, .desktop-command, #dailyObservationDialog) { scroll-behavior: auto; }
}