/* The Lab's other parts inside Product, in the Lab's look: the course editor's guide on a phone, the way back to Desk
   in System readiness and its notices, and the buttons the Product receiver adds to the Lab's course bar.
   js/lab-skin.js puts .lab-skin and the Lab's light or dark choice on each part; lab-skin.css gives .lab-skin the
   Lab's palette and roles, so Product keeps its own look everywhere else. Role tokens only: no colour is named here.
   (The helper and "Try one change" are in lab-assist.css.) */
@import url("lab-skin.css");

/* The phone editor's guide: the course bar's way back, the step and who it is for, as one Lab card. Product's own
   index.html shows it at 520px and narrower and places it in the editor's head. */
.course-product-editor-guide.lab-skin {
  gap: 2px; margin-bottom: 8px; padding: 2px 12px 10px; border: var(--ol) solid var(--edge); border-radius: var(--r);
  color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font: 500 13px/1.4 var(--display); overflow-wrap: anywhere;
}
.course-product-editor-guide.lab-skin > a {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; max-width: 100%;
  color: var(--text); font-weight: 800; text-decoration: none;
}
.course-product-editor-guide.lab-skin > a:hover { text-decoration: underline 3px var(--link-line); text-underline-offset: 0.3em; }
.course-product-editor-guide.lab-skin > details { margin: 0; padding: 0; border: 0; border-top: var(--ol-thin) solid var(--divider); background: transparent; }
.course-product-editor-guide.lab-skin summary {
  display: flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 800; cursor: pointer;
  text-decoration: underline 2px var(--link-line); text-underline-offset: 0.3em;
}
.course-product-editor-guide.lab-skin ol { margin: 0; padding: 0 0 6px 20px; }
.course-product-editor-guide.lab-skin > button {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; margin: 4px 0 2px; padding: 6px 14px;
  border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font: 800 13px/1.25 var(--display); white-space: normal; text-align: left; cursor: pointer;
}
.course-product-editor-guide.lab-skin .course-product-editor-assumptions { margin: 4px 0 0; color: var(--text-dim); font-size: 12px; }
.course-product-editor-guide.lab-skin [role="status"]:not([hidden]) { margin: 4px 0 0; font-weight: 800; }

/* The two choices the receiver adds to the course bar when other work is open, and its "Edit who it helps". */
.course-task-guide .course-handoff-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 6px 0 4px; }
.course-task-guide .course-handoff-actions button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px;
  border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill); color: var(--text); background: var(--surface);
  box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge); font: 800 13px/1.2 var(--display); cursor: pointer;
}
.course-task-guide [data-course-edit-audience] { min-height: 44px; margin-top: 6px; font: 800 13px/1.2 var(--display); cursor: pointer; }

/* The way back to Desk in System readiness: the Lab's quiet sticker among Product's own buttons. */
#btn-propose-desk.lab-skin {
  height: auto; min-height: 44px; padding: 6px 16px; border: var(--ol-thin) solid var(--control-edge); border-radius: var(--pill);
  color: var(--text); background: var(--surface); box-shadow: var(--pop-sm) var(--pop-sm) 0 var(--edge);
  font: 800 13px/1.2 var(--display); letter-spacing: -0.01em; white-space: normal; text-align: left;
  /* On a phone it gives way (two lines) rather than push Product's own buttons out of the footer. */
  flex: 0 1 auto; min-width: 0;
}
#btn-propose-desk.lab-skin [data-ui-icon] { flex: none; color: inherit; }
@media (max-width: 480px) { #btn-propose-desk.lab-skin { padding: 4px 12px; font-size: 12px; } }
#btn-propose-desk.lab-skin:hover { color: var(--text); border-color: var(--control-edge); }

/* A notice about Desk (StateDoc.showNotice with { lab: true }): a Lab sticker; an error is the Lab's red alert. */
#scene-doc-notice.lab-skin {
  /* its own width, up to the screen less a 16px gutter each side (left: 50% would otherwise halve it) */
  box-sizing: border-box; align-items: center; gap: 10px; width: max-content; max-width: min(calc(100vw - 32px), 32rem); padding: 4px 4px 4px 16px;
  border: var(--ol) solid var(--edge); border-radius: var(--r); color: var(--text); background: var(--surface);
  box-shadow: var(--pop) var(--pop) 0 var(--edge); font: 600 14px/1.4 var(--display); overflow-wrap: anywhere;
}
#scene-doc-notice.lab-skin[data-tone="error"] { border-color: var(--danger); }
#scene-doc-notice.lab-skin[data-tone="error"]::before {
  content: "!"; display: grid; flex: none; place-items: center; width: 26px; height: 26px; margin-left: -4px;
  border: var(--ol-thin) solid var(--edge); border-radius: 50%; color: var(--on-danger); background: var(--danger); font: 800 1rem/1 var(--display);
}
#scene-doc-notice.lab-skin .scene-doc-notice-text { flex: 1 1 auto; min-width: 0; padding: 8px 0; }
#scene-doc-notice.lab-skin > button {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--text); background: transparent;
  font: 700 1.4rem/1 var(--display); cursor: pointer;
}
#scene-doc-notice.lab-skin > button::before { content: ""; position: absolute; width: 30px; height: 30px; border: var(--ol-thin) solid var(--control-edge); border-radius: 50%; }

/* Lift on hover, press onto the shadow; focus is the Lab's ring. Nothing moves with reduced motion. */
@media (hover: hover) {
  :is(.course-product-editor-guide.lab-skin > button, .course-task-guide .course-handoff-actions button, #btn-propose-desk.lab-skin):hover {
    transform: translate(-1px, -1px); box-shadow: calc(var(--pop-sm) + 1px) calc(var(--pop-sm) + 1px) 0 var(--edge);
  }
}
:is(.course-product-editor-guide.lab-skin > button, .course-task-guide .course-handoff-actions button, #btn-propose-desk.lab-skin):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--edge); }
:is(.course-product-editor-guide.lab-skin, #scene-doc-notice.lab-skin) :focus-visible,
:is(.course-task-guide .course-handoff-actions button, #btn-propose-desk.lab-skin):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  :is(.course-product-editor-guide.lab-skin > button, .course-task-guide .course-handoff-actions button, #btn-propose-desk.lab-skin) { transition: none; transform: none !important; }
}