/* engiCAD Wiki — styled to match www.engicad.com.
   Same tokens, type scale and components as the main site so the wiki reads as
   part of the product rather than a separate tool. Light is the default; dark
   follows html[data-theme="dark"], set by the header toggle. */

:root{
  --bg:#ffffff; --bg-2:#f5f8fc; --raised:#eef3f9;
  --text:#0d1826; --muted:#4a5a70; --dim:#5f6f85;
  --accent:#0b62d6; --accent-2:#0a58c2; --on-accent:#ffffff;
  --line:rgba(13,24,38,.14); --line-2:rgba(13,24,38,.09);
  --header:rgba(255,255,255,.92);
  --shadow:0 1px 3px rgba(13,24,38,.06);
  --shadow-lg:0 1rem 2rem rgba(13,24,38,.12);
  --radius:.7rem;
  --header-h:3.75rem;
  --nav-w:17rem;
}
html[data-theme="dark"]{
  --bg:#0b1220; --bg-2:#0e1626; --raised:#111a2e;
  --text:#e6edf6; --muted:#9aa8bd; --dim:#8b9ab0;
  --accent:#409fff; --accent-2:#6fb6ff; --on-accent:#06101f;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.06);
  --header:rgba(11,18,32,.90);
  --shadow:0 1px 3px rgba(0,0,0,.4);
  --shadow-lg:0 1rem 2rem rgba(0,0,0,.45);
}

*,*::before,*::after{ box-sizing:border-box }

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.65;
  color:var(--text); background:var(--bg);
  display:flex; flex-direction:column; margin:0; padding:0; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--accent-2) }
a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px }

/* --- TOP MENU BAR --- */
#top-menubar{
  display:flex; justify-content:space-between; align-items:center; gap:1.25rem;
  padding:0 1.5rem; height:var(--header-h);
  background:var(--header); backdrop-filter:blur(10px);
  color:var(--text); border-bottom:1px solid var(--line-2);
  flex-shrink:0; z-index:1000; position:sticky; top:0;
}
#top-menubar .app-name{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:1rem; font-weight:600; letter-spacing:-.01em; color:var(--text);
  text-decoration:none; flex:none;
}
#top-menubar .app-name .m,
#top-menubar .app-name .t{
  display:block; background-color:var(--text);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
#top-menubar .app-name .m{ width:1.7rem; height:1.6rem;
  -webkit-mask-image:url(logo-mark.svg); mask-image:url(logo-mark.svg) }
#top-menubar .app-name .t{ width:4.25rem; height:1.06rem; margin-top:.1rem;
  -webkit-mask-image:url(logo-text.svg); mask-image:url(logo-text.svg) }
#top-menubar .app-name .sub{
  color:var(--dim); font-weight:500; font-size:.9375rem; margin-left:.1rem;
}
.hdr-right{ display:flex; align-items:center; gap:.75rem; margin-left:auto }
.hdr-link{ color:var(--muted); text-decoration:none; font-size:.875rem; white-space:nowrap }
.hdr-link:hover{ color:var(--text) }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; flex:none; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:.5rem;
  background:transparent; color:var(--muted); transition:color .18s,border-color .18s;
}
.theme-toggle:hover{ color:var(--text); border-color:var(--accent) }
.theme-toggle svg{ width:1.05rem; height:1.05rem }
.theme-toggle .moon{ display:none }
html[data-theme="dark"] .theme-toggle .moon{ display:block }
html[data-theme="dark"] .theme-toggle .sun{ display:none }

#top-menubar .search-container{ position:relative }
#top-menubar .search-input{
  padding:.5rem .8rem; border:1px solid var(--line); border-radius:.5rem;
  font:inherit; font-size:.875rem; width:16rem;
  background:var(--bg); color:var(--text);
}
#top-menubar .search-input::placeholder{ color:var(--dim) }

.search-results{
  display:none; position:absolute; top:100%; right:0; width:24rem;
  max-height:26rem; overflow-y:auto; background:var(--bg);
  border:1px solid var(--line); border-radius:.6rem; box-shadow:var(--shadow-lg);
  list-style:none; padding:.35rem; margin-top:.4rem; z-index:1100;
}
.search-results.visible{ display:block }
.search-result-item a{
  display:block; padding:.6rem .75rem; text-decoration:none; color:var(--text);
  border-radius:.4rem; transition:background-color .15s; font-size:.9375rem;
}
.search-result-item a:hover{ background:var(--bg-2) }
.search-result-item small{
  display:block; color:var(--dim); font-size:.8125rem; margin-top:.15rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.search-result-item mark{ background:transparent; color:var(--accent-2); font-weight:600 }

/* Wrapper for Nav and Main Content */
#content-wrapper{ display:flex; flex-grow:1; align-items:flex-start }

/* --- LEFT NAVIGATION --- */
#wiki-nav,#nav-placeholder{
  width:var(--nav-w); flex-shrink:0; background:var(--bg);
  border-right:1px solid var(--line-2); padding:1rem 0;
  height:calc(100vh - var(--header-h)); overflow-y:auto;
  position:sticky; top:var(--header-h);
}
#wiki-nav .home-link,#nav-placeholder .home-link{
  display:block; font-weight:600; color:var(--text);
  padding:.5rem 1.25rem 1rem; font-size:.9375rem; text-decoration:none;
  border-bottom:1px solid var(--line-2); margin-bottom:.6rem;
}
#wiki-nav .home-link:hover,#nav-placeholder .home-link:hover{ color:var(--accent-2) }

.nav-category{ margin-bottom:.15rem }
.nav-header{
  background:none; border:none; width:100%; text-align:left;
  padding:.55rem 1.25rem; font:inherit; font-size:.9375rem; font-weight:500;
  color:var(--text); cursor:pointer; position:relative; border-radius:0;
  transition:background-color .15s,color .15s;
}
.nav-header:hover{ background:var(--bg-2); color:var(--accent-2) }
.nav-header::after{
  content:'\25B8'; position:absolute; right:1rem; top:50%;
  transform:translateY(-50%) rotate(0deg); font-size:.7em; color:var(--dim);
  transition:transform .2s ease-in-out;
}
.nav-header.active::after{ transform:translateY(-50%) rotate(90deg) }

.nav-links{
  list-style:none; padding:0; margin:0; background:var(--bg-2);
  max-height:0; overflow:hidden; transition:max-height .3s ease-in-out;
}
.nav-links li a{
  display:block; text-decoration:none; color:var(--muted);
  padding:.45rem 1.25rem .45rem 2.1rem; font-size:.875rem;
  transition:background-color .15s,color .15s;
}
.nav-links li a:hover{ background:var(--raised); color:var(--text) }
.nav-links li a.active{ background:var(--accent); color:var(--on-accent); font-weight:600 }
.nav-links li a.active:hover{ background:var(--accent-2); color:var(--on-accent) }
.home-link.active{ color:var(--accent-2) !important }

.nav-group-label{
  margin:1.1rem 0 .35rem; padding:0 1.25rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim);
}
.nav-group-label:first-of-type{ margin-top:.25rem }

/* --- MAIN CONTENT --- */
#wiki-main{
  flex-grow:1; min-width:0; padding:2.5rem clamp(1.25rem,4vw,3rem) 4rem;
  display:block;
}
#wiki-main > *{ max-width:60rem; margin-left:0; margin-right:auto }

h1,h2,h3,h4{
  color:var(--text); line-height:1.2; letter-spacing:-.02em;
  border:0; padding:0; text-wrap:balance;
}
h1{ font-size:clamp(1.7rem,1.3rem + 1.4vw,2.25rem); font-weight:600; margin:0 0 .75rem;
    text-align:left; padding-bottom:.9rem; border-bottom:1px solid var(--line-2) }
h2{ font-size:1.35rem; font-weight:600; margin:2.75rem 0 .9rem; background:none; padding:0 }
h3{ font-size:1.0625rem; font-weight:600; margin:0 0 .35rem }
h4{ font-size:.9375rem; font-weight:600; margin:1.1rem 0 .4rem; color:var(--muted) }
p{ margin:0 0 1rem; text-wrap:pretty }

.container{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.75rem; padding:0; width:100%; margin:1.25rem 0 2rem;
}
.menu-item{
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:1.4rem 1.5rem; margin:1rem 0; width:100%; box-shadow:none;
}
.menu-item h3{ margin-bottom:.5rem }

.menu-link{
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.9rem 1.1rem; box-shadow:none; transition:border-color .18s,background-color .18s;
}
.menu-link:hover{ background:var(--raised); border-color:var(--accent) }
.menu-link a{ text-decoration:none; color:var(--text); font-weight:600; font-size:.9375rem; display:block }
.menu-link a:hover{ color:var(--accent-2) }

.purpose{
  font-style:normal; color:var(--muted); font-size:.9375rem;
  border-left:2px solid var(--accent); padding-left:.9rem; margin:0 0 1rem;
}
ol{ padding-left:1.25rem; color:var(--muted); font-size:.9375rem }
ol li{ margin-bottom:.4rem }
ol li strong{ color:var(--text) }
ul{ list-style:none; padding:0 }
#wiki-main > ul > li{ padding:.4rem 0; border-bottom:1px solid var(--line-2); color:var(--muted); font-size:.9375rem }
#wiki-main > ul > li a{ font-weight:600; text-decoration:none }
#wiki-main > ul > li a:hover{ text-decoration:underline }

code{ background:var(--bg-2); border:1px solid var(--line-2); border-radius:.3rem;
  padding:.05rem .3rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em; }
kbd{ background:var(--bg-2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:.3rem; padding:.05rem .35rem; font-size:.85em; font-family:inherit; color:var(--text) }

/* ── Command Line reference (generated section) ───────────────────────── */
.cmd-table{ width:100%; border-collapse:collapse; margin:1.25rem 0 1.75rem; font-size:.9375rem }
.cmd-table th,.cmd-table td{ text-align:left; padding:.55rem .7rem;
  border-bottom:1px solid var(--line-2); vertical-align:top }
.cmd-table thead th{ background:var(--bg-2); color:var(--text); font-weight:600;
  border-bottom:1px solid var(--line); position:sticky; top:var(--header-h); z-index:1 }
.cmd-table tbody tr:hover{ background:var(--bg-2) }
.cmd-table code{ white-space:nowrap }
.cmd-table td:first-child code{ font-weight:600; color:var(--accent-2);
  background:var(--raised); border-color:var(--line) }

.cmd-badge{ display:inline-block; font-size:.75rem; padding:.1rem .45rem; border-radius:.6rem;
  border:1px solid var(--line); background:var(--bg-2); color:var(--muted);
  margin:0 .2rem .2rem 0; white-space:nowrap }
.cmd-badge.sel{ border-color:rgba(196,138,20,.35); background:rgba(224,168,40,.12); color:#8a6212 }
.cmd-badge.val{ border-color:rgba(11,98,214,.3);  background:rgba(11,98,214,.10);  color:var(--accent-2) }
.cmd-badge.opt{ border-color:rgba(22,128,74,.3);  background:rgba(22,128,74,.10);  color:#15693f }
html[data-theme="dark"] .cmd-badge.sel{ color:#e8be5c }
html[data-theme="dark"] .cmd-badge.opt{ color:#6fd39a }

.cmd-cats{ list-style:none; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:.5rem; margin:1rem 0 1.5rem }
.cmd-cats li{ padding:.55rem .8rem; background:var(--bg-2); border:1px solid var(--line-2);
  border-radius:.5rem; border-bottom:1px solid var(--line-2) }
.cmd-cats li a{ text-decoration:none; font-weight:600; font-size:.9375rem }
.cmd-cats .cmd-n{ float:right; color:var(--dim); font-size:.8125rem; font-weight:400 }
.cmd-count{ color:var(--muted); font-size:.9375rem }
.cmd-note{ color:var(--dim); font-size:.875rem; font-style:italic }
.cmd-nodesc{ color:var(--dim); opacity:.6 }
.cmd-back{ margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line-2); font-size:.9375rem }

.cmd-search-wrap{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin:1.25rem 0 .25rem;
}
.cmd-search{
  flex:1 1 20rem; min-width:0; padding:.55rem .8rem;
  border:1px solid var(--line); border-radius:.5rem;
  background:var(--bg); color:var(--text); font:inherit; font-size:.9375rem;
}
.cmd-search::placeholder{ color:var(--dim) }
.cmd-search:focus{ border-color:var(--accent); outline:2px solid var(--accent-2); outline-offset:1px }
.cmd-search-count{ color:var(--dim); font-size:.875rem; white-space:nowrap }
.cmd-empty td{ padding:1.5rem .7rem; text-align:center; color:var(--dim); font-style:italic }

/* --- responsive --- */
@media (max-width:60rem){
  #content-wrapper{ flex-direction:column }
  #wiki-nav,#nav-placeholder{ width:100%; height:auto; position:static;
    border-right:0; border-bottom:1px solid var(--line-2) }
  #wiki-main{ padding:1.5rem 1.25rem 3rem }
  .cmd-table thead th{ position:static }
}
@media (max-width:40rem){
  #top-menubar{ padding:0 1rem; gap:.6rem }
  #top-menubar .search-input{ width:9rem }
  .hdr-link{ display:none }
  #top-menubar .app-name .sub{ display:none }
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:1ms !important; animation-duration:1ms !important }
}