/* ============================================================
   WinGeno Manual — layout & typography
   Shared by all manual language pages (index.html, index_de-DE.html, …)
   ============================================================ */

/* Layout */
.manual-layout { display:grid; grid-template-columns:1fr; gap:0; padding-top:var(--nav-h); min-height:100vh; }

/* Sidebar */
.manual-sidebar { display:flex; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--border); padding:1.5rem 1.25rem; }
.manual-sidebar h3 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); margin-bottom:.75rem; }
.manual-sidebar > ul.manual-nav { flex:1; }

/* Language switcher */
.lang-switcher { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.lang-switcher a { font-size:.75rem; font-weight:600; padding:.2rem .55rem; border-radius:100px; border:1px solid var(--border); color:var(--text-muted); text-decoration:none; transition:background .15s,color .15s; }
.lang-switcher a:hover { background:var(--bg-alt); color:var(--accent); }
.lang-switcher a.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Sidebar navigation */
.manual-nav { list-style:none; display:flex; flex-direction:column; gap:0; }
.manual-nav a { display:block; padding:.25rem .75rem .25rem 1.25rem; border-radius:var(--radius-sm); font-size:.82rem; color:var(--text-muted); transition:background .15s,color .15s; line-height:1.4; }
.manual-nav a:hover,.manual-nav a.active { background:var(--bg-alt); color:var(--accent); text-decoration:none; }
.manual-nav .section-head { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--text); padding:1rem .75rem .2rem; pointer-events:none; border-top:1px solid var(--border); margin-top:.25rem; }
.manual-nav li:first-child .section-head, .manual-nav .section-head:first-child { border-top:none; margin-top:0; padding-top:.25rem; }

/* Sidebar footer */
.sidebar-footer { margin-top:auto; padding-top:1.5rem; border-top:1px solid var(--border); font-size:.75rem; color:var(--text-muted); }
.sidebar-footer .copyright { margin-bottom:.5rem; line-height:1.4; }
.sidebar-footer-links { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem 0; }
.sidebar-footer-links a { color:var(--text-muted); text-decoration:none; white-space:nowrap; }
.sidebar-footer-links a:hover { color:var(--accent); }
.sidebar-footer-links .sep { color:var(--border); margin:0 .35rem; }

/* Content area */
.manual-content { padding:3rem 1.25rem; }
.manual-content h1 { font-size:1.9rem; font-weight:800; margin-bottom:.5rem; }
.manual-content h2 { font-size:1.25rem; font-weight:700; margin-top:3rem; margin-bottom:.75rem; padding-bottom:.4rem; border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--nav-h) + 1.5rem); color:var(--accent); }
.manual-content h2:first-of-type { margin-top:0; }
.manual-content h3 { font-size:1rem; font-weight:700; margin-top:1.75rem; margin-bottom:.4rem; scroll-margin-top:calc(var(--nav-h) + 1.5rem); }
.manual-content p { font-size:.95rem; color:var(--text-muted); line-height:1.75; margin-bottom:.75rem; }
.manual-content ul,.manual-content ol { font-size:.95rem; color:var(--text-muted); line-height:1.75; margin:.5rem 0 .75rem 1.4rem; }
.manual-content li { margin-bottom:.25rem; }
.manual-content strong { color:var(--text); }
.manual-content code { background:var(--bg-alt); padding:.1rem .4rem; border-radius:4px; font-family:monospace; font-size:.88rem; }

/* Tip box */
.tip { background:var(--bg-alt); border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:.75rem 1rem; margin:1rem 0; font-size:.9rem; color:var(--text-muted); }
.tip strong { color:var(--accent); }

/* Symbol tables */
.sym-table { width:100%; border-collapse:collapse; margin:.75rem 0 1rem; font-size:.9rem; table-layout:fixed; }
.sym-table th:first-child,
.sym-table td:first-child { width:20%; }
.sym-table th { text-align:left; padding:.5rem .75rem; background:var(--bg-alt); border-bottom:2px solid var(--border); font-weight:700; color:var(--text); }
.sym-table td { padding:.45rem .75rem; border-bottom:1px solid var(--border); color:var(--text-muted); vertical-align:top; }
.sym-table tr:last-child td { border-bottom:none; }

/* Symbol image grid */
.sym-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1.25rem; margin:1.25rem 0 2rem; }
.sym-item { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.75rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); font-size:.8rem; color:var(--text-muted); text-align:center; }
.sym-item img { max-height:48px; max-width:100%; object-fit:contain; }

/* Ad slots */
.manual-content p.ad-label { font-size:9px; color:var(--text-muted); text-align:center; text-transform:uppercase; letter-spacing:.08em; margin:.75rem 0 .15rem; }

/* Desktop breakpoint */
@media (min-width:768px) {
  .manual-layout { grid-template-columns:300px 1fr; }
  .manual-sidebar { border-bottom:none; border-right:1px solid var(--border); padding:2rem 1rem; position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); overflow-y:auto; }
  .manual-content { padding:3rem 3.5rem; }
}