/* Thumbnail viewer replicas. Keep the learning controls outside native windows. */
.cdk-browser-lab__app--thumbnail {
  --thumb-ink: var(--kfl-ink);
  --thumb-muted: var(--kfl-ink);
  --thumb-panel: #fff;
  --thumb-edge: var(--kfl-border);
  color: var(--thumb-ink);
  background: var(--thumb-panel);
  position: relative;
  container-type: inline-size;
}
.cdk-browser-lab__app--thumbnail [hidden] { display: none !important; }
body .md-typeset .cdk-browser-lab__app--thumbnail > header h3 { font-size: .9rem !important; }
.thumb-brief { padding: .85rem 1rem .7rem; background: linear-gradient(115deg,#ecf7fe,#f7fbfe); }
.thumb-brief > span, .thumb-notebook > span { display: block; color: #176086; font-size: .56rem; font-weight: 800; letter-spacing: .08em; }
.thumb-brief > strong { display: block; margin-top: .2rem; font-size: .95rem; line-height: 1.35; }
.md-typeset .thumb-brief p { margin: .35rem 0; font-size: .68rem; line-height: 1.6; }
.thumb-brief small { display: block; color: var(--thumb-muted); font-size: .56rem; line-height: 1.55; }
.md-typeset .thumb-case-files { margin: 0; padding: .35rem 1rem .55rem; border: 0; border-bottom: 1px solid var(--thumb-edge); background: var(--thumb-panel); box-shadow: none; }
.thumb-case-files summary { cursor: pointer; color: var(--thumb-ink); font-size: .62rem; font-weight: 700; }
.thumb-case-files > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; padding-top: .5rem; }
.thumb-case-files article { min-width: 0; padding: .55rem; border: 1px solid var(--thumb-edge); border-radius: .3rem; }
.thumb-case-files article > code { display: block; font-size: .5rem; overflow-wrap: anywhere; white-space: normal; }
.md-typeset .thumb-case-files p { margin: .35rem 0; font-size: .6rem; line-height: 1.6; }
.thumb-case-files code { white-space: normal; overflow-wrap: anywhere; }
.md-typeset ol.thumb-lab-progress { display: grid !important; grid-template-columns: repeat(6,minmax(0,1fr)); margin: 0 !important; padding: .6rem .7rem !important; background: var(--thumb-panel); overflow: visible; }
.md-typeset ol.thumb-lab-progress li { min-width: 0; width: auto; margin: 0; font-size: .54rem; }
.thumb-lab-progress li { min-width: 0; font-size: .54rem; color: var(--thumb-muted); text-align: center; }
.md-typeset ol.thumb-lab-progress li span { white-space: normal; color: var(--thumb-muted); }
.thumb-lab-coach { align-items: start; padding: .65rem .8rem; background: #eef7fc; scroll-margin-top: 3rem; }
.cdk-browser-lab__app--thumbnail.is-expanded .thumb-lab-coach { scroll-margin-top: 9rem; }
.thumb-lab-coach > div { grid-template-columns: 1fr; gap: .15rem; }
.thumb-lab-coach > div > span { grid-row: auto; color: #075b87; font-size: .55rem; }
.thumb-lab-coach > div > strong { font-size: .78rem; }
.md-typeset .thumb-lab-coach > div > p { color: #284c61; font-size: .7rem; line-height: 1.6; }
.thumb-lab-coach > div > .thumb-next-label { margin-top: .35rem; color: #415f70; font-size: .51rem; }
.md-typeset ol.thumb-action-list { display: grid; margin: .4rem 0 0; padding: 0; list-style: none; gap: .25rem; }
.md-typeset ol.thumb-action-list li { display: grid; grid-template-columns: 1.1rem minmax(0,1fr) auto; align-items: center; gap: .35rem; margin: 0; padding: .25rem .4rem; border-radius: .2rem; color: #415f70; font-size: .6rem; }
.thumb-action-list li > span:first-child { display: grid; width: 1rem; height: 1rem; place-items: center; border: 1px solid #abc3d3; border-radius: 50%; font-size: .5rem; }
.md-typeset ol.thumb-action-list li[aria-current] { color: #173e54; background: #dcecf7; font-weight: 700; }
.md-typeset ol.thumb-action-list li[data-done="true"] { color: #195238; }
.thumb-action-list li small { font-size: .51rem; white-space: nowrap; }
.md-typeset .thumb-lab-coach .thumb-why { margin: .35rem 0 0; border: 0; background: transparent; box-shadow: none; }
.md-typeset .thumb-lab-coach .thumb-why > summary { min-height: 0; padding: .15rem 0 !important; border: 0 !important; color: #415f70; background: transparent; font-size: .6rem; font-weight: 500; }
.md-typeset .thumb-lab-coach .thumb-why > summary::before, .md-typeset .thumb-lab-coach .thumb-why > summary::after { display: none; }
.md-typeset .thumb-lab-coach .thumb-why > p { position: static; width: auto; max-width: 100%; margin: .3rem 0 0 !important; padding: .4rem .5rem; border: 1px solid #bed8f3; color: #415f70; background: #fff; box-shadow: none; font-size: .63rem; line-height: 1.6; }
.md-typeset .thumb-dialog-instruction { margin: 0; padding: .45rem .6rem; color: #203c60; background: #edf5ff; font-size: .64rem; }
.thumb-lab-coach summary { font-size: .62rem; color: #075b87; min-height: 1.65rem; }
.thumb-lab-coach details > p { font-size: .63rem; line-height: 1.6; color: #284c61; }
.thumb-lab-stage { padding: .75rem; background: #dce8f0; }
.thumb-desktop { display: grid; min-width: 0; gap: .6rem; }
.thumb-window { font: 400 .61rem/1.4 "Segoe UI",Arial,sans-serif; border: 1px solid #929ba3; border-radius: .3rem; background: #fff; color: #171717; overflow: visible; }
.thumb-window > header { display: grid; padding-left: .4rem; grid-template-columns: 1rem minmax(0,1fr) auto; background: #f1f1f1; border-radius: .3rem .3rem 0 0; min-height: 1.7rem; }
.thumb-window > header strong { font-weight: 400; font-size: .61rem; }
.thumb-native-icon { color: #234c89; font-size: .8rem; }
.thumb-native-icon svg { display: block; width: .85rem; height: .85rem; }
.thumb-window-controls { height: 1.7rem; }
.thumb-native-viewer { min-width: 0; }
.md-typeset .thumb-native-menus { display: flex; position: relative; z-index: 3; padding: 0 .12rem; border-block: 1px solid #d4d4d4; background: #fff; }
.md-typeset .thumb-native-menus details { margin: 0; padding: 0; border: 0; background: #fff; box-shadow: none; color: #171717; font-size: inherit; }
.md-typeset .thumb-native-menus details > summary { position: static; display: block; margin: 0; padding: .2rem .38rem; background: #fff; color: #171717; cursor: pointer; font-size: inherit; font-weight: 400; list-style: none; border-radius: 0; }
.thumb-native-menus summary::-webkit-details-marker { display: none; }
.md-typeset .thumb-native-menus summary::before, .md-typeset .thumb-native-menus summary::after { display: none; }
.md-typeset .thumb-native-menus details[open] > summary, .thumb-native-menus summary:hover { background: #e5f3ff; }
.thumb-native-menus details > div { position: absolute; top: 100%; z-index: 5; display: grid; min-width: 13rem; padding: .2rem; border: 1px solid #a3a3a3; background: #f2f2f2; box-shadow: .15rem .2rem .3rem #0003; }
.thumb-native-menus button { display: flex; gap: 1.2rem; padding: .35rem .5rem; justify-content: space-between; border: 1px solid transparent; color: #171717; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.thumb-native-menus button:hover:enabled { border-color: #91bddd; background: #dceeff; }
.thumb-native-menus button:disabled { color: #757575; cursor: default; }
.md-typeset .thumb-native-menus hr { margin: .1rem .3rem; border: 0; border-top: 1px solid #ccc; }
.md-typeset .thumb-native-menus kbd { padding: 0; border: 0; box-shadow: none; background: transparent; color: inherit; font: inherit; white-space: nowrap; }
.thumb-table-scroll { overflow: auto; min-width: 0; min-height: 10rem; max-height: 15rem; background: repeating-linear-gradient(#fff 0 25px,#ececec 25px 26px); }
.md-typeset table.thumb-native-table { display: table; margin: 0; width: 100%; min-width: 38rem; border: 0; border-collapse: collapse; border-spacing: 0; font: inherit; color: #171717; background: #fff; box-shadow: none; }
.md-typeset table.thumb-native-table--modern { min-width: 91rem; }
.md-typeset .thumb-native-table :is(th,td) { min-width: 0; padding: .25rem .35rem; border: 1px solid #e6e6e6; background: #fff; color: #171717; white-space: nowrap; font-weight: 400; vertical-align: middle; }
.md-typeset .thumb-native-table th { position: sticky; top: 0; background: linear-gradient(#fff,#f4f4f4); text-align: left; }
.thumb-native-table button { display: block; width: 100%; padding: .05rem .1rem; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.md-typeset .thumb-native-table tr:hover td { background: #e7f3fd; }
.md-typeset .thumb-native-table tr.is-selected td { background: #cce8ff; color: #111; }
.thumb-native-viewer > footer, .thumb-image-window > footer { display: flex; flex-wrap: wrap; justify-content: space-between; padding: .25rem .4rem; color: #333; background: #f1f1f1; border-top: 1px solid #d4d4d4; border-radius: 0 0 .3rem .3rem; }
.thumb-image-window { width: min(100%,22rem); justify-self: end; }
.thumb-image-canvas { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; min-height: 10rem; padding: .6rem; background: #3d3d3d; place-items: center; }
.thumb-plan { box-sizing: border-box; display: grid; min-width: 0; width: 16rem; max-width: 100%; padding: .7rem; gap: .5rem; border: .16rem solid #397cac; background: repeating-linear-gradient(0deg,#eef8ff 0 12px,#d8eaf5 12px 13px); color: #174c70; }
.thumb-plan > span { font-size: .63rem; font-weight: 800; text-align: center; }
.thumb-plan > div { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.thumb-plan i { padding: .55rem .15rem; border: .12rem solid #347ba9; background: #eef8ff; font-size: .58rem; font-style: normal; text-align: center; }
.thumb-plan > b { font-size: .54rem; }
.thumb-paper { display: grid; gap: .8rem; padding: 1rem; background: #f8f5ed; color: #292721; box-shadow: .15rem .15rem .4rem #0005; }
.thumb-paper b { border-bottom: 1px solid #777; padding-bottom: .3rem; }
.thumb-car { box-sizing: border-box; display: grid; width: 15rem; max-width: 100%; height: 8rem; align-content: end; padding: .5rem; background: repeating-linear-gradient(100deg,transparent 0 34px,#f0eed1 35px 37px),linear-gradient(#a4d2e9 0 38%,#63745c 38% 48%,#505557 48%); color: #fff; }
.thumb-car span { width: fit-content; padding: .2rem .4rem; background: #252e30; }
.thumb-no-image { color: #fff; }
.thumb-notebook { padding: .6rem .75rem; border: 1px solid #b7ccd9; border-left: .18rem solid #28789e; border-radius: .25rem; background: var(--thumb-panel); color: var(--thumb-ink); }
.md-typeset .thumb-notebook p { margin: .3rem 0; font-size: .62rem; line-height: 1.6; }
.md-typeset .thumb-notebook ul { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: 0; margin: .4rem 0; list-style: none; font-size: .61rem; }
.md-typeset .thumb-notebook li { margin: 0; }
.thumb-notebook button, .thumb-native-dialog footer button { min-height: 1.6rem; padding: .25rem .6rem; border: 1px solid #6d899b; border-radius: .12rem; background: #f8f8f8; color: #173e54; font: inherit; font-size: .62rem; cursor: pointer; }
.thumb-notebook button:disabled, .thumb-native-dialog button:disabled { color: #7a7a7a; background: #eee; cursor: default; }
.thumb-lab-status { display: block; margin: 0; padding: .55rem .8rem; border-top: 1px solid var(--thumb-edge); background: #f0f7fc; color: #254c64; font-size: .63rem; line-height: 1.65; overflow-wrap: anywhere; }
.thumb-lab-status[data-state="error"] { color: #8b2636; background: #fff0f2; }
.thumb-lab-status[data-state="complete"] { color: #195238; background: #edf8f1; }
.thumb-dialog-overlay { position: fixed; z-index: 50; inset: 0; display: grid; padding: 1rem; place-items: center; background: #17354c66; }
.thumb-native-dialog { width: min(100%,34rem); max-height: 85vh; overflow: auto; box-shadow: 0 .5rem 2rem #0005; }
.thumb-native-dialog > header { grid-template-columns: minmax(0,1fr) auto; padding-left: .5rem; }
.thumb-native-dialog > header button { width: 2rem; height: 1.7rem; border: 0; color: #222; background: transparent; font: inherit; font-size: .85rem; cursor: pointer; }
.thumb-native-dialog > header button:hover { background: #c42b1c; color: #fff; }
.thumb-dialog-path { padding: .45rem; }
.thumb-dialog-path span { overflow-wrap: anywhere; }
.thumb-open-files { min-height: 9rem; }
.thumb-open-files > div, .thumb-open-files > button { display: grid; width: 100%; padding: .35rem .6rem; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: .5rem; font: inherit; text-align: left; }
.thumb-open-files > div { color: #333; background: #f4f4f4; border-block: 1px solid #ddd; }
.thumb-open-files > button { color: #222; background: #fff; border: 0; cursor: pointer; }
.thumb-open-files > button:hover, .thumb-open-files > button.is-selected { background: #cce8ff; }
.thumb-open-files span { overflow-wrap: anywhere; }
.thumb-native-dialog > footer { display: flex; padding: .5rem; gap: .4rem; justify-content: flex-end; align-items: center; background: #f1f1f1; border-top: 1px solid #ddd; }
.thumb-native-dialog > footer > span { margin-right: auto; overflow-wrap: anywhere; }
.thumb-save-body { display: grid; gap: .5rem; padding: .7rem; }
.md-typeset .thumb-save-body p { margin: 0; font-size: .63rem; }
.thumb-save-body label { display: grid; gap: .2rem; }
.thumb-save-body input { min-width: 0; width: 100%; padding: .35rem; color: #222; background: #fff; border: 1px solid #999; font: inherit; }
.thumb-save-body small { color: #484848; font-size: .57rem; }
.thumb-native-dialog [data-dialog-feedback]:not(:empty) { display: block; padding: .5rem; color: #8b2636; background: #fff0f2; font-size: .62rem; overflow-wrap: anywhere; }
.thumb-report-builder { color: var(--thumb-ink); background: var(--thumb-panel); border-color: var(--thumb-edge); }
.thumb-report-builder > header > strong { font-size: .85rem; }
.md-typeset .thumb-report-context { margin: .6rem; color: var(--thumb-muted); font-size: .64rem; line-height: 1.6; }
.thumb-report-evidence article { min-width: 0; background: #eef6fb; color: var(--thumb-ink); }
.thumb-report-evidence :is(small,span) { color: var(--thumb-muted); font-size: .58rem; }
.thumb-report-evidence b { font-size: .67rem; overflow-wrap: anywhere; }
.thumb-report-builder form { gap: .65rem; }
.thumb-report-builder form > label, .thumb-report-builder fieldset label, .thumb-report-builder legend { font-size: .65rem; color: var(--thumb-ink); }
.thumb-report-builder :is(select,input) { font-size: .64rem; color: #222; background: #fff; }
.thumb-report-builder select { min-height: 2rem; width: 100%; text-overflow: ellipsis; }
.thumb-report-builder input[type="checkbox"] { width: .85rem; height: .85rem; accent-color: #0874ad; flex-shrink: 0; }
.thumb-report-builder form > button { font-size: .66rem !important; min-height: 1.85rem !important; }
[data-thumb-result]:not(:empty) { padding: .6rem; background: #e8f5ed; color: #195238; font-size: .65rem; }
.cdk-browser-lab__app--thumbnail :is(button,summary,input,select,[tabindex="0"]):focus-visible { outline: 2px solid #0076b9; outline-offset: 2px; }
.cdk-browser-lab__app--thumbnail [role="dialog"]:focus { outline: none; }
.cdk-browser-lab__app--thumbnail > footer { gap: .5rem; flex-wrap: wrap; }
.cdk-browser-lab__app--thumbnail .cdk-browser-lab__footer-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.cdk-browser-lab__app--thumbnail [data-thumb-next]:enabled { background: #0874ad; color: #fff; border-color: #0874ad; }
[data-md-color-scheme="slate"] .cdk-browser-lab__app--thumbnail { --thumb-ink: #deedf8; --thumb-muted: #bfd0df; --thumb-panel: #202d3b; --thumb-edge: #486276; }
[data-md-color-scheme="slate"] .thumb-brief { background: #20394b; }
[data-md-color-scheme="slate"] :is(.thumb-brief > span,.thumb-notebook > span) { color: #a7ddfb; }
[data-md-color-scheme="slate"] .thumb-lab-progress { background: #202d3b; }
[data-md-color-scheme="slate"] .thumb-lab-stage { background: #172431; }
[data-md-color-scheme="slate"] .thumb-lab-coach { background: #20394b; color: #deedf8; }
[data-md-color-scheme="slate"] .thumb-lab-coach > div > span { color: #a7ddfb; }
[data-md-color-scheme="slate"] .thumb-lab-coach > div > p { color: #deedf8; }
[data-md-color-scheme="slate"] .thumb-lab-coach > div > .thumb-next-label { color: #bfd0df; }
[data-md-color-scheme="slate"] .md-typeset ol.thumb-action-list li { color: #bfd0df; }
[data-md-color-scheme="slate"] .md-typeset ol.thumb-action-list li[aria-current] { color: #deedf8; background: #2a4b63; }
[data-md-color-scheme="slate"] .md-typeset ol.thumb-action-list li[data-done="true"] { color: #91dbb7; }
[data-md-color-scheme="slate"] .md-typeset .thumb-lab-coach .thumb-why > summary { color: #bfd0df; }
[data-md-color-scheme="slate"] .thumb-report-evidence article { background: #2a4052; }
[data-md-color-scheme="slate"] .cdk-browser-lab__app--thumbnail > footer { background: #202d3b; border-color: #486276; color: #deedf8; }
[data-md-color-scheme="slate"] .cdk-browser-lab__app--thumbnail .cdk-browser-lab__completion { color: #deedf8; }
/* The case brief already explains the simulation; avoid repeating the shared notice. */
.cdk-browser-lab__app--thumbnail .susa-lab-experience { display: none; }
@container (min-width: 1150px) {
  .thumb-desktop:has(.thumb-image-window) { grid-template-columns: minmax(0,1fr) minmax(13rem,18rem); align-items: start; }
  .thumb-image-window { width: 100%; }
}
@media (max-width: 700px) {
  .thumb-case-files > div { grid-template-columns: 1fr; }
  .thumb-brief { padding: .65rem; }
  .thumb-brief > strong { font-size: .8rem; }
  .md-typeset ol.thumb-lab-progress { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem .2rem; }
  .md-typeset ol.thumb-lab-progress::before { display: none; }
  .thumb-lab-coach details > p { position: static; max-width: 100%; width: auto; margin-top: .35rem !important; }
  .thumb-lab-stage { padding: .45rem; }
  .thumb-native-menus details > div { left: .15rem; min-width: min(13rem,90%); }
  .thumb-dialog-overlay { padding: .4rem; }
  .thumb-native-dialog { max-height: 80vh; }
  .thumb-native-dialog > footer { flex-wrap: wrap; }
  .thumb-native-dialog > footer > span { width: 100%; }
  .thumb-image-window { width: 100%; }
}
/* Kansa's shared blue tokens colour the teaching UI around the native viewers. */
.cdk-browser-lab__app--thumbnail .thumb-brief {
  background: linear-gradient(115deg,var(--kfl-surface),var(--md-default-bg-color));
}
.cdk-browser-lab__app--thumbnail :is(.thumb-brief > span,.thumb-notebook > span,.thumb-lab-coach > div > span,.thumb-lab-coach summary) { color: var(--kfl-blue); }
.cdk-browser-lab__app--thumbnail .thumb-lab-coach { background: var(--kfl-surface); }
.md-typeset .cdk-browser-lab__app--thumbnail .thumb-lab-coach > div > :is(p,.thumb-next-label) { color: var(--kfl-ink); }
.md-typeset .cdk-browser-lab__app--thumbnail ol.thumb-action-list li[aria-current] { color: var(--kfl-ink); background: var(--md-default-bg-color); }
.cdk-browser-lab__app--thumbnail .thumb-notebook { border-color: var(--kfl-border); border-left-color: var(--kfl-blue); }
.cdk-browser-lab__app--thumbnail .thumb-report-evidence article,
.cdk-browser-lab__app--thumbnail .thumb-lab-status:not([data-state=error]):not([data-state=complete]) { color: var(--kfl-ink); background: var(--kfl-surface); }
.cdk-browser-lab__app--thumbnail [data-thumb-next]:enabled { color: var(--kfl-action-ink); border-color: var(--kfl-action); background: var(--kfl-action); }
.cdk-browser-lab__app--thumbnail .thumb-report-builder input[type=checkbox] { accent-color: var(--kfl-blue); }
.thumb-full .kfl-step :is(li,p),.thumb-full .kfl-help :is(li,p) { overflow-wrap: anywhere; }
.thumb-full .kfl-finish__note a { color: var(--kfl-blue); text-decoration: underline; }
.thumb-full .cdk-practice__hero :is(p,.cdk-practice__title),
.thumb-full .cdk-practice__path span { color: var(--kfl-ink); }
.cdk-browser-lab__app--thumbnail .thumb-lab-progress li[aria-current] b { border-color: var(--kfl-blue); color: var(--kfl-action-ink); background: var(--kfl-blue); }
body .md-typeset .cdk-browser-lab__app--thumbnail .thumb-lab-coach > details > summary,
.cdk-browser-lab__app--thumbnail .cdk-browser-lab__footer-actions button:enabled { border-color: var(--kfl-blue); color: var(--kfl-blue); }
.cdk-browser-lab__app--thumbnail .cdk-browser-lab__footer-actions [data-thumb-next]:enabled { color: var(--kfl-action-ink); }
[data-md-color-scheme=slate] .cdk-browser-lab__app--thumbnail { --thumb-ink:var(--kfl-ink); --thumb-muted:var(--kfl-ink); --thumb-panel:var(--md-default-bg-color); --thumb-edge:var(--kfl-border); }