/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* =========================
   Base / Global Styles
========================= */
body {
   font-family: Arial, sans-serif;
   background: #f5f6f7;
   margin: 0;
   line-height: 1.4;
}

h1,
h2,
h3,
p {
   margin: 0;
}

.container {
   max-width: 1000px;
   margin: auto;
   padding: 20px;
   box-sizing: border-box;
}

/* =========================
   Links
========================= */
a {
   color: #2c7be5;
   text-decoration: none;
}

a:hover {
   text-decoration: underline;
}

/* =========================
   Header
========================= */
.top-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
}

h1 {
   font-size: 28px;
   font-weight: bold;
}

/* =========================
   Page Cards
========================= */
.intro,
.section-card {
   background: white;
   border-radius: 6px;
   padding: 14px;
   margin: 14px 0;
   border: 1px solid #d7dce0;
}

.intro {
   margin-top: 12px;
}

.section-card h2 {
   margin-bottom: 8px;
   font-size: 22px;
}

.section-card h3 {
   margin-top: 12px;
   margin-bottom: 6px;
   font-size: 18px;
}

/* =========================
   Ordered Walkthrough Structure
========================= */
.walkthrough-steps,
.task-list,
.overview-list,
.checklist ol {
   list-style: none;
   margin: 0;
   padding: 0;
}

.walkthrough-steps {
   counter-reset: section;
}

.walkthrough-steps > li {
   counter-increment: section;
}

.walkthrough-steps > li > .section-card > h2::before {
   content: counter(section) ". ";
}

.task-list {
   counter-reset: task;
}

.task-list > li {
   counter-increment: task;
}

.task-list > li > ol {
   counter-reset: detail;
}

.task-list > li > ol > li {
   counter-increment: detail;
}

.task-list > li > .row .label-text::before,
.task-list > li > ol > li > .row .label-text::before {
   color: var(--step-marker-color);
   display: inline-block;
   flex: 0 0 2.25em;
   font-weight: 700;
   opacity: 1;
   text-align: left;
}

.task-list > li > .row .label-text::before {
   content: counter(task, lower-alpha) ". ";
   min-width: 2.25em;
}

.task-list > li > ol > li > .row .label-text::before {
   content: counter(detail) ". ";
   min-width: 2.25em;
}

.overview-list > li > ol {
   margin: 0;
   padding: 0;
}

/* =========================
   Checklist Rows
========================= */
.row {
   display: flex;
   align-items: center;
   padding: 10px;
   margin: 4px 0;
   background: #e6e9ed;
   border-radius: 4px;
   box-sizing: border-box;
   cursor: pointer;
}

.checklist li:nth-child(even) > .row {
   background: #dde2e6;
}

.row input[type="checkbox"] {
   flex: 0 0 auto;
   margin-right: 10px;
   transform: scale(1.2);
   accent-color: #2ecc71;
}

.label-text {
   display: inline-block;
}

/* =========================
   Indentation Levels
========================= */
.level-1 {
   padding-left: 5px;
   font-weight: bold;
}

.level-2 {
   padding-left: 25px;
}

.level-3 {
   padding-left: 45px;
}

.level-4 {
   padding-left: 70px;
}

.level-5 {
   padding-left: 95px;
}

/* =========================
   Notes / Callouts
========================= */
.note {
   padding: 10px;
   margin: 6px 0;
   border-radius: 4px;
   box-sizing: border-box;
}

.note.level-1 {
   padding-left: 5px;
}

.note.level-2 {
   padding-left: 25px;
}

.note.level-3 {
   padding-left: 45px;
}

.note.level-4 {
   padding-left: 70px;
}

.note.level-5 {
   padding-left: 95px;
}

.note.warning {
   background: #fff3cd;
   border-left: 5px solid #f39c12;
}

.note.info {
   background: #eef3f7;
   border-left: 5px solid #5dade2;
}

.note.critical {
   background: #fdecea;
   border-left: 5px solid #e74c3c;
}

.callout-title {
   font-weight: bold;
   margin-bottom: 4px;
}

/* =========================
   Code and Text Helpers
========================= */
pre {
   background: #1f2933;
   color: #f5f7fa;
   padding: 12px;
   border-radius: 6px;
   overflow-x: auto;
   line-height: 1.45;
   margin: 10px 0;
   white-space: pre;
}

code {
   font-family: Consolas, Monaco, "Courier New", monospace;
   font-size: 0.95em;
}

.small {
   font-size: 0.93em;
   color: #4d5963;
}

.file-pill {
   display: inline-block;
   background: #eef3f7;
   border: 1px solid #cad6df;
   border-radius: 999px;
   padding: 2px 8px;
   margin: 2px 3px 2px 0;
   font-family: Consolas, Monaco, "Courier New", monospace;
   font-size: 0.9em;
}

table {
   width: 100%;
   border-collapse: collapse;
   margin: 10px 0;
   background: white;
}

th,
td {
   border: 1px solid #cfd6dd;
   padding: 8px;
   vertical-align: top;
   text-align: left;
}

th {
   background: #eef3f7;
}

/* =========================
   Image Block
========================= */
.image-block {
   margin: 10px 0;
}

.image-block img {
   max-width: 320px;
   border: 1px solid #bbb;
   background: white;
   padding: 6px;
   border-radius: 4px;
   display: block;
}

.caption {
   font-size: 0.85em;
   color: #666;
   margin-top: 5px;
   font-style: italic;
}

/* =========================
   Link Rows (Canvas style)
========================= */
.link-row {
   padding-left: 25px;
   margin: 6px 0;
}

.link-row a {
   display: block;
   position: relative;
   padding: 6px 24px 6px 0;
   color: #2c7be5;
   text-decoration: none;
}

.link-row a::after {
   content: "";
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 16px;
   height: 16px;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%232c7be5' d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/></svg>");
   background-size: contain;
   background-repeat: no-repeat;
}

.link-row a:hover {
   text-decoration: underline;
}

/* =========================
   Options Menu
========================= */
.options {
   position: relative;
}

#optionsBtn {
   padding: 6px 10px;
   cursor: pointer;
}

#optionsMenu {
   position: absolute;
   right: 0;
   top: 35px;
   background: white;
   border: 1px solid #ccc;
   padding: 10px;
   border-radius: 4px;
}

.hidden {
   display: none;
}

#resetBtn {
   background: #e74c3c;
   color: white;
   border: none;
   padding: 6px 10px;
   cursor: pointer;
   border-radius: 4px;
}

#resetBtn:hover {
   background: #c0392b;
}

/* =========================
   Footer
========================= */
.footer {
   text-align: center;
   margin-top: 20px;
   color: #777;
   font-size: 0.9em;
}


/* =========================================================
   Shared theme, options, code highlighting, and navigation
========================================================= */
:root {
    --page-bg: #ffffff;
    --surface-bg: #ffffff;
    --surface-alt: #f4f6f8;
    --text-color: #000000;
    --muted-text: #444444;
    --border-color: #c8ced4;
    --link-color: #075fbe;
    --focus-color: #005fcc;
    --code-bg: #f6f8fa;
    --code-text: #111111;
    --callout-bg: #edf5fb;
    --warning-bg: #fff5cc;
    --step-marker-color: #334e68;
}

body {
    background: var(--page-bg);
    color: var(--text-color);
}

body.dark-mode {
    --page-bg: #101214;
    --surface-bg: #181b1f;
    --surface-alt: #22262b;
    --text-color: #f5f7f9;
    --muted-text: #c2c8ce;
    --border-color: #5d6670;
    --link-color: #86bfff;
    --focus-color: #9ac7ff;
    --code-bg: #111418;
    --code-text: #f5f7f9;
    --callout-bg: #202b35;
    --warning-bg: #352f18;
    --step-marker-color: #b8d7ff;
}

body,
.intro,
.section-card,
.top-bar,
.options-menu,
.note,
.row,
pre,
code {
    color: var(--text-color);
}

.intro,
.section-card,
.options-menu {
    background: var(--surface-bg);
    border-color: var(--border-color);
}

.note {
    background: var(--callout-bg);
}

.note.warning {
    background: var(--warning-bg);
}

a {
    color: var(--link-color);
}

:focus-visible {
    outline: 3px solid var(--focus-color);
    outline-offset: 2px;
}

/* Options menu */
.options {
    position: relative;
}

.options-menu {
    box-sizing: border-box;
    display: grid;
    gap: 0.8rem;
    min-width: 19rem;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    width: min(22rem, calc(100vw - 2rem));
    z-index: 1000;
}

.options-menu.hidden {
    display: none;
}

.option-control {
    align-items: flex-start;
    display: grid;
    font-size: 1rem;
    gap: 0.6rem;
    grid-template-columns: auto minmax(0, 1fr);
    line-height: 1.3;
}

.option-control input {
    margin: 0.18rem 0 0;
}

.option-description {
    color: var(--muted-text);
    display: block;
    line-height: 1.4;
    margin: -0.45rem 0 0 1.65rem;
}

.option-action {
    justify-self: stretch;
    min-height: 2.7rem;
    width: 100%;
}

/* Code and syntax highlighting */
pre.code-block {
    background: var(--code-bg);
    border: 1px solid var(--border-color);
    color: var(--code-text);
    overflow-x: auto;
    padding: 1rem;
}

pre.code-block code {
    background: transparent;
    color: var(--code-text);
}

.highlighted-code .k,
.highlighted-code .kd,
.highlighted-code .kn,
.highlighted-code .kp,
.highlighted-code .kr,
.highlighted-code .kt {
    color: #003f9e;
    font-weight: 700;
}

.highlighted-code .s,
.highlighted-code .s1,
.highlighted-code .s2 {
    color: #8a2d00;
}

.highlighted-code .c,
.highlighted-code .c1,
.highlighted-code .cm,
.highlighted-code .cp {
    color: #436b3a;
    font-style: italic;
}

.highlighted-code .mi,
.highlighted-code .mf,
.highlighted-code .m {
    color: #6c2aa5;
}

.highlighted-code .nc,
.highlighted-code .nf,
.highlighted-code .nn {
    color: #005a70;
}

body.dark-mode .highlighted-code .k,
body.dark-mode .highlighted-code .kd,
body.dark-mode .highlighted-code .kn,
body.dark-mode .highlighted-code .kp,
body.dark-mode .highlighted-code .kr,
body.dark-mode .highlighted-code .kt {
    color: #7fb7ff;
}

body.dark-mode .highlighted-code .s,
body.dark-mode .highlighted-code .s1,
body.dark-mode .highlighted-code .s2 {
    color: #ffb07c;
}

body.dark-mode .highlighted-code .c,
body.dark-mode .highlighted-code .c1,
body.dark-mode .highlighted-code .cm,
body.dark-mode .highlighted-code .cp {
    color: #9dcc8f;
}

body.dark-mode .highlighted-code .mi,
body.dark-mode .highlighted-code .mf,
body.dark-mode .highlighted-code .m {
    color: #d4a2ff;
}

body.dark-mode .highlighted-code .nc,
body.dark-mode .highlighted-code .nf,
body.dark-mode .highlighted-code .nn {
    color: #77d7ea;
}

/* Main-task navigation */
.go-to-top {
    background: var(--surface-alt);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    color: var(--text-color);
    display: inline-block;
    font-weight: 700;
    margin-top: 1rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
}

.go-to-top:hover {
    text-decoration: underline;
}

/* Preserve NCR marker colors in either theme */
.diagram-marker-n {
    background: #2e9d50;
    border-color: #16652f;
    color: #ffffff;
}

.diagram-marker-c {
    background: #246fbd;
    border-color: #164a80;
    color: #ffffff;
}

.diagram-marker-r {
    background: #c83a3a;
    border-color: #852323;
    color: #ffffff;
}

/* Keep raster diagrams readable without recoloring NCR markers */
body.dark-mode figure.plantuml-diagram {
    background: #ffffff;
    border-radius: 0.25rem;
    padding: 0.5rem;
}

@media (max-width: 40rem) {
    .top-bar {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .options-menu {
        left: auto;
        right: 0;
        width: min(20rem, calc(100vw - 1rem));
    }
}


/* Overview and summary areas */
.overview-area,
.summary-area {
    margin: 1rem 0;
}

.overview-area > h2,
.summary-area > h2 {
    margin-top: 0;
}

.object-instantiation-overview {
    margin-top: 1rem;
}



/* Reusable Overview and Summary template */
.overview-area {
    margin: 1rem 0;
}

.overview-area > h2 {
    margin-top: 0;
}

.overview-user-story {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: 1rem;
}

.overview-user-story > h3 {
    margin-top: 0;
}

.summary-area {
    margin-top: 1rem;
}

/* One active PlantUML image; JavaScript swaps the source */
.theme-aware-diagram {
    overflow-x: auto;
}

.theme-aware-diagram .diagram-active-image {
    display: block;
    height: auto;
    max-width: 100%;
    width: auto;
}

body.dark-mode .theme-aware-diagram {
    background: #181b1f;
    border-radius: 0.25rem;
    padding: 0.5rem;
}


/* Comparison 1: current layout with corrected light/dark colors */
:root {
  --note-info-bg: #edf5fb;
  --note-info-border: #4aa9df;
  --note-warning-bg: #fff3c4;
  --note-warning-border: #f59e0b;
  --row-bg: #eef1f4;
  --row-text: #111111;
}
body {
  background: #ffffff;
  color: #000000;
}
.note.info {
  background: var(--note-info-bg);
  border-left-color: var(--note-info-border);
  color: #000000;
}
.note.warning {
  background: var(--note-warning-bg);
  border-left-color: var(--note-warning-border);
  color: #000000;
}
.row {
  background: var(--row-bg);
  color: var(--row-text);
}
body.dark-mode {
  background: #101214;
  color: #f5f7f9;
  --note-info-bg: #183247;
  --note-info-border: #55b8f0;
  --note-warning-bg: #3b3212;
  --note-warning-border: #ffb020;
  --row-bg: #252a30;
  --row-text: #f5f7f9;
}
body.dark-mode .note.info,
body.dark-mode .note.warning,
body.dark-mode .row {
  color: #f5f7f9;
}
body.dark-mode .file-pill,
body.dark-mode code:not(pre code) {
  background: #20262c;
  border-color: #65717c;
  color: #f5f7f9;
}
body.dark-mode .section-card,
body.dark-mode .overview-area,
body.dark-mode .summary-area {
  background: #181b1f;
  color: #f5f7f9;
}
body.dark-mode .resource-link-list a {
  color: #86bfff;
}



/* =========================================================
   Final light/dark theme fixes for walkthrough comparisons
========================================================= */
:root {
    --surface-0: #ffffff;
    --surface-1: #f5f7f9;
    --surface-2: #e9edf1;
    --surface-3: #dde3e8;

    --text-primary: #000000;
    --text-secondary: #4c545b;
    --border-color: #c5ccd3;

    --info-bg: #eaf4fb;
    --info-border: #4aa9df;
    --warning-bg: #fff1bd;
    --warning-border: #f59e0b;

    --row-odd-bg: #eef2f5;
    --row-even-bg: #e4e9ee;
    --row-text: #111111;

    --checkbox-accent: #2e78c7;
    --link-color: #075fbe;
}

body {
    background: var(--surface-0);
    color: var(--text-primary);
}

body.dark-mode {
    --surface-0: #101214;
    --surface-1: #171a1e;
    --surface-2: #21262c;
    --surface-3: #2a3037;

    --text-primary: #f5f7f9;
    --text-secondary: #b8c0c8;
    --border-color: #59636d;

    --info-bg: #173247;
    --info-border: #55b8f0;
    --warning-bg: #3a3215;
    --warning-border: #ffb020;

    --row-odd-bg: #242a30;
    --row-even-bg: #2b3138;
    --row-text: #f5f7f9;

    --checkbox-accent: #66aef5;
    --link-color: #86bfff;
}

/* Core surfaces */
.section-card,
.overview-area,
.summary-area,
.options-menu,
.task-resources,
.task-support,
.overview-user-story,
.overview-preparation {
    background: var(--surface-1);
    border-color: var(--border-color);
    color: var(--text-primary);
}

a {
    color: var(--link-color);
}

/* Callouts */
.note.info,
.refresher-resources {
    background: var(--info-bg);
    border-left-color: var(--info-border);
    color: var(--text-primary);
}

.note.warning {
    background: var(--warning-bg);
    border-left-color: var(--warning-border);
    color: var(--text-primary);
}

.note,
.note p,
.note li,
.note strong,
.note .callout-title,
.refresher-resources,
.refresher-resources p,
.refresher-resources li,
.refresher-resources strong {
    color: var(--text-primary);
}

/* Checklist rows */
.task-list > li:nth-child(odd) .row,
.walkthrough-steps .row:nth-child(odd) {
    background: var(--row-odd-bg);
}

.task-list > li:nth-child(even) .row,
.walkthrough-steps .row:nth-child(even) {
    background: var(--row-even-bg);
}

.row,
.row .label-text,
.row strong,
.row code {
    color: var(--row-text);
}

.row input[type="checkbox"] {
    accent-color: var(--checkbox-accent);
    height: 1.15rem;
    width: 1.15rem;
}

/* Inline code and pills */
.file-pill,
code:not(pre code) {
    background: var(--surface-2);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Screenshot handling:
   Keep actual screenshots and placeholders unchanged in either page theme. */
.screenshot-location,
.image-block.screenshot-location {
    background: transparent !important;
    color: var(--text-primary);
}

.screenshot-location img,
.image-block.screenshot-location img,
figure.screenshot-location img {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    display: block;
    filter: none !important;
    height: auto;
    max-width: 100%;
}

.screenshot-location figcaption,
.image-block.screenshot-location figcaption,
.caption {
    color: var(--text-secondary);
}

/* Do not recolor screenshots for dark mode. */
body.dark-mode .screenshot-location img,
body.dark-mode .image-block.screenshot-location img,
body.dark-mode figure.screenshot-location img {
    filter: none !important;
}

/* UML figures use their own theme-aware image source. */
body.dark-mode figure.plantuml-diagram {
    background: transparent;
}

/* Options panel */
.options-menu {
    background: var(--surface-1);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.option-control,
.option-description {
    color: var(--text-primary);
}

.option-description {
    color: var(--text-secondary);
}


/* =========================================================
   Walkthrough Framework: semantic layout infrastructure
   The same HTML supports standard, wide, mobile, and print views.
========================================================= */

:root {
    --content-max-width: 76rem;
    --reading-width: 68rem;
    --support-column-width: 19rem;
    --layout-gap: 1.5rem;
    --panel-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.16);
    --tooltip-z-index: 1000;
}

body.layout-standard .walkthrough,
body.layout-standard main.container {
    width: min(100% - 2rem, var(--content-max-width));
    margin-inline: auto;
}

.walkthrough-task > .section-card,
.task-content,
.task-support,
.task-resources,
.related-pages,
.refresher-resources {
    min-width: 0;
}

/* Ready for a future two-column mode without changing the HTML. */
@media (min-width: 68rem) {
    body.layout-multicolumn .walkthrough-task > .section-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--support-column-width);
        gap: var(--layout-gap);
        align-items: start;
    }

    body.layout-multicolumn .walkthrough-task > .section-card > h2 {
        grid-column: 1 / -1;
    }

    body.layout-multicolumn .task-content {
        grid-column: 1;
    }

    body.layout-multicolumn .task-support,
    body.layout-multicolumn .task-resources,
    body.layout-multicolumn .refresher-resources {
        grid-column: 2;
    }
}

/* Mobile-first safeguards. */
@media (max-width: 48rem) {
    .container,
    main.container {
        width: min(100% - 1rem, var(--content-max-width));
    }

    .top-bar {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .options-menu {
        inset-inline-end: 0;
        max-width: calc(100vw - 1rem);
        width: 19rem;
    }

    pre {
        overflow-x: auto;
    }

    .row {
        align-items: flex-start;
    }

    .image-block img,
    .screenshot-location img,
    .plantuml-diagram img {
        height: auto;
        max-width: 100%;
    }
}

/* Reusable Options component. */
.options-menu {
    background: var(--surface-1) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    box-shadow: var(--panel-shadow);
}

.options-menu,
.options-menu label,
.options-menu span,
.options-menu strong,
.options-menu button {
    color: var(--text-primary);
}

.options-menu small,
.options-menu .option-description {
    color: var(--text-secondary);
}

.option-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.option-help {
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: help;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    height: 1.15rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 1.15rem;
}

.option-help:hover,
.option-help:focus-visible,
.option-help[aria-expanded="true"] {
    background: var(--surface-3);
    color: var(--text-primary);
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

.help-tooltip {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    border-radius: 0.35rem;
    box-shadow: var(--panel-shadow);
    color: var(--text-primary);
    display: none;
    font-size: 0.86rem;
    line-height: 1.4;
    margin-top: 0.4rem;
    padding: 0.65rem 0.75rem;
    position: relative;
    z-index: var(--tooltip-z-index);
}

.help-tooltip.is-visible {
    display: block;
}

/* Screenshots preserve their own Visual Studio theme. */
.screenshot-location,
.image-block.screenshot-location {
    background: transparent !important;
}

.screenshot-location img,
.image-block.screenshot-location img,
figure.screenshot-location img,
.vs-screenshot {
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    display: block;
    filter: none !important;
    height: auto;
    max-width: 100%;
}

body.dark-mode .screenshot-location img,
body.dark-mode .image-block.screenshot-location img,
body.dark-mode .vs-screenshot {
    filter: none !important;
}

/* Print mode. */
@media print {
    :root {
        --surface-0: #ffffff;
        --surface-1: #ffffff;
        --surface-2: #ffffff;
        --text-primary: #000000;
        --text-secondary: #333333;
        --border-color: #777777;
        --link-color: #000000;
    }

    body,
    body.dark-mode {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .options,
    .options-menu,
    input[type="checkbox"],
    .option-help,
    .back-to-top {
        display: none !important;
    }

    main.container,
    .walkthrough {
        margin: 0;
        max-width: none;
        width: 100%;
    }

    .section-card,
    .note,
    .task-resources,
    .task-support {
        break-inside: avoid;
        box-shadow: none !important;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    pre,
    code {
        white-space: pre-wrap;
        word-break: break-word;
    }
}


/* =========================================================
   Task lettering and screenshot viewer refinements
========================================================= */

/* Keep ordered-list task letters/numbers readable in both themes. */
.walkthrough-steps,
.task-list,
.walkthrough-task ol,
.walkthrough-task ul {
    color: var(--text-primary);
}

.walkthrough-steps > li::marker,
.task-list > li::marker,
.walkthrough-task ol > li::marker,
.walkthrough-task ul > li::marker {
    color: var(--text-primary);
    font-weight: 700;
}

.row .step-letter,
.row .step-number,
.row .list-marker,
.task-label {
    color: var(--text-primary) !important;
    font-weight: 700;
}

/* Give task markers a dedicated theme token for future customization. */
:root {
    --task-marker-color: #24313d;
}

body.dark-mode {
    --task-marker-color: #f5f7f9;
}

.walkthrough-steps > li::marker,
.task-list > li::marker,
.walkthrough-task ol > li::marker,
.walkthrough-task ul > li::marker,
.row .step-letter,
.row .step-number,
.row .list-marker,
.task-label {
    color: var(--task-marker-color) !important;
}

/* Screenshots use a bounded display size but remain clickable. */
.screenshot,
.screenshot-location,
.image-block.screenshot-location {
    margin-inline: auto;
    max-width: 64rem;
}

.screenshot img,
.screenshot-location img,
.image-block.screenshot-location img,
.vs-screenshot {
    cursor: zoom-in;
    max-height: 42rem;
    object-fit: contain;
    width: auto;
}

.screenshot img:focus-visible,
.screenshot-location img:focus-visible,
.vs-screenshot:focus-visible {
    outline: 3px solid var(--link-color);
    outline-offset: 3px;
}

/* Full-screen screenshot viewer. */
.image-lightbox {
    align-items: center;
    display: none;
    inset: 0;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    z-index: 5000;
}

.image-lightbox.is-open {
    display: flex;
}

.image-lightbox-backdrop {
    background: rgba(0, 0, 0, 0.82);
    border: 0;
    cursor: zoom-out;
    inset: 0;
    padding: 0;
    position: absolute;
}

.image-lightbox-panel {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: min(92vh, 64rem);
    max-width: 96vw;
    overflow: hidden;
    position: relative;
    width: min(96vw, 90rem);
    z-index: 1;
}

.image-lightbox-toolbar {
    align-items: center;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 0.65rem 0.8rem;
}

.image-lightbox-controls {
    align-items: center;
    display: flex;
    gap: 0.4rem;
}

.lightbox-control {
    align-items: center;
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: 0.3rem;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    justify-content: center;
    min-height: 2.2rem;
    min-width: 2.5rem;
    padding: 0.35rem 0.6rem;
}

.lightbox-control:hover,
.lightbox-control:focus-visible {
    background: var(--surface-3);
    outline: 2px solid var(--link-color);
    outline-offset: 1px;
}

.lightbox-close {
    font-size: 1.45rem;
    line-height: 1;
}

.image-lightbox-viewport {
    align-items: flex-start;
    background: #111;
    display: flex;
    flex: 1;
    justify-content: center;
    overflow: auto;
    padding: 1rem;
}

.image-lightbox-image {
    display: block;
    height: auto;
    max-width: none;
    transform-origin: top center;
    user-select: none;
}

.image-lightbox-hint {
    background: var(--surface-2);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    margin: 0;
    padding: 0.55rem 0.8rem;
    text-align: center;
}

body.lightbox-open {
    overflow: hidden;
}

@media (max-width: 48rem) {
    .image-lightbox {
        padding: 0;
    }

    .image-lightbox-panel {
        border-radius: 0;
        height: 100vh;
        max-width: 100vw;
        width: 100vw;
    }

    .image-lightbox-toolbar {
        align-items: flex-start;
    }

    .image-lightbox-controls {
        width: 100%;
    }

    .lightbox-control {
        flex: 1;
    }

    .screenshot img,
    .screenshot-location img,
    .vs-screenshot {
        max-height: 30rem;
        width: 100%;
    }
}

@media print {
    .image-lightbox {
        display: none !important;
    }

    .screenshot img,
    .screenshot-location img,
    .vs-screenshot {
        cursor: default;
        max-height: none;
        max-width: 100%;
    }
}


/* =========================================================
   Approved resource-link and refresher refinements
========================================================= */

/* Consistent external-link indicator for every supporting page. */
.external-page-link {
    align-items: baseline;
    display: inline-flex;
    gap: 0.3rem;
}

.external-page-link::after {
    content: "↗";
    display: inline-block;
    font-size: 0.82em;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transform: translateY(-0.05em);
}

.external-page-link:hover::after,
.external-page-link:focus-visible::after {
    text-decoration: none;
}

/* Tighter refresher cards with less unused vertical space. */
.refresher-resources.compact-resource-list {
    margin-block: 0.65rem;
    padding: 0.55rem 0.75rem;
}

.refresher-resources.compact-resource-list > :first-child {
    margin-top: 0;
}

.refresher-resources.compact-resource-list > :last-child {
    margin-bottom: 0;
}

.refresher-resources.compact-resource-list p {
    margin: 0.2rem 0 0.3rem;
}

.refresher-resources.compact-resource-list ul,
.refresher-resources.compact-resource-list ol {
    margin-block: 0.25rem 0;
    padding-left: 1.25rem;
}

.refresher-resources.compact-resource-list li {
    margin-block: 0.15rem;
}

.refresher-resources.compact-resource-list li + li {
    margin-top: 0.2rem;
}

/* Keep all support-page links visually consistent, including
   Debugging Fundamentals and links inside refresher sections. */
.resource-links .external-page-link {
    justify-content: space-between;
    max-width: 100%;
}


/* =========================================================
   Approved compact resource cards and unified external arrow
========================================================= */

.related-pages-card {
    background: var(--surface-1);
    border: 1px solid var(--border-color);
    border-radius: 0.35rem;
    color: var(--text-primary);
    font-size: 0.88rem;
    margin: 0.65rem 0;
    padding: 0.55rem 0.75rem;
}

.related-pages-card .resource-card-title,
.refresher-resources .callout-title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.22rem;
}

.related-pages-card ul,
.refresher-resources ul {
    margin: 0.2rem 0 0;
    padding-left: 1.2rem;
}

.related-pages-card li,
.refresher-resources li {
    line-height: 1.35;
    margin: 0.12rem 0;
}

.refresher-resources {
    font-size: 0.88rem;
}

.refresher-resources p {
    font-size: 0.86rem;
    line-height: 1.35;
    margin: 0.16rem 0 0.24rem;
}

/* Every external page link uses the exact same arrow currently used
   in the refresher section. */
.external-page-link::after {
    content: "↗";
    display: inline-block;
    flex: 0 0 auto;
    font-size: 0.82em;
    font-weight: 700;
    line-height: 1;
    margin-left: 0.3rem;
    text-decoration: none;
    transform: translateY(-0.05em);
}

.related-pages-card .external-page-link,
.refresher-resources .external-page-link,
.resource-links .external-page-link {
    font-size: inherit;
    justify-content: flex-start;
}


/* =========================================================
   Standard walkthrough ending and X.1 submission refreshers
========================================================= */

.finish-up-section {
    margin-top: 1.25rem;
}

.finish-up-section h2 {
    margin-bottom: 0.45rem;
}

.finish-up-instruction {
    margin: 0 0 0.65rem;
}

.feedback-system-link {
    display: inline-flex;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.submission-refresher {
    margin-top: 0.55rem;
}

.submission-refresher p {
    margin: 0.15rem 0 0.25rem;
}

.submission-refresher ul {
    margin: 0.2rem 0 0;
    padding-left: 1.2rem;
}

.submission-refresher li {
    margin: 0.12rem 0;
}


/* =========================================================
   Task 10 submission placement and ending-diagram rules
========================================================= */

.task-submission-block {
    border-top: 1px solid var(--border-color);
    margin-top: 1rem;
    padding-top: 0.9rem;
}

.task-submission-block h3 {
    margin-top: 0;
}

.diagram-change-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9rem;
    gap: 0.7rem 1rem;
    margin-top: 1rem;
}

.legend-item {
    align-items: center;
    display: inline-flex;
    gap: 0.4rem;
}

.legend-new-marker {
    background: #38a169;
    border-radius: 0.12rem;
    display: inline-block;
    height: 0.85rem;
    width: 0.85rem;
}

.ending-diagram {
    margin-bottom: 0;
    margin-top: 0.75rem;
}

.ending-diagram img {
    display: block;
    height: auto;
    margin-inline: auto;
    max-width: 100%;
}

/* The ending diagram is deliberately the final content on the page. */
#summary > .ending-diagram:last-child {
    margin-bottom: 0;
}


/* =========================================================
   Checklist letter and nested-step visibility
========================================================= */

.task-list .label-text {
   display: inline;
   min-width: 0;
}

.task-list > li > .row,
.task-list > li > ol > li > .row {
   align-items: flex-start;
}

body.dark-mode .task-list > li > .row .label-text::before,
body.dark-mode .task-list > li > ol > li > .row .label-text::before {
   color: var(--step-marker-color);
}


/* =========================================================
   Diagram legend marker visibility
========================================================= */

.diagram-legend-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
}

.diagram-legend-item {
    align-items: center;
    display: flex;
    gap: 0.45rem;
}

.diagram-legend-item::marker {
    content: "";
}

.diagram-legend .diagram-marker {
    border: 1px solid transparent;
    border-radius: 0.1rem;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 0.85rem;
    height: 0.85rem;
    margin: 0;
    min-height: 0.85rem;
    min-width: 0.85rem;
    width: 0.85rem;
}

.diagram-legend .legend-color-marker.diagram-marker-n {
    background-color: #2e9d50;
    border-color: #16652f;
}

.diagram-legend .legend-letter-marker {
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    line-height: 1;
}

.diagram-legend .diagram-legend-text {
    display: inline-block;
}


/* =========================================================
   Diagram legend: show exactly one marker
========================================================= */

.diagram-legend .legend-color-marker {
    display: inline-flex;
}

.diagram-legend .legend-letter-marker {
    display: none;
}

body.diagram-accessible .diagram-legend .legend-color-marker {
    display: none;
}

body.diagram-accessible .diagram-legend .legend-letter-marker {
    display: inline-flex;
}