/* SnuggleSMP Docs — lavender paper with Minecraft crafting panels */
:root{
  color-scheme:light;
  --bg:#ecebf3; --ink:#262334; --muted:#5e5a72; --paper:#fbfaff; --line:#d6d3e4; --soft:#e3e0ef;
  --accent:#7b4fd1; --accent-ink:#ffffff; --accent-soft:#e7defb;
  --panel:#c6c6c6; --slot:#8b8b8b; --hi:#ffffff; --lo:#373737; --panel-ink:#3f3f3f;
  --warn:#8a5a00; --warn-bg:#fff3d6; --staff:#9b2c5a; --staff-bg:#fbe2ec; --planned:#2d6a8a; --planned-bg:#dff0f8;
  --code:#efedf7;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#17151f; --ink:#ebe8f5; --muted:#a8a3bd; --paper:#211e2c; --line:#35304a; --soft:#2a2638;
    --accent:#b69bff; --accent-ink:#17151f; --accent-soft:#2f2848;
    --panel:#8f8f8f; --slot:#5e5e5e; --hi:#bdbdbd; --lo:#262626; --panel-ink:#1e1e1e;
    --warn:#f2c46a; --warn-bg:#3a2e14; --staff:#f59ac0; --staff-bg:#3d1f2c; --planned:#8fd0ef; --planned-bg:#1b3140;
    --code:#2a2638;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#17151f; --ink:#ebe8f5; --muted:#a8a3bd; --paper:#211e2c; --line:#35304a; --soft:#2a2638;
  --accent:#b69bff; --accent-ink:#17151f; --accent-soft:#2f2848;
  --panel:#8f8f8f; --slot:#5e5e5e; --hi:#bdbdbd; --lo:#262626; --panel-ink:#1e1e1e;
  --warn:#f2c46a; --warn-bg:#3a2e14; --staff:#f59ac0; --staff-bg:#3d1f2c; --planned:#8fd0ef; --planned-bg:#1b3140;
  --code:#2a2638;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Nunito",system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
code{font:600 .88em/1.4 ui-monospace,"Cascadia Code",Consolas,monospace;background:var(--code);padding:.1em .35em;border-radius:4px;overflow-wrap:anywhere}
pre{background:var(--code);padding:14px 16px;border-radius:8px;overflow-x:auto}
pre code{background:none;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:6px;z-index:10}
.skip:focus{left:16px}
.muted{color:var(--muted)}

/* top bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px max(16px,calc((100vw - 1240px)/2)) ;padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 20px/1 "Pixelify Sans","Courier New",monospace}
.brand em{font-style:normal;color:var(--accent);margin-left:6px}
.brand-mark{width:26px;height:26px;background:var(--accent);border-radius:4px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M4 3h2v3H4zM10 3h2v3h-2zM2 6h2v3H2zM12 6h2v3h-2zM5 8h6v1h1v3h-1v1H5v-1H4V9h1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M4 3h2v3H4zM10 3h2v3h-2zM2 6h2v3H2zM12 6h2v3h-2zM5 8h6v1h1v3h-1v1H5v-1H4V9h1z'/%3E%3C/svg%3E") center/contain no-repeat}
.bar-nav{display:flex;align-items:center;gap:4px}
.bar-nav a{font:700 14px/1 "Nunito",sans-serif;color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:999px}
.bar-nav a:hover{background:var(--soft)}
.bar-nav a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.theme{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--paper);cursor:pointer;display:grid;place-items:center;margin-left:4px}
.theme span{width:16px;height:16px;border-radius:50%;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%);box-shadow:inset 0 0 0 2px var(--ink)}

/* layout */
.layout{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:28px 16px 56px;display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
@media (min-width:980px){ .layout:not(.wide){grid-template-columns:220px minmax(0,1fr)} }
main{min-width:0}
.side{font-size:14px}
.side-inner summary{font:700 14px/1 "Nunito",sans-serif;cursor:pointer;padding:10px 12px;background:var(--paper);border:1px solid var(--line);border-radius:8px;list-style:none}
.side-inner summary::-webkit-details-marker{display:none}
.side-inner summary::after{content:"▾";float:right;color:var(--muted)}
@media (min-width:980px){
  .side{position:sticky;top:72px;align-self:start;max-height:calc(100vh - 90px);overflow:auto}
  .side-inner summary{display:none}
}
.side-cat{font:700 11px/1 "Nunito",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px 10px}
.side ul{list-style:none;margin:0;padding:0}
.side a{display:block;padding:6px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-weight:600}
.side a:hover{background:var(--soft)}
.side a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.soon{font:700 10px/1 "Nunito",sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--planned);margin-left:4px}

/* type */
.eyebrow{font:700 12px/1 "Nunito",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
h1{font:700 clamp(34px,6vw,54px)/1.02 "Pixelify Sans","Courier New",monospace;margin:0 0 10px;text-wrap:balance}
h2{font:700 26px/1.15 "Pixelify Sans","Courier New",monospace;margin:40px 0 10px;text-wrap:balance}
h3{font:800 18px/1.25 "Nunito",sans-serif;margin:26px 0 8px}
.prose{max-width:none}
.prose > p,.prose > ul,.prose > ol,.prose > blockquote,.prose > h2,.prose > h3,.prose .lead,.prose .aliases{max-width:70ch}
.prose li{margin:4px 0}
.prose blockquote{margin:16px 0;padding:10px 16px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0}
.prose blockquote p{margin:0}
.lead,.summary,.intro{color:var(--muted);font-size:17px;max-width:65ch;margin:0 0 14px}

/* home */
.hero{padding:16px 0 8px;max-width:760px}
.search{margin:18px 0 8px;max-width:560px}
.search input{width:100%;font:600 16px/1 "Nunito",sans-serif;padding:14px 16px 14px 42px;border-radius:12px;border:1px solid var(--line);background:var(--paper) no-repeat 14px 50%/18px;color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23887fa8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.5-4.5'/%3E%3C/svg%3E")}
.cat h2{margin-top:36px}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.pcard{display:flex;gap:14px;align-items:flex-start;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.pcard.planned{border-style:dashed}
.pcard-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.pcard-title{font:800 17px/1.2 "Nunito",sans-serif}
.pcard-sum{color:var(--muted);font-size:14px;line-height:1.45}
.pcard-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.pcard-meta .m{font-size:12px;color:var(--muted);font-weight:700}
.picon{flex:none;width:44px;height:44px;border-radius:6px;display:grid;place-items:center;background:var(--panel);
  box-shadow:inset 2px 2px 0 var(--hi),inset -2px -2px 0 var(--lo)}
.picon img{width:32px;height:32px;image-rendering:pixelated}
.picon.glyph{background:var(--g);color:#fff;font:700 22px/1 "Pixelify Sans",monospace;text-shadow:2px 2px 0 rgba(0,0,0,.3);box-shadow:inset 2px 2px 0 rgba(255,255,255,.3),inset -2px -2px 0 rgba(0,0,0,.25)}
.picon.lg{width:72px;height:72px;border-radius:8px}
.picon.lg img{width:52px;height:52px}
.picon.lg.glyph{font-size:36px}
.pill{font:700 11px/1 "Nunito",sans-serif;letter-spacing:.04em;padding:5px 8px;border-radius:999px;background:var(--soft);color:var(--muted)}
.pill.planned{background:var(--planned-bg);color:var(--planned)}
.pill.beta{background:var(--warn-bg);color:var(--warn)}
.pill.staff{background:var(--staff-bg);color:var(--staff)}
.empty{color:var(--muted);padding:24px 0}

/* plugin page */
.doc-head{display:flex;gap:20px;align-items:flex-start;margin-bottom:18px}
.doc-head.plain{display:block}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.callout{background:var(--planned-bg);color:var(--planned);border-radius:10px;padding:12px 16px;font-weight:700;margin:0 0 18px;max-width:70ch}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 8px;padding:14px 0;border-block:1px solid var(--line)}
.facts div{display:flex;flex-direction:column}
.facts dt{font:700 11px/1.4 "Nunito",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.toc{margin:18px 0 0;font-size:14px}
.toc p{font:700 11px/1 "Nunito",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.toc a{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;background:var(--paper)}
.toc a:hover{border-color:var(--accent);color:var(--accent)}
.block{margin-top:8px}
.aliases{color:var(--muted);font-size:15px}
.table-wrap{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:15px}
th{text-align:left;font:700 12px/1.3 "Nunito",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);background:var(--soft)}
td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
table.cmds td:first-child{white-space:nowrap}
@media (max-width:640px){ table.cmds td:first-child{white-space:normal} }
code.perm{font-size:.82em;color:var(--muted)}
.item-ref{display:inline-flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap}
.item-ref img{width:18px;height:18px;image-rendering:pixelated}
.item-ref .dot{width:12px;height:12px}

/* recipe cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin:14px 0 24px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;scroll-margin-top:80px;min-width:0}
.card:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.card header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px}
.card h3{margin:0;font-size:17px}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{font:700 11px/1 "Nunito",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tag.muted{color:var(--muted)}
.craft{display:flex;align-items:center;gap:14px;background:var(--panel);padding:12px;border-radius:3px;align-self:flex-start;max-width:100%;
  box-shadow:inset 3px 3px 0 var(--hi),inset -3px -3px 0 var(--lo)}
.grid{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px);gap:3px}
.row{display:flex;gap:3px}
.slot{width:48px;height:48px;background:var(--slot);display:grid;place-items:center;position:relative;flex:none;
  box-shadow:inset 2px 2px 0 var(--lo),inset -2px -2px 0 var(--hi)}
.slot.big{width:60px;height:60px}
.slot img{width:36px;height:36px;image-rendering:pixelated}
.slot.big img{width:44px;height:44px}
.chip{width:38px;height:38px;display:grid;place-items:center;border-radius:3px;font:800 11px/1 "Nunito",sans-serif;
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),inset 2px 2px 0 rgba(255,255,255,.3)}
.chip.dark{color:#2a2a2a}
.chip.light{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.result-chip{width:46px;height:46px}
.count{position:absolute;right:4px;bottom:2px;font:700 16px/1 "Pixelify Sans",monospace;color:#fff;text-shadow:2px 2px 0 #3f3f3f}
.arrow-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.station{font:700 10px/1 "Nunito",sans-serif;color:var(--panel-ink);white-space:nowrap}
.arrow{width:34px;height:24px;flex:none;background:var(--panel-ink);
  clip-path:polygon(0 35%,58% 35%,58% 0,100% 50%,58% 100%,58% 65%,0 65%);opacity:.55}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.legend li{display:flex;align-items:center;gap:6px}
.dot{width:12px;height:12px;border-radius:2px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.dot.img{width:16px;height:16px;box-shadow:none;image-rendering:pixelated}
.x{color:var(--muted);font-variant-numeric:tabular-nums}
.note{margin:0;color:var(--muted);font-size:14px}
.panel{display:flex;flex-direction:column;gap:12px}
.variants{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.swatch{width:22px;height:22px;border-radius:4px;border:0;cursor:pointer;background:var(--sw);padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),inset 2px 2px 0 rgba(255,255,255,.25)}
.swatch[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.variant-name{font-size:13px;font-weight:700;color:var(--muted);margin-left:6px}

/* footer */
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.foot div{max-width:1240px;margin:0 auto;padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.foot p{margin:4px 0}

@media (max-width:420px){
  .grid{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px)}
  .slot{width:42px;height:42px}.chip{width:34px;height:34px;font-size:10px}
  .slot.big{width:52px;height:52px}.result-chip{width:40px;height:40px}
  .craft{gap:10px;padding:10px}.cards,.pcards{grid-template-columns:1fr}
  .doc-head{gap:14px}.picon.lg{width:56px;height:56px}.picon.lg img{width:40px;height:40px}
  .bar-nav a{padding:8px 9px}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .pcard{transition:none} }