/* style_js/style.css */
/* Ink & Sketch UI — shared styles for all demo modules */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Shadows+Into+Light&family=Inter:wght@300;500;700&display=swap');

:root{
  --paper:#faf6f1;
  --ink:#111;
  --bg:#0b0e12;
  --accent:#0ea5e9;
  --bad:#ef4444;
  --good:#10b981;
  --line:#d9cfc3;
  --edge:#1f1f1f;
  --shadow:0 12px 30px rgba(0,0,0,.22);
  --ring:0 0 0 3px rgba(14,165,233,.35);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:#eaeaea;
  font-family:Inter,system-ui,Segoe UI,Arial;
  scroll-behavior:smooth;
}
a{color:var(--accent);text-decoration:none}

/* Layout container */
.wrap{max-width:1100px;margin:0 auto;padding:20px}

/* Header “paper” card */
.hero{
  position:relative;margin:20px auto 16px;padding:26px 22px;
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(14,165,233,.12), transparent 40%),
    radial-gradient(900px 400px at 120% 0%, rgba(239,68,68,.10), transparent 40%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 2px, transparent 2px 40px),
    linear-gradient(180deg, #fffefd, #f6efe4 35%, #efe6d9);
  border:2px solid var(--edge); border-radius:18px; color:#111; box-shadow:var(--shadow);
}
.hero:before{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:
    radial-gradient(200px 60px at 12% 12%, rgba(0,0,0,.15), transparent 60%),
    radial-gradient(120px 40px at 85% 18%, rgba(0,0,0,.12), transparent 60%);
  mix-blend-mode:multiply;opacity:.25;
}
.title{font:700 34px/1.15 'Special Elite',serif;margin:0 0 6px;color:#111}
.subtitle{color:#333;margin:0 0 6px}
.tag{
  display:inline-block;padding:6px 10px;border:2px dashed #111;border-radius:999px;background:#fff;color:#111;
  font:700 12px/1 'Shadows Into Light',cursive
}

/* Pills row (quick anchors / metadata) */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pill{padding:6px 10px;border:2px dashed #111;border-radius:999px;background:#fff;color:#111;
  font:700 12px/1 'Shadows Into Light',cursive}

/* Generic section card */
.section{
  position:relative;margin:18px 0;background:var(--paper);color:#111;border:2px solid var(--edge);
  border-radius:16px;box-shadow:var(--shadow);overflow:hidden
}
.sec-head{
  display:flex;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:2px dashed var(--line);
  background:linear-gradient(180deg,#fffdfa,#f4ebdf)
}
.sec-title{font:700 18px 'Special Elite',serif;letter-spacing:.3px;margin:0}
.sec-body{display:grid;grid-template-columns:1.2fr .8fr}
@media (max-width:900px){ .sec-body{grid-template-columns:1fr} }
.left{padding:14px 16px;border-right:2px dashed var(--line)}
.right{padding:14px 16px;background:#fff8ee}
.desc{font-size:14px;color:#333;margin:.25rem 0 .5rem}
ol{margin:.5rem 0 .5rem 1.1rem}
.good{color:#0a6a1f;font-weight:700}
.bad{color:#8b0000;font-weight:700}

/* Buttons & inputs */
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-block;padding:9px 13px;border:2px solid #111;border-radius:12px;background:#fff;color:#111;font-weight:800;
  box-shadow:2px 3px 0 #111;transition:transform .05s ease, box-shadow .2s ease
}
.btn:hover{transform:translate(-1px,-1px); box-shadow:4px 5px 0 #111}
.btn:active{transform:translate(0,0); box-shadow:2px 3px 0 #111}
.btn:focus{outline:none; box-shadow:2px 3px 0 #111, var(--ring)}
.btn.primary{background:#e6f6ff}
.btn.danger{background:#ffe7e7}
.btn.reset{background:#f2f2f2}

.input{
  padding:10px 12px;border:2px solid #111;border-radius:12px;background:#fff;color:#111;outline:none;
  transition: box-shadow .15s ease;min-width:180px
}
.input:focus{ box-shadow: var(--ring); }

/* Results / messages */
.result{margin-top:8px;padding:10px 12px;border:2px solid #111;border-radius:12px;background:#fff}
.result.ok{background:#eaffea;border-color:#0a6a1f}
.result.warn{background:#fff2f2;border-color:#8b0000}
.muted{color:#666;font-size:12px}

/* Code blocks */
.code{
  font:500 12px/1.45 ui-monospace,Menlo,Consolas,monospace;background:#1d1f23;color:#e5e7eb;border-radius:10px;
  padding:10px;border:1px solid #2a2d33;overflow:auto
}

/* Iframe wrapper (for demos) */
.frame{
  width:100%;height:180px;border:2px solid #111;border-radius:12px;background:#fff;margin-top:10px
}

/* Anchor offset for in-page nav */
.anchor{position:absolute;top:-84px}

/* Floating up/down nav */
.float-nav{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:9}
.arrow{
  width:44px;height:44px;border:2px solid #111;border-radius:12px;background:#fff;color:#111;font-size:20px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:2px 3px 0 #111
}
.arrow:hover{transform:translate(-1px,-1px); box-shadow:4px 5px 0 #111}
.arrow:active{transform:translate(0,0); box-shadow:2px 3px 0 #111}
.arrow:focus{outline:none; box-shadow:2px 3px 0 #111, var(--ring)}

/* Utilities */
.hidden{display:none !important}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}