/* The worksheet list pages: /worksheets/ (choose a stage) and
   /worksheets/<stage>/ (its units or chapters). Kept out of worksheet.css
   on purpose: that file is part of what every PDF is printed from, so a
   change to a list page here never makes the PDFs out of date. */

.stages { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.stage { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 18px 18px 16px; color: var(--ink); text-decoration: none; }
a.stage:hover, a.stage:focus-visible { border-color: var(--ink); }
.stage b { font-family: var(--display); font-size: 1.6em; line-height: 1.1; }
.stage span { color: var(--muted); font-size: .95em; }
.stage em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: .86em; font-weight: 600; color: var(--gold-text); }
/* A stage still being written stays on the page and says so. Not faded:
   the dashed edge says it cannot be pressed, and costs no contrast. */
.stage.soon { border-style: dashed; background: var(--ground); }
.stage.soon .soon-tag, .stage-tabs .soon em { background: var(--ink); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: .78em; font-weight: 700; letter-spacing: .02em; }
.stage.soon .soon-tag { align-self: flex-start; }

.crumbs { font-size: .9em; color: var(--muted); margin: 0 0 12px; }
.crumbs a { color: var(--ink); }

.stage-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.stage-tabs .tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95em; }
.stage-tabs a.tab:hover, .stage-tabs a.tab:focus-visible { border-color: var(--ink); }
.stage-tabs .tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.stage-tabs .tab.soon { border-style: dashed; color: var(--muted); }
.stage-tabs .soon em { font-style: normal; padding: 1px 8px; font-size: .72em; line-height: 1.5; }

.jump { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.jump a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .92em; line-height: 1.25; }
.jump a:hover, .jump a:focus-visible { border-color: var(--ink); }
.jn { flex: none; min-width: 1.9em; text-align: center; font-weight: 700; font-size: .85em; color: #fff; background: var(--ink); border-radius: 5px; padding: 1px 4px; font-variant-numeric: tabular-nums; }

.ch { scroll-margin-top: 12px; }
.ch h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ch-k { font-size: .74em; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); font-weight: 700; }

@media (max-width: 520px) {
  .jump { grid-template-columns: 1fr; }
  .stage b { font-size: 1.4em; }
}
@media (pointer: coarse) {
  .stage-tabs .tab, .jump a { min-height: 44px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}