/* PolyOS — a dokumentáció stílusa. KÜLÖN FÁJLBAN, mert oldalanként valódi HTML-fájlt
   generálunk (scripts/docs-shells.mjs) — így a stílus egyszer töltődik és egyszer is cache-elődik,
   nem másolódik bele minden oldalba. */
/* A dokumentáció a PolyOS design-tokenekre épül (design-tokens.css), hogy ne csússzon el a
     többi oldaltól. Itt csak a DOKUMENTÁCIÓ-SPECIFIKUS elrendezés és tipográfia van. */
  *{box-sizing:border-box;margin:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--font-sans);background:var(--bg);color:var(--text-900);line-height:1.65;-webkit-font-smoothing:antialiased}
  a{color:var(--brand);text-decoration:none}
  a:hover{text-decoration:underline}

  /* ——— FEJLÉC ——— */
  .top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-solid)}
  .topin{max-width:1440px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
  .logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:17px;color:var(--text-900);letter-spacing:-.02em;flex:none}
  .logo img{height:24px;width:auto;display:block}
  .logo .os{color:#A6D400}
  .logo .tag{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);background:var(--brand-weak);padding:3px 8px;border-radius:999px}
  .grow{flex:1}
  .topnav{display:flex;gap:6px;align-items:center}
  .topnav a{font-size:13.5px;font-weight:600;color:var(--text-700);padding:7px 12px;border-radius:999px}
  .topnav a:hover{background:var(--surface-inset);text-decoration:none}
  #burger{display:none;background:var(--surface-solid);border:1px solid var(--border-solid);border-radius:10px;padding:7px 10px;cursor:pointer;color:var(--text-900);font-size:15px}

  /* ——— ELRENDEZÉS ——— */
  .wrap{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:288px minmax(0,1fr) 248px;gap:34px;padding:26px 20px 70px;align-items:start}

  /* ——— BAL OLDALI NAVIGÁCIÓ ——— */
  aside.nav{position:sticky;top:64px;max-height:calc(100vh - 84px);overflow-y:auto;padding-right:6px}
  .srch{position:relative;margin-bottom:14px}
  .srch input{width:100%;padding:10px 12px 10px 34px;border-radius:11px;border:1px solid var(--border-solid);background:var(--surface-solid);color:var(--text-900);font-family:inherit;font-size:14px;outline:none}
  .srch input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-weak)}
  .srch svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-400)}
  .grp{margin-bottom:3px}
  .grp>button{width:100%;display:flex;align-items:center;gap:9px;background:none;border:0;padding:9px 10px;border-radius:10px;cursor:pointer;
    font-family:inherit;font-size:14.5px;font-weight:700;color:var(--text-900);text-align:left}
  .grp>button:hover{background:var(--surface-inset)}
  .grp .chev{margin-left:auto;transition:transform .18s ease;color:var(--text-400);font-size:12px}
  .grp.open .chev{transform:rotate(90deg)}
  .grp .ico{font-size:15px;line-height:1}
  .grp ul{list-style:none;padding:2px 0 8px 15px;margin:0;display:none;border-left:1.5px solid var(--border-solid);margin-left:17px}
  .grp.open ul{display:block}
  .grp li a{display:flex;gap:8px;align-items:flex-start;padding:7px 10px;border-radius:9px;font-size:13.8px;color:var(--text-700);line-height:1.45}
  .grp li a:hover{background:var(--surface-inset);color:var(--text-900);text-decoration:none}
  .grp li a.on{background:var(--brand-weak);color:var(--brand);font-weight:700}
  .grp li a .pg{opacity:.55;flex:none;margin-top:1px}
  .navempty{padding:14px 10px;color:var(--text-500);font-size:13.5px}

  /* ——— TARTALOM ——— */
  main{min-width:0}
  .crumb{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13px;color:var(--text-500);margin-bottom:14px}
  .crumb a{color:var(--text-500)} .crumb a:hover{color:var(--brand)}
  .crumb .sep{opacity:.45}
  .crumb .cur{color:var(--brand);font-weight:600}
  main h1{font-size:clamp(28px,4vw,38px);letter-spacing:-.025em;line-height:1.18;margin:0 0 10px;text-wrap:balance}
  .meta{display:flex;align-items:center;gap:8px;color:var(--text-500);font-size:13px;margin-bottom:26px}
  .lede{font-size:17px;color:var(--text-700);margin:-2px 0 26px;text-wrap:pretty}

  .doc h2{font-size:24px;letter-spacing:-.02em;margin:38px 0 12px;padding-top:6px;scroll-margin-top:78px}
  .doc h3{font-size:18px;letter-spacing:-.01em;margin:26px 0 8px;scroll-margin-top:78px}
  .doc h2 .anch,.doc h3 .anch{opacity:0;margin-left:8px;font-weight:400;color:var(--text-400);text-decoration:none}
  .doc h2:hover .anch,.doc h3:hover .anch{opacity:1}
  .doc p{margin:0 0 14px;color:var(--text-700)}
  .doc strong{color:var(--text-900);font-weight:700}
  .doc ul,.doc ol{margin:0 0 16px;padding-left:22px;color:var(--text-700)}
  .doc li{margin:5px 0}
  .doc li::marker{color:var(--text-400)}
  .doc hr{border:0;border-top:1px solid var(--border-solid);margin:32px 0}
  .doc blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:3px solid var(--border-strong);color:var(--text-500)}
  .doc code{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.885em;background:var(--surface-inset);
    border:1px solid var(--border-solid);padding:1.5px 6px;border-radius:6px;color:var(--text-900);white-space:nowrap}
  .doc pre{background:var(--surface-inset);border:1px solid var(--border-solid);border-radius:12px;padding:14px 16px;overflow-x:auto;margin:0 0 16px}
  .doc pre code{background:none;border:0;padding:0;white-space:pre;font-size:13px;line-height:1.6}
  .doc img{max-width:100%;border-radius:12px;border:1px solid var(--border-solid);display:block;margin:6px 0 18px}
  .doc table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
  .doc th,.doc td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--border-solid);vertical-align:top}
  .doc th{font-weight:700;color:var(--text-900);background:var(--surface-inset)}
  .doc td{color:var(--text-700)}
  .doc tr:last-child td{border-bottom:0}

  /* ——— KIEMELÉSEK ——— */
  .cal{--c:var(--info);--cbg:var(--info-bg);--cfg:var(--info-fg);
    margin:0 0 18px;padding:14px 16px 14px 15px;border-radius:13px;background:var(--cbg);
    border:1px solid color-mix(in srgb,var(--c) 32%,transparent);border-left:3.5px solid var(--c)}
  .cal .ct{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:.01em;color:var(--cfg);margin-bottom:6px}
  .cal .ct .ci{font-size:15px;line-height:1}
  .cal p{color:var(--text-700);margin:0 0 8px} .cal p:last-child{margin-bottom:0}
  .cal ul,.cal ol{margin-bottom:0;color:var(--text-700)}
  .cal.tipp{--c:var(--success);--cbg:var(--success-bg);--cfg:var(--success-fg)}
  .cal.figyelem{--c:var(--warning);--cbg:var(--warning-bg);--cfg:var(--warning-fg)}
  .cal.veszely{--c:var(--danger);--cbg:var(--danger-bg);--cfg:var(--danger-fg)}

  /* ——— LÉPTETŐ ——— */
  .pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:46px;padding-top:26px;border-top:1px solid var(--border-solid)}
  .pager a{display:block;padding:13px 16px;border:1px solid var(--border-solid);border-radius:13px;background:var(--surface-solid)}
  .pager a:hover{border-color:var(--brand);text-decoration:none}
  .pager .lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-400);margin-bottom:3px}
  .pager .ttl{color:var(--text-900);font-weight:650;font-size:14.5px}
  .pager .nx{text-align:right}

  /* ——— JOBB OLDALI TARTALOMJEGYZÉK ——— */
  aside.toc{position:sticky;top:64px;max-height:calc(100vh - 84px);overflow-y:auto;font-size:13.2px}
  aside.toc .th{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-400);margin-bottom:9px}
  aside.toc a{display:block;padding:5px 10px;border-left:2px solid var(--border-solid);color:var(--text-500);line-height:1.45}
  aside.toc a:hover{color:var(--text-900);text-decoration:none}
  aside.toc a.h3{padding-left:22px;font-size:12.6px}
  aside.toc a.on{color:var(--brand);border-left-color:var(--brand);font-weight:650}

  /* ——— NYITÓOLDAL ——— */
  .hero{padding:16px 0 30px}
  .hero h1{font-size:clamp(30px,5vw,42px)}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
  .card{display:block;padding:18px;border:1px solid var(--border-solid);border-radius:16px;background:var(--surface-solid)}
  .card:hover{border-color:var(--brand);text-decoration:none}
  .card .ci{font-size:22px;line-height:1;margin-bottom:9px}
  .card h3{font-size:16px;margin:0 0 5px;color:var(--text-900);letter-spacing:-.01em}
  .card p{font-size:13.6px;color:var(--text-500);margin:0}
  .card .n{margin-top:10px;font-size:12px;color:var(--text-400);font-weight:600}

  /* ——— KERESŐ-TALÁLATOK ——— */
  .hits{list-style:none;padding:0;margin:0}
  .hits li{margin-bottom:9px}
  .hits a{display:block;padding:12px 14px;border:1px solid var(--border-solid);border-radius:12px;background:var(--surface-solid)}
  .hits a:hover{border-color:var(--brand);text-decoration:none}
  .hits .g{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--brand);margin-bottom:3px}
  .hits .t{color:var(--text-900);font-weight:650} .hits .s{color:var(--text-500);font-size:13.3px;margin-top:2px}

  @media (max-width:1180px){
    .wrap{grid-template-columns:262px minmax(0,1fr);}
    aside.toc{display:none}
  }
  @media (max-width:880px){
    .wrap{grid-template-columns:minmax(0,1fr);gap:0;padding-top:18px}
    #burger{display:block}
    aside.nav{position:fixed;inset:56px 0 auto 0;z-index:35;max-height:calc(100vh - 56px);background:var(--surface-solid);
      border-bottom:1px solid var(--border-solid);padding:16px 20px 22px;display:none}
    aside.nav.open{display:block}
    .topnav a{display:none}
  }