/* Warstwa dla stron dokumentowych (polityka prywatności, regulamin).
   Zakłada, że vetilo.css jest już wczytany. */

body{background:var(--paper-2)}

.doc-nav{position:sticky;top:0;z-index:60;background:rgba(7,13,20,.92);
         backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--hair)}
.doc-nav .nav-in{height:68px}
.doc-nav .brand{color:#fff}
.doc-back{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:.92rem;
          font-weight:560;color:var(--on-dark-2);padding:9px 14px;border-radius:10px;
          transition:color .18s ease,background .18s ease}
.doc-back:hover{color:#fff;background:rgba(255,255,255,.08)}
.doc-back svg{width:16px;height:16px;transform:rotate(180deg)}

.doc-head{
  background:var(--ink);color:var(--on-dark);padding:clamp(48px,6vw,76px) 0 clamp(40px,5vw,60px);
  position:relative;isolation:isolate;overflow:hidden;
}
.doc-head h1{font-size:clamp(2rem,4.4vw,3.1rem);color:#fff;margin-bottom:.35em}
.doc-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:.87rem;color:var(--on-dark-3)}
.doc-meta .v-chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:var(--on-dark-2);
  font-weight:560;
}

.doc-body{max-width:900px;margin:0 auto;padding:clamp(34px,4.5vw,58px) 24px clamp(60px,8vw,96px)}
.doc-body h2{
  font-size:1.42rem;font-weight:730;letter-spacing:-.028em;margin:2.4em 0 .6em;
  scroll-margin-top:92px;padding-top:.3em;
}
.doc-body h2:first-of-type{margin-top:0}
.doc-body h3{font-size:1.06rem;font-weight:680;margin:1.8em 0 .5em;color:var(--text)}
.doc-body p,.doc-body li{color:var(--text-2)}
.doc-body strong{color:var(--text);font-weight:640}
.doc-body ul,.doc-body ol{padding-left:22px;margin:0 0 1em}
.doc-body li{margin-bottom:.6em}
.doc-body code{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.86em;
  background:var(--paper-3);border:1px solid var(--line);border-radius:6px;padding:2px 7px;
  color:var(--warn-ink);white-space:nowrap;
}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
       padding:26px 30px;box-shadow:var(--shadow-1)}

.note{
  display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--a2);
  border-radius:var(--r);padding:20px 24px;margin:1.6em 0;box-shadow:var(--shadow-1);
}
.note svg{width:22px;height:22px;color:var(--a3);margin-top:2px}
.note p{margin:0;font-size:.94rem}
.note p + p{margin-top:.7em}
.note-warn{border-left-color:var(--warn);background:linear-gradient(180deg,#fffbf3,var(--paper))}
.note-warn svg{color:var(--warn-ink)}

.toc{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 28px;margin:0 0 2.8em;box-shadow:var(--shadow-1);
}
.toc h2{font-size:.76rem!important;text-transform:uppercase;letter-spacing:.13em;
        color:var(--text-3);margin:0 0 14px!important;font-weight:700;padding:0!important}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
.toc li{margin-bottom:7px;font-size:.93rem;break-inside:avoid}
.toc a{color:var(--text-2);transition:color .16s ease}
.toc a:hover{color:var(--a-deep)}

.doc-body table{
  width:100%;border-collapse:collapse;font-size:.93rem;margin:1.4em 0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-1);display:block;overflow-x:auto;white-space:normal;
}
.doc-body th,.doc-body td{padding:13px 16px;text-align:left;vertical-align:top;
                          border-bottom:1px solid var(--line)}
.doc-body thead th{background:var(--paper-2);font-size:.75rem;text-transform:uppercase;
                   letter-spacing:.07em;color:var(--text-3);font-weight:700;white-space:nowrap}
.doc-body tbody tr:last-child th,.doc-body tbody tr:last-child td{border-bottom:none}
.doc-body tbody tr:hover{background:var(--paper-2)}

.doc-body ol.lvl{padding-left:24px}
.doc-body ol.lvl > li{margin-bottom:.85em;padding-left:4px}
.doc-body ol.lvl > li::marker{color:var(--a-deep);font-weight:680}

@media(max-width:640px){
  .toc ol{columns:1}
  .note{grid-template-columns:1fr;gap:10px}
}
@media print{
  .doc-nav,.foot{display:none!important}
  .doc-head{background:#fff!important;color:#000!important;padding:0 0 20px}
  .doc-head h1{color:#000!important}
  body{background:#fff}
  .panel,.note,.toc,.doc-body table{box-shadow:none;border-color:#ccc}
}