/* Lego. Every block is the same brick on the same grid, so any two fit.
   A brick is: a picture, a number, one word. Nothing needs reading to be used.
   Edges are logical (inline-start, not left), so right-to-left is a layout, not a mirror. */

.deck {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 132px;
  gap: var(--gap);
  padding: var(--gap);
  max-width: 1680px;
  margin: 0 auto;
}

/* sizes: a brick is 3 columns wide and 1 row tall; the rest are multiples */
.b      { grid-column: span 3; grid-row: span 1; }
.b-wide { grid-column: span 6; }
.b-full { grid-column: span 12; }
.b-tall { grid-row: span 2; }

.block {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--block);
  color: inherit;
  text-decoration: none;
  text-align: start;
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.block::before {                       /* the stud: every brick carries the accent */
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--grad);
}

a.block, button.block { min-height: var(--tap); }
a.block:hover, button.block:hover { transform: translateY(-2px); border-color: var(--line-2); }

/* lit: the chosen or active brick takes the gradient */
.block.lit {
  background: var(--grad);
  border-color: transparent;
  box-shadow: var(--glow);
  color: #fff;
}
.block.lit::before { display: none; }
.block.lit .cap, .block.lit .sub { color: rgba(255, 255, 255, .86); }

/* the three parts of a brick */
.pic {                                 /* picture first: understood without words */
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(99, 221, 255, .12);
  margin-bottom: 6px;
}
.pic svg { width: 24px; height: 24px; fill: none; stroke: var(--neon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.block.lit .pic { background: rgba(255, 255, 255, .18); }
.block.lit .pic svg { stroke: #fff; }

.num {                                 /* the number: the same in every script */
  font-family: var(--mono);
  font-size: 30px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.cap { font-size: 14px; font-weight: 700; color: var(--ink); }
.sub { font-size: 13px; color: var(--ink-2); }

/* status: a shape as well as a colour, so colour is never the only signal */
.dot { width: 12px; height: 12px; display: inline-block; margin-inline-end: 6px; vertical-align: -1px; background: currentColor; }
.is-ok   { color: var(--ok); }   .is-ok   .dot { border-radius: 50%; }
.is-warn { color: var(--warn); } .is-warn .dot { transform: rotate(45deg); }
.is-stop { color: var(--stop); } .is-stop .dot { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* the journey: one strip of steps, always visible, never a menu to hunt */
.journey {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: var(--gap) var(--gap) 0;
  max-width: 1680px; margin: 0 auto;
}
.step {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  color: var(--ink-2); font-size: 14px; font-weight: 700;
}
.step[aria-current="step"] { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--glow); }
.step.done { border-color: var(--ok); color: var(--ok); }
.step .n {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
  font-family: var(--mono); font-size: 12px;
  direction: ltr;
}

/* the bar at the top: the mark, then the two switches. Nothing else. */
.bar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--gap);
  max-width: 1680px; margin: 0 auto;
}
.mark { font-weight: 800; font-size: 19px; letter-spacing: -.02em; text-decoration: none; color: var(--ink); }
.mark b { color: var(--neon); }
.bar .grow { flex: 1; }
.icon {
  width: var(--tap); height: 44px;
  display: grid; place-items: center;
  border-radius: 12px; border: 1px solid var(--line); background: var(--block);
}
.icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 900px) {
  .deck { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .b-wide, .b-full { grid-column: span 6; }
}
@media (max-width: 560px) {
  .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 124px; }
  .b, .b-wide, .b-full { grid-column: span 2; }
  .b-tall { grid-row: span 1; }
}