/* ============================================================
   Star Realm Wiki — reader + editor
   Three rails, quiet chrome, loud content. Palette and type come from
   the celestial design system; this file only adds the docs layout.

   Motion rules (one place, so every transition here agrees):
     - only transform / opacity move (the details block's open is the
       browser's own; there is no transform equivalent)
     - strong custom curves, never the built-in ease-in, nothing over 300ms
     - hover motion is gated to real pointers; reduced motion keeps fades
       and drops movement
   Loaded by front/wiki/index.php and front/wiki/edit.php.
   ============================================================ */

.sr-wk {
  --wk-rail: 276px;
  --wk-toc: 216px;
  --wk-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --wk-ease-out: cubic-bezier(.23, 1, .32, 1);
  --wk-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --wk-ease-drawer: cubic-bezier(.32, .72, 0, 1);

  /* ── appearance tokens: "original" (celestial purple, stars showing) ── */
  /* text steps keep the lavender cast and all clear 4.5:1 on the page */
  --wk-bg: transparent;
  --wk-fg: #fff;
  --wk-text: #D9D0F5;
  --wk-text-2: #C4B6EE;
  --wk-muted: #A79DCC;
  --wk-faint: #8F86B8;
  --wk-line-rgb: 201, 168, 240;
  --wk-surface: rgba(255, 255, 255, .035);
  --wk-surface-2: rgba(255, 255, 255, .05);
  --wk-hover: rgba(255, 255, 255, .07);
  --wk-panel: #1A1240;
  --wk-code-bg: #0C0722;
  --wk-code-fg: #DCD2F5;
  --wk-code-inline-bg: rgba(124, 92, 214, .18);
  --wk-code-inline-fg: #F0E6FF;
  --wk-accent: #FFD66B;
  --wk-accent-2: #FFE08A;
  --wk-accent-deep: #F4B72E;
  --wk-accent-rgb: 255, 214, 107;
  --wk-on-accent: #2A1B00;
  --wk-accent-text: #FFE9B3;
  --wk-note-fg: #C9B8F5;  --wk-note-rgb: 124, 92, 214;   --wk-note-line: 184, 167, 232;
  --wk-tip-fg: #BFF3D6;   --wk-tip-rgb: 80, 222, 150;
  --wk-warn-fg: #FFD66B;  --wk-warn-rgb: 255, 214, 107;
  --wk-danger-fg: #FFC9DB; --wk-danger-rgb: 240, 88, 142;
  --wk-shadow: rgba(0, 0, 0, .7);
  --wk-chrome: rgba(26, 18, 64, .92);

  --wk-line: rgba(var(--wk-line-rgb), .13);
  --wk-line-2: rgba(var(--wk-line-rgb), .26);
  --wk-ring: 0 0 0 1px rgba(var(--wk-line-rgb), .16);
  --wk-ring-hi: 0 0 0 1px rgba(var(--wk-accent-rgb), .55);
  --wk-glow: 0 18px 40px -18px rgba(var(--wk-accent-rgb), .35);
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--wk-text-2);
  background: var(--wk-bg);
  position: relative;
  z-index: 1;
}
/* Dark: neutral, near-black, the star field covered. */
html[data-wk-theme="dark"] .sr-wk {
  --wk-bg: #0E0F14;
  --wk-fg: #F5F6FA;
  --wk-text: #D3D6DF;
  --wk-text-2: #C0C4CF;
  --wk-muted: #9DA2B4;
  --wk-faint: #848A9D;
  --wk-line-rgb: 200, 205, 225;
  --wk-panel: #171923;
  --wk-code-bg: #0A0B0F;
  --wk-code-fg: #D9DCE6;
  --wk-code-inline-bg: rgba(255, 255, 255, .08);
  --wk-code-inline-fg: #EEF0F6;
  --wk-note-fg: #B9C3F5; --wk-note-rgb: 110, 130, 220; --wk-note-line: 150, 165, 235;
  --wk-chrome: rgba(23, 25, 35, .92);
}
/* Light: soft off-white, gold darkened so it still reads as text. */
html[data-wk-theme="light"] .sr-wk {
  /* neutral inks (no purple cast) on the off-white page */
  --wk-bg: #F6F5FB;
  --wk-fg: #17141F;
  --wk-text: #2E2B3A;
  --wk-text-2: #3F3C4E;
  --wk-muted: #5F5B72;
  --wk-faint: #6F6B82;
  --wk-line-rgb: 60, 40, 120;
  --wk-surface: rgba(60, 40, 120, .04);
  --wk-surface-2: rgba(60, 40, 120, .06);
  --wk-hover: rgba(60, 40, 120, .08);
  --wk-panel: #FFFFFF;
  --wk-code-bg: #EEEBF7;
  --wk-code-fg: #2A2340;
  --wk-code-inline-bg: rgba(60, 40, 120, .08);
  --wk-code-inline-fg: #2A2340;
  --wk-accent: #7A4F00;
  --wk-accent-2: #FFE08A;
  --wk-accent-deep: #F4B72E;
  --wk-accent-rgb: 200, 140, 0;
  --wk-on-accent: #2A1B00;
  --wk-accent-text: #5E3D00;
  --wk-note-fg: #4E3AA8; --wk-note-rgb: 124, 92, 214; --wk-note-line: 124, 92, 214;
  --wk-tip-fg: #14734A; --wk-tip-rgb: 20, 150, 90;
  --wk-warn-fg: #8A5A00; --wk-warn-rgb: 200, 140, 0;
  --wk-danger-fg: #B0295E; --wk-danger-rgb: 220, 60, 120;
  --wk-shadow: rgba(40, 30, 80, .18);
  --wk-chrome: rgba(255, 255, 255, .92);
}
.sr-wk .ti { line-height: 1; }

.sr-wk-shell {
  max-width: 1460px;
  margin: 0 auto;
  padding: 28px 36px 96px;
  display: grid;
  grid-template-columns: var(--wk-rail) minmax(0, 1fr) var(--wk-toc);
  gap: 48px;
  align-items: start;
}

/* ── left rail: the book ──────────────────────────────────── */

.sr-wk-rail { position: sticky; top: 92px; max-height: calc(100vh - 112px); display: flex; flex-direction: column; }

/* The drawer backdrop only exists on narrow screens; as a grid child it must
   be display:none here or it takes a cell and shunts the rail sideways. */
.sr-wk-scrim { display: none; }

.sr-wk-search { position: relative; margin: 0 0 14px; flex: none; }
.sr-wk-search input {
  box-sizing: border-box; width: 100%;
  border: none; border-radius: 11px;
  background: var(--wk-surface-2);
  box-shadow: var(--wk-ring);
  padding: 10px 34px 10px 36px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--wk-fg); outline: none;
  transition: box-shadow 150ms ease, background-color 150ms ease;
}
.sr-wk-search input:focus { box-shadow: var(--wk-ring-hi), 0 0 0 4px rgba(var(--wk-accent-rgb), .12); background: var(--wk-hover); }
.sr-wk-search input::placeholder { color: var(--wk-faint); font-weight: 600; }
.sr-wk-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--wk-faint); font-size: 16px; pointer-events: none; }
.sr-wk-search-key, .sr-wk-omni kbd {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  border-radius: 5px; padding: 2px 6px; box-shadow: var(--wk-ring);
  font: inherit; font-size: 10.5px; font-weight: 800; color: var(--wk-faint); pointer-events: none;
  transition: opacity 120ms ease;
}
.sr-wk-search input:focus ~ .sr-wk-search-key { opacity: 0; }

/* The tree scrolls under soft edges instead of hard cuts. */
.sr-wk-tree {
  overflow-y: auto; padding: 8px 6px 20px 0; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 26px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10px, #000 calc(100% - 26px), transparent);
}
.sr-wk-tree::-webkit-scrollbar { width: 5px; }
.sr-wk-tree::-webkit-scrollbar-thumb { background: var(--wk-line-2); border-radius: 3px; }

/* the home page, above the groups */
.sr-wk-home {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 8px 10px; border-radius: 9px; margin-bottom: 8px;
  font-weight: 800; font-size: 13.5px; color: var(--wk-fg);
  transition: background-color 140ms ease, color 140ms ease;
}
.sr-wk-home__ico { width: 16px; text-align: center; font-size: 13px; color: var(--wk-faint); transition: color 140ms ease; }
.sr-wk-home:hover { background: var(--wk-surface-2); color: var(--wk-fg); }
.sr-wk-home.is-active { background: rgba(var(--wk-accent-rgb), .11); color: var(--wk-accent); }
.sr-wk-home.is-active .sr-wk-home__ico { color: var(--wk-accent); }

/* groups are the book's "## Heading" areas: a folded row each, one open at a time by default */
.sr-wk-group { margin-top: 2px; }
.sr-wk-group__head {
  display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer;
  padding: 8px 10px; border-radius: 9px; user-select: none;
  font-size: 13px; font-weight: 800; color: var(--wk-text-2);
  transition: background-color 140ms ease, color 140ms ease;
}
.sr-wk-group__head::-webkit-details-marker { display: none; }
.sr-wk-group__head:hover { background: var(--wk-surface-2); color: var(--wk-fg); }
.sr-wk-group__ico { flex: none; width: 18px; text-align: center; font-size: 15px; color: var(--wk-faint); transition: color 140ms ease; }
.sr-wk-group__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-wk-group__n { flex: none; font-size: 10.5px; font-weight: 800; color: var(--wk-faint); background: var(--wk-surface-2); box-shadow: var(--wk-ring); border-radius: 999px; padding: 2px 7px; min-width: 22px; text-align: center; }
.sr-wk-group__chev { flex: none; font-size: 13px; color: var(--wk-faint); transition: transform 200ms var(--wk-ease-out), color 140ms ease; }
.sr-wk-group[open] > .sr-wk-group__head { color: var(--wk-fg); }
.sr-wk-group[open] > .sr-wk-group__head .sr-wk-group__ico, .sr-wk-group[open] > .sr-wk-group__head .sr-wk-group__chev { color: var(--wk-accent); }
.sr-wk-group[open] > .sr-wk-group__head .sr-wk-group__chev { transform: rotate(90deg); }
.sr-wk-group:has(.sr-wk-pagelink.is-active) > .sr-wk-group__head .sr-wk-group__ico { color: var(--wk-accent); }
.sr-wk-group__list { display: flex; flex-direction: column; margin: 2px 0 8px 17px; padding-left: 10px; border-left: 1px solid var(--wk-line); }
.sr-wk-group__list .sr-wk-pagelink { padding: 5px 9px; }
.sr-wk-tree.is-searching .sr-wk-group__head { pointer-events: none; }

.sr-wk-pagelink {
  position: relative;
  display: flex; align-items: baseline; gap: 8px; text-decoration: none; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 650; color: var(--wk-text-2);
  line-height: 1.45; overflow-wrap: anywhere;
  transition: background-color 140ms ease, color 140ms ease;
}
.sr-wk-pagelink > span { flex: 1; min-width: 0; transition: transform 180ms var(--wk-ease-out); }
.sr-wk-pagelink__ico { flex: none; width: 15px; text-align: center; font-size: 11.5px; color: var(--wk-faint); transform: translateY(-1px); transition: color 140ms ease; }
.sr-wk-pagelink:hover { background: var(--wk-surface-2); color: var(--wk-fg); }
.sr-wk-pagelink:hover .sr-wk-pagelink__ico { color: var(--wk-text); }
.sr-wk-pagelink.is-active { background: rgba(var(--wk-accent-rgb), .1); color: var(--wk-accent); font-weight: 800; }
.sr-wk-pagelink.is-active .sr-wk-pagelink__ico { color: var(--wk-accent); }
/* gold bar in the guide line, marking the page being read */
.sr-wk-branch-body .sr-wk-pagelink.is-active::before {
  content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, var(--wk-accent-2), var(--wk-accent-deep));
  box-shadow: 0 0 10px rgba(var(--wk-accent-rgb), .6);
}
.sr-wk-pagelink.is-draft { opacity: .6; font-style: italic; }
.sr-wk-mark { flex: none; font-size: 9.5px; font-style: normal; font-weight: 800; color: var(--wk-danger-fg); letter-spacing: .06em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .sr-wk-pagelink:hover > span { transform: translateX(3px); }
}

/* branches: a page with sub-pages, nesting as deep as the book does */
.sr-wk-branch-head { display: flex; align-items: center; gap: 2px; }
.sr-wk-branch-head .sr-wk-pagelink { flex: 1; min-width: 0; }
.sr-wk-branch-chev {
  flex: none; width: 24px; height: 24px; border: none; border-radius: 7px;
  background: none; color: var(--wk-faint); font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color 140ms ease, background-color 140ms ease;
}
.sr-wk-branch-chev .ti { transition: transform 200ms var(--wk-ease-out); }
.sr-wk-branch-chev:hover { background: var(--wk-hover); color: var(--wk-accent); }
.sr-wk-branch.is-open > .sr-wk-branch-head .sr-wk-branch-chev .ti { transform: rotate(90deg); }
.sr-wk-branch-body { display: none; margin: 2px 0 4px 14px; padding-left: 8px; border-left: 1px solid var(--wk-line); }
.sr-wk-branch.is-open > .sr-wk-branch-body { display: block; }
.sr-wk-branch-body .sr-wk-pagelink { font-size: 12.5px; padding: 5px 9px; }
.sr-wk-branch:has(> .sr-wk-branch-body .sr-wk-pagelink.is-active) > .sr-wk-branch-body { border-left-color: rgba(var(--wk-accent-rgb), .45); }
.sr-wk-tree.is-searching .sr-wk-branch-body { display: block; }
.sr-wk-tree.is-searching .sr-wk-branch-chev { visibility: hidden; }

.sr-wk-noresult { padding: 14px 12px; font-size: 12.5px; font-weight: 700; color: var(--wk-faint); display: none; }

/* appearance: original / dark / light — a segmented control with one sliding thumb */
.sr-wk-theme { flex: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wk-line); display: flex; align-items: center; gap: 10px; }
.sr-wk-theme__label { font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--wk-faint); padding-left: 10px; flex: 1; }
.sr-wk-theme__seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 34px; padding: 3px; border-radius: 10px; background: var(--wk-surface-2); box-shadow: var(--wk-ring); }
.sr-wk-theme__thumb {
  position: absolute; left: 3px; top: 3px; width: 34px; height: 28px; border-radius: 7px;
  background: linear-gradient(180deg, var(--wk-accent-2), var(--wk-accent-deep)); box-shadow: 0 4px 10px -4px rgba(var(--wk-accent-rgb), .6);
  transition: transform 200ms var(--wk-ease-in-out);
}
.sr-wk-theme__btn {
  position: relative; height: 28px; border: none; background: none; cursor: pointer; border-radius: 7px;
  color: var(--wk-faint); font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  transition: color 140ms ease, transform 120ms var(--wk-ease-out);
}
.sr-wk-theme__btn:hover { color: var(--wk-fg); }
.sr-wk-theme__btn:active { transform: scale(.94); }
.sr-wk-theme__btn.is-active { color: var(--wk-on-accent); }
/* switching: a short cross-fade of colour, no movement */
.sr-wk.is-theming, .sr-wk.is-theming * { transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important; }

/* ── centre: the page ─────────────────────────────────────── */

.sr-wk-main { min-width: 0; max-width: 760px; }

.sr-wk-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; color: var(--wk-faint); margin-bottom: 18px; }
.sr-wk-crumbs a { color: var(--wk-faint); text-decoration: none; transition: color 120ms ease; }
.sr-wk-crumbs a:hover { color: var(--wk-accent); }
.sr-wk-crumbs .sep { font-size: 12px; opacity: .55; }

/* Type: large text gets negative tracking and tight leading, body stays near 0. */
.sr-wk-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(30px, 4.2vw, 42px); line-height: 1.1; letter-spacing: -.02em;
  margin: 0; color: var(--wk-fg); overflow-wrap: anywhere;
  display: flex; align-items: center; gap: .35em;
}
.sr-wk-title__ico { font-size: .62em; color: var(--wk-accent); flex: none; filter: drop-shadow(0 0 10px rgba(var(--wk-accent-rgb), .35)); }
.sr-wk-sub { font-size: 17px; font-weight: 550; color: var(--wk-text); line-height: 1.6; margin: 12px 0 0; }

.sr-wk-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 0; padding-bottom: 22px; border-bottom: 1px solid var(--wk-line); }
.sr-wk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--wk-accent-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--wk-accent-rgb), .3);
  color: var(--wk-accent-text); border-radius: 999px; padding: 4px 11px 4px 8px; font-size: 11.5px; font-weight: 800;
}
.sr-wk-chip .ti { font-size: 13px; color: var(--wk-accent); }
.sr-wk-chip--draft { background: rgba(var(--wk-danger-rgb), .12); box-shadow: 0 0 0 1px rgba(var(--wk-danger-rgb), .35); color: var(--wk-danger-fg); }
.sr-wk-chip--draft .ti { color: var(--wk-danger-fg); }
.sr-wk-byline { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--wk-faint); }
.sr-wk-byline .ti { font-size: 13px; }
.sr-wk-byline .dot { opacity: .6; margin: 0 2px; }

.sr-wk-actions { margin-left: auto; display: flex; gap: 8px; }
.sr-wk-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  border: none; border-radius: 9px; padding: 7px 13px;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--wk-text-2);
  background: var(--wk-surface-2); box-shadow: var(--wk-ring); cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 120ms var(--wk-ease-out);
}
.sr-wk-btn .ti { font-size: 14px; }
.sr-wk-btn:hover { color: var(--wk-accent); background: rgba(var(--wk-accent-rgb), .08); box-shadow: var(--wk-ring-hi); }
.sr-wk-btn:active { transform: scale(.97); }
.sr-wk-btn--gold { background: linear-gradient(180deg, var(--wk-accent-2), var(--wk-accent-deep)); box-shadow: none; color: var(--wk-on-accent); }
.sr-wk-btn--gold:hover { filter: brightness(1.06); color: var(--wk-on-accent); box-shadow: none; }
.sr-wk-btn--danger:hover { color: var(--wk-danger-fg); background: rgba(var(--wk-danger-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--wk-danger-rgb), .5); }

.sr-wk-cover { margin: 26px 0 0; border-radius: 16px; overflow: hidden; box-shadow: var(--wk-ring), 0 24px 48px -24px var(--wk-shadow); }
.sr-wk-cover img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
/* the book's cover: above the title, wider than the column, like GitBook */
.sr-wk-cover--home { margin: 0 0 30px; border-radius: 20px; }
.sr-wk-cover--home img { max-height: 380px; }
.sr-wk--home .sr-wk-main { max-width: 860px; }

/* home-page search: a wide field under the lead, results in a popover */
.sr-wk-omni { position: relative; z-index: 5; width: min(100%, 560px); margin-top: 22px; text-align: left; }
.sr-wk-omni > .ti { position: absolute; left: 16px; top: 25px; transform: translateY(-50%); font-size: 19px; color: var(--wk-faint); pointer-events: none; }
.sr-wk-omni input {
  box-sizing: border-box; width: 100%; height: 50px;
  border: none; border-radius: 14px; padding: 0 44px 0 46px;
  background: var(--wk-surface-2);
  box-shadow: var(--wk-ring), inset 0 1px 0 var(--wk-surface-2);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--wk-fg); outline: none;
  transition: box-shadow 150ms ease, background-color 150ms ease;
}
.sr-wk-omni input::placeholder { color: var(--wk-faint); }
.sr-wk-omni input:focus { box-shadow: var(--wk-ring-hi), 0 0 0 5px rgba(var(--wk-accent-rgb), .12); background: var(--wk-hover); }
.sr-wk-omni kbd { right: 14px; top: 25px; }
.sr-wk-omni input:focus ~ kbd { opacity: 0; }
.sr-wk-omni__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--wk-panel); border-radius: 14px; padding: 6px;
  box-shadow: var(--wk-ring), 0 30px 60px -20px var(--wk-shadow);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px) scale(.98); transform-origin: top center;
  transition: opacity 150ms ease, transform 150ms var(--wk-ease-out), visibility 0s linear 150ms;
}
.sr-wk-omni__list.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 150ms ease, transform 150ms var(--wk-ease-out), visibility 0s; }
.sr-wk-omni__row {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--wk-text); font-size: 13.5px; font-weight: 650;
  transition: background-color 100ms ease;
}
.sr-wk-omni__row .ti, .sr-wk-omni__row .fa-solid { font-size: 14px; color: var(--wk-faint); text-align: center; }
.sr-wk-omni__row .n { color: var(--wk-fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-wk-omni__row .n mark { background: none; color: var(--wk-accent); }
.sr-wk-omni__row .s { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-faint); }
.sr-wk-omni__row:hover, .sr-wk-omni__row.is-hi { background: rgba(var(--wk-accent-rgb), .1); }
.sr-wk-omni__row.is-hi .ti, .sr-wk-omni__row.is-hi .fa-solid, .sr-wk-omni__row.is-hi .s { color: var(--wk-accent); }
.sr-wk-omni__empty { padding: 12px; font-size: 13px; font-weight: 700; color: var(--wk-faint); }

/* ── directories: the areas on the home page, the pages of a section, the sub-pages of a guide ── */
.sr-wk-dir { margin: 26px 0 8px; }
.sr-wk-dir--after { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--wk-line); }
.sr-wk-dir__head { margin-bottom: 14px; }
.sr-wk-dir__title { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.01em; margin: 0; color: var(--wk-fg); }
.sr-wk-dir__lead { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--wk-muted); }
.sr-wk-dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sr-wk-dir__grid--areas { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.sr-wk-dcard {
  position: relative; display: flex; gap: 12px; align-items: flex-start; text-decoration: none;
  padding: 14px 40px 14px 14px; border-radius: 14px; background: var(--wk-surface-2); box-shadow: var(--wk-ring);
  color: var(--wk-text); min-height: 64px;
  transition: box-shadow 150ms ease, background-color 150ms ease, transform 180ms var(--wk-ease-out);
}
.sr-wk-dcard__ico {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--wk-accent-rgb), .12); color: var(--wk-accent); font-size: 16px;
  transition: background-color 150ms ease, color 150ms ease;
}
.sr-wk-dcard__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sr-wk-dcard__t { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 15.5px; color: var(--wk-fg); line-height: 1.25; }
.sr-wk-dcard__d { font-size: 12.5px; font-weight: 550; line-height: 1.5; color: var(--wk-muted); }
.sr-wk-dcard__n { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--wk-faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-wk-dcard__arr { position: absolute; right: 14px; top: 15px; font-size: 15px; color: var(--wk-faint); opacity: 0; transform: translate(-3px, 3px); transition: opacity 150ms ease, transform 180ms var(--wk-ease-out); }
.sr-wk-dcard:hover { box-shadow: var(--wk-ring-hi), 0 18px 34px -22px var(--wk-shadow); background: var(--wk-hover); }
.sr-wk-dcard:hover .sr-wk-dcard__ico { background: rgba(var(--wk-accent-rgb), .2); }
.sr-wk-dcard:hover .sr-wk-dcard__arr { opacity: 1; transform: none; }
.sr-wk-dcard:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .sr-wk-dcard:hover { transform: translateY(-2px); } }
/* home cards arrive one after another; decorative, never blocking */
.sr-wk-dir--home .sr-wk-dcard { opacity: 0; transform: translateY(6px); animation: sr-wk-rise 320ms var(--wk-ease-out) forwards; }
.sr-wk-dir--home .sr-wk-dcard:nth-child(2) { animation-delay: 40ms; } .sr-wk-dir--home .sr-wk-dcard:nth-child(3) { animation-delay: 80ms; }
.sr-wk-dir--home .sr-wk-dcard:nth-child(4) { animation-delay: 120ms; } .sr-wk-dir--home .sr-wk-dcard:nth-child(5) { animation-delay: 160ms; }
.sr-wk-dir--home .sr-wk-dcard:nth-child(6) { animation-delay: 200ms; } .sr-wk-dir--home .sr-wk-dcard:nth-child(7) { animation-delay: 240ms; }
.sr-wk-dir--home .sr-wk-dcard:nth-child(8) { animation-delay: 280ms; } .sr-wk-dir--home .sr-wk-dcard:nth-child(9) { animation-delay: 320ms; }
.sr-wk-dir--home .sr-wk-dcard:nth-child(10) { animation-delay: 360ms; }
@keyframes sr-wk-rise { to { opacity: 1; transform: none; } }

/* ── article body ─────────────────────────────────────────── */

.sr-wk-body { font-size: 15.5px; font-weight: 500; line-height: 1.75; color: var(--wk-text); padding-top: 28px; overflow-wrap: anywhere; }
.sr-wk-body > *:first-child { margin-top: 0; }

.sr-wk-body h2, .sr-wk-body h3, .sr-wk-body h4, .sr-wk-body h5, .sr-wk-body h6 {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; color: var(--wk-fg);
  line-height: 1.25; scroll-margin-top: 100px; position: relative;
}
.sr-wk-body h2 { font-size: 26px; letter-spacing: -.015em; margin: 48px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--wk-line); }
.sr-wk-body h3 { font-size: 20px; letter-spacing: -.01em; margin: 36px 0 10px; }
.sr-wk-body h4 { font-size: 17px; margin: 28px 0 8px; }
.sr-wk-body h5, .sr-wk-body h6 { font-size: 15px; margin: 22px 0 8px; color: var(--wk-text-2); }

.sr-wk-anchor { position: absolute; left: -.9em; width: .9em; text-decoration: none; color: var(--wk-accent); opacity: 0; font-weight: 700; transition: opacity 120ms ease; }
@media (hover: hover) and (pointer: fine) {
  .sr-wk-body h2:hover .sr-wk-anchor, .sr-wk-body h3:hover .sr-wk-anchor, .sr-wk-body h4:hover .sr-wk-anchor { opacity: .7; }
}
.sr-wk-anchor:hover, .sr-wk-anchor:focus-visible { opacity: 1 !important; }

.sr-wk-body p { margin: 0 0 18px; }
.sr-wk-body strong, .sr-wk-body b { color: var(--wk-fg); font-weight: 800; }
.sr-wk-body em { color: var(--wk-text-2); }
.sr-wk-body del { color: var(--wk-faint); }
.sr-wk-body a, .sr-wk-a {
  color: var(--wk-accent); text-decoration: underline; text-decoration-color: rgba(var(--wk-accent-rgb), .35);
  text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 120ms ease;
}
.sr-wk-body a:hover, .sr-wk-a:hover { text-decoration-color: var(--wk-accent); }

.sr-wk-body ul, .sr-wk-body ol, .sr-wk-list { margin: 0 0 18px; padding-left: 24px; }
.sr-wk-body li { margin: 6px 0; }
.sr-wk-body li > ul, .sr-wk-body li > ol { margin: 6px 0 0; }
.sr-wk-body ul { list-style: none; }
.sr-wk-body ul > li { position: relative; }
.sr-wk-body ul > li::before { content: ''; position: absolute; left: -16px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--wk-accent); }
.sr-wk-body ol > li::marker { color: var(--wk-accent); font-weight: 800; }

.sr-wk-hr, .sr-wk-body hr { border: none; height: 1px; background: var(--wk-line); margin: 36px 0; }

.sr-wk-img, .sr-wk-body img {
  max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0;
  box-shadow: var(--wk-ring), 0 16px 40px -20px var(--wk-shadow);
  cursor: zoom-in;
}
/* pictures inside table cells: inline, plain, no lightbox. Sprites from the item-image endpoint are 24px icons
   (NPC Sell Prices); other table pictures (Cash Shop collection art) keep their own size, capped at 100px tall. */
.sr-wk-table td img.sr-wk-img, .sr-wk-body table td img {
  width: auto; height: auto; max-width: none; max-height: 100px; border-radius: 4px; margin: 0 6px 0 0;
  box-shadow: none; cursor: default; vertical-align: middle; object-fit: contain;
}
.sr-wk-table td img[src*="item-image.php"], .sr-wk-body table td img[src*="item-image.php"] { width: 24px; height: 24px; }
.sr-wk-figure { margin: 4px 0 22px; }
.sr-wk-figure img { display: block; margin: 0; }
.sr-wk-figure figcaption { margin-top: 9px; font-size: 12.5px; font-weight: 650; color: var(--wk-muted); text-align: center; line-height: 1.5; }

/* code */
.sr-wk-inlinecode, .sr-wk-body code {
  font-family: var(--wk-mono); font-size: .86em;
  background: var(--wk-code-inline-bg); box-shadow: 0 0 0 1px rgba(var(--wk-line-rgb), .12);
  border-radius: 5px; padding: .1em .4em; color: var(--wk-code-inline-fg);
}
.sr-wk-code, .sr-wk-body pre {
  position: relative; background: var(--wk-code-bg); box-shadow: var(--wk-ring), inset 0 1px 0 var(--wk-surface-2);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 20px; overflow-x: auto;
}
.sr-wk-code code, .sr-wk-body pre code {
  font-family: var(--wk-mono); font-size: 13px; line-height: 1.65;
  background: none; box-shadow: none; padding: 0; color: var(--wk-code-fg); white-space: pre;
}
.sr-wk-copy {
  position: absolute; top: 9px; right: 9px; opacity: 0;
  border: none; border-radius: 7px; box-shadow: var(--wk-ring);
  background: var(--wk-chrome); color: var(--wk-text-2);
  font: inherit; font-size: 11px; font-weight: 800; padding: 4px 9px; cursor: pointer;
  transition: opacity 140ms ease, color 140ms ease, transform 120ms var(--wk-ease-out);
}
.sr-wk-code:hover .sr-wk-copy, .sr-wk-copy:focus-visible { opacity: 1; }
.sr-wk-copy:hover { color: var(--wk-accent); }
.sr-wk-copy:active { transform: scale(.96); }
@media (hover: none) { .sr-wk-copy { opacity: 1; } }

/* quotes + callouts */
.sr-wk-quote, .sr-wk-body blockquote {
  margin: 0 0 20px; padding: 2px 0 2px 18px;
  border-left: 3px solid var(--wk-line-2); color: var(--wk-text-2);
}
.sr-wk-quote > *:last-child { margin-bottom: 0; }

.sr-wk-hint {
  display: flex; gap: 13px; margin: 0 0 20px; padding: 15px 17px;
  border-radius: 13px; background: var(--hint-bg); box-shadow: 0 0 0 1px var(--hint-line);
  --hint-bg: rgba(var(--wk-note-rgb), .12); --hint-line: rgba(var(--wk-note-line), .32); --hint-fg: var(--wk-note-fg);
}
.sr-wk-hint-body { min-width: 0; flex: 1; }
.sr-wk-hint-body > *:last-child { margin-bottom: 0; }
.sr-wk-hint-icon {
  flex: none; width: 26px; height: 26px; border-radius: 8px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--hint-fg); background: var(--wk-hover); box-shadow: 0 0 0 1px var(--hint-line);
}
.sr-wk-hint-label { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; color: var(--hint-fg); }
.sr-wk-hint-tip    { --hint-bg: rgba(var(--wk-tip-rgb), .09);  --hint-line: rgba(var(--wk-tip-rgb), .32);  --hint-fg: var(--wk-tip-fg); }
.sr-wk-hint-warn   { --hint-bg: rgba(var(--wk-warn-rgb), .09); --hint-line: rgba(var(--wk-warn-rgb), .36); --hint-fg: var(--wk-warn-fg); }
.sr-wk-hint-danger { --hint-bg: rgba(var(--wk-danger-rgb), .1);   --hint-line: rgba(var(--wk-danger-rgb), .36);  --hint-fg: var(--wk-danger-fg); }

/* tables */
.sr-wk-tablewrap { overflow-x: auto; margin: 0 0 20px; border-radius: 12px; box-shadow: var(--wk-ring); }
.sr-wk-table, .sr-wk-body table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sr-wk-table th, .sr-wk-body table th {
  text-align: left; padding: 11px 14px; background: var(--wk-surface-2);
  color: var(--wk-accent); font-weight: 800; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  border-bottom: 1px solid var(--wk-line-2);
}
.sr-wk-table td, .sr-wk-body table td { padding: 10px 14px; border-bottom: 1px solid var(--wk-line); vertical-align: top; }
.sr-wk-table tr:last-child td, .sr-wk-body table tr:last-child td { border-bottom: none; }
.sr-wk-table tbody tr:hover, .sr-wk-body table tbody tr:hover { background: var(--wk-surface); }
/* a header-less table reads as a definition list: first column is the label */
.sr-wk-table--plain td:first-child { color: var(--wk-fg); font-weight: 700; white-space: nowrap; }
/* five columns and up: tighter type and padding so the table fits the column instead of scrolling */
.sr-wk-table--wide { font-size: 12.5px; }
.sr-wk-table--wide th { padding: 9px 10px; font-size: 10.5px; letter-spacing: .04em; }
.sr-wk-table--wide td { padding: 8px 10px; line-height: 1.45; }
.sr-wk-table--wide td:first-child { min-width: 96px; }
.sr-wk-table--wide td:first-child img { display: block; margin: 0 0 4px; }

/* ── the book's blocks ────────────────────────────────────── */

/* steps: a numbered walkthrough with a guide line */
.sr-wk-steps { list-style: none; margin: 4px 0 24px; padding: 0; }
.sr-wk-step { position: relative; display: flex; gap: 16px; margin: 0; padding: 0 0 22px; }
.sr-wk-step::before { content: ''; position: absolute; left: 15px; top: 34px; bottom: 0; width: 1px; background: var(--wk-line-2); }
.sr-wk-step:last-child { padding-bottom: 0; }
.sr-wk-step:last-child::before { display: none; }
.sr-wk-step__n {
  flex: none; width: 31px; height: 31px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 14px;
  color: var(--wk-on-accent); background: linear-gradient(180deg, var(--wk-accent-2), var(--wk-accent-deep));
  box-shadow: 0 6px 16px -6px rgba(var(--wk-accent-rgb), .6);
}
.sr-wk-step__c { flex: 1; min-width: 0; padding-top: 4px; }
.sr-wk-step__c > *:last-child { margin-bottom: 0; }
.sr-wk-step__t { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 18px; color: var(--wk-fg); margin: 0 0 6px; line-height: 1.3; }

/* tabs: one indicator slides between tabs */
.sr-wk-tabs { margin: 4px 0 24px; }
.sr-wk-tabs__bar { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--wk-line-2); margin-bottom: 18px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.sr-wk-tabs__bar::-webkit-scrollbar { display: none; }
.sr-wk-tabs__tab {
  flex: none; border: none; background: none; cursor: pointer; padding: 9px 14px;
  font: inherit; font-size: 13.5px; font-weight: 800; color: var(--wk-muted);
  transition: color 140ms ease;
}
.sr-wk-tabs__tab:hover { color: var(--wk-fg); }
.sr-wk-tabs__tab.is-active { color: var(--wk-accent); }
.sr-wk-tabs__ind {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 1px; transform-origin: left;
  background: linear-gradient(90deg, var(--wk-accent-2), var(--wk-accent-deep)); border-radius: 2px;
  box-shadow: 0 0 10px rgba(var(--wk-accent-rgb), .5); opacity: 0;
  transition: transform 220ms var(--wk-ease-in-out), opacity 120ms ease;
}
.sr-wk-tabs__ind.is-on { opacity: 1; }
.sr-wk-tabs__panel > *:last-child { margin-bottom: 0; }

/* expandable block */
.sr-wk-details { margin: 0 0 14px; border-radius: 13px; background: var(--wk-surface); box-shadow: var(--wk-ring); transition: box-shadow 160ms ease; }
.sr-wk-details[open] { box-shadow: 0 0 0 1px rgba(var(--wk-line-rgb), .28); }
.sr-wk-details > summary {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 14.5px; color: var(--wk-fg); border-radius: 13px;
  transition: background-color 140ms ease;
}
.sr-wk-details > summary::-webkit-details-marker { display: none; }
.sr-wk-details > summary:hover { background: var(--wk-surface); }
.sr-wk-details__chev {
  flex: none; width: 22px; height: 22px; border-radius: 7px; position: relative;
  background: rgba(var(--wk-accent-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--wk-accent-rgb), .25);
}
.sr-wk-details__chev::before, .sr-wk-details__chev::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: var(--wk-accent); border-radius: 1px;
  transform: translate(-50%, -50%);
}
.sr-wk-details__chev::before { width: 10px; height: 2px; }
.sr-wk-details__chev::after { width: 2px; height: 10px; transition: transform 200ms var(--wk-ease-out); }
.sr-wk-details[open] > summary .sr-wk-details__chev::after { transform: translate(-50%, -50%) scaleY(0); }
.sr-wk-details__b { padding: 2px 16px 16px; }
.sr-wk-details__b > *:last-child { margin-bottom: 0; }

/* card grid */
.sr-wk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 4px 0 24px; }
.sr-wk-cards__c {
  position: relative; display: flex; flex-direction: column; gap: 5px; text-decoration: none !important;
  padding: 16px 18px; border-radius: 14px; background: var(--wk-surface); box-shadow: var(--wk-ring);
  color: var(--wk-text);
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 200ms var(--wk-ease-out);
}
a.sr-wk-cards__c:hover { box-shadow: var(--wk-ring-hi), var(--wk-glow); background: rgba(var(--wk-accent-rgb), .05); }
a.sr-wk-cards__c:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { a.sr-wk-cards__c:hover { transform: translateY(-2px); } }
.sr-wk-cards__t { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600; font-size: 16px; color: var(--wk-fg); line-height: 1.3; padding-right: 20px; }
.sr-wk-cards__t strong { font-weight: 600; }
/* a card that links to a page wears that page's icon */
.sr-wk-cards__c.has-ico { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; align-items: start; }
.sr-wk-cards__c.has-ico .sr-wk-cards__ico { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--wk-accent-rgb), .12); color: var(--wk-accent); font-size: 16px; transition: background-color 150ms ease; }
.sr-wk-cards__c.has-ico .sr-wk-cards__t, .sr-wk-cards__c.has-ico .sr-wk-cards__d { grid-column: 2; }
.sr-wk-cards__c.has-ico:hover .sr-wk-cards__ico { background: rgba(var(--wk-accent-rgb), .2); }
.sr-wk-cards__d { font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--wk-muted); }
.sr-wk-cards__arr { position: absolute; right: 16px; top: 15px; font-size: 16px; color: var(--wk-faint); opacity: 0; transform: translateX(-4px); transition: opacity 160ms ease, transform 200ms var(--wk-ease-out), color 160ms ease; }
a.sr-wk-cards__c:hover .sr-wk-cards__arr { opacity: 1; transform: none; color: var(--wk-accent); }

/* ── prev / next ──────────────────────────────────────────── */

.sr-wk-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--wk-line); }
.sr-wk-pager a {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border-radius: 13px; padding: 15px 17px; box-shadow: var(--wk-ring); background: var(--wk-surface);
  transition: box-shadow 160ms ease, background-color 160ms ease, transform 120ms var(--wk-ease-out);
}
.sr-wk-pager a:hover { box-shadow: var(--wk-ring-hi), var(--wk-glow); background: rgba(var(--wk-accent-rgb), .05); }
.sr-wk-pager a:active { transform: scale(.985); }
.sr-wk-pager .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sr-wk-pager .arr { flex: none; font-size: 18px; color: var(--wk-faint); transition: color 160ms ease, transform 200ms var(--wk-ease-out); }
.sr-wk-pager a:hover .arr { color: var(--wk-accent); }
@media (hover: hover) and (pointer: fine) {
  .sr-wk-pager .prev:hover .arr { transform: translateX(-3px); }
  .sr-wk-pager .next:hover .arr { transform: translateX(3px); }
}
.sr-wk-pager .dir { font-size: 10.5px; font-weight: 800; color: var(--wk-faint); letter-spacing: .08em; text-transform: uppercase; }
.sr-wk-pager .name { font-size: 14.5px; font-weight: 700; color: var(--wk-fg); line-height: 1.4; }
.sr-wk-pager .next { text-align: right; grid-column: 2; justify-content: flex-end; }

/* ── right rail: on this page ─────────────────────────────── */

.sr-wk-toc { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; padding-top: 4px; }
.sr-wk-toc::-webkit-scrollbar { width: 5px; }
.sr-wk-toc::-webkit-scrollbar-thumb { background: var(--wk-line-2); border-radius: 3px; }
.sr-wk-toc-title { font-size: 11px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--wk-faint); margin-bottom: 10px; }
.sr-wk-toc-list { position: relative; border-left: 1px solid var(--wk-line); }
.sr-wk-toc-marker {
  position: absolute; left: -1px; top: 0; width: 2px; height: 1px;
  border-radius: 2px; background: linear-gradient(180deg, var(--wk-accent-2), var(--wk-accent-deep));
  box-shadow: 0 0 10px rgba(var(--wk-accent-rgb), .55); transform-origin: top; opacity: 0;
  transition: transform 220ms var(--wk-ease-in-out), opacity 160ms ease;
}
.sr-wk-toc-marker.is-on { opacity: 1; }
.sr-wk-toc a {
  display: block; text-decoration: none; padding: 5px 0 5px 14px;
  font-size: 12.5px; font-weight: 650; line-height: 1.45; color: var(--wk-muted);
  transition: color 130ms ease;
}
.sr-wk-toc a:hover { color: var(--wk-fg); }
.sr-wk-toc a.lvl-3 { padding-left: 26px; font-size: 12px; }
.sr-wk-toc a.is-active { color: var(--wk-accent); font-weight: 800; }
.sr-wk-toc-top {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; text-decoration: none;
  font-size: 11.5px; font-weight: 800; color: var(--wk-faint); transition: color 130ms ease;
}
.sr-wk-toc-top:hover { color: var(--wk-accent); }

.sr-wk-note {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 11px;
  background: rgba(var(--wk-danger-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--wk-danger-rgb), .35);
  color: var(--wk-danger-fg); font-weight: 700; font-size: 13px;
}
.sr-wk-empty { text-align: center; color: var(--wk-muted); font-weight: 600; padding: 30px 0; }

/* ── image lightbox (built by wiki.js) ────────────────────── */

.sr-wk-lb {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(8, 4, 22, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; cursor: zoom-out; color: #fff;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.sr-wk-lb.is-open { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s; }
.sr-wk-lb img {
  max-width: min(94vw, 1400px); max-height: 88vh; border-radius: 12px; cursor: default;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 50px 100px -30px rgba(0, 0, 0, .9);
  transform: scale(.96); transition: transform 160ms var(--wk-ease-out);
}
.sr-wk-lb.is-open img { transform: none; transition: transform 240ms var(--wk-ease-out); }
.sr-wk-lb button {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 120ms ease, transform 120ms var(--wk-ease-out);
}
.sr-wk-lb button:hover { background: var(--wk-hover); }
.sr-wk-lb button:active { transform: scale(.94); }
body.sr-wk-lb-open { overflow: hidden; }

/* ── mobile ───────────────────────────────────────────────── */

.sr-wk-railtoggle { display: none; }

/* Pages with no headings don't reserve the outline column. */
.sr-wk-shell.is-notoc { grid-template-columns: var(--wk-rail) minmax(0, 1fr); }
.sr-wk-shell.is-notoc .sr-wk-main { max-width: 860px; }
.sr-wk-shell.is-notoc .sr-wk-toc { display: none; }

@media (max-width: 1180px) {
  .sr-wk-shell { grid-template-columns: var(--wk-rail) minmax(0, 1fr); gap: 36px; }
  .sr-wk-toc { display: none; }
}

@media (max-width: 900px) {
  .sr-wk-shell { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 18px 18px 64px; }
  .sr-wk-main { max-width: none; }
  .sr-wk-cover--home { border-radius: 16px; }
  .sr-wk-cover--home img { max-height: 220px; }

  .sr-wk-railtoggle {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
    border: none; border-radius: 10px; box-shadow: var(--wk-ring);
    background: var(--wk-surface-2); color: var(--wk-text-2);
    font: inherit; font-size: 13px; font-weight: 800; padding: 9px 14px; cursor: pointer;
    transition: transform 120ms var(--wk-ease-out);
  }
  .sr-wk-railtoggle .ti { font-size: 16px; }
  .sr-wk-railtoggle:active { transform: scale(.97); }
  /* The book becomes a drawer: in on the drawer curve, out faster. */
  .sr-wk-rail {
    position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(320px, 86vw);
    max-height: none; background: var(--wk-panel); box-shadow: 1px 0 0 var(--wk-line-2), 0 0 60px var(--wk-shadow);
    padding: 22px 18px; transform: translateX(-102%);
    transition: transform 220ms var(--wk-ease-out);
  }
  .sr-wk-rail.is-open { transform: none; transition: transform 300ms var(--wk-ease-drawer); }
  .sr-wk-scrim { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(8, 4, 22, .62); opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
  .sr-wk-scrim.is-open { opacity: 1; pointer-events: auto; }
  .sr-wk-pager { grid-template-columns: 1fr; }
  .sr-wk-pager .next { grid-column: 1; }
  .sr-wk-actions { margin-left: 0; width: 100%; }
  .sr-wk-body { font-size: 15px; }
  .sr-wk-body h2 { font-size: 23px; }
  .sr-wk-cards { grid-template-columns: 1fr; }
  .sr-wk-dir__grid, .sr-wk-dir__grid--areas { grid-template-columns: 1fr; }
}

/* Reduced motion: keep the fades, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .sr-wk-branch-chev .ti, .sr-wk-pagelink > span, .sr-wk-toc-marker, .sr-wk-tabs__ind, .sr-wk-omni__list,
  .sr-wk-lb img, .sr-wk-rail, .sr-wk-cards__c, .sr-wk-cards__arr, .sr-wk-pager .arr, .sr-wk-details__chev::after,
  .sr-wk-group__chev, .sr-wk-dcard, .sr-wk-dcard__arr {
    transition-duration: 1ms !important; transform: none !important;
  }
  .sr-wk-dir--home .sr-wk-dcard { animation: sr-wk-fade 200ms ease forwards; }
  @keyframes sr-wk-fade { to { opacity: 1; } }
  a.sr-wk-cards__c:hover { transform: none !important; }
}

/* ── editor ───────────────────────────────────────────────── */

.sr-wk-edshell { max-width: 1320px; margin: 0 auto; padding: 24px 34px 70px; }

.sr-wk-edbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.sr-wk-edtitle { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 17px; color: var(--wk-fg); }
.sr-wk-edbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.sr-wk-saved { font-size: 12.5px; font-weight: 800; color: var(--wk-faint); min-width: 104px; text-align: right; }
.sr-wk-saved.is-ok { color: var(--wk-tip-fg); }
.sr-wk-saved.is-dirty { color: var(--wk-accent); }

.sr-wk-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--wk-text-2); cursor: pointer; }
.sr-wk-toggle input { width: 16px; height: 16px; accent-color: var(--wk-accent-deep); cursor: pointer; }

.sr-wk-edtitleinput, .sr-wk-edsubinput {
  display: block; box-sizing: border-box; width: 100%;
  background: none; border: none; border-bottom: 1px solid transparent;
  color: var(--wk-fg); font-family: 'Fredoka', sans-serif; outline: none; padding: 4px 0;
}
.sr-wk-edtitleinput { font-size: 33px; font-weight: 700; }
.sr-wk-edsubinput { font-size: 16px; font-weight: 400; color: var(--wk-text); margin-top: 4px; font-family: 'Nunito', sans-serif; }
.sr-wk-edtitleinput:focus, .sr-wk-edsubinput:focus { border-bottom-color: var(--wk-line-2); }
.sr-wk-edtitleinput::placeholder, .sr-wk-edsubinput::placeholder { color: var(--wk-faint); }

.sr-wk-edsettings { margin: 18px 0 0; border: 1px solid var(--wk-line); border-radius: 13px; background: var(--wk-surface); }
.sr-wk-edsettings > summary { padding: 12px 17px; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--wk-text-2); list-style: none; }
.sr-wk-edsettings > summary::before { content: '▸ '; color: var(--wk-accent); }
.sr-wk-edsettings[open] > summary::before { content: '▾ '; }
.sr-wk-edsettings > summary::-webkit-details-marker { display: none; }

.sr-wk-edgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 17px 18px; }
.sr-wk-edgrid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; color: var(--wk-muted); }
.sr-wk-edgrid label.wide { grid-column: 1 / -1; }
.sr-wk-edgrid label.row { flex-direction: row; align-items: center; gap: 10px; padding-top: 22px; }
.sr-wk-edgrid label.row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--wk-accent-deep); }
.sr-wk-edgrid .hint { font-weight: 600; color: var(--wk-faint); }
.sr-wk-edgrid input, .sr-wk-edgrid select {
  box-sizing: border-box; width: 100%;
  border: 1px solid var(--wk-line-2); border-radius: 9px;
  background: var(--wk-surface-2); padding: 9px 12px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--wk-fg); outline: none;
}
.sr-wk-edgrid input:focus, .sr-wk-edgrid select:focus { border-color: var(--wk-accent); }
.sr-wk-edgrid select option { background: var(--wk-panel); color: var(--wk-fg); }
.sr-wk-edicon { display: flex; gap: 8px; align-items: center; }
.sr-wk-edicon input { flex: 1; }
.sr-wk-edicon .fa-solid { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--wk-accent); background: rgba(255,214,107,.1); font-size: 15px; }

.sr-wk-edtools {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: 18px 0 0; padding: 8px 10px;
  border: 1px solid var(--wk-line); border-bottom: none;
  border-radius: 13px 13px 0 0; background: var(--wk-surface-2);
}
.sr-wk-edtools button[data-md] {
  min-width: 32px; height: 30px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 7px; background: none;
  color: var(--wk-text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.sr-wk-edtools button[data-md]:hover { background: var(--wk-surface-2); color: var(--wk-fg); border-color: var(--wk-line); }
.sr-wk-edspacer { flex: 1; }
.sr-wk-edtabs { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--wk-surface-2); }
.sr-wk-edtabs button {
  border: none; border-radius: 7px; background: none; color: var(--wk-muted);
  font: inherit; font-size: 12px; font-weight: 800; padding: 5px 13px; cursor: pointer;
}
.sr-wk-edtabs button.is-active { background: var(--wk-surface-2); color: var(--wk-fg); }

.sr-wk-edpanes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--wk-line); border-radius: 0 0 13px 13px; overflow: hidden;
  min-height: 62vh;
}
.sr-wk-edpane { min-width: 0; }
.sr-wk-edwrite { border-right: 1px solid var(--wk-line); }
.sr-wk-edwrite textarea {
  display: block; box-sizing: border-box; width: 100%; height: 100%; min-height: 62vh;
  border: none; background: var(--wk-code-bg); color: var(--wk-code-fg); outline: none; resize: vertical;
  font-family: var(--wk-mono); font-size: 13.5px; line-height: 1.75; padding: 20px 22px;
}
.sr-wk-edwrite textarea::placeholder { color: var(--wk-faint); }
.sr-wk-edwrite textarea.is-dropping { outline: 2px dashed var(--wk-accent); outline-offset: -6px; background: var(--wk-code-bg); }
.sr-wk-edimgrow { display: flex; gap: 8px; align-items: stretch; }
.sr-wk-edimgrow input { flex: 1; min-width: 0; }
.sr-wk-edimgrow .sr-wk-btn { flex: none; white-space: nowrap; }
.sr-wk-edpreview { padding: 20px 24px; overflow-x: auto; background: var(--wk-surface); }
.sr-wk-edpreview .sr-wk-body { padding-top: 0; }
.sr-wk-edmuted { color: var(--wk-faint); font-weight: 600; font-size: 13px; }

.sr-wk-edtabs { display: none; }

.sr-wk-edhistory { margin-top: 22px; border: 1px solid var(--wk-line); border-radius: 13px; background: var(--wk-surface); }
.sr-wk-edhistory > summary { padding: 12px 17px; cursor: pointer; font-size: 13px; font-weight: 800; color: var(--wk-text-2); list-style: none; }
.sr-wk-edhistory > summary::before { content: '▸ '; color: var(--wk-accent); }
.sr-wk-edhistory[open] > summary::before { content: '▾ '; }
.sr-wk-edhistory > summary::-webkit-details-marker { display: none; }
#wk-history-body { padding: 0 17px 14px; }
.sr-wk-edrev {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 0; border-top: 1px solid var(--wk-line); font-size: 13px; color: var(--wk-text);
}
.sr-wk-edrev b { color: var(--wk-fg); }
.sr-wk-edrev .sr-wk-edmuted { font-size: 12px; }
.sr-wk-edrevacts { margin-left: auto; display: flex; gap: 8px; }
.sr-wk-edrevacts .sr-wk-btn { padding: 4px 11px; font-size: 11.5px; }

.sr-wk-eddanger {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 22px; padding: 16px 19px;
  border: 1px solid rgba(var(--wk-danger-rgb), .35); border-radius: 13px; background: rgba(var(--wk-danger-rgb), .06);
}
.sr-wk-eddanger b { color: var(--wk-danger-fg); font-size: 13.5px; }
.sr-wk-eddanger p { margin: 3px 0 0; font-size: 12.5px; font-weight: 600; color: var(--wk-muted); }
.sr-wk-eddanger button { margin-left: auto; }

@media (max-width: 900px) {
  .sr-wk-edshell { padding: 18px 20px 60px; }
  .sr-wk-edgrid { grid-template-columns: 1fr; }
  .sr-wk-edgrid label.row { padding-top: 0; }
  .sr-wk-edtitleinput { font-size: 25px; }
  .sr-wk-edtabs { display: flex; }
  .sr-wk-edpanes { grid-template-columns: 1fr; }
  .sr-wk-edwrite { border-right: none; }
  .sr-wk-edpanes .sr-wk-edpreview { display: none; }
  .sr-wk-edpanes[data-pane="preview"] .sr-wk-edpreview { display: block; }
  .sr-wk-edpanes[data-pane="preview"] .sr-wk-edwrite { display: none; }
}

/* ── Latest update: pinned above the areas so news is never buried ── */
.sr-wk-latest { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 10px 11px; border-radius: 12px; color: var(--wk-fg); text-decoration: none; background: rgba(var(--wk-accent-rgb), .10); box-shadow: inset 0 0 0 1px rgba(var(--wk-accent-rgb), .35); transition: background 140ms ease, box-shadow 140ms ease, transform 160ms var(--wk-ease-out); }
.sr-wk-latest:hover { background: rgba(var(--wk-accent-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--wk-accent-rgb), .6); transform: translateY(-1px); }
.sr-wk-latest:active { transform: scale(.985); }
.sr-wk-latest.is-active { box-shadow: inset 0 0 0 1px rgba(var(--wk-accent-rgb), .8); }
.sr-wk-latest__ico { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 16px; color: var(--wk-accent-text); background: rgba(var(--wk-accent-rgb), .22); }
.sr-wk-latest__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sr-wk-latest__eyebrow { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--wk-accent-text); }
.sr-wk-latest__title { font-size: 13px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-wk-latest__date { font-size: 11px; color: var(--wk-faint); }
.sr-wk-latest__chev { flex: none; font-size: 13px; color: var(--wk-faint); transition: transform 160ms var(--wk-ease-out); }
.sr-wk-latest:hover .sr-wk-latest__chev { transform: translateX(2px); color: var(--wk-accent-text); }
.sr-wk-new { display: inline-flex; align-items: center; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--wk-accent); color: #2b1d00; }
.sr-wk-group--updates > .sr-wk-group__head .sr-wk-group__ico { color: var(--wk-accent-text); }
.sr-wk-group--updates > .sr-wk-group__head .sr-wk-new { margin-right: 4px; }