/* The Lab's course bar inside any app, in the Lab's look: lab-skin.css carries the Lab's colours onto the bar only
   (course-handoff.js adds .lab-skin), so a host that keeps its own look keeps it everywhere else. */
@import url("lab-skin.css");
.course-task-guide { box-sizing: border-box; position: relative; z-index: 20; flex: 0 0 auto; width: 100%; min-width: 0; padding: 14px 20px; border: 0; border-bottom: var(--ol, 3px) solid var(--edge); background: var(--surface); color: var(--text); font: 500 14px/1.45 var(--display); text-align: left; overflow-wrap: anywhere; }
.course-task-guide * { box-sizing: border-box; min-width: 0; }
.course-task-guide__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.course-geo-task-host .course-task-guide__heading { position: sticky; top: -10px; z-index: 2; padding: 6px 0; background: var(--surface); }
.course-task-guide__heading strong { flex: 1 1 240px; font-size: 16px; font-weight: 800; }
.course-task-guide__label { font: 700 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.course-task-guide__back { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 12px; border: var(--ol-thin, 2px) solid var(--control-edge); border-radius: var(--pill, 999px); background: var(--surface); color: var(--text); box-shadow: var(--pop-sm, 3px) var(--pop-sm, 3px) 0 var(--edge); text-decoration: none; font-weight: 800; }
.course-task-guide__back:hover { transform: translate(-1px, -1px); box-shadow: calc(var(--pop-sm, 3px) + 1px) calc(var(--pop-sm, 3px) + 1px) 0 var(--edge); }
.course-task-guide__back:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.course-task-guide__title { font-size: 17px; font-weight: 800; margin: 8px 0 4px; }
.course-task-guide__audience { margin: 2px 0 4px; color: var(--text-dim); font-size: 12px; }
.course-task-guide__audience:empty { display: none; }
.course-task-guide__steps { display: flex; flex-wrap: wrap; gap: 4px 30px; margin: 4px 0 6px; padding-left: 20px; list-style: decimal; }
.course-task-guide__detail { margin: 4px 0; color: var(--text-dim); font-size: 12px; }
.course-task-guide__status { margin: 4px 0 0; color: var(--text); font-weight: 700; }
.course-task-guide__status:empty { display: none; }
.course-task-guide__notes { margin-top: 6px; max-width: 760px; padding: 0; background: none; border: 0; }
.course-task-guide__notes summary { cursor: pointer; padding: 4px 0; color: var(--text); font-size: 12px; font-weight: 700; text-decoration: underline 2px var(--link-line); text-underline-offset: 0.3em; }
.course-task-guide__notes label { display: grid; gap: 4px; padding-top: 6px; color: var(--text); }
.course-task-guide textarea { width: 100%; background: var(--bg); color: var(--text); border: var(--ol-thin, 2px) solid var(--control-edge); padding: 8px; border-radius: var(--r, 14px); font: inherit; font-weight: 600; resize: vertical; }
.course-task-guide__toggle { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 12px; border: var(--ol-thin, 2px) solid var(--control-edge); border-radius: var(--pill, 999px); background: transparent; color: var(--text); font: inherit; font-weight: 800; cursor: pointer; }
.course-task-guide__toggle:hover { text-decoration: underline 2px var(--link-line); text-underline-offset: 0.3em; }
.course-task-guide__toggle:focus-visible, .course-task-guide textarea:focus-visible, .course-task-guide__notes summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.course-task-guide__testing { margin: 2px 0 6px; color: var(--text); font-size: 13px; }
.course-task-guide__testing:empty { display: none; }
/* The strip the learner keeps while working in the app: the move, the running
   count and the way back stay visible; the rest folds away. */
.course-task-guide__count { margin: 2px 0 0; color: var(--text-dim); font-size: 12px; }
.course-task-guide__count:empty { display: none; }
/* Collapsed, the whole task is one thin row so the app below keeps its height:
   the move, the count, the note and the way back, side by side. */
.course-task-guide[data-collapsed="true"] { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 5px 20px; }
.course-task-guide[data-collapsed="true"] .course-task-guide__body { display: none; }
.course-task-guide[data-collapsed="true"] .course-task-guide__title { order: 0; flex: 1 1 12rem; margin: 0; font-size: 14px; }
.course-task-guide[data-collapsed="true"] .course-task-guide__count { order: 1; margin: 0; }
.course-task-guide[data-collapsed="true"] .course-task-guide__notes { order: 2; margin: 0; }
.course-task-guide[data-collapsed="true"] .course-task-guide__notes summary { padding: 0; }
.course-task-guide[data-collapsed="true"] .course-task-guide__notes[open] { flex-basis: 100%; }
.course-task-guide[data-collapsed="true"] .course-task-guide__status { order: 4; flex-basis: 100%; margin: 0; }
.course-task-guide[data-collapsed="true"] .course-task-guide__heading { order: 3; flex: 0 0 auto; margin-left: auto; gap: 4px 10px; }
.course-task-guide[data-collapsed="true"] .course-task-guide__heading strong,
.course-task-guide[data-collapsed="true"] .course-task-guide__label { display: none; }
.course-task-guide[data-collapsed="true"] .course-task-guide__back,
.course-task-guide[data-collapsed="true"] .course-task-guide__toggle { min-height: 30px; padding: 3px 10px; font-size: 12px; }
@media (max-width: 600px) { .course-task-guide { padding: 10px 12px; } .course-task-guide__heading { gap: 4px 8px; } .course-task-guide__heading strong { flex-basis: 100%; order: 2; } .course-task-guide__back { margin-left: auto; font-size: 12px; } .course-task-guide__steps { display: block; } .course-task-guide__toggle { font-size: 12px; padding: 6px 10px; }
/* On a phone the folded strip must cost the app as little height as possible:
   one line for the move, one for the way back, and the criterion only once
   there is something to count. */
.course-task-guide[data-collapsed="true"] { padding: 5px 12px; gap: 2px 8px; }
.course-task-guide[data-collapsed="true"] .course-task-guide__title { flex-basis: 100%; font-size: 13px; }
.course-task-guide[data-collapsed="true"] .course-task-guide__count { flex: 1 1 6rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-task-guide[data-collapsed="true"][data-noted="false"] .course-task-guide__count { display: none; }
.course-task-guide[data-collapsed="true"] .course-task-guide__notes summary { font-size: 11px; }
}

.course-task-guide__back,.course-task-guide__toggle{display:inline-flex;align-items:center;gap:.3em}

/* A step from the Lab's guided entrance: one slim bar in the Lab's words, the case's name and the step, a small
   "i" for the rest, and one way back (final-round 1). Every control is a 44px target. */
.course-task-guide--lab { padding: 0 8px 0 14px; }
.course-task-guide--lab .course-task-guide__bar { flex-wrap: nowrap; gap: 4px 8px; }
.course-task-guide--lab .course-task-guide__line { flex: 1 1 auto; margin: 0; padding: 12px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; }
.course-task-guide--lab .course-task-guide__line strong { flex: none; font-size: 14px; font-weight: 800; }
.course-task-guide--lab .course-task-guide__line .course-task-guide__title { display: inline; margin: 0; color: var(--text-dim); font-size: 14px; font-weight: 600; }
.course-task-guide__more { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.course-task-guide__more > span { display: grid; place-items: center; width: 30px; height: 30px; border: var(--ol-thin, 2px) solid var(--control-edge); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--pop-sm, 3px) var(--pop-sm, 3px) 0 var(--edge); font: 800 15px/1 var(--display); }
.course-task-guide__more[aria-expanded="true"] > span { border-color: var(--edge); color: var(--on-picked); background: var(--picked); }
.course-task-guide__more:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: 50%; }
.course-task-guide--lab .course-task-guide__back { flex: none; min-height: 44px; margin: 0; font-size: 13px; }
.course-task-guide--lab .course-task-guide__body { padding: 8px 0 10px; border-top: var(--ol-thin, 2px) solid var(--divider); }
.course-task-guide--lab .course-task-guide__body[hidden] { display: none; }
.course-task-guide--lab .course-task-guide__detail p { margin: 4px 0; }
.course-task-guide--lab .course-task-guide__note { display: grid; gap: 4px; max-width: 760px; margin-top: 6px; color: var(--text); font-size: 12px; font-weight: 700; }
.course-task-guide--lab .course-task-guide__status:not(:empty) { margin: 0 0 8px; }
@media (max-width: 600px) {
  .course-task-guide--lab { padding: 0 4px 0 10px; }
  .course-task-guide--lab .course-task-guide__heading strong { flex-basis: auto; order: 0; }
  /* On a phone the step comes first and may take two lines; the case's name sits under it on one line; the bar
     stays one row with its two controls (final-round 2: "<name> · <step>" clamped to two lines cut the step to a
     word or two, and the padding under the clamp let the tops of a hidden third line show). Each part clips itself
     at whole lines, so nothing below them is painted. */
  .course-task-guide--lab .course-task-guide__line { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 3px 0; overflow: visible; white-space: normal; font-size: 13px; line-height: 17px; }
  .course-task-guide--lab .course-task-guide__sep { display: none; }
  .course-task-guide--lab .course-task-guide__line .course-task-guide__title { order: -1; display: -webkit-box; max-height: 34px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; line-height: 17px; font-weight: 700; }
  .course-task-guide--lab .course-task-guide__line strong { display: block; max-height: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-dim); font-size: 12px; line-height: 15px; font-weight: 400; }
  /* On a phone the way back is the Lab's text link (no pill), so the step keeps the width to read whole at 360px. */
  .course-task-guide--lab .course-task-guide__back { margin-left: 0; padding: 6px 4px; border: 0; background: transparent; box-shadow: none; font-size: 12px;
    text-decoration: underline 2px var(--link-line); text-underline-offset: .25em; }
  .course-task-guide--lab .course-task-guide__back:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .course-task-guide__back { transition: none; transform: none !important; } }

/* Lesson context: one task, one action, with the explanation behind a quiet drawer. */
.course-task-guide:not(.course-task-guide--lab) { padding: 16px 20px; }
.course-task-guide:not(.course-task-guide--lab) .course-task-guide__heading { gap: 12px 16px; padding-bottom: 10px; border-bottom: var(--ol-thin) solid var(--divider); }
.course-task-guide:not(.course-task-guide--lab) .course-task-guide__title { margin: 14px 0 8px; font-size: 20px; line-height: 1.25; }
.course-task-guide__explanation { margin: 6px 0 10px; max-width: 60rem; }
.course-task-guide__explanation > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--text-dim); font-weight: 700; text-decoration: underline 2px var(--link-line); text-underline-offset: .3em; }
.course-task-guide__explanation > summary::before { content: '+'; margin-right: 8px; }
.course-task-guide__explanation[open] > summary::before { content: '−'; }
.course-task-guide__explanation .course-task-guide__steps { display: grid; gap: 8px; margin: 10px 0; }
.course-task-guide__explanation :is(p, li) { font-size: 14px; line-height: 1.5; }
.course-task-guide__count:empty { display: none; }
.course-task-guide:not(.course-task-guide--lab) .course-task-guide__status { max-width: 60rem; font-weight: 600; line-height: 1.5; }
.course-task-guide[data-collapsed=true]:not(.course-task-guide--lab) { padding: 8px 20px; }
@media (max-width: 600px) { .course-task-guide:not(.course-task-guide--lab) { padding: 12px; } .course-task-guide:not(.course-task-guide--lab) .course-task-guide__title { font-size: 18px; } .course-task-guide[data-collapsed=true]:not(.course-task-guide--lab) { padding: 8px 12px; } }