/* Shared styling for the /guide pages. Same visual language as legal.html
   (dark panel palette, gradient logo, ghost buttons) — kept in one same-origin
   file so the guide pages can run under a CSP with zero inline styles. */
:root{
  color-scheme: dark;
  --bg:#0b0d12; --panel:#12151d; --panel2:#171b25; --ink:#eef1f7; --dim:#9aa3b2;
  --line:#262c3a; --accent:#7c8cff; --accent2:#ff79c6; --cyan:#67e8f9;
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{ background:radial-gradient(1100px 540px at 70% -10%, #1a1f3a55, transparent), var(--bg);
      color:var(--ink); font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      min-height:100vh; display:flex; flex-direction:column; }
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{ max-width:820px; margin:0 auto; padding:1.4rem 1.2rem; flex:1; display:flex; flex-direction:column; width:100%; }

header{ display:flex; align-items:center; gap:.5rem; }
.logo{ font-weight:800; letter-spacing:-.02em; font-size:1.25rem; }
.logo .nano{ background:linear-gradient(90deg,var(--cyan),var(--accent) 70%); -webkit-background-clip:text; background-clip:text;
      color:transparent; font-weight:900; filter:drop-shadow(0 0 9px #7c8cff77); }
.spacer{flex:1}
.ghost{ font:inherit; font-size:.85rem; color:var(--dim); border:1px solid var(--line); border-radius:.55rem; padding:.35rem .7rem; }
.ghost:hover{ border-color:#3a425a; color:var(--ink); text-decoration:none }

nav.crumbs{ color:var(--dim); font-size:.85rem; margin:1.2rem 0 0; }
nav.crumbs a{ color:var(--dim); }
nav.crumbs a:hover{ color:var(--ink); }
nav.crumbs span{ color:var(--ink); }

main{ flex:1; padding:1.6rem 0 2.4rem; }
h1{ font-size:clamp(1.8rem, 5vw, 2.4rem); line-height:1.08; letter-spacing:-.03em; margin:0 0 .4rem; font-weight:850; }
h1 .grad{ background:linear-gradient(90deg,var(--cyan),var(--accent) 55%,var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lede{ color:var(--dim); font-size:1.02rem; margin:0 0 2rem; }

section{ border-top:1px solid var(--line); padding:2rem 0 .4rem; }
section:first-of-type{ border-top:none; padding-top:.6rem; }
h2{ font-size:1.4rem; letter-spacing:-.02em; margin:0 0 1rem; font-weight:800; scroll-margin-top:1rem; }
h3{ font-size:1.05rem; margin:1.6rem 0 .5rem; font-weight:700; }
p,li{ color:#cdd3df; }
p{ margin:0 0 1rem; }
ul,ol{ margin:0 0 1rem; padding-left:1.2rem; }
li{ margin:.35rem 0; }
strong{ color:var(--ink); }
.callout{ background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--accent2);
          border-radius:.6rem; padding:.9rem 1.1rem; margin:0 0 1.2rem; }
.callout p:last-child{ margin-bottom:0; }

code{ background:var(--panel2); border:1px solid var(--line); border-radius:.35rem;
      padding:.08rem .35rem; font:.86em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--cyan); }
pre{ background:var(--panel2); border:1px solid var(--line); border-radius:.6rem;
     padding:.9rem 1.1rem; margin:0 0 1.2rem; overflow-x:auto; }
pre code{ background:none; border:none; padding:0; color:#dbe2ef; font-size:.84rem; }

.tablewrap{ overflow-x:auto; margin:0 0 1.2rem; border:1px solid var(--line); border-radius:.6rem; }
table{ border-collapse:collapse; width:100%; font-size:.86rem; }
th,td{ text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); vertical-align:top; }
th{ color:var(--ink); background:var(--panel2); font-weight:700; white-space:nowrap; }
tr:last-child td{ border-bottom:none; }
td code{ white-space:nowrap; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:.8rem; margin:0 0 1.4rem; }
.card{ display:block; background:var(--panel2); border:1px solid var(--line); border-radius:.7rem;
       padding:1rem 1.1rem; color:var(--ink); }
.card:hover{ border-color:#3a425a; text-decoration:none; }
.card b{ display:block; margin-bottom:.25rem; }
.card small{ color:var(--dim); font-size:.83rem; line-height:1.45; display:block; }

.next{ display:flex; flex-wrap:wrap; gap:.45rem; margin:1.6rem 0 0; }
.next a{ font-size:.82rem; border:1px solid var(--line); background:var(--panel2); color:var(--ink);
         padding:.32rem .7rem; border-radius:2rem; }
.next a:hover{ border-color:#3a425a; text-decoration:none }

footer{ border-top:1px solid var(--line); color:var(--dim); font-size:.82rem; padding:1.1rem 0 .3rem;
        display:flex; gap:.4rem 1rem; flex-wrap:wrap; align-items:center; }
footer .spacer{flex:1}