/* "About this app" / directory sections written by tools/zibadis-ir-seo/build.py.
   Inside the OS shell they follow the theme tokens (light default, [data-theme="dark"]);
   standalone app pages get a self-contained dark panel via .zi-about--solo, because their page
   backgrounds vary (some are light outside the app island), so the section can't inherit one. */
.zi-about{
  --zi-text:var(--text,#f4eee0);
  --zi-soft:var(--text-soft,rgba(244,238,224,.78));
  --zi-muted:var(--muted,rgba(244,238,224,.55));
  --zi-line:var(--line-2,rgba(255,255,255,.10));
  --zi-accent:var(--gold-2,#c9a23d);
  --zi-panel:var(--panel-2,rgba(255,255,255,.03));
  position:relative;z-index:1;box-sizing:border-box;
  max-width:var(--content-max,1200px);margin:32px auto 0;padding:28px 18px 12px;
  border-top:1px solid var(--zi-line);
  color:var(--zi-text);font-family:var(--font,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif);
}
[data-theme="dark"] .zi-about{--zi-accent:var(--gold,#e0a935);--zi-muted:rgba(232,228,220,.58)}
.zi-about--solo{
  --zi-text:#f4eee0;--zi-soft:rgba(244,238,224,.78);--zi-muted:rgba(244,238,224,.55);
  --zi-line:rgba(255,255,255,.10);--zi-accent:#c9a23d;--zi-panel:rgba(255,255,255,.03);
  width:calc(100% - 32px);max-width:1200px;margin:48px auto 64px;padding:28px 24px 18px;
  border:1px solid rgba(255,255,255,.10);background:#07090b;box-shadow:0 24px 80px rgba(0,0,0,.28);
}
.zi-about *{box-sizing:border-box}
.zi-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--zi-muted)}
.zi-crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.zi-crumbs a{color:inherit;text-decoration:none}
.zi-crumbs a:hover{color:var(--zi-accent)}
.zi-kicker{margin:0 0 6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--zi-accent)}
.zi-about .zi-title{margin:0 0 12px;font-size:clamp(22px,2.4vw,32px);line-height:1.2;font-weight:700;letter-spacing:0;text-transform:none;color:var(--zi-text)}
.zi-lead{max-width:76ch;margin:0 0 20px;font-size:15px;line-height:1.7;color:var(--zi-soft)}
.zi-about h2:not(.zi-title){margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--zi-text)}
.zi-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0 0 22px}
.zi-card{padding:16px 18px;border:1px solid var(--zi-line);background:var(--zi-panel)}
.zi-card ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:var(--zi-soft)}
.zi-card p{margin:0;font-size:14px;line-height:1.7;color:var(--zi-soft)}
.zi-note{margin:0 0 20px;padding:10px 14px;border-left:3px solid var(--zi-accent);background:var(--zi-panel);font-size:13px;line-height:1.6;color:var(--zi-soft)}
.zi-related{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:0 0 18px;padding:0}
.zi-related a{display:block;height:100%;padding:12px 14px;border:1px solid var(--zi-line);background:var(--zi-panel);color:inherit;text-decoration:none;transition:border-color .2s}
.zi-related a:hover,.zi-related a:focus-visible{border-color:var(--zi-accent)}
.zi-related strong{display:block;margin-bottom:3px;font-size:14px;color:var(--zi-text)}
.zi-related span{display:block;font-size:12px;line-height:1.5;color:var(--zi-muted)}
.zi-meta{margin:0;font-size:12px;line-height:1.8;color:var(--zi-muted)}
.zi-meta a{color:var(--zi-accent);text-decoration:none}
.zi-meta a:hover{text-decoration:underline}
.zi-dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 18px;margin:0 0 20px}
.zi-dir h3{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--zi-accent)}
.zi-dir ul{list-style:none;margin:0;padding:0}
.zi-dir li{padding:3px 0;font-size:14px;line-height:1.5}
.zi-dir a{color:var(--zi-text);text-decoration:none}
.zi-dir a:hover,.zi-dir a:focus-visible{color:var(--zi-accent)}
.zi-dir li span{display:block;font-size:12px;line-height:1.45;color:var(--zi-muted)}
.zi-apps .zi-dir li{padding:6px 0}
@media (max-width:760px){
  .zi-about{margin-top:24px;padding:22px 12px 8px}
  .zi-lead{font-size:14px}
}