/* COACH-BOX-1 (Doug e4d9e97): LEARN's coaching on the Sim Fire glass, the diegetic rule's THIRD STATE. Drawn by
   static/js/modules/curriculum/coach_box.js ONLY while LEARN owns Sim Fire; the bare glass never carries it.
   ONE CLASS FAMILY, `coach-box*`, never TINA's guide or walk markers. Every part takes no pointer:
   a press goes through to the control it points at, and the outline sits OUTSIDE that control's box.
   The tone is the glass tab's (canvas.css: the dark gradient, the cyan border) at a lower alpha, so the glass
   shows through and the words read over sky and over dirt. */

/* A body-level fixed sibling at 10002: above the kit layer (10001), below the column's panel (10003), with the
   kit layer's insets so it follows the column and the rail (SIM-PANELS-1). */
.coach-box-layer {
  position: fixed;
  inset: 0;
  z-index: 10002;
  overflow: visible;
  pointer-events: none;
}

body.scope-column--active .coach-box-layer {
  inset: var(--scope-glass-top, 0px) var(--scope-rail-width, 0px) 0 var(--scope-column-width, 340px);
}

body.scope-column--active.scope-column--collapsed .coach-box-layer {
  inset: var(--scope-glass-top, 0px) var(--scope-rail-width, 0px) 0 0;
}

body.scope-view--active.scope-column--active.scope-immersive .coach-box-layer {
  inset: 0;
}

.coach-box-layer,
.coach-box-layer * {
  pointer-events: none !important;
}

.coach-box {
  position: absolute;
  box-sizing: border-box;
  max-width: 260px;
  padding: 9px 12px 10px;
  border: 1px solid rgba(0, 212, 255, 0.45);
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(5, 12, 16, 0.84), rgba(5, 12, 16, 0.7));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  color: #e8f4f8;
}

.coach-box__text {
  margin: 0;
  font: 500 13px/1.4 var(--font-primary, system-ui, sans-serif);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* The outline: a ring a few pixels outside the control, a dark rim under the cyan so it reads over sky too. */
.coach-box-outline {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid rgba(0, 212, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(5, 12, 16, 0.7), inset 0 0 0 1px rgba(5, 12, 16, 0.55);
  background: transparent;
}

.coach-box-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.coach-box-arrow {
  stroke: rgba(0, 212, 255, 0.95);
  stroke-width: 2;
  stroke-linecap: round;
}

.coach-box-arrow__under {
  stroke: rgba(5, 12, 16, 0.7);
  stroke-width: 4;
  stroke-linecap: round;
}

.coach-box-arrow__head {
  fill: rgba(0, 212, 255, 0.95);
  stroke: rgba(5, 12, 16, 0.7);
  stroke-width: 1;
}

/* The lesson's open, in LEARN's guide pane (the door learn:glass). */
.coach-box-lesson {
  margin: 8px 0 0;
}

.coach-box-lesson__open {
  width: 100%;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 212, 255, 0.45);
  border-radius: 4px;
  background: linear-gradient(100deg, rgba(5, 12, 16, 0.92), rgba(5, 12, 16, 0.72));
  color: #e8f4f8;
  font: 600 12px/1.2 var(--font-primary, system-ui, sans-serif);
  letter-spacing: 0.08em;
  cursor: pointer;
}

.coach-box-lesson__open:hover,
.coach-box-lesson__open:focus-visible {
  border-color: rgba(0, 212, 255, 0.9);
  outline: none;
}