/* =========================================================
   GenAI, solved (genai-cube.html) — builds on style.css and adlc.css (hero, learning-path bar).
   The cube is CSS 3D: 26 cubies × 6 faces, each placed by a matrix3d from js/genai-cube.js.
   --s (one cubie's size in px) is set on .gc-stage by the script from the column width.
   Sticker colours are a real cube's, so they stay the same in both themes; only the plastic,
   the floor shadow and the backdrop change.
   ========================================================= */

:root {
  --cube-red: #c62a35;
  --cube-orange: #f4812a;
  --cube-yellow: #ffd23f;
  --cube-green: #2ec27e;
  --cube-blue: #3a86ff;
  --cube-white: #f4f4ef;
  --cube-plastic: #12141b;
  --cube-floor: rgba(20, 23, 31, 0.28);
  --cube-dots: rgba(20, 23, 31, 0.07);
}
:root[data-theme="dark"] {
  --cube-plastic: #030405;
  --cube-floor: rgba(0, 0, 0, 0.7);
  --cube-dots: rgba(231, 233, 238, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cube-plastic: #030405;
    --cube-floor: rgba(0, 0, 0, 0.7);
    --cube-dots: rgba(231, 233, 238, 0.06);
  }
}

.gc-hero { padding-bottom: 8px; }

/* ---------- Layout ---------- */

.gc-main { padding: 8px 0 56px; }
.gc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 820px) {
  .gc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The scene ---------- */

.gc-scene {
  position: relative;
  height: calc(var(--s, 80px) * 5.3);
  perspective: calc(var(--s, 80px) * 13);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 42%, var(--accent-soft), transparent 62%),
    radial-gradient(var(--cube-dots) 1px, transparent 1.4px) 0 0 / 18px 18px,
    var(--bg-elevated);
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.gc-scene:active { cursor: grabbing; }
.gc-scene:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gc-nojs { position: absolute; inset: auto 16px 16px; margin: 0; color: var(--text-muted); font-size: 14.5px; }

.gc-floor {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: calc(var(--s) * 3.4);
  height: calc(var(--s) * 0.5);
  margin-left: calc(var(--s) * -1.7);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--cube-floor), transparent);
  pointer-events: none;
}
.gc-ring {
  position: absolute;
  left: 50%;
  top: 47%;
  width: calc(var(--s) * 3);
  height: calc(var(--s) * 3);
  margin: calc(var(--s) * -1.5) 0 0 calc(var(--s) * -1.5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: conic-gradient(var(--cube-red), var(--cube-orange), var(--cube-yellow), var(--cube-green), var(--cube-blue), var(--cube-white), var(--cube-red));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

.gc-cube { position: absolute; left: 50%; top: 47%; width: 0; height: 0; opacity: 0; transform-style: preserve-3d; }
.gc-cubie {
  position: absolute;
  left: calc(var(--s) / -2);
  top: calc(var(--s) / -2);
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
}
.gc-face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--s) * 0.02); /* near-square: rounded plastic shows gaps where corners meet */
  background: var(--cube-plastic);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.gc-sticker {
  position: absolute;
  inset: 5%;
  display: grid;
  place-items: center;
  padding: 6%;
  border-radius: 13%;
  text-align: center;
  color: var(--ink);
  font: 650 var(--fs)/1.08 var(--font-sans);
  hyphens: manual;
  /* Soft ends: every corner of the gradient keeps ≥ 4.5:1 with the label ink. */
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 90%, #fff) 0%, var(--c) 42%, color-mix(in srgb, var(--c) 94%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 -3px 6px rgba(0, 0, 0, 0.12);
  filter: brightness(var(--flash, 1));
  overflow-wrap: anywhere;
  transition: opacity 0.3s;
}
.gc-sticker.inv { filter: none; }
.gc-cube:not(.open) .gc-face.inner { visibility: hidden; }
.gc-sticker.centre { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.gc-sticker.lit {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 calc(var(--s) * 0.16) color-mix(in srgb, var(--c) 75%, transparent);
}
.gc-scene.hl .gc-sticker:not(.match) { opacity: 0.16; }
/* White ring with a dark edge: visible on every sticker colour. */
.gc-sticker.sel { outline: 3px solid #fff; outline-offset: -4px; box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.55); }

/* ---------- Caption, progress, controls ---------- */

.gc-caption { display: flex; gap: 10px; align-items: flex-start; min-height: 3.2em; margin: 14px 2px 8px; line-height: 1.45; }
.gc-cap-dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 4px; background: var(--cd, var(--accent)); }
.gc-caption b { font-family: var(--font-display); }
.gc-bar { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.gc-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cube-red), var(--cube-orange), var(--cube-yellow), var(--cube-green), var(--cube-blue));
}
.gc-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.gc-controls .btn { padding: 8px 16px; font-size: 14px; }
.gc-controls .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- Families and the info card ---------- */

.gc-panel h2 { margin: 0 0 10px; font: 600 13px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.gc-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.gc-chip {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text);
  font: 600 14.5px var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.gc-chip:hover { transform: translateY(-1px); }
.gc-chip:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gc-swatch { flex: none; width: 18px; height: 18px; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.gc-chip.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 6px 18px color-mix(in srgb, var(--c) 25%, transparent); }

.gc-info {
  position: relative;
  min-height: 170px;
  padding: 18px 20px 18px 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
}
.gc-info::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ic, var(--accent)); }
.gc-info-fam { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.gc-info h3 { margin: 6px 0 8px; font-family: var(--font-display); font-size: 24px; }
.gc-info p { margin: 0; line-height: 1.55; }

/* ---------- Text version ---------- */

.gc-list { margin-top: 36px; }
.gc-list summary { cursor: pointer; font-weight: 600; }
.gc-list h3 { margin: 22px 0 6px; font-family: var(--font-display); font-size: 18px; display: flex; gap: 8px; align-items: center; }
.gc-list h3 .gc-swatch { width: 14px; height: 14px; }
.gc-list > div > p { margin: 0 0 8px; color: var(--text-muted); }
.gc-list dl { margin: 0; display: grid; grid-template-columns: minmax(8em, max-content) 1fr; gap: 6px 16px; }
.gc-list dt { font-weight: 600; }
.gc-list dd { margin: 0; color: var(--text-muted); }
@media (max-width: 560px) {
  .gc-list dl { grid-template-columns: 1fr; gap: 0; }
  .gc-list dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-sticker, .gc-chip { transition: none; }
  .gc-chip:hover { transform: none; }
}