/* ==========================================================================
   Algorithm library
   --------------------------------------------------------------------------
   The thumbnails are the point of this app, so the list is built as a
   contact sheet: even cells, generous air, the diagram first and the
   metadata quiet underneath it. Everything is composed from the tokens in
   base.css — no second palette, no second type scale.
   ========================================================================== */

/* --------------------------------------------------------------------- */
/* Thumbnails                                                             */
/* --------------------------------------------------------------------- */

.thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--ink-050);
  overflow: hidden;
}

.thumb .rt-thumb,
.thumb__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumb__blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-300);
  background:
    repeating-linear-gradient(45deg, var(--ink-050) 0 6px, var(--paper) 6px 12px);
}

.thumb--sm {
  width: 44px;
  min-width: 44px;
  height: 44px;
  aspect-ratio: auto;
}

.thumb--hero {
  width: 100%;
  max-width: 260px;
  background: transparent;
}

/* --------------------------------------------------------------------- */
/* The list toolbar                                                       */
/* --------------------------------------------------------------------- */

.toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
}

.toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
}
.toolbar__row--end {
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

.toolbar__search { flex: 2 1 260px; min-width: 200px; }
.toolbar__field { flex: 1 1 150px; min-width: 140px; }

.toolbar__starred {
  margin-right: auto;
  font-size: 0.88rem;
  font-weight: 560;
  color: var(--ink-700);
}

.toolbar__views button { white-space: nowrap; }

/* --------------------------------------------------------------------- */
/* Results region                                                         */
/* --------------------------------------------------------------------- */

.results { display: flex; flex-direction: column; gap: var(--space-5); }
.results[aria-busy="true"] { opacity: 0.55; transition: opacity var(--dur) var(--ease); }

.results__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.results__count {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.92rem;
}
.results__count b { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.results__clear { margin-left: var(--space-3); font-size: 0.88rem; }

.results__block { display: flex; flex-direction: column; gap: var(--space-3); }

.results__hint {
  margin: var(--space-6) 0 0;
  color: var(--ink-400);
  font-size: 0.84rem;
}
.results__hint kbd {
  display: inline-block;
  padding: 1px 6px;
  margin-inline: 1px;
  border: 1px solid var(--ink-200);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--paper);
  font-size: 0.78rem;
  color: var(--ink-700);
}

.group-head {
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-xs);
  font-size: 0.95rem;
  width: fit-content;
}
.group-head__name { color: var(--ink-900); }
.group-head__count {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: 0.76rem;
  font-weight: 660;
}

/* --------------------------------------------------------------------- */
/* The contact sheet                                                      */
/* --------------------------------------------------------------------- */

.case-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.case-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--ink-300);
  transform: translateY(-2px);
}
.case-card:focus-within { border-color: var(--accent); }
.case-card.is-starred { border-color: #f3d18a; box-shadow: 0 0 0 1px #f7e3b5 inset, var(--shadow-xs); }
.case-card.is-unstarred { opacity: 0.5; }

.case-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}
.case-card__link:hover { text-decoration: none; color: inherit; }
.case-card__link:focus-visible { outline-offset: 4px; }

.case-card__head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.case-card__name {
  font-weight: 620;
  color: var(--ink-900);
  font-size: 0.95rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.case-card__group {
  font-size: 0.78rem;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.case-card__meta .score-meter { min-width: 74px; flex: 1 1 74px; }

.case-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-100);
  margin-top: auto;
  flex-wrap: wrap;
}
.case-card__spacer { flex: 1 1 auto; }
/* `.alg--tight` and `.case-card__noalg` live in base.css: the dashboard and
   the drill summary use them too, and neither loads this file. */

/* Turns per second on a list card. Same shape as `.case-time` beside it --
   a headline number with a quieter average under it -- so the two read as a
   pair: how long the case takes, and how fast the hands moved. */
.case-tps {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  position: relative;
  padding-right: 1.6em;
}
.case-tps b { font-size: 0.86rem; color: var(--ink-900); font-weight: 640; }
.case-tps i { font-size: 0.7rem; color: var(--ink-400); font-style: normal; }
/* The unit is set once, vertically centred against both lines, rather than
   repeated on each -- two "t/s" in a 40px card is noise. */
.case-tps em {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 0.62rem;
  color: var(--ink-300);
}

.case-row__tps i { font-style: normal; color: var(--ink-400); font-size: 0.86em; margin-left: 4px; }

.case-time {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.case-time b { font-size: 0.86rem; color: var(--ink-900); font-weight: 640; }
.case-time i { font-size: 0.7rem; color: var(--ink-400); font-style: normal; }
.case-time--none { font-size: 0.74rem; color: var(--ink-300); }

.star-form { display: inline-flex; margin: 0; }
.star-btn[aria-busy="true"] { opacity: 0.5; }

/* --------------------------------------------------------------------- */
/* Compact table                                                          */
/* --------------------------------------------------------------------- */

.case-table td, .case-table th { padding: var(--space-2) var(--space-3); }
.case-table .case-row__thumb { width: 56px; }
.case-row__name { font-weight: 560; min-width: 160px; }
.case-row__name a { color: var(--ink-900); }
.case-row__group { display: block; font-size: 0.76rem; color: var(--ink-400); font-weight: 400; }
.case-row__alg { max-width: 260px; }
.case-row__score { min-width: 110px; }
.case-row__star { width: 44px; }
.case-row.is-starred { background: #fffdf5; }
.case-row.is-unstarred { opacity: 0.5; }
.dash { color: var(--ink-300); }

/* --------------------------------------------------------------------- */
/* Hub                                                                    */
/* --------------------------------------------------------------------- */

.library-phases { margin-bottom: var(--space-6); }

.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid #cfd8ff;
  background: linear-gradient(180deg, var(--accent-soft), var(--paper));
}
.callout__title { margin: 0 0 var(--space-2); font-size: 1.08rem; }
.callout__text { max-width: 60ch; }
.callout__text p { margin: 0; color: var(--ink-500); font-size: 0.92rem; }

.phase-card { display: flex; flex-direction: column; gap: var(--space-4); }
.phase-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.phase-card__title { margin: 0; font-size: 1.25rem; }
.phase-card__title a { color: var(--ink-900); }
.phase-card__count { margin: 0; font-size: 0.9rem; color: var(--ink-500); }
.phase-card__count b { color: var(--ink-900); }
.phase-card__meter { min-height: 24px; }

.phase-card__stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  border-top: 1px solid var(--ink-100);
  padding-top: var(--space-3);
}
.phase-card__stats li { display: flex; flex-direction: column; }
.phase-card__stats b {
  font-size: 1.05rem;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.phase-card__stats span { font-size: 0.72rem; color: var(--ink-400); }

.phase-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: auto; }

.phase-card--f2l { border-top: 3px solid var(--phase-f2l); }
.phase-card--oll { border-top: 3px solid var(--phase-oll); }
.phase-card--pll { border-top: 3px solid var(--phase-pll); }

.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.todo-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--ink-100);
}
.todo-item:last-child { border-bottom: 0; }
.todo-item__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
}
.todo-item__link:hover { text-decoration: none; }
.todo-item__link:hover .todo-item__name { color: var(--accent); }
.todo-item__text { display: flex; flex-direction: column; min-width: 0; }
.todo-item__name {
  font-weight: 580;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.todo-item__group { font-size: 0.76rem; color: var(--ink-400); }
.todo-item__meta { display: flex; align-items: center; gap: var(--space-3); }

.empty--hero { padding: var(--space-8) var(--space-5); }
.empty--tight { padding: var(--space-5) var(--space-4); }
.empty__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------- */
/* Case page                                                              */
/* --------------------------------------------------------------------- */

.case-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.case-nav__up { font-size: 0.9rem; font-weight: 560; color: var(--ink-500); }
.case-nav__pager { display: flex; gap: var(--space-2); }

.case-head {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  margin-bottom: var(--space-6);
}
.case-head__diagram {
  background: var(--paper);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.case-head__text { min-width: 0; }
.case-head__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.case-head__badges a.badge:hover { text-decoration: none; filter: brightness(0.97); }
.case-head__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.case-head__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.score-meter--lg { min-width: 160px; }
.score-meter--lg .meter { height: 8px; }
.score-meter--lg b { font-size: 0.95rem; color: var(--ink-900); }

.case-facts {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin: 0 0 var(--space-4);
}
.case-facts dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  font-weight: 620;
}
.case-facts dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 620;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.case-facts--stacked { margin-bottom: var(--space-4); gap: var(--space-6); }

.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.case-main, .case-side { min-width: 0; }

/* self-assessment */
.assess { display: flex; flex-direction: column; gap: var(--space-4); }
.assess__scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-2);
  border: 0;
  margin: 0;
  padding: 0;
}
.assess__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--paper);
  cursor: pointer;
  font-weight: 500;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.assess__option:hover { border-color: var(--ink-300); background: var(--ink-050); }
.assess__option:has(input:checked),
.assess__option.is-selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.assess__option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.assess__option input { flex: none; }
.assess__value {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink-100);
  color: var(--ink-700);
  font-size: 0.8rem;
  font-weight: 700;
  flex: none;
}
.assess__option.is-selected .assess__value,
.assess__option:has(input:checked) .assess__value { background: var(--accent); color: #fff; }
.assess__label { font-size: 0.86rem; color: var(--ink-700); line-height: 1.25; }

.assess__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.assess__state { margin: 0; font-size: 0.86rem; color: var(--ink-500); }

/* viewer embed */
.case-viewer-host { margin-top: var(--space-2); }
.case-viewer__legend { margin: var(--space-3) 0 0; font-size: 0.86rem; color: var(--ink-500); }
.case-viewer__legend b { font-family: var(--font-mono); color: var(--ink-900); font-weight: 500; }
.case-viewer__fallback { margin: 0; font-size: 0.9rem; color: var(--ink-500); }

/* algorithms */
.alg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.alg-list__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--ink-050);
}
.alg-list__item.is-primary { background: var(--paper); border-color: #cfd8ff; box-shadow: var(--shadow-xs); }
.alg-list__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.alg-list__label { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.alg-list__name { font-size: 0.88rem; font-weight: 580; color: var(--ink-700); }
.alg-list__count { font-size: 0.78rem; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.alg-list__item .alg { display: block; width: 100%; font-size: 0.95rem; padding: 10px 12px; }
.alg-list__notes { margin: 0; font-size: 0.86rem; color: var(--ink-500); }
.alg-list__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.alg-list__source { margin: 0; font-size: 0.74rem; color: var(--ink-400); }

.case-scramble {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.case-scramble__title { margin: 0; font-size: 0.95rem; }
.case-scramble__hint { margin: 0; font-size: 0.84rem; color: var(--ink-500); }
.case-scramble .alg { width: 100%; }

.case-notes { margin: 0; color: var(--ink-600, var(--ink-500)); }
.case-source { margin: 0; font-size: 0.78rem; color: var(--ink-400); text-align: right; }

/* history */
.trend { display: block; width: 100%; height: 40px; overflow: visible; }
.trend__caption { margin: var(--space-2) 0 var(--space-4); font-size: 0.76rem; color: var(--ink-400); }

.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.history__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--ink-100);
  font-size: 0.88rem;
}
.history__item:last-child { border-bottom: 0; }
.history__time { font-variant-numeric: tabular-nums; font-weight: 620; color: var(--ink-900); min-width: 68px; }
.history__item.is-dnf .history__time { color: var(--danger); }
.history__source { color: var(--ink-400); font-size: 0.78rem; flex: 1 1 auto; }
.history__when { color: var(--ink-400); font-size: 0.78rem; white-space: nowrap; }

.media-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.media-list__item img { border-radius: var(--radius-sm); border: 1px solid var(--ink-200); width: 100%; }

/* --------------------------------------------------------------------- */
/* Responsive                                                             */
/* --------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .case-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .case-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .case-head__diagram { max-width: 220px; }
  .toolbar { position: static; padding: var(--space-4); }
  .toolbar__row--end { justify-content: flex-start; }
  .toolbar__starred { margin-right: 0; }
  .group-head { top: 4px; }
}

@media (max-width: 560px) {
  .case-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--space-3); }
  .case-card { padding: var(--space-2); gap: var(--space-2); }
  .case-card__name { font-size: 0.88rem; }
  .case-card__foot { padding-top: var(--space-2); }
  .case-card__meta .score-meter { min-width: 60px; }
  .assess__scale { grid-template-columns: minmax(0, 1fr); }
  .case-facts { gap: var(--space-4); }
  .phase-card__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .case-card:hover { transform: none; }
}

/* --------------------------------------------------------------------- */
/* Inline 0-5 self-assessment                                             */
/*                                                                        */
/* The point of putting this in the list is speed: a student rates a whole */
/* phase without opening 57 pages. Targets are 28px, above the comfortable */
/* tap floor, and the row wraps rather than overflowing on a phone.        */
/* --------------------------------------------------------------------- */

.rate {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  flex-wrap: wrap;
}

.rate__dot {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-400);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.rate__dot:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.rate__dot:active { transform: scale(0.9); }

/* The current rating, and everything below it, reads as "filled" — the same
   mental model as a star rating, so the level is legible at a glance. */
.rate__dot.is-set {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.rate__dot.is-set ~ .rate__dot { color: var(--ink-300); }

.rate.is-busy { opacity: 0.55; pointer-events: none; }

.case-card .rate { margin-top: var(--space-2); }
.case-row .rate { margin-top: 6px; }

/* --------------------------------------------------------------------- */
/* Top-face colour toggle (OLL)                                           */
/* --------------------------------------------------------------------- */

.toolbar__top button[data-top-button="yellow"]::before,
.toolbar__top button[data-top-button="white"]::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid rgba(20, 22, 26, 0.25);
}
.toolbar__top button[data-top-button="yellow"]::before { background: var(--cube-yellow); }
.toolbar__top button[data-top-button="white"]::before { background: var(--cube-white); }

@media (max-width: 520px) {
  .rate__dot { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------- */
/* Scramble under the "Watch it solve" heading                            */
/*                                                                        */
/* Placed here rather than only in the "Set it up" block further down so   */
/* you can set the case on a real cube without scrolling away from the     */
/* animation you are about to watch.                                      */
/* --------------------------------------------------------------------- */

/* No frame of its own. `.alg` is already a bordered chip, so the surround was
   a box inside a box -- the heaviest element on the card, drawn around the
   least. Dropping the padding with it also lines SCRAMBLE up with the TURN
   label directly beneath it, which the 12px inset had knocked out by 13px. */
.case-setup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}

.case-setup__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 660;
  color: var(--ink-400);
  flex: 0 0 auto;
}

/* `0 1 auto`, not `1 1 auto`: a ten-move scramble is about 230px of text and
   the stretched box drew a border around 1000px of nothing -- the heaviest
   element on the card, carrying the least. It still shrinks when it has to. */
/* Keeps `.alg`'s own --ink-050 fill: the paper override existed only to lift
   the chip off the grey frame that is no longer there, and paper on paper
   would leave the scramble with nothing but a hairline around it. */
.case-setup .alg {
  flex: 0 1 auto;
  min-width: 0;
}

/* Copy stays at the card's right edge now that the box no longer pushes it
   there, so it lines up with the other right-hand actions rather than
   trailing the scramble at whatever width that happens to be. */
.case-setup .btn {
  margin-left: auto;
}

@media (max-width: 520px) {
  .case-setup { gap: var(--space-2); }
  .case-setup .alg { width: 100%; flex-basis: 100%; }
}

/* --------------------------------------------------------------------- */
/* Algorithm shown inline in the todo list and in the case header         */
/* --------------------------------------------------------------------- */

/* The todo list is a practice list, so the moves have to be readable without
   opening each case. On a phone the algorithm gets its own row rather than
   competing with the name for width. */
.todo-item__alg {
  flex: 0 1 auto;
  max-width: 100%;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.case-head__alg {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
}

.case-head__alg .alg {
  font-size: 1.02rem;
  padding: 8px 12px;
}

.case-head__alg-note {
  font-size: 0.82rem;
  color: var(--ink-400);
}

@media (max-width: 640px) {
  .todo-item { flex-wrap: wrap; }
  .todo-item__alg { flex-basis: 100%; order: 5; }
  .case-head__alg .alg { font-size: 0.94rem; }
}

/* --------------------------------------------------------------------- */
/* "Watch it solve" spans the full width                                  */
/*                                                                        */
/* It is the widest thing on the page — 3D cube, flat net and a reserved   */
/* cell beside them — so it sits outside the main/side split rather than   */
/* being squeezed into the narrower column.                               */
/* --------------------------------------------------------------------- */

.case-viewer-panel {
  grid-column: 1 / -1;
  margin-bottom: var(--space-5);
}

/* --------------------------------------------------------------------- */
/* Turning the cube by hand                                               */
/* --------------------------------------------------------------------- */

.hand-turns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}

.hand-turns__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 660;
  color: var(--ink-400);
}

/* Faces and slices as two clusters. Tight inside (4px, so each reads as one
   segmented control rather than six loose pills) with a hairline between,
   which is the one separator on this card that whitespace could not do: the
   old 12px-vs-8px gap was a difference nobody sees, and a wrap put a stray
   indent on whichever button landed first on the next line. */
.hand-turns__group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hand-turns__cluster {
  display: flex;
  gap: 4px;
}

.hand-turns__cluster--slice {
  padding-left: var(--space-3);
  border-left: 1px solid var(--ink-200);
}

/* Anything in the row that is not a turn. `margin-left: auto` alone would
   only push it to the end of whatever flex line it happened to land on --
   the clusters above are what keep it on the first one. */
.hand-turns__aside {
  margin-left: auto;
}

.hand-turns__btn {
  min-width: 44px;
  font-family: var(--font-mono);
  font-weight: 600;
  /* The label gains a prime under Shift; a fixed width stops the row
     shuffling sideways as it changes. */
  justify-content: center;
}

/* A slice turns the middle layer and leaves both faces alone, so it belongs to
   its own group. The gap goes on the first slice button -- the one that
   follows a face button, which is M. */

/* Primed state is announced by the label itself, but colour makes the mode
   obvious at a glance while the key is held. */
.hand-turns.is-primed .hand-turns__btn {
  background: var(--accent-soft);
  color: #2a41d8;
}

/* Just the word, ~40px. The hint used to be stacked under it, which made the
   legend 138px and pushed the buttons a third of the way across the row --
   running text competing with the buttons every time you look, for something
   you need to read once. It follows them now instead. */
.hand-turns__legend {
  margin-right: var(--space-1);
}

/* Marginalia: it trails the buttons it describes and is the first thing to go
   when the row runs out of room, since by then you have already read it. */
.hand-turns__hint {
  font-size: 0.78rem;
  color: var(--ink-400);
  white-space: nowrap;
  /* Doubles the row gap. At 8px it sat as close to S as S does to E and read
     as a fourth item in the slice cluster. */
  margin-left: var(--space-2);
}

.hand-turns__hint kbd {
  font-size: 0.72rem;
  padding: 1px 5px;
  border: 1px solid var(--ink-200);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--paper);
}

/* Measured: the row holds one line down to a 780px card with the hint and a
   630px card without it, and the card runs about 50px narrower than the
   viewport once the page is one column. So the hint goes before it can push
   the turns onto a second line -- it is the one thing in the row that is read
   once, and every button keeps `Hold Shift for L prime` in its own title and
   aria-label, which is where a keyboard or screen reader user finds it
   anyway. */
@media (max-width: 860px) {
  .hand-turns__hint { display: none; }
}

/* "Your todo list — example list": the tag has to be legible as a
   qualification of the heading rather than part of it, since the difference
   between somebody's real list and a sample of the library matters. */
.todo-preview__tag {
  margin-left: var(--space-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-500);
  font-size: 0.7rem;
  font-weight: 660;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.todo-preview__note {
  margin: 0 0 var(--space-4);
  max-width: 62ch;
  color: var(--ink-500);
  font-size: 0.92rem;
}

/* Turns per second. A rate, so it is set smaller than the time it sits next
   to — the time is the headline, this is the explanation of it. */
.tps__unit {
  font-size: 0.62em;
  font-weight: 500;
  color: var(--ink-400);
  margin-left: 1px;
}

.tps__note {
  margin: var(--space-2) 0 0;
  font-size: 0.78rem;
  color: var(--ink-400);
}
.tps__note code { font-size: 0.92em; }

.history__tps {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-400);
  /* Fixed width so the rates form a column against the times beside them;
     in a flex row `text-align` alone would leave them ragged. */
  min-width: 3.6rem;
  text-align: right;
}
.history__tps small { font-size: 0.78em; }
/* The star marks an attempt timed against one of the alternatives, whose turn
   count differs from the algorithm shown at the top of the page. */
.history__tps abbr { text-decoration: none; color: var(--accent); margin-left: 1px; }