/* Skill map. The figure, its key and its panel are the home page's skill
   web (skill-web.css); this file is the page around it — the head — and the
   panel's additions: the ladder's state glyph, the builds-on / unlocks
   chips, the summary line. */

/* The web wants the width the landing gives it: the header's container,
   not the reading column. */
.page.page-wide {
  max-width: var(--chrome-maxw, 1436px);
  padding-inline: var(--chrome-gutter, 80px);
}

.map-head {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  margin: 18px 0;
}
.map-head h1 { font-size: var(--fs-title); margin-bottom: 8px; }
.map-head .sub { max-width: 60ch; font-size: var(--fs-md); line-height: 1.6; color: var(--muted-foreground); }

.sky-panel .p-links button {
  padding: 4px 10px;
  border: var(--hairline) solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-family: var(--label);
  font-size: var(--fs-2xs);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.sky-panel .p-links button:hover { color: var(--foreground); border-color: var(--muted-foreground); }

/* ---------- the panel's additions ---------- */

/* The ladder gains a state column: a glyph, so "filled" is a shape as well
   as a colour. ✓ full · ◐ partial · · empty. */
.sky-panel .p-rungs li { grid-template-columns: 14px 44px 1fr; gap: 8px; }
.sky-panel .p-rungs .state {
  font-family: var(--label);
  font-size: var(--fs-xs);
  color: var(--sel-text, var(--brand-ink));
}
.sky-panel .p-rungs a.u { text-decoration: none; }
.sky-panel .p-rungs a.u:hover { text-decoration: underline; }
.sky-panel .p-rungs li.hit .a { color: var(--foreground); }

.sky-panel .p-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.sky-panel .p-summary {
  margin-top: 20px;
  font-family: var(--label);
  font-size: var(--fs-2xs);
  color: var(--muted-foreground);
}