html{scroll-padding-top:72px}
main.engram,main.calc,main.index{padding-top:76px}
.tier-gamma{--tier:var(--tier-gamma)}.tier-beta{--tier:var(--tier-beta)}.tier-alpha{--tier:var(--tier-alpha)}

/* breadcrumb */
.crumb{padding:0 0 4px;font-size:12.5px;color:var(--text-dim);letter-spacing:.03em}
.crumb a{color:var(--text-secondary);text-decoration:none}.crumb a:hover{color:var(--cyan)}
.crumb b{color:var(--text-secondary);font-weight:600}

/* hero */
.ehero{display:flex;gap:22px;align-items:center;padding:14px 0 22px;border-bottom:1px solid var(--border)}
.ehero-ic{flex:0 0 auto;width:104px;height:104px;border-radius:16px;background:radial-gradient(circle at 50% 35%,var(--cyan-glow),var(--bg-card-deep));border:1px solid var(--border-strong);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ehero-ic img{width:78px;height:78px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.ehero-meta{min-width:0}
h1.plate{font-family:var(--font-plate);font-weight:700;font-size:34px;letter-spacing:.5px;line-height:1.2;margin:0;text-wrap:balance}
main.engram .eyebrow,main.calc .eyebrow,main.index .eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.fact{display:inline-flex;gap:7px;align-items:baseline;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:5px 10px;font-size:12.5px;color:var(--text-secondary)}
.fact b{color:var(--text-primary);font-family:var(--font-mono);font-weight:500}
.grp{background:var(--magenta);color:#1a0a1e;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.stamp{margin-top:10px;font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}
.stamp b{color:var(--text-secondary);font-weight:500}

/* two-column */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;padding:24px 0 60px;align-items:start}
.sec{margin-bottom:26px}
.sec h2{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text-dim);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.sec h2::after{content:"";flex:1;height:1px;background:var(--border)}
.prose{color:var(--text-secondary);font-size:14.5px}
.prose strong{color:var(--text-primary)}
.prose a{color:var(--cyan);text-decoration:none}.prose a:hover{color:var(--cyan-hover)}
.empty{color:var(--text-dim);font-size:13px;font-style:italic}

/* unlock rows */
.unlock{display:flex;flex-direction:column;gap:8px}
.unlock .src{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:9px 12px;color:var(--text-primary);text-decoration:none;font-size:14px}
.unlock a.src:hover{border-color:var(--border-strong);color:var(--text-primary)}
.unlock .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--tier,var(--text-dim))}
.unlock .tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--tier,var(--text-dim));color:#04120c}
.unlock .arrow{margin-left:auto;color:var(--text-dim);font-size:13px}
.unlock a.src:hover .arrow{color:var(--cyan)}
.railnote{margin-top:12px;font-size:11.5px;color:var(--text-dim);text-align:center}
.unlock-note{text-align:left;margin-top:8px}

/* detail rows */
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;font-size:13.5px;margin:0}
.kv dt{color:var(--text-dim)}.kv dd{margin:0;color:var(--text-secondary);word-break:break-word}
.kv dd.path{font-family:var(--font-mono);font-size:12px;color:var(--text-aside)}

/* related items, prerequisites */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.rel a{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:9px 11px;color:var(--text-primary);font-size:13px;text-decoration:none}
.rel a:hover{border-color:var(--cyan-dim);background:var(--bg-card-hover);color:var(--text-primary)}
.rel img{width:30px;height:30px;object-fit:contain}
.rel .frame{width:36px;height:36px;flex:0 0 auto;border-radius:8px;background:var(--bg-card-deep);border:1px solid var(--border);display:grid;place-items:center}

/* admin commands */
.cmd{display:flex;align-items:center;gap:10px;background:var(--bg-deep);border:1px solid var(--border);border-radius:9px;padding:9px 12px;margin-bottom:8px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-aside)}
.cmd .lab{color:var(--text-dim);font-family:var(--font-body);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;flex:0 0 auto}
.cmd code{overflow:auto;white-space:nowrap;min-width:0}
.copy{margin-left:auto;flex:0 0 auto;background:var(--bg-card);border:1px solid var(--border-strong);color:var(--text-secondary);border-radius:6px;padding:3px 9px;font-size:11px;font-family:var(--font-body);cursor:pointer;white-space:nowrap}
.copy:hover{color:var(--cyan);border-color:var(--cyan-dim)}
.copy.done{color:var(--cyan);border-color:var(--cyan-dim)}
.copy.fail{color:var(--amber);border-color:rgba(227,182,94,0.4)}

/* recipe panel (right rail) */
.rail{position:sticky;top:72px}
.panel{background:linear-gradient(180deg,var(--bg-card),var(--bg-card-deep));border:1px solid var(--border-strong);border-radius:16px;overflow:hidden}
.panel-h{padding:14px 16px 12px;border-bottom:1px solid var(--border)}
.panel-h .eyebrow{color:var(--amber)}
.panel-h h3{font-size:16px;margin:3px 0 0;font-weight:600}
.panel-h small{color:var(--text-dim);font-size:12px}
.mats{padding:6px 16px 14px}
.mat{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.mat:last-child{border-bottom:0}
.swatch{width:22px;height:22px;border-radius:6px;flex:0 0 auto;border:1px solid var(--border-strong);background:#5a5a6a;overflow:hidden;display:inline-grid;place-items:center}
.swatch img{width:100%;height:100%;object-fit:contain;display:block}
.mat .nm{color:var(--text-primary);font-size:13.5px}
.alt{display:block;font-size:11px;color:var(--text-dim);font-weight:400;letter-spacing:0}
.mat .q{margin-left:auto;font-family:var(--font-mono);font-weight:500;color:var(--text-primary)}
.el .nm{color:var(--cyan)}
.el .swatch{background:radial-gradient(circle,var(--cyan),var(--cyan-dim));box-shadow:0 0 12px var(--cyan-glow)}
.cta{display:block;margin:4px 16px 16px;padding:12px 16px;text-align:center;background:var(--cyan);color:var(--cyan-ink);border:0;border-radius:11px;font-family:var(--font-body);font-weight:700;font-size:14px;cursor:pointer;letter-spacing:.2px;text-decoration:none}
.cta:hover{background:var(--cyan-hover);color:var(--cyan-ink)}
.panel .note{padding:10px 16px 16px;color:var(--text-secondary);font-size:13.5px}

/* calculator */
.calc-hero{padding:14px 0 16px;border-bottom:1px solid var(--border)}
.calc-hero h1.plate{font-size:30px}
.calc-hero p{color:var(--text-secondary);margin:8px 0 0;font-size:14px}
.calc-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:26px;padding:24px 0 60px;align-items:start}
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:7px}
main.calc .inp,main.calc select{width:100%;background:var(--bg-card);border:1px solid var(--border-strong);color:var(--text-primary);border-radius:10px;padding:11px 13px;font-family:var(--font-body);font-size:14px}
main.calc .inp:focus,main.calc select:focus{outline:0;border-color:var(--cyan-dim)}
main.calc .inp:disabled,main.calc select:disabled{opacity:.5}
.qty-row{display:flex;gap:10px}
.qty-row .inp{width:120px;font-family:var(--font-mono)}
.stepper{display:flex;gap:6px}
.stepper button{width:44px;background:var(--bg-card);border:1px solid var(--border-strong);color:var(--text-secondary);border-radius:10px;font-size:18px;cursor:pointer}
.stepper button:hover{color:var(--cyan);border-color:var(--cyan-dim)}
.qnote{font-size:11.5px;color:var(--text-dim);margin-top:7px;line-height:1.5}
.selcard{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:18px}
.selcard .frame{width:48px;height:48px;border-radius:10px;background:var(--bg-card-deep);border:1px solid var(--border-strong);display:grid;place-items:center;flex:0 0 auto}
.selcard img{width:38px;height:38px;object-fit:contain}
.selcard b{display:block;font-size:15px}.selcard span{font-size:12px;color:var(--text-dim)}
.results{background:linear-gradient(180deg,var(--bg-card),var(--bg-card-deep));border:1px solid var(--border-strong);border-radius:16px;padding:6px 20px 16px}
.results h3{padding:14px 0 6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);margin:0;font-weight:600}
.rline{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.rline:last-child{border-bottom:0}
.rline .swatch{width:26px;height:26px;border-radius:7px}
.rline .nm{font-size:14.5px}
.rline .base{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-dim);white-space:nowrap}
.rline .tot{font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--text-primary);min-width:96px;text-align:right}
.rline.el .tot{color:var(--cyan)}
.backlink{display:inline-flex;gap:7px;align-items:center;margin-top:18px;font-size:13.5px;color:var(--text-secondary);text-decoration:none}
.backlink:hover{color:var(--cyan)}
.disclaimer{margin-top:16px;background:rgba(227,182,94,.07);border:1px solid rgba(227,182,94,.25);border-radius:10px;padding:11px 14px;font-size:12.5px;color:var(--amber);line-height:1.55}
.disclaimer:empty{display:none}
.disclaimer b{color:var(--amber)}
main.calc .results .empty{display:block;padding:12px 0}

/* placeholders: review builds only; the production gate refuses them */
.ph{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;padding:3px 8px;border:1px dashed;border-radius:6px;font-family:var(--font-mono);font-size:11.5px;line-height:1.5;color:var(--text-secondary);vertical-align:middle;max-width:100%}
.ph b{font-weight:600;letter-spacing:0.08em}
.ph-note{color:var(--text-dim)}
.ph-farm{border-color:rgba(227,182,94,0.55)}.ph-farm b{color:var(--amber)}
.ph-verify{border-color:rgba(34,211,238,0.4)}.ph-verify b{color:var(--cyan)}
.ph-fox{border-color:var(--border-strong)}.ph-fox b{color:var(--text-primary)}
.ph-feed{border-color:rgba(54,211,153,0.45)}.ph-feed b{color:var(--green)}
.mocknotes{margin:16px 0 0;font-size:13px;color:var(--text-dim)}
.mocknotes summary{cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim)}
.mocknotes p{margin-top:8px;max-width:70ch}
.mocknotes .ph{margin:2px 4px 2px 0}

/* index */
main.index .ihead{padding:14px 0 8px}
main.index .ihead p{color:var(--text-secondary);max-width:62ch;margin:8px 0 0}
main.index .jump{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
main.index .jump a{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--border-strong);color:var(--text-secondary);font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
main.index .jump a:hover{color:var(--cyan);border-color:var(--cyan-dim)}
main.index .engram-group{padding:28px 0;border-top:1px solid var(--border)}
main.index .engram-group h2{font-size:22px;font-weight:600;margin:0 0 10px}
main.index .engram-list{list-style:none;margin:0;padding:0}
main.index .engram-list li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:15px}
main.index .engram-list .frame{width:36px;height:36px;flex:0 0 auto;border-radius:8px;background:var(--bg-card-deep);border:1px solid var(--border);display:grid;place-items:center}
main.index .engram-list img{width:30px;height:30px;object-fit:contain}
main.index .engram-list a{color:var(--text-primary);text-decoration:none;font-weight:600}
main.index .engram-list a:hover{color:var(--cyan)}
main.index .engram-list small{margin-left:auto;color:var(--text-dim);font-family:var(--font-mono);font-size:11px;white-space:nowrap;text-align:right}
main.index .craft{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(34,211,238,0.35);border-radius:999px;padding:1px 7px;white-space:nowrap}

@media(max-width:820px){
  .cols{grid-template-columns:1fr}
  .rail{position:static;order:-1;margin-bottom:8px}
  .calc-grid{grid-template-columns:1fr}
  h1.plate{font-size:27px}
  .kv{grid-template-columns:1fr;gap:2px 14px}
  .kv dd{margin-bottom:6px}
  .ehero{align-items:flex-start}
  .ehero-ic{width:72px;height:72px}.ehero-ic img{width:54px;height:54px}
  main.index .engram-list li{flex-wrap:wrap}
  main.index .engram-list small{margin-left:0;flex-basis:100%;padding-left:48px}
}
@media(max-width:520px){main.index .engram-group{padding:20px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
footer{margin-top:24px}
.swatch[data-mat="Metal Ingot"]{background:#8a8f99}
.swatch[data-mat="Crystal"]{background:#7fd4e6}
.swatch[data-mat="Polymer"]{background:#d7d2c4}
.swatch[data-mat="Black Pearl"]{background:#4a4658}
.swatch[data-mat="Hide"]{background:#9b7a55}
.swatch[data-mat="Fiber"]{background:#8ab06a}
.swatch[data-mat="Wood"]{background:#8a6a45}
.swatch[data-mat="Stone"]{background:#8a8a90}
.swatch[data-mat="Cementing Paste"]{background:#c9c4b0}
.swatch[data-mat="Electronics"]{background:#69c98f}
.swatch[data-mat="Obsidian"]{background:#3a3a48}
.swatch[data-mat="Oil"]{background:#2a2a34}
.swatch[data-mat="Silica Pearls"]{background:#bcd6de}
.swatch[data-mat="Thatch"]{background:#a8763e}
.swatch[data-mat="Chitin"]{background:#b8a06a}
.swatch[data-mat="Keratin"]{background:#d8cdb0}
.swatch[data-mat="Metal"]{background:#8a8f99}
.swatch[data-mat="Sulfur"]{background:#d4c24a}
.swatch[data-mat="Charcoal"]{background:#333333}
.swatch[data-mat="Sap"]{background:#c88a3a}
.swatch[data-mat="Element Shard"]{background:#7fd4e6}
.swatch[data-mat="Element Dust"]{background:#9fe0ee}
.swatch[data-mat="Organic Polymer"]{background:#cfd8c0}
.swatch[data-mat="Gasoline"]{background:#6a5a2a}
.swatch[data-mat="Sand"]{background:#d8c89a}
.swatch[data-mat="Flint"]{background:#6a5a4a}
.swatch[data-mat="Clay"]{background:#a06a4a}
.swatch[data-mat="Gunpowder"]{background:#555555}
.swatch[data-mat="Pelt"]{background:#8a6a4a}
.swatch[data-mat="Silk"]{background:#d8c0c8}