.kingdom-context { min-width: 0; max-width: 6rem; font-size: 0.85rem; }
.kingdom-context a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); text-decoration: none; padding-block: 0.6rem; }
.kingdom-context a:hover, .kingdom-context a:focus-visible { color: var(--amber); }
html[data-page="kingdom"] {
  --void: #101820;
  --void-2: #17232b;
  --amber: #a3c9da;
  --amber-dim: #7294a5;
  --signal-line: rgba(163, 201, 218, 0.35);
  --signal-tint: rgba(163, 201, 218, 0.07);
}
.kingdom-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-s); border: 0; padding: 0; margin-block: var(--space-m); }
.kingdom-fields legend { margin-block-end: var(--space-s); font-weight: bold; }
.kingdom-fields label { display: grid; gap: 0.4rem; min-width: 0; }
.kingdom-fields select { width: 100%; min-height: 44px; color: var(--ink); background: var(--void-2); border: 0; border-bottom: 1px solid var(--ink-muted); border-radius: 0; font: inherit; }
.kingdom-reset, .kingdom-choose { min-height: 44px; padding: 0.4rem 0; border: 0; border-bottom: 1px solid var(--amber-dim); color: var(--amber); background: none; font: inherit; text-align: start; cursor: pointer; }
.kingdom-reset:disabled, .kingdom-choose:disabled { opacity: 0.5; cursor: default; }
.kingdom-status { display: block; min-height: 1.5em; margin-block-start: 1rem; }
.kingdom-rail { list-style: none; padding: 0; margin-block: var(--space-l); }
.kingdom-milestone { position: relative; border-inline-start: 1px solid var(--ink-muted); padding: 0 0 var(--space-l) var(--space-m); }
.kingdom-milestone::before { content: ''; position: absolute; inset-inline-start: -5px; top: 0.6rem; width: 9px; height: 9px; background: var(--void); border: 1px solid var(--ink-muted); }
.kingdom-milestone[data-progress="current"]::before, .kingdom-milestone[data-progress="available"]::before { background: var(--amber); border-color: var(--amber); }
.kingdom-milestone[data-progress="current"] { border-inline-start: 3px solid var(--amber); }
.kingdom-chapter, .kingdom-state { color: var(--ink-muted); font-size: var(--step--1); }
.kingdom-milestone h3 { margin-block: 0.4rem; }
.kingdom-state { display: block; color: var(--amber); min-height: 1.5em; }
.kingdom-milestone p { margin-block: 0.6rem; }
.kingdom-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.hero-upcoming { display: block; color: var(--ink-muted); font-size: 0.85rem; }
.hero-upcoming[hidden] { display: none; }