/* 8i Interface System — shared styles for AM.CO.ZA guides and KB shell */
@import url('https://fonts.googleapis.com/css2?family=Baloo+Chettan+2:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme: dark;
  --blue-950:#02020b; --blue-900:#030312; --blue-850:#06062a; --blue-800:#09094a;
  --blue-700:#0c0c78; --blue-600:#0f0fb9; --blue-500:#0f0fed; --blue-400:#4a4af2;
  --blue-300:#8585f8; --blue-200:#b7b7fb; --blue-100:#e3e3fe; --blue-50:#f7f7ff;
  --accent-700:#735a00; --accent-600:#b58e1f; --accent-500:#f6cd49; --accent-400:#f8d866;
  --accent-300:#fae284; --accent-200:#fbe9a6; --accent-100:#fdf5dc;
  --accent:var(--accent-500); --accent-hover:var(--accent-300);
  --text:var(--blue-50); --muted:#aaaadc;
  --line:#b7b7fb22; --line-strong:#b7b7fb48;
  --surface:#06062ae6; --surface-raised:#09094ae8;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-1:8px; --radius-2:12px; --radius-3:18px; --radius-pill:999px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --content-max:1180px; --reading-max:72ch;
  --motion-fast:160ms; --motion-standard:240ms; --ease:cubic-bezier(.2,.7,.2,1);
  font-family:'Baloo Chettan 2', Arial, sans-serif;
  color:var(--text);
  background:var(--blue-900);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  font-family:'Baloo Chettan 2', Arial, Helvetica, sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  background-color:var(--blue-900);
  background-image:
    radial-gradient(900px 480px at 12% -8%, rgba(15,15,237,.22), transparent 58%),
    radial-gradient(700px 420px at 100% 0%, rgba(246,205,73,.06), transparent 52%),
    linear-gradient(180deg, #030312 0%, #06062a 48%, #02020b 100%);
  background-attachment:fixed;
}
@supports not (background-attachment:fixed){
  body{background-attachment:scroll}
}
a{color:var(--blue-200); text-decoration:none}
a:hover{color:var(--blue-50)}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--blue-200);
  outline-offset:3px;
}
img, svg, video{max-width:100%; height:auto}
button, a{-webkit-tap-highlight-color:transparent}

/* —— Guide shell —— */
.wrap{
  width:min(100% - 28px, 920px);
  margin:0 auto;
  padding:18px 0 calc(40px + var(--safe-bottom));
}
.nav{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-bottom:16px; font-size:.95rem;
}
.nav a{font-weight:600; color:var(--blue-200)}
.nav a:hover{color:var(--blue-50)}
.nav a[aria-current="page"]{
  color:var(--accent);
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}

.hero{
  border:1px solid var(--line);
  border-radius:var(--radius-3);
  overflow:hidden;
  background:var(--surface);
  margin-bottom:18px;
  box-shadow:0 16px 48px rgba(2,2,11,.45);
}
.hero img{
  display:block; width:100%; height:auto;
  max-height:180px; object-fit:cover;
}
@media(min-width:700px){.hero img{max-height:220px}}
.hero-copy{padding:16px 18px 18px}
.eyebrow{
  text-transform:uppercase; letter-spacing:.15em;
  font-weight:700; font-size:.75rem;
  color:var(--blue-300); margin:0 0 6px;
}
h1{
  font-weight:600; letter-spacing:-.03em; color:var(--blue-50);
  font-size:clamp(1.45rem, 4.2vw, 2.15rem);
  line-height:1.08; margin:.15rem 0 8px;
}
h1 em{font-style:normal; color:var(--accent)}
h2{
  font-weight:600; color:var(--blue-50);
  font-size:1.2rem; margin:0 0 8px; letter-spacing:-.02em;
}
h3{
  font-weight:600; color:var(--blue-50);
  font-size:1.05rem; margin:0 0 6px;
}
.lead{color:var(--muted); margin:0; max-width:40rem}
.pick-label{
  font-weight:600; color:var(--blue-50);
  margin:0 0 10px; font-size:1.05rem;
}

/* —— Tabs (platform picker) —— */
.tabs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px; margin:0 0 14px;
}
@media(min-width:560px){.tabs{grid-template-columns:repeat(3, minmax(0,1fr))}}
@media(min-width:820px){.tabs{grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px}}
.tab{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(9,9,74,.45);
  color:var(--text);
  border-radius:var(--radius-2);
  padding:12px 8px 10px;
  cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font:inherit; font-weight:600; min-height:88px;
  touch-action:manipulation; text-align:center;
  transition:border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.tab img{width:36px; height:36px; border-radius:10px; display:block}
.tab-name{font-size:.82rem; line-height:1.2}
.tab-sub{font-size:.68rem; font-weight:500; color:var(--muted); line-height:1.2}
.tab:hover{border-color:var(--line-strong)}
.tab.is-active,
.tab[aria-selected="true"]{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--blue-950);
  box-shadow:0 0 24px #f6cd4930;
}
.tab.is-active .tab-sub,
.tab[aria-selected="true"] .tab-sub{color:var(--blue-800)}

.panel{
  display:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-3);
  padding:16px 16px 18px;
}
.panel.is-active{display:block}

.method{
  margin:0 0 12px; padding:12px 14px;
  border-radius:var(--radius-2);
  background:rgba(15,15,237,.12);
  border:1px solid var(--line-strong);
}
.method strong{color:var(--blue-50)}
.how{margin:0; padding-left:1.15rem}
.how li{margin:.4rem 0; color:var(--muted)}
.how strong{color:var(--blue-50)}

.paste-box{
  position:relative;
  background:var(--blue-950);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-2);
  padding:14px 14px 56px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.paste-box pre{
  margin:0; white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:.82rem; line-height:1.45; color:var(--blue-100);
}
@media(min-width:700px){.paste-box pre{font-size:.9rem}}
.copy-bar{
  position:absolute; right:10px; bottom:10px; left:10px;
  display:flex; justify-content:stretch;
}
@media(min-width:500px){.copy-bar{left:auto; justify-content:flex-end}}

.btn{
  appearance:none; border:0; cursor:pointer; font:inherit; font-weight:700;
  background:var(--accent); color:var(--blue-950);
  padding:12px 16px; border-radius:var(--radius-pill); width:100%;
  box-shadow:0 0 28px #f6cd4930;
  touch-action:manipulation; min-height:44px;
  transition:background var(--motion-fast) var(--ease);
}
@media(min-width:500px){.btn{width:auto; min-width:140px}}
.btn:hover{background:var(--accent-hover)}
.btn.copied{background:var(--blue-400); color:var(--blue-50); box-shadow:none}

.alt{margin:14px 0 0; font-size:.92rem; color:var(--muted)}
.alt strong{color:var(--blue-50)}

.sources{
  margin-top:20px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius-3);
  background:rgba(6,6,42,.7); font-size:.92rem; color:var(--muted);
}
.sources a{font-weight:600; color:var(--blue-200)}

.footer{
  margin-top:24px; color:var(--muted); font-size:.9rem;
  border-top:1px solid var(--line); padding-top:14px;
}
.footer a{color:var(--blue-200)}

.beg{
  margin-top:18px; padding:16px 16px 14px;
  border-radius:var(--radius-3);
  border:1px dashed var(--line-strong);
  background:linear-gradient(160deg, rgba(15,15,237,.18), rgba(6,6,42,.7));
  display:grid; grid-template-columns:auto 1fr; gap:12px 14px; align-items:start;
}
.beg-anim{
  width:56px; height:56px; display:grid; place-items:center;
  font-size:2rem; line-height:1;
  animation:beg-bounce 1.4s ease-in-out infinite;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
  user-select:none;
}
@keyframes beg-bounce{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  40%{transform:translateY(4px) rotate(4deg) scale(1.05)}
  70%{transform:translateY(-3px) rotate(-2deg)}
}
.beg h3{margin:0 0 6px; color:var(--blue-50); font-size:1.05rem; font-weight:600}
.beg p{margin:0 0 8px; color:var(--muted); font-size:.95rem}
.beg p:last-child{margin-bottom:0}
.beg a{font-weight:700}
.beg .please{color:var(--blue-50); font-weight:600}

.aka{
  margin-top:14px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius-3);
  background:rgba(6,6,42,.7);
  font-size:.88rem; color:var(--muted); line-height:1.5;
}
.aka strong{color:var(--blue-50); font-weight:700}
.aka .tags{margin:.55rem 0 0; display:flex; flex-wrap:wrap; gap:6px}
.aka .tag{
  display:inline-block; padding:4px 10px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); background:rgba(15,15,237,.12);
  color:var(--blue-200); font-size:.78rem; font-weight:700;
}

/* —— Builder cards —— */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-3); padding:16px 16px 18px; margin:0 0 14px;
}
.card p{margin:0 0 10px; color:var(--muted)}
.card p:last-child{margin-bottom:0}
.card ul{margin:0; padding-left:1.15rem; color:var(--muted)}
.card li{margin:.35rem 0}
.card strong{color:var(--blue-50)}
.card .paste-box{padding:14px; margin-top:10px}
.pill{
  display:inline-block;
  background:rgba(246,205,73,.12); color:var(--accent);
  padding:3px 10px; border-radius:var(--radius-pill);
  font-size:.78rem; font-weight:700; margin-bottom:8px;
  letter-spacing:.02em;
}
.grid{display:grid; gap:12px}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}}
.note{
  margin:0 0 14px; padding:12px 14px; border-radius:var(--radius-2);
  background:rgba(15,15,237,.12); border:1px solid var(--line-strong);
  color:var(--muted); font-size:.95rem;
}
.note strong{color:var(--blue-50)}
code, .mono{
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:.88em; color:var(--blue-200);
}

.guide-meta-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.82rem; font-weight:600; color:var(--muted);
  margin-left:auto;
}
.guide-meta-link:hover{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .beg-anim{animation:none}
  .tab, .btn{transition:none}
}


/* Site-wide theme: sessionStorage 8i-theme; default prefers-color-scheme */
html[data-theme="light"]{color-scheme:light;--text:#030312;--muted:#4f4f7f;--line:#0f0fed1f;--surface:#e3e3fed9;background:#f7f7ff;color:var(--text)}
html[data-theme="light"] body{background:#f7f7ff;color:#030312}
html[data-theme="light"] a{color:#0f0fed}
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3{color:#030312}
html[data-theme="light"] em{color:#0f0fed}
html[data-theme="light"] .site-header,.guide-header,header{color:#0f0fed}

.nav{align-items:center}
.nav .theme-toggle{margin-left:auto}
.theme-toggle{
  display:inline-flex; align-items:center; gap:8px;
  min-height:34px; padding:5px 11px;
  border:1px solid var(--line-strong, #b7b7fb48);
  border-radius:999px; background:transparent;
  color:var(--blue-200); font:600 11px/1 inherit; cursor:pointer;
}
.theme-toggle span{font-size:15px}
.theme-toggle b{font-weight:600}
html[data-theme="light"] .nav a{color:#0c0c78}
html[data-theme="light"] .nav a[aria-current="page"]{color:#0f0fed; border-bottom-color:#0f0fed}
html[data-theme="light"] .theme-toggle{color:#0c0c78; border-color:#0f0fed4d}
@media(max-width:760px){
  .theme-toggle b{display:none}
  .theme-toggle{width:36px; justify-content:center; padding:5px; margin-left:auto}
}