/* 4x4 solver page. Shares the layout of the 3x3 page; the 3D view, net, palette and player styles come from cube/view.js. */
.c4-tool .cube-stage { position: relative; }
.c4-tool .cube-3d { margin: 0 -8px; }
.c4-tool .cube-viewbtns { margin-top: 4px; }
.c4-tool .cube-drag { margin: 0 0 0 4px; }
.c4-tool .cube-play { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.c4-tool .cube-play .result { margin-top: 0; margin-bottom: 12px; }
.c4-tool .cube-mode { margin-bottom: 14px; }
.c4-tool .cube-how { margin: 0 0 12px; }
.c4-tool .cube-net { margin-top: 8px; }
.c4-tool .cube-go { margin-top: 20px; }
.c4-tool #cube-solve { min-width: 140px; }
.c4-tool .cube-err-h { margin: 0 0 6px; font-weight: 600; }
.c4-tool .cube-errs { margin: 0; padding-left: 20px; }
.c4-tool .cube-errs li + li { margin-top: 8px; }
.c4-tool .cube-help { margin-top: 18px; }
.c4-tool .cube-help ol, .c4-tool .cube-help ul { padding-left: 20px; margin: 8px 0; }
.c4-tool .c4-hold { margin-top: 14px; }
.c4-stages { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.c4-stages button {
  width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--canvas); color: var(--ink);
  font: inherit; cursor: pointer;
}
.c4-stages button:hover { border-color: var(--ink); }
.c4-stages .c4-n { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); min-width: 22px; }
.c4-stages .c4-name { flex: 1 1 auto; }
.c4-stages .c4-cnt { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.c4-stages li.cur button { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.c4-stages li.done .c4-name { color: var(--muted); }