/* REBIRTH wiki design refresh: category colour system, varied layouts, light/dark themes.
   Loaded after style.css and handbook.css. See _Documentation/DESIGN_REFRESH_2026-10-05.md */
:root{
  --c-start:#37c5b0;--c-progression:#9a8bff;--c-survival:#f06c80;--c-world:#e7b84a;--c-crafting:#f29155;--c-ref:#5fb0ee;
  --rf-bg:#15111d;--rf-bg2:#1d1729;--rf-card:#241d33;--rf-card2:#2b2340;--rf-line:#41365a;--rf-text:#f3effa;--rf-body:#d6d0e2;--rf-mute:#b3abc4;--rf-nav:#100d17;
  --rf-display:"Bahnschrift","Segoe UI Variable Display","Trebuchet MS","Segoe UI",sans-serif;
  --rf-shadow:0 10px 30px #0006;
}
:root[data-theme="light"]{
  color-scheme:light;
  --c-start:#0b8a7a;--c-progression:#5b49d6;--c-survival:#c8334f;--c-world:#9a6b00;--c-crafting:#b9560f;--c-ref:#1b6bb5;
  --rf-bg:#f7f4fb;--rf-bg2:#efe9f7;--rf-card:#ffffff;--rf-card2:#f3eefa;--rf-line:#d7cce8;--rf-text:#1d1530;--rf-body:#352c4a;--rf-mute:#5d5373;--rf-nav:#ece5f6;
  --rf-shadow:0 8px 24px #3b246a1f;
}
[data-cat=start]{--cc:var(--c-start)}[data-cat=progression]{--cc:var(--c-progression)}[data-cat=survival]{--cc:var(--c-survival)}
[data-cat=world]{--cc:var(--c-world)}[data-cat=crafting]{--cc:var(--c-crafting)}[data-cat=ref]{--cc:var(--c-ref)}
[data-cat]{--cct:color-mix(in srgb,var(--cc) 15%,transparent)}

/* shell */
.handbook-layout{max-width:1760px;background:var(--rf-bg)!important;border-color:var(--rf-line)!important}
.handbook-main{background:var(--rf-bg)!important;color:var(--rf-body);padding:36px clamp(20px,3.2vw,56px) 80px}
.handbook-nav{background:var(--rf-nav)!important;border-color:var(--rf-line)!important}
.handbook-nav a{border-left:3px solid transparent}
.handbook-nav a[data-cat]{border-left-color:var(--cc)}
.handbook-nav a[data-cat] svg{color:var(--cc)}
.handbook-nav a[aria-current]{background:var(--cct,var(--rf-card2))!important}
.handbook-main h1,.handbook-main h2,.handbook-main h3,.handbook-main strong{color:var(--rf-text)}
.handbook-main p,.handbook-main li{color:var(--rf-body)}
body{background:var(--rf-bg)}
:root[data-theme="light"] body,:root[data-theme="light"] .masthead{background:#fff}
:root[data-theme="light"] .masthead{border-color:var(--rf-line)}
:root[data-theme="light"] .masthead nav a,:root[data-theme="light"] .version{color:var(--rf-mute)}
:root[data-theme="light"] .masthead nav a.active,:root[data-theme="light"] .brand{color:var(--rf-text)}
:root[data-theme="light"] footer{background:#fff;color:var(--rf-mute)}
.brand,.handbook-heading h1,.handbook-article h1,.handbook-main h2{font-family:var(--rf-display)}
.theme-toggle{min-width:44px;min-height:44px;display:inline-grid;place-items:center;border-radius:999px;background:var(--rf-card);color:var(--rf-text);border:1px solid var(--rf-line)}
.theme-toggle svg{width:18px;height:18px}
:focus-visible{outline:3px solid var(--rf-text)!important;outline-offset:3px}

/* hero (home) */
.rf-hero{position:relative;overflow:hidden;border-radius:18px;padding:clamp(24px,4vw,48px);margin:0 0 32px;color:#fff;
  background:radial-gradient(900px 300px at 85% -20%,#e7b84a55,transparent 60%),radial-gradient(700px 400px at 0% 120%,#37c5b055,transparent 60%),linear-gradient(135deg,#3a2575,#6a3fb5 55%,#a24a8f);box-shadow:var(--rf-shadow)}
.handbook-main .rf-hero h1,.handbook-main .rf-hero p,.handbook-main .rf-hero strong{color:#fff}
.rf-hero h1{font-size:clamp(34px,4.6vw,60px);line-height:1.05;margin:6px 0 12px;letter-spacing:-.01em}
.rf-hero .eyebrow{color:#ffe9a8;letter-spacing:.14em}
.handbook-main .rf-hero p.lead{font-size:clamp(16px,1.4vw,20px);max-width:52ch;margin:0 0 22px;color:#f2eaff}
.rf-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rf-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:700;background:#fff;color:#2b1760!important;transition:transform .18s,box-shadow .18s}
.rf-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0005;color:#2b1760}
.rf-btn.ghost{background:#ffffff22;color:#fff!important;border:1px solid #ffffff77}
.rf-hero-stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:26px;font-size:14px;color:#efe6ff}
.rf-hero-stats b{display:block;font:700 28px var(--rf-display);color:#fff}
.rf-progress{height:8px;border-radius:99px;background:#ffffff33;margin-top:18px;max-width:460px;overflow:hidden}
.rf-progress i{display:block;height:100%;background:linear-gradient(90deg,#37c5b0,#e7b84a);border-radius:99px}
.rf-home .learning-path-link,.rf-home .resume-learning{display:none}

/* category tiles */
.rf-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 40px}
.rf-tile{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:16px;background:var(--rf-card);border:1px solid var(--rf-line);border-top:5px solid var(--cc);position:relative;transition:transform .18s,box-shadow .18s}
.rf-tile:hover{transform:translateY(-3px);box-shadow:var(--rf-shadow);color:inherit}
.rf-tile .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--cct);color:var(--cc);margin-bottom:6px}
.rf-tile .ico svg{width:28px;height:28px}
.rf-tile strong{font:700 18px var(--rf-display);color:var(--rf-text)}
.rf-tile span{font-size:14px;line-height:1.45;color:var(--rf-mute)}
.rf-tile em{font-style:normal;font-size:12px;font-weight:700;color:var(--cc);margin-top:auto;padding-top:8px}

/* home */
.rf-hero ~ .handbook-heading{display:none}
.rf-home .home-columns{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
.handbook-search>div{border-radius:999px!important;background:var(--rf-card)!important;border:1px solid var(--rf-line)!important}
.handbook-search input{color:var(--rf-text)!important}
.handbook-search label{color:var(--rf-mute)!important}
.section-heading{border-color:var(--rf-line)!important}
.handbook-stage{margin:0 0 44px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.handbook-stage>h3{grid-column:1/-1;display:flex;align-items:center;gap:14px;font:700 22px var(--rf-display);padding:14px 18px;border-radius:14px;background:linear-gradient(90deg,var(--rf-card2),transparent);border:0!important;margin:0 0 4px}
.handbook-stage>h3 span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--cc,var(--c-progression));color:#fff;font:800 18px var(--rf-display)}
.handbook-stage:nth-of-type(1){--cc:var(--c-start)}.handbook-stage:nth-of-type(2){--cc:var(--c-survival)}.handbook-stage:nth-of-type(3){--cc:var(--c-progression)}.handbook-stage:nth-of-type(4){--cc:var(--c-crafting)}.handbook-stage:nth-of-type(5){--cc:var(--c-world)}.handbook-stage:nth-of-type(6){--cc:var(--c-ref)}.handbook-stage:nth-of-type(7){--cc:var(--c-start)}
.handbook-stage:first-of-type .guide-row:first-of-type{grid-column:1/-1;background:linear-gradient(120deg,var(--cct),var(--rf-card) 70%)!important}
.handbook-stage:first-of-type .guide-row:first-of-type strong{font-size:24px!important}
#guide-list:not(:has(.handbook-stage)){display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}

/* guide cards */
.guide-row{display:grid!important;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:start;padding:18px 18px 18px 16px!important;border-radius:14px;background:var(--rf-card)!important;border:1px solid var(--rf-line)!important;border-left:6px solid var(--cc,var(--rf-line))!important;transition:transform .18s,box-shadow .18s;min-height:0!important}
.guide-row:hover{transform:translateY(-2px);box-shadow:var(--rf-shadow);background:var(--rf-card2)!important}
.guide-row img{width:56px!important;height:56px!important;padding:8px;border-radius:14px;background:#2a2140;object-fit:contain}
.guide-row>span>small{display:inline-block;font:700 11px var(--rf-display)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--cc,var(--rf-mute))!important;background:var(--cct,transparent);padding:3px 9px;border-radius:99px;margin-bottom:8px}
.guide-row strong{font:700 18px/1.25 var(--rf-display)!important;color:var(--rf-text)!important;display:block}
.guide-row>span>span{color:var(--rf-mute)!important;font-size:14.5px!important;line-height:1.5;display:block;margin-top:6px}
.guide-row>svg{color:var(--cc);opacity:.8}

/* topic page band */
.rf-topic-band{border-radius:18px;padding:28px clamp(20px,3vw,40px);margin-bottom:26px;background:linear-gradient(120deg,var(--cct),transparent 80%),var(--rf-card);border:1px solid var(--rf-line);border-left:8px solid var(--cc)}
.rf-topic-band h1{font-size:clamp(30px,3.4vw,44px)!important;margin:6px 0!important}
.rf-topic-band .eyebrow{color:var(--cc)!important}

.quick-path{position:sticky;top:20px;align-self:start}
.quick-path>a{border-radius:12px;background:var(--rf-card);border:1px solid var(--rf-line)!important;margin-bottom:10px;padding:14px 16px;color:var(--rf-text)}
.review-note{border-radius:12px;background:var(--rf-card2)!important;border:1px dashed var(--rf-line)!important}

/* article */
.handbook-article{display:grid;grid-template-columns:minmax(0,74ch) 280px;column-gap:48px;justify-content:center;max-width:1240px;margin:0 auto;counter-reset:step}
.handbook-article>*{grid-column:1}
.handbook-article>.guide-hero,.handbook-article>.back-link,.handbook-article>.rf-meta,.handbook-article>h1,.handbook-article>.article-lead{grid-column:1/-1}
.handbook-article>.article-contents{grid-column:2;grid-row:4/span 60;align-self:start;position:sticky;top:20px}
.handbook-article .back-link{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:var(--cct);color:var(--cc)!important;font-weight:700;width:max-content;margin-bottom:14px}
.handbook-article h1{font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.01em}
.article-lead{font-size:20px!important;line-height:1.5;color:var(--rf-text)!important;border-left:5px solid var(--cc);padding-left:18px;max-width:60ch}
.rf-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 22px}
.rf-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;font-size:13px;font-weight:600;background:var(--rf-card2);color:var(--rf-body);border:1px solid var(--rf-line)}
.rf-chip.cat{background:var(--cct);color:var(--cc);border-color:transparent}
.rf-chip.lvl-1{color:var(--c-start)}.rf-chip.lvl-2{color:var(--c-world)}.rf-chip.lvl-3{color:var(--c-survival)}
.guide-hero{border-radius:18px;overflow:hidden;border:1px solid var(--rf-line)!important;border-top:6px solid var(--cc)!important;background:linear-gradient(135deg,var(--cct),var(--rf-card))!important;margin-bottom:8px}
.guide-hero h1,.guide-hero p{color:var(--rf-text)!important}
.article-contents{display:flex!important;flex-direction:column;gap:2px;padding:16px;border-radius:14px;background:var(--rf-card)!important;border:1px solid var(--rf-line)!important;border-top:4px solid var(--cc)!important;max-height:calc(100vh - 40px);overflow:auto;counter-reset:toc}
.article-contents::before{content:"In this guide";font:700 12px var(--rf-display);letter-spacing:.1em;text-transform:uppercase;color:var(--cc);margin-bottom:8px}
.article-contents button{counter-increment:toc;text-align:left;display:flex;gap:10px;align-items:baseline;background:none!important;border:0!important;border-radius:8px;padding:8px 10px;color:var(--rf-body)!important;font-size:14px;line-height:1.35;border-left:3px solid transparent!important}
.article-contents button::before{content:counter(toc);font-weight:800;color:var(--cc);min-width:1.2em}
.article-contents button:hover{background:var(--cct)!important}
.article-contents button.on{border-left-color:var(--cc)!important;background:var(--cct)!important;color:var(--rf-text)!important;font-weight:650}
.handbook-article>section[id^="section-"]{counter-increment:step;position:relative;padding:22px 24px 22px 76px;margin:0 0 16px;border-radius:16px;background:var(--rf-card)!important;border:1px solid var(--rf-line)!important;border-left:6px solid var(--cc)!important;scroll-margin-top:20px}
.handbook-article>section[id^="section-"]::before{content:counter(step);position:absolute;left:18px;top:20px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:800 19px var(--rf-display);background:var(--cc);color:#fff}
.handbook-article>section[id^="section-"] h2{font-size:21px!important;margin:0 0 10px!important;border:0!important;padding:0!important}
.handbook-article>section[id^="section-"] p{font-size:17px!important;line-height:1.75;max-width:66ch}
.handbook-article>section.rf-warn{background:linear-gradient(90deg,#f06c8022,var(--rf-card))!important;border-left-color:var(--c-survival)!important}
.handbook-article>section.rf-warn::before{content:"!";background:var(--c-survival)}
.handbook-article>section.rf-tip{background:linear-gradient(90deg,#37c5b022,var(--rf-card))!important;border-left-color:var(--c-start)!important}
.handbook-article>section.rf-tip::before{content:"\2713";background:var(--c-start)}
.rf-tag{display:inline-block;font:700 11px var(--rf-display);letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:99px;margin-bottom:8px;background:#8882;color:var(--rf-mute)}
.rf-warn .rf-tag{color:var(--c-survival);background:#f06c8022}
.rf-tip .rf-tag{color:var(--c-start);background:#37c5b022}
.rf-num{font-weight:800;color:var(--cc);background:var(--cct);padding:0 .3em;border-radius:5px;white-space:nowrap}
.handbook-article table{border-radius:12px;overflow:hidden;background:var(--rf-card)}
.handbook-article th{background:var(--rf-card2);color:var(--rf-text)}
.rf-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:12px 0 24px}
.rf-related .guide-row{grid-template-columns:48px minmax(0,1fr)!important}
.rf-related .guide-row>svg{display:none}
.rf-related .guide-row img{width:48px!important;height:48px!important}
.rf-progressbar{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--c-start),var(--c-world),var(--c-survival));z-index:200}

/* light theme: tool panels stay dark inset cards so their own colours remain legible */
:root[data-theme="light"] :is(.reference-tool,.profile-inspector,.study-example,.water-transfer-tool,details.evidence,.summary-card){color:#eee}
:root[data-theme="light"] :is(.reference-tool,.profile-inspector,.study-example,.water-transfer-tool,details.evidence,.summary-card) :is(p,li,h1,h2,h3,strong,td,th,label,small){color:#e8e2f3}

@media(min-width:2200px){.handbook-main{padding-inline:80px}.handbook-stage{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}.rf-tiles{grid-template-columns:repeat(6,1fr)}}
@media(max-width:1150px){.rf-home .home-columns{grid-template-columns:1fr}.quick-path{position:static}.handbook-article{grid-template-columns:minmax(0,1fr)}.handbook-article>.article-contents{grid-column:1;grid-row:auto;position:static;max-height:none}}
@media(max-width:760px){
  .handbook-main{padding:20px 14px 60px}
  .rf-hero{border-radius:14px;padding:22px 18px}
  .rf-tiles{grid-template-columns:1fr 1fr;gap:10px}.rf-tile{padding:14px}.rf-tile span{display:none}
  .handbook-stage{grid-template-columns:1fr}
  .handbook-article>section[id^="section-"]{padding:64px 16px 18px}
  .handbook-article>section[id^="section-"]::before{left:16px;top:14px}
  .handbook-article>section[id^="section-"] p{font-size:16.5px!important}
  .guide-row{grid-template-columns:48px minmax(0,1fr)!important}.guide-row>svg{display:none}.guide-row img{width:48px!important;height:48px!important}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-motion:no-preference){.rf-tile,.guide-row,.handbook-article>section{animation:rfin .5s both}@keyframes rfin{from{opacity:0;transform:translateY(8px)}}}

.handbook-article>section[data-n]::before{content:attr(data-n)}
.rf-n{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.article-contents button[data-n]::before{content:attr(data-n)}
.chapter-navigation{margin-bottom:18px}
@media(max-width:520px){.masthead .version{display:none}.theme-toggle{margin-left:auto}}
.handbook-search input{background:transparent!important}
.handbook-nav a{color:var(--rf-body)!important}.handbook-nav .nav-label,.development-note{color:var(--rf-mute)!important}
.handbook-nav a[aria-current]{color:var(--rf-text)!important}
.profile-links a,.learning-overview-link,.handbook-article .chapter-links a{color:var(--rf-body)}
:root[data-theme="light"] .chapter-navigation a,:root[data-theme="light"] .chapter-navigation{background:var(--rf-card2)!important;color:var(--rf-text)!important;border-color:var(--rf-line)!important}
:root[data-theme="light"] .chapter-navigation *{color:var(--rf-text)!important}
:root[data-theme="light"] .rf-hero .rf-btn.ghost{color:#fff!important}

/* Water supply controls: readable labels and usable phone targets. */
.water-supply-planner { margin-top: 1rem; }
.water-supply-planner .planner-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 1rem 0; }
.water-supply-planner .planner-controls label { display: flex; flex-direction: column; gap: .5rem; }
.water-supply-planner input { box-sizing: border-box; width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid #9477b4; border-radius: .4rem; font: inherit; }
.water-supply-planner input:focus-visible { outline: 2px solid #c7a7f3; outline-offset: 3px; }

.trader-tier-planner > label { display: block; margin-bottom: .5rem; font-weight: 600; }
.trader-tier-planner > select { width: 100%; min-height: 44px; margin-bottom: 1rem; font: inherit; }
.trader-point-steps { display: grid; gap: .75rem; }
.trader-point-steps meter { display: block; width: 100%; height: 1.25rem; margin: .5rem 0; accent-color: #b794e6; }
