/* Section index pages — the arcade and the explainers.
 *
 * Almost everything these need is already in components.css (.sec, .grid,
 * .tile, the EN TRAVAUX barrier). What is left is the small amount of spacing
 * that only makes sense on a page which is nothing but a heading and a grid.
 */

.sec:last-of-type { margin-bottom: 0; }

/* The "not built yet" block is secondary information — a list of things that
   deliberately do not work. It should not compete with the games that do. */
.sec + .sec {
  margin-top: 8px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dim);
}

.sec + .sec .sec-t { font-size: 15px; color: var(--ink-dim); }
.sec + .sec .sec-n { color: var(--ink-dim); }

/* --- The explainer path -----------------------------------------------------
 *
 * One column, numbered, with a rail down the left. See nav_path() in
 * rl-lib/layout.php for why this is not a grid of eight tiles.
 * ------------------------------------------------------------------------- */
.path { list-style: none; margin: 16px 0 0; padding: 0; }

.path-step {
  position: relative;
  padding-left: 42px;
  padding-bottom: 4px;
}

/* The rail. Drawn on the step rather than as a separate element so it cannot
   get out of step with the number beside it. It stops at the last step: a rail
   running off the end implies a ninth page. */
.path-step::before {
  content: "";
  position: absolute;
  left: 13px; top: 26px; bottom: -4px;
  width: 1px;
  background: var(--line-dim);
}
.path-step:last-child::before { display: none; }

.path-n {
  position: absolute; left: 0; top: 4px;
  display: grid; place-items: center;
  width: 27px; height: 27px;
  border: 1px solid var(--line-dim); border-radius: 50%;
  background: var(--bg);
  font-size: 11px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.path-step.first .path-n { border-color: var(--ok); color: var(--ok); }

.path-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line-dim); border-radius: 4px;
  background: var(--panel);
  text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
a.path-card:hover { border-color: var(--line); background: var(--panel-2); }
a.path-card:hover .path-go { transform: translateX(3px); }
.path-step.shut .path-card { opacity: .55; }

.path-body { display: block; min-width: 0; }

.path-flag {
  display: inline-block;
  font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ok); border: 1px solid var(--ok); border-radius: 2px;
  padding: 2px 6px; margin-bottom: 6px;
}
.path-t {
  display: block;
  font-family: var(--disp); font-weight: 700; font-size: 15px; letter-spacing: .01em;
}
.path-d { display: block; font-size: 11px; color: var(--ink-dim); line-height: 1.6; margin-top: 3px; }
.path-go { font-family: var(--disp); font-size: 15px; color: var(--line); transition: transform .15s; }

/* --- The parts of an explainer ----------------------------------------------
 *
 * The three tabs inside a tabbed explainer, listed under it. Before these were
 * here the page said eight things when there are twenty-six; the other
 * eighteen were discoverable only by opening a page and noticing a tab bar.
 *
 * Deliberately quieter than the .path-card above them, and indented under it:
 * the explainer is still the decision, and these are what is inside it.
 *
 * Titles only, and wrapping rather than stacking. Each part used to carry its
 * own note as well, which put thirty-two more sentences on a page that already
 * had twelve blurbs and six bucket descriptions above them. The note is still
 * authored and still shown -- as the link's title, and in full on the page
 * itself -- but it is not what this index is for. This index is for seeing the
 * order.
 * ------------------------------------------------------------------------- */
.path-parts {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 8px 0 0;
  padding: 0 0 0 15px;
  border-left: 1px dashed var(--line-dim);
}

.path-parts a {
  display: block;
  padding: 5px 10px;
  border: 1px solid var(--line-dim); border-radius: 2px;
  font-size: 11px; color: var(--ink-dim);
  text-decoration: none;
  transition: border-color .12s, color .12s;
}
.path-parts a:hover { border-color: var(--line); color: var(--line); }
.path-parts a:focus-visible { outline: 1px solid var(--drill); outline-offset: 1px; }

@media (max-width: 520px) {
  .path-step { padding-left: 34px; }
  .path-step::before { left: 11px; }
  .path-n { width: 23px; height: 23px; font-size: 10px; }
  .path-go { display: none; }
  .path-card { grid-template-columns: 1fr; }
}