/* ============================================================
   Resources board — guides, tutorials, templates. Owns .res-*.
   Template tables reuse .tpl-* from production.css.
   ============================================================ */
#mod-resources{background:var(--bg);min-height:100vh}
/* production.css locks page scrolling (body overflow:hidden), so this board
   scrolls inside its own box, like Ordering, Sales and Inventory. */
body[data-view="resources"] #mod-resources{height:100vh;height:100dvh;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.res-wrap{max-width:1000px;width:100%;box-sizing:border-box;margin:0 auto;padding:22px 22px 70px}
.res-intro{font-size:14px;color:var(--muted);margin-bottom:6px}
.res-sec{margin-top:22px}
.res-sec h3{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;color:var(--brand2);margin:0 0 10px;
  border-bottom:1px solid var(--line);padding-bottom:6px}
.res-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.res-card{display:flex;gap:14px;align-items:flex-start;text-align:left;padding:16px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);color:var(--txt);font:inherit;cursor:pointer;text-decoration:none;
  transition:border-color .15s,transform .15s}
.res-card:hover{border-color:var(--brand,#5b7e96);transform:translateY(-1px)}
.res-ico{flex:0 0 40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:19px;
  background:var(--bluebg);border:1px solid var(--line)}
.res-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.res-txt b{font-size:15px;font-weight:650}
.res-txt b i{font-style:normal;color:var(--muted2);font-weight:500}
.res-txt span{font-size:13px;color:var(--muted);line-height:1.4}
.res-back{appearance:none;cursor:pointer;font:inherit;font-size:13.5px;padding:8px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);margin-bottom:16px}
.res-back:hover{color:var(--txt);border-color:var(--brand,#5b7e96)}
.res-detail h2{margin:0 0 4px;font-size:24px;color:var(--txt)}
.res-sub{margin:0 0 18px;color:var(--muted);font-size:14px}
.res-body{font-size:14.5px;color:var(--txt);line-height:1.55}
.res-body h4{margin:20px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--brand2)}
.res-steps{margin:0 0 8px;padding-left:24px}
.res-steps li{margin-bottom:7px}
.res-key{display:inline-block;padding:0 6px;border:1px solid var(--line);border-radius:6px}
.res-note{font-size:13.5px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:16px}
.res-installbtn{margin-bottom:6px}
@media (max-width:700px){
  .res-wrap{padding:16px 14px 60px}
  .res-detail h2{font-size:20px}
}