/* WowTool.tips design system. Shared by the landing pages, pro, blog,
   Keystone Delta and 404. Fonts are self-hosted in /assets/fonts because
   Google Fonts is unreachable from China, one of the seven blocked regions. */
@import url(/assets/fonts/fonts.css);

:root {
  --bg: #0a0a14;
  --bg-2: #0d0d19;
  --surface: #11111d;
  --surface-2: #171726;
  --border: #22223a;
  --border-2: #30304c;
  --text: #e6e6ee;
  --text-2: #b4b4c6;
  --muted: #8a8aa3;
  --fel: #1eff00;
  --fel-dim: #15a800;
  --fel-ink: #07120a;
  --gold: #ffd700;
  --gold-dim: #b8960b;
  --blue: #4a9eff;
  --red: #f87171;
  --legendary: #ff8000;
  --font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --display: 'Barlow Condensed', 'Barlow', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  --radius: 2px;
  --radius-btn: 3px;
  --container: 1120px;
  --gutter: 24px;
  color-scheme: dark;
}

/* Legacy aliases so older inline rules keep working while pages migrate. */
:root { --text-muted: var(--muted); --surface-hover: var(--surface-2); --green: #4ade80; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(1200px 600px at 50% -10%, rgba(30, 255, 0, 0.055), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(74, 158, 255, 0.04), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(30, 255, 0, 0.25); color: #fff; }

a { color: var(--fel); text-decoration: none; }
a:hover { color: #7dff6b; }
:focus-visible { outline: 2px solid var(--fel); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
code, kbd, .mono { font-family: var(--mono); font-size: 0.92em; }
code { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--radius); color: var(--text); }
strong { font-weight: 600; color: var(--text); }
button { font-family: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

/* Type scale --------------------------------------------------------- */
h1, h2, h3, .display { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.4vw, 64px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3 { font-size: 24px; }
h4 { font-family: var(--font); font-weight: 600; font-size: 17px; }
p { text-wrap: pretty; }
.lede { font-size: 18px; color: var(--text-2); max-width: 58ch; }
.muted { color: var(--muted); }
.fel { color: var(--fel); }
.gold { color: var(--gold); }

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fel);
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before { content: ''; width: 22px; height: 1px; background: var(--fel); opacity: 0.7; }
.kicker.plain::before { display: none; }

/* Header ------------------------------------------------------------- */
.wt-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 20, 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.wt-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: 0.01em; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.brand img { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(30, 255, 0, 0.45)); }
.brand .wm { color: var(--muted); font-weight: 600; }
.brand .wm b { color: var(--fel); font-weight: 700; }
.wt-nav { display: flex; align-items: center; gap: 4px; }
.wt-nav a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-2); padding: 8px 10px; border-radius: var(--radius); position: relative;
}
.wt-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.wt-nav a.active { color: var(--fel); }
.wt-nav .btn { margin-left: 8px; }
/* A nav entry with sub-pages: parent link plus a caret; the list opens on hover,
   keyboard focus or the caret, and is always open inside the collapsed menu. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-caret { background: none; border: 0; color: var(--text-2); cursor: pointer; padding: 6px 6px 6px 2px; margin-left: -6px; font-size: 12px; line-height: 1; border-radius: var(--radius); }
.nav-caret:hover { color: var(--text); }
.nav-sub { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; flex-direction: column; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); z-index: 40; }
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub, .nav-group.open .nav-sub { display: flex; }
.wt-nav .nav-sub a { padding: 9px 12px; font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 500; white-space: nowrap; }
/* Dropdown entries carry a game icon, picked by destination so the translated
   copies need no markup. Icons come through our own /cdn/ proxy (Helsinki
   egress, edge-cached), the same path Keystone Delta uses. */
.wt-nav .nav-sub a { display: flex; align-items: center; gap: 10px; }
.nav-sub a::before { content: ''; width: 20px; height: 20px; border-radius: 3px; border: 1px solid #000; box-shadow: 0 0 0 1px #34344f; background: #151526 center / cover no-repeat; flex: none; }

/* One-line cross-sell, shown once a page: extension pages point at Keystone Delta and back. */
.wt-nudge { margin: 22px 0 0; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--fel); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface); font-size: 14px; line-height: 1.55; color: var(--text-2); }
.wt-nudge a { color: var(--fel); font-weight: 600; text-decoration: none; }
.wt-nudge a:hover { text-decoration: underline; }
/* The must-stop list is a guide that lives in the tool dropdown; say so. */
.nav-sub a[href$="/important-casts/"]::after, .nav-sub a[href*="everything-keystone-delta-reads"]::after { content: 'guide'; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-2); border-radius: 3px; padding: 1px 4px; margin-left: 4px; }
.nav-sub a[href$="#extension"]::before { background-image: url(/cdn/wow.zamimg.com/images/wow/icons/medium/inv_misc_enggizmos_swissarmy.jpg); }
.nav-sub a[href$="#web-proxy"]::before { background-image: url(/cdn/wow.zamimg.com/images/wow/icons/medium/spell_arcane_portaldalaran.jpg); }
.nav-sub a[href$="/keystone-delta/"]::before { background-image: url(/cdn/wow.zamimg.com/images/wow/icons/medium/inv_relics_hourglass.jpg); }
.nav-sub a[href*="mode=players"]::before { background-image: url(/cdn/wow.zamimg.com/images/wow/icons/medium/inv_misc_groupneedmore.jpg); }
.nav-sub a[href$="/keystone-delta/profile/"]::before { background-image: url(/cdn/wow.zamimg.com/images/wow/icons/medium/achievement_character_human_male.jpg); }
.nav-sub a[href*="important-casts"]::before { background-image: url(/cdn/wow.zamimg.com/images/wow/icons/medium/ability_kick.jpg); }
.nav-sub a[href*="everything-keystone-delta-reads"]::before { background-image: url(/cdn/wow.zamimg.com/images/wow/icons/medium/inv_misc_book_11.jpg); }
.nav-sub a[href$="/keystone-delta/pro/"]::before, .nav-sub a[href$="/pro.html"]::before { background-image: url(/cdn/wow.zamimg.com/images/wow/icons/medium/inv_misc_coin_02.jpg); }
.nav-toggle { display: none; padding: 0; background: none; border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: var(--radius); cursor: pointer; align-items: center; justify-content: center; }

.lang-picker { position: relative; margin-left: 6px; }
.lang-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-2); cursor: pointer; padding: 6px 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; transition: color .15s, border-color .15s; }
.lang-btn:hover { color: var(--text); border-color: var(--border-2); }
.lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 6px 0; min-width: 150px; z-index: 100; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); }
.lang-picker.open .lang-dropdown { display: block; }
.lang-dropdown a { display: block; padding: 7px 14px; color: var(--text-2); font-size: 13px; }
.lang-dropdown a:hover { background: var(--surface-2); color: var(--text); }
.lang-dropdown a.current { color: var(--fel); }

/* Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-btn); border: 1px solid transparent;
  font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--fel); color: var(--fel-ink); box-shadow: 0 0 0 1px rgba(30, 255, 0, 0.2), 0 6px 20px -8px rgba(30, 255, 0, 0.6); }
.btn-primary:hover { background: #5cff45; color: var(--fel-ink); box-shadow: 0 0 0 1px rgba(30, 255, 0, 0.35), 0 10px 26px -8px rgba(30, 255, 0, 0.7); }
.btn-lg { padding: 15px 28px; font-size: 15px; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-2); }
.btn-ghost:hover { border-color: var(--muted); color: var(--text); background: rgba(255, 255, 255, 0.03); }
.btn-gold { background: var(--gold); color: #1a1400; }
.btn-gold:hover { background: #ffe14d; color: #1a1400; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--text-2); }
.link-arrow::after { content: '\2192'; transition: transform .15s; }
.link-arrow:hover { color: var(--fel); }
.link-arrow:hover::after { transform: translateX(3px); }

/* Sections ----------------------------------------------------------- */
.section { padding: 80px 0; border-top: 1px solid var(--border); }
.section-head { display: grid; gap: 8px; margin-bottom: 36px; max-width: 70ch; }
.section-head p { color: var(--text-2); font-size: 17px; margin-top: 6px; }
.section-head h2 + p { margin-top: 8px; }

/* Panels and cards --------------------------------------------------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-pad { padding: 26px 28px; }
.panel-accent { border-left: 3px solid var(--fel); }
.panel-gold { border-left: 3px solid var(--gold); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; transition: border-color .15s, background .15s; }
a.card { color: var(--text); display: block; }
a.card:hover { border-color: var(--fel-dim); background: var(--surface-2); color: var(--text); }
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fel); border: 1px solid rgba(30, 255, 0, 0.3); padding: 2px 8px; border-radius: var(--radius); }
.tag-gold { color: var(--gold); border-color: rgba(255, 215, 0, 0.35); }
.tag-muted { color: var(--muted); border-color: var(--border-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-2); border: 1px solid var(--border-2); padding: 4px 10px; border-radius: var(--radius); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.note { border: 1px solid var(--border); border-left: 3px solid var(--fel-dim); background: var(--surface); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 14px; color: var(--text-2); }
.note strong { color: var(--fel); }
.note.warn { border-left-color: var(--gold); }
.note.warn strong { color: var(--gold); }
.note.err { border-left-color: var(--red); }
.note.err strong { color: var(--red); }

/* Forms -------------------------------------------------------------- */
.input, input[type="text"], input[type="email"], input[type="url"], textarea {
  width: 100%; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 12px 14px; color: var(--text); font-family: var(--font); font-size: 15px; transition: border-color .15s, box-shadow .15s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus, .input:focus { outline: none; border-color: var(--fel-dim); box-shadow: 0 0 0 3px rgba(30, 255, 0, 0.12); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }

/* FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; font-weight: 600; font-size: 17px; color: var(--text); transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); font-size: 20px; color: var(--muted); flex-shrink: 0; transition: transform .2s, color .15s; }
.faq details[open] summary::after { content: '\2212'; color: var(--fel); }
.faq summary:hover { color: var(--fel); }
.faq .faq-a { padding: 0 4px 20px; color: var(--text-2); font-size: 15px; line-height: 1.7; max-width: 76ch; }
.faq .faq-a a { text-decoration: underline; text-decoration-color: rgba(30, 255, 0, 0.4); text-underline-offset: 3px; }

/* Footer ------------------------------------------------------------- */
.wt-footer { border-top: 1px solid var(--border); padding: 48px 0 40px; margin-top: 40px; font-size: 13px; color: var(--muted); background: var(--bg-2); }
.wt-footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.wt-footer .brand { font-size: 20px; margin-bottom: 10px; }
.wt-footer h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 12px; }
.wt-footer ul { list-style: none; display: grid; gap: 8px; }
.wt-footer a { color: var(--muted); }
.wt-footer a:hover { color: var(--text); }
.wt-footer .disclaimer { max-width: 44ch; line-height: 1.6; }
.wt-footer .foot-bottom { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; }

/* Floating bug button + modal --------------------------------------- */
.bug-btn { position: fixed; bottom: 24px; right: 24px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border-2); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); transition: border-color .15s, transform .15s; }
.bug-btn:hover { border-color: var(--fel-dim); transform: translateY(-2px); }
.modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; background: rgba(4, 4, 10, 0.7); backdrop-filter: blur(4px); padding: 16px; }
.modal.open { display: flex; }
.modal-box { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 26px 26px 22px; max-width: 460px; width: 100%; position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.modal-close { position: absolute; top: 8px; right: 10px; background: none; border: none; color: var(--muted); font-size: 22px; cursor: pointer; line-height: 1; padding: 6px; }
.modal-close:hover { color: var(--text); }
.modal-box h3 { font-family: var(--font); font-size: 18px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.modal-box p { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.modal-box textarea { margin-bottom: 12px; resize: vertical; min-height: 110px; }

/* Article / blog ----------------------------------------------------- */
.post { padding: 56px 0 40px; }
.post .container { max-width: var(--container); }
.post h1 { font-size: clamp(34px, 4.6vw, 52px); margin: 10px 0 14px; }
.post .meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; display: flex; gap: 10px; flex-wrap: wrap; }
.post h2 { font-size: clamp(26px, 3vw, 34px); margin: 44px 0 14px; color: var(--text); padding-top: 18px; border-top: 1px solid var(--border); }
.post h3 { font-family: var(--font); font-weight: 600; font-size: 19px; margin: 26px 0 8px; }
.post p, .post li { font-size: 17px; line-height: 1.75; color: var(--text-2); }
.post p { margin-bottom: 18px; }
.post ul, .post ol { margin: 0 0 18px 22px; }
.post li { margin-bottom: 6px; }
.post a { text-decoration: underline; text-decoration-color: rgba(30, 255, 0, 0.35); text-underline-offset: 3px; }
.post a:hover { text-decoration-color: var(--fel); }
.post strong { color: var(--text); }
.post table { width: 100%; border-collapse: collapse; margin: 16px 0 26px; font-size: 15px; }
.post th, .post td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-2); }
.post th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fel); font-weight: 600; border-bottom-color: var(--border-2); }
.post tr:hover td { background: rgba(255, 255, 255, 0.02); }
.post .status-blocked { color: var(--red); }
.post .tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 16px 0 26px; }
.post .tablewrap table { margin: 0; min-width: 520px; }
.post .crumbs { margin: 0 0 10px; }
.post .info-box, .post .step-box { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--fel-dim); border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 24px; margin: 16px 0 26px; }
.post .info-box h3, .post .step-box h3 { margin-top: 0; color: var(--fel); }
.post .info-box p:last-child, .post .step-box p:last-child { margin-bottom: 0; }
.post .info-box p, .post .step-box p { font-size: 16px; }
.post .site-section { margin: 28px 0 10px; }
.post .cta-box { background: linear-gradient(180deg, rgba(30, 255, 0, 0.06), transparent 70%), var(--surface); border: 1px solid rgba(30, 255, 0, 0.35); border-radius: var(--radius); padding: 30px 28px; margin: 40px 0; }
.post .cta-box h3 { font-family: var(--display); font-size: 28px; margin: 0 0 6px; }
.post .cta-box p { margin-bottom: 18px; color: var(--text-2); }
.post .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: var(--fel); color: var(--fel-ink); border-radius: var(--radius-btn); font-weight: 600; font-size: 15px; text-decoration: none; box-shadow: 0 6px 20px -8px rgba(30, 255, 0, 0.6); }
.post .cta-btn:hover { background: #5cff45; color: var(--fel-ink); }
.post code { font-size: 0.9em; }
.crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--fel); }
.crumbs li { list-style: none; display: flex; gap: 8px; align-items: center; }
.crumbs li + li::before { content: '/'; color: var(--border-2); }
.post-nav { border-top: 1px solid var(--border); margin-top: 48px; padding-top: 28px; }
.post-nav h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.post-nav ul { list-style: none; margin: 0; display: grid; gap: 10px; }
.post-nav li { margin: 0; }
.post-nav a { text-decoration: none; font-weight: 600; font-size: 16px; color: var(--text); }
.post-nav a:hover { color: var(--fel); }
.post-nav small { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 2px; }

/* Guide list (blog index + home) ------------------------------------- */
.guide-list { border-top: 1px solid var(--border); }
/* Game icons on guide rows, section headings and post headers: the same
   bordered-square treatment as .wt-ico in wow.css, at larger sizes. */
.guide-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.guide-ico { width: 48px; height: 48px; border-radius: 6px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--border-2); background: #000; display: block; object-fit: cover; transition: box-shadow .15s; }
.guide-row:hover .guide-ico { box-shadow: 0 0 0 1px var(--fel-dim); }
.sec-ico { width: 34px; height: 34px; border-radius: 5px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--border-2); vertical-align: -8px; margin-right: 12px; background: #000; }
.post-ico { width: 56px; height: 56px; border-radius: 8px; border: 1px solid #000; box-shadow: 0 0 0 1px var(--border-2); display: block; margin: 0 0 16px; background: #000; }
.guide-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 24px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; transition: background .15s; }
.guide-row:hover { background: rgba(255, 255, 255, 0.025); color: var(--text); }
.guide-row h3, .guide-row h2 { font-family: var(--font); font-weight: 600; font-size: 19px; line-height: 1.3; margin-bottom: 4px; letter-spacing: 0; }
.guide-row p { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 70ch; }
.guide-row .meta { font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 6px; }
.guide-row .go { font-family: var(--mono); font-size: 18px; color: var(--muted); transition: color .15s, transform .15s; }
.guide-row:hover .go { color: var(--fel); transform: translateX(4px); }

/* Utilities ---------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.split.rev { grid-template-columns: 7fr 5fr; }
.stack { display: grid; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--fel); color: var(--fel-ink); padding: 8px 12px; z-index: 1000; font-weight: 600; }
.skip-link:focus { left: 8px; }

/* Reveal on scroll (only where .reveal is set; JS adds .in) ----------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Responsive --------------------------------------------------------- */
@media (max-width: 960px) {
  /* Seven nav items plus the language picker no longer fit beside the brand
     between the tablet and phone widths, so the menu collapses here already. */
  .wt-nav { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: rgba(10, 10, 20, 0.97); border-bottom: 1px solid var(--border); padding: 10px 16px 16px; display: none; gap: 2px; }
  .wt-nav.open { display: flex; }
  .wt-nav a { padding: 12px 8px; font-size: 14px; }
  .wt-nav .btn { margin: 8px 0 0; }
  .nav-toggle { display: inline-flex; }
  .lang-picker { margin: 8px 0 0; }
  .lang-dropdown { position: static; box-shadow: none; margin-top: 6px; }
  .nav-group { flex-direction: column; align-items: stretch; }
  .nav-caret { display: none; }
  .nav-sub { display: flex; position: static; background: none; border: 0; box-shadow: none; padding: 0 0 4px 14px; min-width: 0; }
  .wt-nav .nav-sub a { font-size: 13px; padding: 9px 8px; }
  .split, .split.rev { grid-template-columns: 1fr; gap: 32px; }
  .grid-3 { grid-template-columns: 1fr; }
  .wt-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .guide-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 4px; }
  .guide-row .go { display: none; }
  .guide-badge { flex-direction: row; align-items: center; }
  .guide-ico { width: 36px; height: 36px; }
  .sec-ico { width: 28px; height: 28px; vertical-align: -7px; margin-right: 10px; }
  .post-ico { width: 48px; height: 48px; }
  .wt-header .container { height: 60px; }
  .wt-nav { position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: rgba(10, 10, 20, 0.97); border-bottom: 1px solid var(--border); padding: 10px 16px 16px; display: none; gap: 2px; }
  .wt-nav.open { display: flex; }
  .wt-nav a { padding: 12px 8px; font-size: 14px; }
  .wt-nav .btn { margin: 8px 0 0; }
  .nav-toggle { display: inline-flex; }
  .lang-picker { margin: 8px 0 0; }
  .lang-dropdown { position: static; box-shadow: none; margin-top: 6px; }
  .wt-footer .container { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 24px; }
  .panel-pad { padding: 20px 18px; }
  .card { padding: 18px; }
  .btn-lg { padding: 14px 20px; font-size: 14px; }
  .bug-btn { bottom: 16px; right: 16px; width: 44px; height: 44px; }
  .post { padding: 36px 0 24px; }
  .post p, .post li { font-size: 16px; }
  .post .cta-box { padding: 22px 18px; }
  .lede { font-size: 16px; }
}

/* Devanagari and Thai glyphs need taller lines than the condensed Latin display face. */
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] .display,
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3, html[lang="th"] .display { line-height: 1.25; }

/* Gear check and profile gear: pills, slot table, talent tree (assets/kd-gear.js). */
.ttree{position:relative;margin:10px 0 4px}
/* The canvas is as wide as the build needs. Centre it when it fits, and let the
   wrap scroll when it does not: margin:auto collapses to 0 past the edge. */
.ttree-in{position:relative;margin:0 auto}
.ttree svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tnode{position:absolute;display:flex;gap:2px;transform:translate(-50%,-50%)}
.tnode a{display:block;width:30px;height:30px;border-radius:6px;border:2px solid #2b2f3a;overflow:hidden;
  background:#0d0f14;opacity:.42;filter:grayscale(.7);transition:transform .1s ease}
.tnode a:hover{transform:scale(1.18);z-index:5;position:relative}
.tnode a img{width:100%;height:100%;display:block}
.tnode.pick a{opacity:1;filter:none;border-color:var(--fel);box-shadow:0 0 0 1px rgba(30,255,0,.25)}
.tnode.most a{opacity:.9;filter:none;border-color:#7c8698}
.tnode.split a{opacity:.72;filter:grayscale(.25);border-color:#8a7333}
.tnode.pick.miss a{border-color:#a5533b}
.tnode .pct{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);font-size:9px;line-height:1;
  font-family:var(--mono,monospace);color:var(--text-muted);background:var(--bg);padding:0 2px;border-radius:3px}
.tnode.pick .pct{color:var(--fel)}
.tlegend{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:12px;color:var(--text-muted);margin:14px 0 2px}
.tlegend span{display:flex;align-items:center;gap:6px}
.tlegend i{width:13px;height:13px;border-radius:4px;border:2px solid #2b2f3a;background:#0d0f14;display:inline-block}
.tlegend i.pick{border-color:var(--fel)}
.tlegend i.most{border-color:#7c8698}
.tlegend i.split{border-color:#8a7333}
.tlegend i.miss{border-color:#a5533b}
/* The two talent columns under the tree are lists with a label, not more legend. */
.collab{margin:0 0 8px;font-weight:600;color:var(--text);font-size:14px}
/* The gear view stacks a lot of short blocks. Without room between them it reads
   as one wall, so every heading gets air and every list gets a line to breathe. */
/* Inside the gear view each h3 is really its own section, so it gets a rule and
   room above it; without that the whole view reads as one wall of text. */
.gearblock h3{margin:34px 0 14px;padding-top:24px;border-top:1px solid var(--border)}
.gearblock h3:first-of-type{border-top:0;padding-top:0;margin-top:26px}
.gearblock .cards{margin-bottom:6px}
/* A report takes fifteen seconds to render, so the link says so while it works. */
.pdf-wait{opacity:.75;pointer-events:none;display:inline-flex;align-items:center;gap:8px}
.pdf-wait .spin{width:13px;height:13px;border:2px solid var(--border-2);border-top-color:var(--fel);border-radius:50%;display:inline-block;animation:kdspin .8s linear infinite}
.pdf-note{font-size:12px;color:var(--text-muted);margin-top:6px;line-height:1.5}
.pdf-note.bad{color:#ea8f7f}
/* How far along a job is, from the steps it has reported against the steps its
   kind normally takes. Hidden while it is still queued, where there is no work
   to be a fraction of. */
.lbar{height:4px;border-radius:3px;background:var(--border);overflow:hidden;margin:10px 0 2px}
.lbar i{display:block;height:100%;width:8%;background:var(--fel);border-radius:3px;transition:width .4s ease}
.lstep{margin-left:auto;margin-right:10px;font-size:12px;color:var(--text-muted)}
@keyframes kdspin{to{transform:rotate(360deg)}}
.findings{margin:0 0 8px;padding-left:20px}
.findings li{margin-bottom:10px;line-height:1.6}
.bonus li{padding:10px 12px;line-height:1.55}
.bonus{margin:10px 0 6px}
.gearline{margin-bottom:14px}
/* The talent columns are drawn by the shared gear renderer, so their rules
   belong here: on the profile page, which carried none of them, the name and
   its take rate ran together as "Captured Thoughts43% of them"
   (owner, 2026-09-08). */
.talcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.talcols ul{list-style:none;padding:0;margin:0}
.talcols li{padding:3px 0;display:flex;justify-content:space-between;gap:8px}
.talcols li.miss{color:#ea8f7f}
@media (max-width:640px){.talcols{grid-template-columns:1fr}}
.cards+h3,.tablewrap+h3,.bonus+h3,.talcols+h3,.ttree+h3{margin-top:30px}
.cards+p.sub,.tablewrap+p.sub{margin-top:12px}
.talcols{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.gemrow{display:inline-flex;gap:4px;align-items:center;justify-content:flex-end}
.gemrow img{width:16px;height:16px;border-radius:3px;display:block}
.setpiece{color:var(--fel);font-size:10px;letter-spacing:.04em;margin-left:6px;text-transform:uppercase}
.setpiece.emb{color:var(--text)}
.gear-you a,.gear-them a{color:var(--text)}
.gear-you .wt-ico,.gear-them .wt-ico{width:20px;height:20px;vertical-align:middle;margin-right:6px;border-radius:3px}
.gear-you small,.gear-them small{opacity:.65}

/* ---- Collapsible result sections and the contents rail (kd-sections.js) ----
   A comparison is twenty screens of reading. The fold is for the second read;
   nothing starts closed, because a page that opens hidden makes the reader work
   to find out what it has. */
.secfold-h { display: flex; align-items: center; gap: 10px; cursor: pointer; }
/* The heading keeps its own colour on hover. Painting a whole section title
   fel green looked like a broken link, not an affordance (owner, 2026-09-07);
   the caret is the thing that reacts. */
.secfold-h:hover { color: inherit; }
.secfold-h:hover .secfold, .secfold:hover, .secfold:focus-visible { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.secfold { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 7px;
  background: transparent; color: var(--text-muted); cursor: pointer; transition: transform .18s ease, color .15s ease, border-color .15s ease; }
.secfold-h:hover .secfold, .secfold:hover { color: var(--text); border-color: color-mix(in srgb, var(--fel) 35%, var(--border)); }
section.folded .secfold { transform: rotate(-90deg); }
/* The fold is a plain hide. The grid 0fr trick animates beautifully in a demo
   and did not collapse here at all: these sections hold tables and canvases
   whose own layout keeps the row at content height, so the section stayed open
   with a rotated caret. A fold that does not fold is worse than one that does
   not animate. */
section.folded > .secbody { display: none; }
/* The site header is sticky, so a jump from the contents rail put the section's
   own heading behind it: the reader landed on a table with no title (owner,
   2026-09-07). The scroll stops this far short instead. */
section[data-fold] { scroll-margin-top: 84px; }
@media (max-width: 640px) { section[data-fold] { scroll-margin-top: 70px; } }
section.folded > h2 { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .secfold { transition: none; } }

/* ---- the section header bar (enhanced by assets/kd-sections.js) ----
   Only sections that actually fold get it, so a heading the script did not
   touch keeps its old look and nothing shifts on a page without the script. */
section[data-fold] > h2{
  margin:0 0 18px;padding:12px 14px 12px 16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface) 74%,transparent));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid color-mix(in srgb,var(--fel) 18%,var(--border));
  border-radius:var(--radius) var(--radius) 0 0;
  border-bottom-color:color-mix(in srgb,var(--fel) 28%,var(--border));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--fel) 55%,transparent);
  transition:background .15s ease,border-color .15s ease;
}
section[data-fold] > h2:hover{
  border-color:color-mix(in srgb,var(--fel) 45%,var(--border));
  box-shadow:inset 3px 0 0 var(--fel);
}
/* Hovering the bar lights the whole card, not just its top edge: the body is
   the h2's next sibling, so hovering a table inside it changes nothing. */
section[data-fold] > h2:hover + .secbody > div{
  border-color:color-mix(in srgb,var(--fel) 45%,var(--border));
}
/* Closed: a complete object, rounded all round, with the rule under it gone. */
section[data-fold].folded > h2{
  border-radius:var(--radius);
  border-bottom-color:color-mix(in srgb,var(--fel) 18%,var(--border));
  background:color-mix(in srgb,var(--surface) 70%,transparent);
}
/* Closed and hovered, every edge. This rule has to outweigh the one above it,
   which sets border-bottom-color at the same weight and later in the file;
   without it the bottom edge alone stayed dim (owner, 2026-09-08). */
section[data-fold].folded > h2:hover{
  border-color:color-mix(in srgb,var(--fel) 45%,var(--border));
}
/* The body hangs off the bar, so the two read as one card rather than a
   heading and some loose content under it. */
section[data-fold] > .secbody > div{
  border:1px solid color-mix(in srgb,var(--fel) 18%,var(--border));border-top:0;
  transition:border-color .15s ease;
  border-radius:0 0 var(--radius) var(--radius);
  padding:18px 16px 16px;
  margin-top:-18px;
}
/* Inside a section, a sub-heading starts a new thought and needs room before
   it; measured, not judged by eye: a hint line and the h3 under it were
   touching at zero pixels in three views (2026-09-07). Its own sub-line keeps
   sitting tight against it, which is the pairing we want. */
section[data-fold] > .secbody > div > h3{margin:26px 0 8px}
section[data-fold] > .secbody > div > h3:first-child{margin-top:0}
section[data-fold] > .secbody > div > h3 + .sub,
section[data-fold] > .secbody > div > h3 + p{margin-top:0}
/* A block that follows a table is a new block, not the table's last row. */
section[data-fold] > .secbody > div > .tablewrap + *:not(.hint):not(.sub){margin-top:20px}
@media (max-width:640px){
  section[data-fold] > h2{padding:10px 12px 10px 14px}
  section[data-fold] > .secbody > div{padding:14px 12px 12px}
  section[data-fold] > .secbody > div > h3{margin-top:20px}
}
/* On paper the bar is furniture: the print rule already draws its own heading. */
html.print section[data-fold] > h2{background:none;backdrop-filter:none;border:0;box-shadow:none;padding:0;border-radius:0}
html.print section[data-fold] > .secbody > div{border:0;padding:0;margin-top:0}

.kd-rail { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 40;
  width: 210px; max-height: 72vh; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px; font-size: 12px; }
.kd-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 6px 8px; border-bottom: 1px solid var(--border); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.kd-rail-tab { display: none; align-items: center; gap: 6px; }
.kd-rail.beside .kd-rail-tab { display: none; }
.kd-rail:not(.beside) .kd-rail-title { display: none; }
.kd-rail:not(.beside) .kd-rail-tab { display: inline-flex; }
.kd-rail-all { border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0; }
.kd-rail-all:hover { color: var(--fel); }
.kd-rail-list { overflow-y: auto; padding: 6px 0 2px; display: grid; gap: 1px; }
.kd-rail a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--text-muted);
  text-decoration: none; line-height: 1.35; border-left: 2px solid transparent;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-rail a:hover { background: var(--bg); color: var(--text); }
.kd-rail a.here { color: var(--fel); border-left-color: var(--fel); background: var(--bg); }
/* `beside` is set from a measurement of the actual gap, so a page with
   different padding gets the right answer rather than the same one. */
/* A drawer on the bottom edge: its own header is the front of it, so closed
   you see the label and nothing else, and open the box grows upward with the
   list hanging under that label. */
.kd-rail:not(.beside) { top: auto; bottom: 0; left: 22px; transform: none;
  /* Closed it is as wide as its own label, so it does not read as an empty bar
     across the page; open it takes the width the list needs. max-content also
     means no translation can be clipped (owner, 2026-09-08). */
  width: max-content; display: flex; overflow: hidden; padding: 0 8px;
  background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--fel) 40%, var(--border)); border-bottom: 0;
  border-radius: 12px 12px 0 0;
  /* A 25px strip does not need a 20px shadow to lift off the page. */
  box-shadow: 0 -4px 14px rgba(0,0,0,.4);
  max-height: 25px;
  transition: max-height .22s ease; }
.kd-rail:not(.beside):hover, .kd-rail:not(.beside).open {
  border-color: color-mix(in srgb, var(--fel) 60%, var(--border)); }
.kd-rail:not(.beside) .kd-rail-head { cursor: pointer; padding: 4px 4px 9px;
  border-bottom-color: transparent; color: var(--text-2);
  /* .08em is the tracking every other small-caps label on the site uses. */
  font-size: 10px; letter-spacing: .08em; }
.kd-rail:not(.beside):hover .kd-rail-head, .kd-rail:not(.beside).open .kd-rail-head { color: var(--fel); }
.kd-rail:not(.beside) .kd-rail-all { display: none; }
.kd-rail:not(.beside).open { width: 250px; max-height: 60vh; box-shadow: 0 -10px 34px rgba(0,0,0,.5); }
.kd-rail:not(.beside).open .kd-rail-head { border-bottom-color: var(--border); }
.kd-rail:not(.beside).open .kd-rail-all { display: inline; }
.kd-rail:not(.beside) .kd-rail-list { padding-bottom: 8px; }
/* Clipping the list still let it set the box's intrinsic width, so a closed
   drawer came out 241px wide: as wide as its longest entry. Taking it out of
   the layout while closed is what makes max-content mean the label. */
.kd-rail:not(.beside):not(.open) .kd-rail-list { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kd-rail:not(.beside), .kd-dock:not(.beside),
  .kd-rail:not(.beside).open, .kd-dock:not(.beside).open { transition: none; }
}
html.print .kd-rail, html.print .secfold { display: none !important; }
/* What the other tab is holding. A line, not a panel: it is a reminder plus
   one action, and anything heavier competes with the box under it. */
.carry { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted);
  border-left: 2px solid color-mix(in srgb, var(--fel) 45%, var(--border));
  padding: 5px 0 5px 10px; }
.carry .linky { border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; color: var(--fel); text-decoration: underline;
  text-underline-offset: 3px; }
.carry .linky:hover { background: transparent; color: var(--fel); text-decoration: none; }

/* "This is me": one identity, remembered in this browser, nowhere else. */
/* Not stored: the same line as the stored state, with a question mark where
   the tick will be. A pill button next to a plain status line made one thing
   look like two (owner, 2026-09-08). */
.kd-me-btn { border: 0; background: transparent; color: var(--fel);
  padding: 0; font: 600 11px/1.6 var(--display, inherit);
  letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  text-transform: none; }
.kd-me-btn:hover { color: var(--fel); background: transparent; text-decoration: underline;
  text-underline-offset: 3px; }
.kd-me-btn .ask { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%;
  background: color-mix(in srgb, var(--fel) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fel) 45%, transparent);
  position: relative; }
.kd-me-btn .ask::after { content: "?"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 8px/1 var(--display, inherit); color: var(--fel); }
/* Stored: a line that says what is true, not a control that says its state.
   The only pressable thing here is the way out, and it is muted, because
   nothing green should invite a press that takes something away. */
.kd-me-on { display: inline-flex; align-items: center; gap: 7px;
  font: 600 11px/1.6 var(--display, inherit); letter-spacing: .04em; color: var(--fel); }
.kd-me-on .tick { width: 12px; height: 12px; flex: 0 0 auto; border-radius: 50%;
  background: color-mix(in srgb, var(--fel) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fel) 55%, transparent);
  position: relative; }
.kd-me-on .tick::after { content: ""; position: absolute; left: 3.5px; top: 1.5px;
  width: 3px; height: 6px; border: solid var(--fel); border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); }
.kd-me-forget { border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px; }
.kd-me-forget:hover { background: transparent; color: var(--text-2); text-decoration: none; }

/* The dock of recent keys. Same slot as the contents rail: the rail belongs to
   a rendered result, the dock to the screens before one, so the dock steps
   aside (.behind) whenever a rail is up. */
/* 74vh put the panel exactly at its cap with ten runs listed, so opening one
   run's two buttons needed 28px it did not have and raised a scrollbar for a
   millimetre of travel. 80vh clears that and still leaves a fifth of the
   screen (owner, 2026-09-08). */
.kd-dock { position: fixed; left: 18px; top: 50%; transform: translateY(-50%); z-index: 39;
  width: 236px; max-height: 80vh; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 12px; padding: 8px; font-size: 12px; }
.kd-dock.behind { display: none; }
.kd-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 6px 8px; border-bottom: 1px solid var(--border); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
/* Whose keys these are, at the top, because the character is the subject and
   the line under it is the list's own heading.

   Laid out rather than squeezed: the panel is 236px, so a portrait, a name and
   a control on one line left the name three words deep and the sub line broken
   mid-phrase. The card gets the full width, and the control sits under it on
   its own row, where it is a status the reader can act on rather than a thing
   fighting the name for space. */
.kd-dock-who { padding: 8px 6px 9px; border-bottom: 1px solid var(--border); }
.kd-dock-who .wt-who { gap: 10px; align-items: center; min-width: 0; }
/* The card is drawn at the small size everywhere else; here it is the panel's
   subject, so it gets the full portrait. .sm carries its own width, hence the
   extra class in the selector rather than a bare element rule. */
.kd-dock-who .wt-who .wt-face.sm { width: 38px; height: 38px; flex: 0 0 auto; }
.kd-dock-who .wt-who .wt-face.sm .wt-badge { width: 15px; height: 15px; right: -4px; bottom: -4px; }
.kd-dock-who .wt-who .wt-face.sm .wt-badge img { width: 15px; height: 15px; }
.kd-dock-who .wt-who > span:last-child { min-width: 0; }
.kd-dock-who .wt-who b, .kd-dock-who .wt-who strong { font-size: 13px; line-height: 1.2; }
.kd-dock-who .wt-who small { display: block; font-size: 11px; line-height: 1.35;
  color: var(--text-muted); margin-top: 2px; }
.kd-dock-who .kd-me-btn, .kd-dock-who .kd-me-on { margin-top: 8px; }
.kd-dock-who + .kd-dock-head { border-bottom: 0; padding-bottom: 4px; }
.kd-dock-list { overflow-y: auto; overflow-x: hidden; padding: 4px 0 2px; display: grid; gap: 2px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--fel) 40%, transparent) transparent; }
.kd-dock-list::-webkit-scrollbar { width: 6px; }
.kd-dock-list::-webkit-scrollbar-track { background: transparent; }
.kd-dock-list::-webkit-scrollbar-thumb { border-radius: 3px;
  background: color-mix(in srgb, var(--fel) 35%, transparent); }
.kd-dock-list::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--fel) 55%, transparent); }
.kd-run, .kd-run-head, .kd-run-sub { min-width: 0; }
.kd-run { border-radius: 8px; padding: 2px; }
.kd-run.open { background: var(--bg); }
.kd-run-head { display: flex; align-items: center; gap: 7px; width: 100%; padding: 5px 7px;
  border: 0; background: transparent; color: var(--text-2); cursor: pointer; text-align: left;
  font: inherit; border-radius: 6px; }
.kd-run-head:hover { background: var(--bg); color: var(--text); }
.kd-run-head img { width: 18px; height: 18px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.kd-run-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-run-lvl { flex: 0 0 auto; color: var(--text-muted); }
.kd-run-t { flex: 0 0 auto; }
.kd-run-sub { display: flex; gap: 8px; padding: 0 7px 4px 32px; color: var(--text-muted); font-size: 11px; }
/* Opening a run's actions must not widen the panel: the buttons wrap and the
   row starts where the text does, rather than under the portrait's indent,
   which was pushing the list past its own width and raising a horizontal
   scrollbar (owner, 2026-09-08). */
.kd-run-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 7px 6px 8px; }
.kd-run-acts button { flex: 1 1 auto; }
.kd-run-acts button { border: 1px solid var(--border); background: transparent; color: var(--text-2);
  border-radius: 6px; padding: 4px 8px; font: 600 11px/1 var(--display, inherit); cursor: pointer; }
.kd-run-acts button:hover { color: var(--fel); border-color: var(--fel); background: transparent; }
/* Narrow, the dock is the same drawer the rail is: its own header is the front,
   clipped to it when closed, growing upward with the card and the list under it
   when open. The header moves to the top here, because a drawer is opened by
   its front; beside the content it stays under the card, where the card is the
   subject and the label is the list's heading. */
.kd-dock:not(.beside) { top: auto; bottom: 0; left: 22px; transform: none;
  width: max-content; display: flex; flex-direction: column; overflow: hidden; padding: 0 8px;
  background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--fel) 40%, var(--border)); border-bottom: 0;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 14px rgba(0,0,0,.4);
  max-height: 25px;
  transition: max-height .22s ease; }
.kd-dock:not(.beside):hover, .kd-dock:not(.beside).open {
  border-color: color-mix(in srgb, var(--fel) 60%, var(--border)); }
.kd-dock:not(.beside) .kd-dock-head { order: -1; cursor: pointer; padding: 4px 4px 9px;
  border-bottom-color: transparent; color: var(--text-2);
  font-size: 10px; letter-spacing: .08em; }
.kd-dock:not(.beside):hover .kd-dock-head,
.kd-dock:not(.beside).open .kd-dock-head { color: var(--fel); }
.kd-dock:not(.beside) .kd-dock-title { display: none; }
.kd-dock:not(.beside) .kd-dock-tab { display: inline-flex; align-items: center; gap: 6px; }
/* Out of the layout while closed, so max-content measures the label. */
.kd-dock:not(.beside):not(.open) .kd-dock-who,
.kd-dock:not(.beside):not(.open) .kd-dock-list { display: none; }
.kd-dock:not(.beside).open { width: 260px; max-height: 62vh; box-shadow: 0 -10px 34px rgba(0,0,0,.5); }
.kd-dock:not(.beside).open .kd-dock-head { border-bottom-color: var(--border); }
.kd-dock:not(.beside) .kd-dock-list { padding-bottom: 8px; }
.kd-dock-tab { display: none; }
.kd-dock.behind, .kd-dock.behind.open { display: none; visibility: hidden; }
html.print .kd-dock, html.print .kd-me-btn { display: none !important; }

html.print section.folded > .secbody { display: block !important; }

/* The game's own empty-slot art beside a slot name (tools/fetch-slot-icons.py).
   A gear table is fifteen rows of two item names and the slot column is the
   only thing telling them apart, so the picture carries more than the word.
   The levels are lifted at build time, not here: one copy of that decision. */
.slotcell { display: inline-flex; align-items: center; gap: 8px; }
.slot-ico {
  width: 26px; height: 26px; flex: 0 0 26px; display: block;
  border-radius: 5px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
}
@media (max-width: 640px) {
  .slotcell { gap: 6px; }
  .slot-ico { width: 22px; height: 22px; flex-basis: 22px; }
}

/* A dungeon, chosen: the run picker's list on the tool page, and the season's
   "which pool am I being read against" row. One plate, two hosts. */
.dgchip{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  cursor:pointer;font:inherit;text-align:left;line-height:1.25}
.dgchip:hover{background:var(--surface);border-color:color-mix(in srgb,var(--fel) 45%,var(--border));color:var(--text)}
.dgchip[aria-pressed="true"]{border-color:var(--fel);color:var(--text);
  box-shadow:inset 2px 0 0 var(--fel)}
.dgchip img{width:26px;height:26px;border-radius:5px;display:block;flex:0 0 auto}
.dgchip .dgtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.dgchip .dgname{font-weight:700;font-size:13px;white-space:nowrap}
.dgchip small{color:var(--text-muted);font-size:11px;white-space:nowrap}
.dgchip .timed{color:var(--fel)}
.dgchip .depleted{color:#ff8a6b}
.dgchip.none{opacity:.42;cursor:default}
.dgchip.none:hover{border-color:var(--border);color:var(--text-2)}
.dgchip.none img{filter:grayscale(1)}
@media (max-width:640px){.dgchip{width:100%}}
/* The season's row sits above the cards it changes, and the body dims while
   the swap is in flight rather than emptying and jumping. */
.gearpick{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px}
.gearpick .flabel{flex:0 0 auto;padding-top:9px;color:var(--text-muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.06em}
.gearpick .seg{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.gearbody.busy{opacity:.45;pointer-events:none;transition:opacity .12s}
@media (max-width:640px){.gearpick{flex-direction:column;gap:6px}.gearpick .flabel{padding-top:0}}
/* Method's own "this one matters" mark on a debuff or an enemy buff, so a list
   of fifteen does not read as fifteen equal problems (2026-09-08). */
.tag.important{border-color:rgba(248,113,113,.5);color:var(--red)}

/* A sentence that opens with a {who} placeholder ("you took 5 of 679 off"):
   uppercasing the paragraph's first letter is language-safe, picking a
   capitalised word per language is not. */
.capfirst::first-letter{text-transform:uppercase}