/* ============================================================
   Dokumentacja projektu SupportMe — /docs (gruby dokument liniowy)
   Brand: granat #24324A · niebieski 1473C0 · Libre Baskerville + Inter.
   ============================================================ */
:root{
    --dc-ink:#24324a; --dc-blue-a:#4E7FA7; --dc-blue-b:#1473C0;
    --dc-muted:#5b6b82; --dc-line:#e6eaf0; --dc-bg:#f6f9fb; --dc-gutter:96px;
    --dc-display:'Libre Baskerville',Georgia,serif; --dc-ui:'Inter',system-ui,sans-serif;
    --dc-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

/* ---------- HERO ---------- */
.dc-hero{
    padding:64px 22px 56px; text-align:center;
    background:linear-gradient(134.55deg, rgba(78,127,167,.22) 13.6%, rgba(20,115,192,.22) 99.4%);
}
.dc-hero h1{ font-family:var(--dc-display); font-weight:700; font-size:44px; line-height:1.15; color:var(--dc-ink); margin:0 0 14px; }
.dc-hero p{ font-family:var(--dc-ui); font-size:19px; line-height:1.6; color:var(--dc-ink); margin:0 auto; max-width:780px; }
.dc-hero__meta{ margin-top:18px; font-family:var(--dc-ui); font-size:14px; color:var(--dc-muted); }

/* ---------- WRAP (węższy = dokument do czytania) ---------- */
.dc-wrap{ max-width:920px; margin:0 auto; padding:52px var(--dc-gutter) 90px; font-family:var(--dc-ui); color:var(--dc-ink); font-size:15.5px; line-height:1.7; }

/* ---------- STATYSTYKI ---------- */
.dc-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 48px; }
.dc-stat{ background:#fff; border:1px solid var(--dc-line); border-radius:14px; padding:22px 16px; text-align:center; box-shadow:0 8px 30px rgba(36,50,74,.05); }
.dc-stat__num{ font-family:var(--dc-display); font-weight:700; font-size:34px; line-height:1; color:var(--dc-blue-b); }
.dc-stat__label{ margin-top:8px; font-size:13px; color:var(--dc-muted); }

/* ---------- TOC ---------- */
.dc-toc{ background:var(--dc-bg); border:1px solid var(--dc-line); border-radius:16px; padding:26px 30px; margin:0 0 24px; }
.dc-toc h2{ font-family:var(--dc-display); font-weight:700; font-size:20px; margin:0 0 16px; color:var(--dc-ink); }
.dc-toc ol{ margin:0; padding:0; list-style:none; columns:2; column-gap:36px; }
.dc-toc li{ break-inside:avoid; margin:0 0 9px; font-size:14.5px; }
.dc-toc a{ color:var(--dc-blue-b); text-decoration:none; }
.dc-toc a:hover{ text-decoration:underline; }
.dc-toc__n{ display:inline-block; min-width:30px; color:var(--dc-muted); font-weight:600; }

/* ---------- MODUŁ (sekcja liniowa) ---------- */
.dc-module{ margin:0 0 8px; padding:40px 0 36px; border-top:2px solid var(--dc-line); scroll-margin-top:20px; }
.dc-module:first-of-type{ border-top:0; }
.dc-module__head{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0 0 6px; }
.dc-module__num{ font-family:var(--dc-display); font-weight:700; font-size:22px; color:var(--dc-blue-b); }
.dc-module__head h2{ font-family:var(--dc-display); font-weight:700; font-size:27px; margin:0; color:var(--dc-ink); line-height:1.2; }
.dc-lead{ font-size:16px; line-height:1.7; color:#3c4a5e; margin:10px 0 20px; }

/* ---------- BLOK (podsekcja modułu) ---------- */
.dc-block{ margin:22px 0; }
.dc-block__label{ display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--dc-blue-b); background:#eef5fc; padding:4px 10px; border-radius:6px; margin:0 0 12px; }
.dc-block > p{ margin:0 0 12px; }
.dc-block ul{ margin:0 0 12px; padding:0 0 0 20px; }
.dc-block li{ margin:0 0 7px; }

/* podtytuł wewnątrz modułu (np. pod-kontroler / pod-strona) */
.dc-sub{ font-family:var(--dc-ui); font-weight:700; font-size:18px; color:var(--dc-ink); margin:30px 0 4px; padding-top:8px; }
.dc-sub__route{ font-family:var(--dc-mono); font-size:12.5px; color:var(--dc-blue-b); background:#eef5fc; padding:2px 8px; border-radius:6px; }

/* ---------- LISTA FUNKCJI / METOD ---------- */
.dc-fns{ margin:0; padding:0; list-style:none; }
.dc-fns li{ padding:9px 0 9px 0; border-bottom:1px solid var(--dc-line); display:flex; gap:14px; flex-wrap:wrap; align-items:baseline; }
.dc-fns li:last-child{ border-bottom:0; }
.dc-fns code{ font-family:var(--dc-mono); font-size:13px; color:var(--dc-ink); background:#f1f5f9; padding:3px 9px; border-radius:6px; white-space:nowrap; font-weight:600; }
.dc-fns span{ color:#3c4a5e; flex:1; min-width:240px; font-size:14.5px; }

/* ---------- PRZEPŁYW (kroki) ---------- */
.dc-flow{ counter-reset:step; margin:0; padding:0; list-style:none; }
.dc-flow li{ position:relative; padding:6px 0 14px 44px; }
.dc-flow li::before{ counter-increment:step; content:counter(step); position:absolute; left:0; top:4px; width:28px; height:28px; border-radius:50%; background:var(--dc-ink); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.dc-flow li:not(:last-child)::after{ content:''; position:absolute; left:13px; top:34px; bottom:0; width:2px; background:var(--dc-line); }
.dc-flow strong{ color:var(--dc-ink); }
.dc-flow code{ font-family:var(--dc-mono); font-size:12.5px; color:var(--dc-blue-b); }

/* ---------- TABELA (pola / kolumny / trasy) ---------- */
.dc-table{ width:100%; border-collapse:collapse; font-size:13.5px; background:#fff; border:1px solid var(--dc-line); border-radius:12px; overflow:hidden; margin:0 0 8px; }
.dc-table th,.dc-table td{ text-align:left; padding:9px 14px; border-bottom:1px solid var(--dc-line); vertical-align:top; }
.dc-table th{ background:var(--dc-bg); font-weight:700; color:var(--dc-ink); font-size:12.5px; }
.dc-table td{ color:#3c4a5e; }
.dc-table tr:last-child td{ border-bottom:0; }
.dc-table code{ font-family:var(--dc-mono); font-size:12px; color:var(--dc-blue-b); }
.dc-table td:first-child code{ color:var(--dc-ink); font-weight:600; }

/* ---------- TABELE BAZY (chipy) ---------- */
.dc-tables{ display:flex; flex-wrap:wrap; gap:8px; }
.dc-tables code{ font-family:var(--dc-mono); font-size:12.5px; color:var(--dc-ink); background:#eef5fc; border:1px solid #d4e4f5; padding:4px 11px; border-radius:7px; }

/* ---------- PLIKI ---------- */
.dc-files{ font-family:var(--dc-mono); font-size:12px; color:var(--dc-muted); line-height:1.8; word-break:break-word; }
.dc-files code{ color:var(--dc-muted); }

/* ---------- STATUS BADGE ---------- */
.dc-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--dc-ui); font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.dc-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.dc-badge--on{ background:#def0e4; color:#1f7a4d; }
.dc-badge--demo{ background:#dbeafe; color:#1e40af; }
.dc-badge--off{ background:#f1f1f4; color:#6b7280; }
.dc-badge--soon{ background:#fdf3d7; color:#9a7011; }

/* ---------- PILLS (stack) ---------- */
.dc-pills{ display:flex; flex-wrap:wrap; gap:9px; }
.dc-pill{ background:#fff; border:1px solid var(--dc-line); border-radius:999px; padding:8px 15px; font-size:13.5px; color:var(--dc-ink); font-weight:500; }

/* ---------- NOTE ---------- */
.dc-note{ background:#eef5fc; border:1px solid #c5ddf3; border-radius:12px; padding:15px 18px; font-size:14px; line-height:1.6; color:#234; margin:0 0 22px; }
.dc-note--warn{ background:#fdf6e3; border-color:#ecd9a6; }

/* ---------- BLOK KODU / TERMINAL ---------- */
.dc-pre{ background:#0f1b2d; color:#e7eef8; border-radius:12px; padding:16px 18px; overflow-x:auto; font-family:var(--dc-mono); font-size:13px; line-height:1.7; margin:0 0 14px; white-space:pre; }
.dc-pre .c{ color:#6f88a6; }            /* komentarz */
.dc-pre .p{ color:#ffd9a0; }            /* prompt/symbol $ */
.dc-pre b{ color:#7ec0ff; font-weight:600; }   /* podświetlenie */
.dc-pre i{ color:#9fe0b0; font-style:normal; }  /* wartość/ścieżka */
.dc-inline{ font-family:var(--dc-mono); font-size:12.5px; background:#f1f5f9; color:#24324a; padding:2px 7px; border-radius:6px; }

/* ---------- KROKI NUMEROWANE (przewodnik) ---------- */
.dc-steps{ counter-reset:s; margin:0; padding:0; list-style:none; }
.dc-steps > li{ position:relative; padding:2px 0 18px 44px; }
.dc-steps > li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:var(--dc-blue-b); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.dc-steps > li:not(:last-child)::after{ content:''; position:absolute; left:13px; top:30px; bottom:0; width:2px; background:var(--dc-line); }
.dc-steps strong{ color:var(--dc-ink); }
.dc-steps p{ margin:4px 0 8px; }

/* ---------- BACK TO TOP ---------- */
.dc-top{ position:fixed; right:24px; bottom:24px; z-index:50; width:46px; height:46px; border-radius:50%; background:var(--dc-ink); color:#fff; border:0; cursor:pointer; font-size:20px; box-shadow:0 10px 28px rgba(20,29,51,.3); text-decoration:none; display:flex; align-items:center; justify-content:center; }
.dc-top:hover{ filter:brightness(1.15); }

/* ---------- RESPONSYWNE ---------- */
@media (max-width:1024px){ :root{ --dc-gutter:40px; } .dc-stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px){
    :root{ --dc-gutter:20px; }
    .dc-hero h1{ font-size:31px; }
    .dc-wrap{ padding-top:38px; font-size:15px; }
    .dc-toc ol{ columns:1; }
    .dc-module__head h2{ font-size:22px; }
    .dc-table{ font-size:12.5px; }
    .dc-table th,.dc-table td{ padding:8px 10px; }
    .dc-fns li{ gap:8px; }
}