/* ==========================================================================
   hints.css — панель подсказок (ученик/тьютор) и список справочных материалов
   ========================================================================== */
@layer components {

.hints-panel {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  max-height: calc(100vh - var(--header-h) - var(--space-6));
  overflow-y: auto;
}
.hints-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* Ступень подсказки: статус — цвет контура по всему периметру. */
.hint-step {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  background: var(--c-panel);
  padding: var(--space-3);
  transition: opacity var(--dur-fast) var(--ease);
}
.hint-step.is-ready    { border-color: color-mix(in srgb, var(--c-signal) 45%, var(--c-hairline)); }
.hint-step.is-waiting  { border-color: color-mix(in srgb, var(--c-warn) 45%, var(--c-hairline)); }
.hint-step.is-revealed { border-color: color-mix(in srgb, var(--c-pass) 45%, var(--c-hairline)); }
.hint-step.is-locked   { opacity: 0.5; }
.hint-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.hint-step-title { font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.hint-step-meta { margin-left: auto; font-size: var(--fs-xs); color: var(--c-ink-muted); font-family: var(--font-mono); }
.hint-reset-btn { margin-left: auto; color: var(--c-ink-faint); }
.hint-reset-btn:hover { color: var(--c-fail); }

/* Маркер состояния ступени с SVG-иконкой. */
.hint-marker {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  line-height: 0;
  border-radius: var(--radius);
  flex-shrink: 0;
}
.hint-marker svg { width: 12px; height: 12px; }
.hint-marker.is-ready    { background: var(--c-signal-soft); color: var(--c-signal); }
.hint-marker.is-waiting  { background: var(--c-warn-bg); color: var(--c-warn); }
.hint-marker.is-revealed { background: var(--c-pass-bg); color: var(--c-pass); }
.hint-marker.is-locked   { background: var(--c-panel-raised); color: var(--c-ink-faint); }

/* Универсальная inline-иконка (stroke на currentColor). */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.hint-timer {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--c-warn);
}
.hint-step-note { font-size: var(--fs-sm); color: var(--c-ink-muted); margin: 0; }

.hint-content { font-size: var(--fs-sm); line-height: var(--lh-base); }
.hint-content > *:first-child { margin-top: 0; }
.hint-content > *:last-child  { margin-bottom: 0; }
.hint-content p { margin: 0 0 var(--space-2); }
.hint-content ul { margin: 0 0 var(--space-2); padding-left: var(--space-4); }
.hint-content li { margin-bottom: 2px; }
.hint-content a { color: var(--c-signal); text-decoration: underline; text-underline-offset: 2px; }
.hint-content strong { font-weight: var(--fw-semibold); }
.hint-content .inline { font-size: 0.9em; }
.hint-content pre.block { font-size: var(--fs-code-sm); margin: 0 0 var(--space-2); }
.hint-content pre.block code { font-family: var(--font-mono); color: inherit; }

.hint-reveal-btn { margin-top: var(--space-2); }

/* Справочные материалы — компактный список. */
.materials-module { border: 0; background: none; }
.materials-module + .materials-module { margin-top: var(--space-1); }
.materials-module > summary {
  display: flex;
  align-items: center;
  padding: 6px var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.materials-module > summary::-webkit-details-marker { display: none; }
.materials-module > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--c-ink);
  transition: transform var(--dur-fast) var(--ease);
}
.materials-module[open] > summary::before { transform: rotate(90deg); }
.materials-module > summary:hover { color: var(--c-ink); background: var(--c-panel-raised); }

.material-link {
  display: block;
  padding: 5px 8px 5px 22px;
  border-radius: var(--radius);
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}
.material-link:hover {
  background: var(--c-panel-raised);
  color: var(--c-signal);
  text-decoration: none;
}

}