/* Legal & support pages — /responsible-gambling, /privacy-policy, /terms-and-conditions, /cookie-policy.
 * Built from the home components (tile, led, chip, note, acc, orb). Adds: document layout with a sticky
 * table of contents, numbered sections, long-form prose on dark, tables that turn into cards on mobile,
 * "do potwierdzenia" markers and callouts, the RG photo hero, the self-check. */

/* ---------- document meta in the page head ---------- */
.page-h .page-h__lead{max-width:62ch;text-wrap:pretty}
.dmeta{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.dmeta .led{font-size:14px;letter-spacing:.04em}

/* ---------- review banner (whole document is a draft for legal review) ---------- */
.doc-flag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:start;margin-bottom:22px;padding:16px 18px;border-radius:var(--r-lg);
  background:linear-gradient(100deg,color-mix(in oklab,#F5C451 10%,transparent),transparent 70%),var(--bg-raised);border:1px solid color-mix(in oklab,#F5C451 26%,transparent)}
.doc-flag__ic{grid-row:span 2;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--plate);color:#F5C451;box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.doc-flag b{font-size:14.5px;font-weight:750;color:#FBE6B4}
.doc-flag p{font-size:13.5px;color:var(--text-soft);text-wrap:pretty}

/* ---------- layout: TOC + body ---------- */
.doc{display:grid;grid-template-columns:290px minmax(0,1fr);gap:44px;align-items:start}
.doc__aside{position:sticky;top:128px;max-height:calc(100vh - 144px);overflow-y:auto;scrollbar-width:thin;border-radius:var(--r-tile)}
.doc .toc{padding:20px 14px 14px}
.toc .eyebrow{display:block;padding:0 8px 10px}
.toc ol{display:grid;gap:2px}
.toc a{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;min-height:40px;padding:5px 8px;border-radius:10px;font-size:13.5px;font-weight:650;line-height:1.3;color:var(--text-dim);transition:background var(--dur-fast),color var(--dur-fast)}
.toc a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.toc a.is-on{background:var(--primary-12);color:var(--text)}
.toc .led{font-size:12px;min-width:34px;padding:.32em .3em .28em}
.toc__foot{margin:12px 8px 4px;padding-top:12px;border-top:1px solid var(--hair);display:grid;gap:8px}
.toc__foot .btn{width:100%}

.doc__body{max-width:800px;min-width:0}
.doc-sec{padding:34px 0 6px;border-top:1px solid var(--hair);scroll-margin-top:130px}
.doc-sec:first-child{border-top:0;padding-top:4px}
.doc-sec__h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.doc-sec__h .led{font-size:16px;min-width:46px;height:36px}
.doc-sec__h h2{font-size:clamp(21px,1.9vw,25px);font-weight:800;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.doc-sec:target .doc-sec__h h2{color:var(--primary)}

/* long-form text on dark: 760px measure, calm leading, muted body with bright emphasis */
.prose{max-width:760px;font-size:15.5px;line-height:1.7;color:var(--text-soft)}
.prose > * + *{margin-top:14px}
.prose h3{font-size:16.5px;font-weight:750;color:var(--text);letter-spacing:-.01em;line-height:1.35;margin-top:24px}
.prose strong,.prose b{color:var(--text);font-weight:700}
.prose ul,.prose ol{display:grid;gap:8px}
.prose ul > li{position:relative;padding-left:22px}
.prose ul > li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--primary);transform:translateY(-50%)}
.prose ol{counter-reset:pt}
.prose ol > li{position:relative;padding-left:34px;counter-increment:pt}
.prose ol > li::before{content:counter(pt);position:absolute;left:0;top:.15em;min-width:24px;height:22px;border-radius:6px;display:grid;place-items:center;font:800 12px/1 var(--led);color:var(--primary);background:var(--plate)}
.prose .note{margin-top:18px;font-size:14px;line-height:1.55}
.prose .note p + p{margin-top:6px}
.prose .note b{color:inherit}

/* "do potwierdzenia" marker: never looks like real data */
.pend{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:6px;border:1px dashed color-mix(in oklab,#F5C451 55%,transparent);background:color-mix(in oklab,#F5C451 9%,transparent);
  color:#FBE6B4;font-size:.86em;font-weight:700;letter-spacing:.02em;white-space:nowrap;line-height:1.5}
.callout{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:14px 16px;border-radius:var(--r-md);border:1px dashed color-mix(in oklab,#F5C451 40%,transparent);background:color-mix(in oklab,#F5C451 6%,transparent);font-size:14px;line-height:1.55;color:var(--text-soft)}
.callout > .icon{grid-row:span 2;color:#F5C451;margin-top:2px}
.callout b{display:block;color:#FBE6B4;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.callout--info{border-style:solid;border-color:color-mix(in oklab,var(--info) 24%,transparent);background:var(--info-12)}
.callout--info > .icon{color:var(--info)}
.callout--info b{color:#CFE6FF}

/* key/value card (administrator, contact) */
.kv{display:grid;margin:0;border-radius:var(--r-lg);border:1px solid var(--hair);background:rgba(255,255,255,.025);overflow:hidden}
.kv > div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;padding:13px 16px;align-items:baseline}
.kv > div + div{border-top:1px solid var(--hair)}
.kv dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.kv dd{margin:0;color:var(--text);font-weight:600;overflow-wrap:anywhere}

/* tables → cards on mobile */
.dtable-w{border-radius:var(--r-lg);border:1px solid var(--hair);background:rgba(6,6,11,.35);overflow:hidden}
.dtable{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.dtable caption{caption-side:top;text-align:left;padding:14px 16px 4px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.dtable th,.dtable td{padding:12px 16px;text-align:left;vertical-align:top}
.dtable thead th{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--hair-2);white-space:nowrap}
.dtable tbody tr + tr{border-top:1px solid var(--hair)}
.dtable tbody th{font-weight:750;color:var(--text)}
.dtable td{color:var(--text-soft)}
.dtable code{font:700 13px/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--secondary-soft);background:var(--secondary-16);padding:2px 7px;border-radius:6px;white-space:nowrap}
.dtable small{display:block;color:var(--text-muted);font-size:12.5px;margin-top:2px}

/* state of a cookie category for this visitor */
.cstate{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:var(--r-pill);font-size:12.5px;font-weight:750;white-space:nowrap;border:1px solid var(--hair-2);background:rgba(255,255,255,.04);color:var(--text)}
.cstate::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--text-muted)}
.cstate.is-on{color:var(--primary);border-color:color-mix(in oklab,var(--primary) 30%,transparent);background:var(--primary-12)}
.cstate.is-on::before{background:var(--primary);box-shadow:0 0 8px rgba(200,240,74,.5)}
.cstate--lock{color:var(--text-soft)}

/* rights / facts grid */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fcard{position:relative;padding:16px 16px 15px;border-radius:var(--r-lg);border:1px solid var(--hair);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.fcard__h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.fcard__ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--secondary-16);color:var(--secondary-soft);flex:none}
.fcard__ic .icon{width:18px;height:18px}
.fcard h3{font-size:15px;font-weight:750;letter-spacing:-.01em;line-height:1.3;color:var(--text);margin:0}
.fcard p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0}
.prose .fgrid,.prose .dtable-w,.prose .kv,.prose .callout{margin-top:18px}

/* closing contact strip of a document */
.doc-end{position:relative;overflow:hidden;margin-top:34px;display:flex;align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap}
.doc-end h2{font-size:19px;font-weight:800;letter-spacing:-.02em}
.doc-end p{color:var(--text-muted);font-size:14px;margin-top:4px;max-width:52ch}
.doc-end__act{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Responsible gambling ---------- */
.rg-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-tile);border:1px solid var(--hair);background:#0c0c14;margin:4px 0 18px}
.rg-hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#14141F}
.rg-hero__bg picture,.rg-hero__bg img{position:absolute;inset:0;width:100%;height:100%}
.rg-hero__bg img{object-fit:cover;object-position:62% center}
.rg-hero__bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,10,17,.96) 0%,rgba(10,10,17,.82) 38%,rgba(10,10,17,.3) 72%,rgba(10,10,17,.55) 100%),
  linear-gradient(0deg,rgba(10,10,17,.8),transparent 45%)}
.rg-hero__in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:40px;align-items:end;padding:52px 52px 44px;min-height:440px}
.rg-hero h1{font-size:clamp(38px,4.4vw,62px);font-weight:800;letter-spacing:-.045em;line-height:.98;margin:14px 0}
.rg-hero__lead{color:#D5D6E2;font-size:16.5px;max-width:52ch;text-wrap:pretty}
.rg-hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.rg-hero__panel{justify-self:end;width:100%;max-width:360px;padding:20px;border-radius:18px;background:rgba(14,14,22,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--hair-2);box-shadow:var(--shadow-popover)}
.rg-age{display:flex;align-items:center;gap:14px}
.rg-age .led{font-size:40px;padding:.16em .3em .12em}
.rg-age b{font-size:15px;font-weight:750;line-height:1.3}
.rg-hero__panel p{color:var(--text-muted);font-size:13.5px;margin-top:12px;text-wrap:pretty}
.rg-hero__panel .chip{margin-top:12px}

/* critical warnings: always visible, never inside an accordion */
.warn3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.warn{padding:20px}
.warn .th{margin-bottom:10px}
.warn__ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--plate);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.warn--err .warn__ic{color:var(--danger)}
.warn--warn .warn__ic{color:#F5C451}
.warn--info .warn__ic{color:var(--info)}
.warn--err{background:linear-gradient(160deg,rgba(255,104,122,.12),transparent 60%),var(--bg-raised)}
.warn--warn{background:linear-gradient(160deg,rgba(245,196,81,.1),transparent 60%),var(--bg-raised)}
.warn--info{background:linear-gradient(160deg,rgba(111,184,255,.1),transparent 60%),var(--bg-raised)}
.warn h2,.warn h3{font-size:17px;font-weight:750;letter-spacing:-.015em;line-height:1.25}
.warn p{color:var(--text-soft);font-size:14px;line-height:1.6;text-wrap:pretty}

.rg-sec{margin-top:48px}
.rg-sec .sec-h{align-items:flex-end}
.rg-sec .sec-h > div{max-width:640px}
.sec-h .led{font-size:13px;margin-bottom:10px}
.sec-h__n{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sec-h__n .led{margin:0}

/* risk markers */
.risk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.risk li{position:relative;padding:16px;border-radius:var(--r-lg);border:1px solid var(--hair);background:rgba(255,255,255,.025)}
.risk li .icon{width:20px;height:20px;color:#FFC2CA;margin-bottom:12px}
.risk b{display:block;font-size:14.5px;font-weight:750;line-height:1.3;margin-bottom:5px}
.risk p{font-size:13.5px;color:var(--text-muted);line-height:1.55}

/* control measures */
.meas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.meas .tile{display:flex;flex-direction:column;gap:10px;padding:20px}
.meas .tile .led{font-size:22px;align-self:flex-start;min-width:56px;height:44px}
.meas h3{font-size:17px;font-weight:750;letter-spacing:-.015em;line-height:1.25;display:flex;align-items:center;gap:8px}
.meas h3 .icon{color:var(--primary);width:18px;height:18px}
.meas p{font-size:14px;color:var(--text-muted);line-height:1.6;text-wrap:pretty}
.meas ul{display:grid;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);font-size:13px;color:var(--text-soft)}
.meas ul li{display:flex;gap:8px;align-items:flex-start}
.meas ul .icon{width:15px;height:15px;color:var(--primary);margin-top:3px}

/* self-check */
.sc{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:16px;align-items:start}
.sc__q{display:grid;gap:8px}
.sc__q li{display:block}
.sc__q label{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;min-height:52px;padding:13px 16px;border-radius:var(--r-lg);border:1px solid var(--hair);background:rgba(255,255,255,.025);cursor:pointer;font-size:14.5px;line-height:1.5;color:var(--text-soft);transition:border-color var(--dur-fast),background var(--dur-fast)}
.sc__q label:hover{border-color:var(--hair-2)}
.sc__q input{width:22px;height:22px;margin:0;accent-color:var(--primary);cursor:pointer}
.sc__q label:has(input:checked){border-color:color-mix(in oklab,var(--primary) 40%,transparent);background:var(--primary-12);color:var(--text)}
.sc__res{position:sticky;top:128px;padding:20px}
.sc__score{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sc__score .led{font-size:30px;min-width:92px;height:56px}
.sc__score > span:not(.led){font-size:13px;color:var(--text-muted);font-weight:600;line-height:1.35}
.sc__msg{font-size:14px;line-height:1.6;color:var(--text-soft);min-height:4.8em}
.sc__msg b{color:var(--text)}
.sc__res .btn{margin-top:14px}
.sc__fine{margin-top:12px;font-size:12.5px;color:var(--text-muted);line-height:1.5}

/* relatives: accordion inside a tile */
.rg-two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px;align-items:start}
.rg-two .acc__p p{font-size:14.5px;line-height:1.65}
.rg-two .acc__p ul{display:grid;gap:6px;padding:0 0 14px 2px;color:var(--text-muted);font-size:14px;line-height:1.55}
.rg-two .acc__p ul li{position:relative;padding-left:18px}
.rg-two .acc__p ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--secondary-soft)}

/* help kinds */
.help{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.help .fcard p{color:var(--text-muted)}
.help-sos{display:flex;align-items:center;gap:16px;margin-top:16px;padding:16px 18px;border-radius:var(--r-lg);border:1px solid color-mix(in oklab,var(--danger) 30%,transparent);background:var(--danger-12)}
.help-sos .led{font-size:26px;min-width:72px;height:50px}
.help-sos p{font-size:14.5px;color:#FFE1E5;line-height:1.5}
.help-sos b{color:#fff}

/* CTA band */
.rg-cta{position:relative;overflow:hidden;margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center;padding:30px 32px;
  background:radial-gradient(600px 220px at 0 0,rgba(200,240,74,.1),transparent 70%),linear-gradient(180deg,color-mix(in oklab,var(--surface) 86%,var(--bg-raised)),var(--bg-raised))}
.rg-cta h2{font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.rg-cta p{color:var(--text-muted);margin-top:8px;max-width:60ch;font-size:14.5px;text-wrap:pretty}
.rg-cta__act{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:1279px){
  .doc{grid-template-columns:250px minmax(0,1fr);gap:32px}
  .risk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .meas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1099px){
  .doc{grid-template-columns:minmax(0,1fr);gap:20px}
  .doc__aside{position:static;max-height:none;overflow:visible}
  .doc .toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px}
  .doc__body{max-width:none}
  .rg-hero__in{grid-template-columns:minmax(0,1fr);gap:24px;padding:40px 32px 32px;min-height:0}
  .rg-hero__panel{justify-self:start;max-width:460px}
  .warn3,.help{grid-template-columns:minmax(0,1fr)}
  .sc,.rg-two{grid-template-columns:minmax(0,1fr)}
  .sc__res{position:relative;top:auto}
  .rg-cta{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .dmeta .led{font-size:13px}
  .doc-flag{padding:14px;gap:4px 12px}
  .doc-flag__ic{width:36px;height:36px;grid-row:auto}
  .doc-flag p{grid-column:1/-1}
  .doc .toc{padding:16px 10px 10px}
  .doc .toc ol{grid-template-columns:minmax(0,1fr)}
  .toc a{min-height:44px}
  .doc-sec{padding-top:28px}
  .doc-sec__h{gap:12px;align-items:flex-start}
  .doc-sec__h .led{font-size:14px;min-width:42px;height:32px;flex:none}
  .doc-sec__h h2{padding-top:3px}
  .prose{font-size:15px;line-height:1.65}
  .kv > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  /* tables become stacked cards */
  .dtable-w{background:none;border:0;border-radius:0;overflow:visible}
  .dtable caption{padding:0 0 8px}
  .dtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .dtable,.dtable tbody,.dtable tr,.dtable th,.dtable td{display:block;width:100%}
  .dtable tbody{display:grid;gap:10px}
  .dtable tbody tr{border:1px solid var(--hair);border-radius:var(--r-lg);background:rgba(255,255,255,.03);padding:6px 0}
  .dtable tbody tr + tr{border-top:1px solid var(--hair)}
  .dtable tbody th{padding:10px 14px 6px;font-size:15px}
  .dtable td{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:7px 14px;font-size:14px}
  .dtable td::before{content:attr(data-label);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);padding-top:2px}
  .dtable code{white-space:normal;overflow-wrap:anywhere}
  .dtable td > :not(code){grid-column:2}
  .dtable td > .cstate{justify-self:start}
  .doc-end{flex-direction:column;align-items:stretch}
  .doc-end__act .btn{flex:1 1 100%}

  .rg-hero{border-radius:18px}
  .rg-hero__bg img{object-position:72% center}
  .rg-hero__bg::after{background:linear-gradient(180deg,rgba(10,10,17,.72),rgba(10,10,17,.9) 55%,rgba(10,10,17,.96))}
  .rg-hero__in{padding:26px 18px 18px}
  .rg-hero h1{font-size:40px}
  .rg-hero__lead{font-size:15px}
  .rg-hero__cta .btn{flex:1 1 100%}
  .rg-hero__panel{max-width:none;padding:16px}
  .rg-age .led{font-size:32px}
  .rg-sec{margin-top:36px}
  .risk,.meas{grid-template-columns:minmax(0,1fr)}
  .meas .tile{padding:16px}
  .sc__q label{padding:12px 14px;font-size:14px}
  .help-sos{align-items:flex-start}
  .rg-cta{padding:22px 18px;margin-top:36px}
  .rg-cta__act .btn{flex:1 1 100%}
}

/* late additions: RG tiles */
.help-sos + .callout{margin-top:12px}
.t-info .th{margin-bottom:12px}
.t-info .th .icon{width:20px;height:20px}
.h3-tile{font-size:18px;font-weight:750;letter-spacing:-.015em;line-height:1.25}
@media (max-width:767px){
  .risk li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;padding:14px}
  .risk li .icon{margin:2px 0 0;grid-row:span 2}
}
/* orbit ornament stays in the corner — its dot must not land on copy */
.rg-cta .orb,.doc-end .orb,.toc .orb{right:-150px;top:-78px}
@media (max-width:767px){
  main .orb{right:-175px;top:-92px}
}
/* collapsed accordion content is out of reading order and hit-testing */
.rg-two .acc__p > div{visibility:hidden;transition:visibility .24s}
.rg-two .acc__b[aria-expanded=true] + .acc__p > div{visibility:visible;transition:none}
.rg-hero__panel .chip{height:auto;min-height:26px;padding:4px 10px;white-space:normal;line-height:1.3}
/* short inline links never break across lines */
.prose a:not(.btn){white-space:nowrap}
@media (max-width:767px){
  .dtable thead{display:none}
}

@media (max-width: 389px) { .rg-hero h1 { font-size: 32px; overflow-wrap: anywhere; } }
