/* ─────────────────────────────────────────────────────────────────────────────
   Shell — the cinematic look of the design comps, applied to the screens that
   already exist.

   Loaded after styles.css and before xiaorenshu.css, so it restyles the app
   chrome without touching the illustrated mode, which already owns this palette
   locally. The colours here ARE that mode's variables promoted to the app, so
   the reader no longer crosses a seam between a grey tool and a gold story.

   Deliberately not imported from the comps: a sidebar of destinations the app
   does not have. The rail below shows the four real steps of the flow.
   ───────────────────────────────────────────────────────────────────────────*/

:root {
  --ink: #070b10;
  --slate: #111923;
  --slate-2: #0e151d;
  --rule: #26313d;
  --plane: #e7ebef;
  --text-dim: #98a2b0;

  --gold: #d8bd78;
  --gold-bright: #fff2d0;
  --gold-dim: rgba(216, 189, 120, 0.24);
  --seal-red: #9d2b25;

  --rail: 218px;
}

/* The ink-wash ground of both comps: a cold wash falling to near-black, with a
   single warm bloom where the masthead sits. Fixed, so scrolling the page does
   not drag the sky with it. */
body {
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(64, 86, 108, 0.34), transparent 62%),
    radial-gradient(760px 420px at 82% 4%, rgba(216, 189, 120, 0.07), transparent 60%),
    linear-gradient(180deg, #0b1118 0%, #080d13 45%, #05080c 100%);
  background-attachment: fixed;
}

/* ── The rail ───────────────────────────────────────────────────────────────
   Horizontal strip on narrow screens (the original layout, which works), a
   fixed sidebar from 980px up (the comps' layout). */
.stepper {
  background: linear-gradient(180deg, rgba(17, 25, 35, 0.96), rgba(10, 15, 21, 0.96));
  border-bottom: 1px solid var(--rule);
  gap: 2px;
  align-items: center;
}

.railhead {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 18px 10px 0;
  min-width: 0;
}
.seal {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-family: var(--han);
  font-size: 19px;
  color: var(--gold-bright);
  background: linear-gradient(145deg, var(--seal-red), #6f1c18);
  border: 1px solid rgba(216, 189, 120, 0.5);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(120, 26, 21, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.railname {
  min-width: 0;
}
.stepper .wordmark {
  font-size: 15.5px;
  color: var(--plane);
}
.stepper .wordmark span {
  color: var(--gold);
}
.stepper .tagline {
  font-family: var(--han);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}

.step {
  opacity: 0.55;
  padding: 11px 16px 11px 0;
}
.step .n {
  font-family: var(--han);
  font-size: 12px;
  width: 25px;
  height: 25px;
  border-color: var(--rule);
  background: rgba(255, 255, 255, 0.015);
  transition: 0.18s ease;
}
.step.on {
  opacity: 1;
  color: var(--gold-bright);
}
.step.on .n {
  background: linear-gradient(180deg, #c8aa66, #9d7b3f);
  border-color: #ebd28f;
  color: #15130f;
  box-shadow: 0 4px 14px rgba(157, 123, 63, 0.32);
}
.step.done {
  opacity: 0.9;
  color: var(--gold);
}
.step.done .n {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: none;
}

@media (min-width: 980px) {
  .stepper {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--rail);
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    padding: 22px 14px;
    border-bottom: 0;
    border-inline-end: 1px solid var(--rule);
    z-index: 30;
  }
  .railhead {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 4px 26px;
  }
  .seal {
    width: 42px;
    height: 42px;
    font-size: 23px;
  }
  .step {
    padding: 11px 12px;
    border-radius: 3px;
    border: 1px solid transparent;
  }
  .step.on {
    background: linear-gradient(180deg, rgba(216, 189, 120, 0.12), rgba(216, 189, 120, 0.04));
    border-color: var(--gold-dim);
  }
  /* The connector between steps is horizontal-only; in a column it would jut
     out sideways from each row. */
  .step:not(:last-child)::after {
    display: none;
  }
  .topbar,
  .wrap {
    padding-inline-start: calc(var(--rail) + 26px);
  }
  .topbar {
    background: rgba(11, 17, 24, 0.82);
    backdrop-filter: blur(9px);
    border-bottom-color: var(--rule);
  }
}

/* ── Chrome accents ────────────────────────────────────────────────────────
   The base sheet uses --divergent (violet) for UI accents AND for the
   divergence scale. Only the chrome moves to gold; the scale keeps its meaning,
   or the departure card stops reading as a measurement. */
:focus-visible {
  outline-color: var(--gold);
}
.howstep .n {
  border-color: var(--gold-dim);
  color: var(--gold);
}
.linkbtn {
  color: var(--gold);
}
.badge.ok {
  color: var(--gold);
  border-color: var(--gold-dim);
}
.langswitch:hover,
.card:hover {
  border-color: var(--gold-dim);
}
.langswitch option {
  background: var(--slate);
}

h1 em,
.worksin em {
  color: var(--gold-bright);
}

/* ── Work cards ────────────────────────────────────────────────────────────
   The comps give each classic a plate with presence rather than a flat tile:
   a tinted ground, a rule of gold on approach, and the title in the work's own
   script at display size. */
.card {
  background: linear-gradient(180deg, rgba(20, 29, 39, 0.96), rgba(12, 18, 25, 0.96));
  border-color: var(--rule);
  border-radius: 4px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}
/* A wash at the head of the plate, standing in for the comps' cover art. It is
   ornament, not an image slot: no request, nothing to fail to load. */
.card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 92px;
  background:
    radial-gradient(420px 120px at 22% 0, rgba(216, 189, 120, 0.13), transparent 70%),
    linear-gradient(180deg, rgba(70, 92, 112, 0.26), transparent);
  pointer-events: none;
}
.card > * {
  position: relative;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}
.card .native {
  font-size: 30px;
  color: var(--plane);
  letter-spacing: 0.03em;
}
.card:hover .native {
  color: var(--gold-bright);
}
.card.locked:hover {
  border-color: var(--gold-dim);
}

.panel {
  background: linear-gradient(180deg, rgba(17, 25, 35, 0.92), rgba(11, 17, 24, 0.92));
  border-color: var(--rule);
  border-radius: 4px;
}

/* The illustrated mode hides the rail (cinematic-shell.css), so the padding the
   rail reserves has to go with it or the story sits off-centre. */
@media (min-width: 980px) {
  body:has(.xr-game) .topbar,
  body:has(.xr-game) .wrap {
    padding-inline-start: 0;
  }
}