/* ok-index.css — shared content-index pages (slots · spelutvecklare · guider).
   Depends on ok-trust.css for the dark hero (.ok-trust-hero + .ok-trust-kicker/-lead). */
.ok-index-page{background:var(--ok-bg);padding-bottom:64px}
.oki-body{padding-top:30px}
.oki-count{font-family:var(--ok-font-display);font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ok-text-soft);margin:0 0 18px}
.ok-index-page .ok-empty{color:var(--ok-text-soft);font-size:15px;padding:20px 0}
.ok-index-page .ok-disc{margin-top:22px}

/* ── Game grid (slots) ── */
.oki-gamegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:8px}
.oki-gamecard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ok-line);border-radius:14px;overflow:hidden;text-decoration:none;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow .2s var(--ok-ease,ease),transform .2s var(--ok-ease,ease)}
.oki-gamecard:hover{box-shadow:var(--ok-shadow,0 8px 24px rgba(11,16,34,.1));transform:translateY(-2px)}
.oki-game-art{display:block;aspect-ratio:16/10;background:var(--ok-surface-cool,#eef1f7);overflow:hidden}
.oki-game-art img{width:100%;height:100%;object-fit:cover;display:block}
.oki-game-body{display:flex;flex-direction:column;gap:7px;padding:14px 15px 16px}
.oki-game-title{font-family:var(--ok-font-display);font-size:15.5px;letter-spacing:-.01em;color:var(--ok-ink);line-height:1.25}
.oki-game-prov{display:flex;align-items:center;min-height:20px;font-size:12px;color:var(--ok-text-soft)}
.oki-game-prov img{max-height:18px;width:auto}
.oki-game-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px}
.oki-game-stats em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ok-green-ink,#0d7a4f);background:var(--ok-surface-mint,#e6f6ee);padding:3px 8px;border-radius:6px}

/* ── Provider grid (spelutvecklare) ── */
.oki-provgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:8px}
.oki-provcard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:22px 16px}
.oki-prov-logo{display:grid;place-items:center;height:44px}
.oki-prov-logo img{max-height:40px;max-width:150px;width:auto;object-fit:contain}
.oki-prov-initial{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:var(--ok-surface-cool,#eef1f7);font-family:var(--ok-font-display);font-size:20px;color:var(--ok-ink)}
.oki-prov-name{font-family:var(--ok-font-display);font-size:15.5px;color:var(--ok-ink)}
.oki-prov-count{font-size:12.5px;color:var(--ok-text-soft)}

/* ── Guide grid (guider) ── */
.oki-guidegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px;margin-bottom:8px}
.oki-guidecard{display:flex;flex-direction:column;gap:9px;background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:22px;text-decoration:none;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow .2s var(--ok-ease,ease),transform .2s var(--ok-ease,ease)}
.oki-guidecard:hover{box-shadow:var(--ok-shadow,0 8px 24px rgba(11,16,34,.1));transform:translateY(-2px)}
.oki-guide-ic{width:38px;height:38px;border-radius:10px;background:var(--ok-surface-mint,#e6f6ee);color:var(--ok-green-ink,#0d7a4f);display:grid;place-items:center}
.oki-guide-ic .oki-ic{width:19px;height:19px}
.oki-guide-title{font-family:var(--ok-font-display);font-size:18px;color:var(--ok-ink);line-height:1.25}
.oki-guide-ex{margin:0;font-size:13.5px;line-height:1.55;color:var(--ok-text-soft)}
.oki-guide-link{margin-top:auto;font-family:var(--ok-font-display);font-weight:700;font-size:13.5px;color:var(--ok-green-ink,#0d7a4f)}

/* ── Verktyg (calculators) ── */
.oki-tools{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.oki-tool{background:#fff;border:1px solid var(--ok-line);border-radius:16px;padding:24px}
.oki-tool h2{margin:0 0 4px;font-family:var(--ok-font-display);font-size:20px;color:var(--ok-ink);line-height:1.2}
.oki-tool-lead{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ok-text-soft)}
.oki-tool-grid{display:flex;flex-wrap:wrap;gap:12px}
.oki-tool label{display:flex;flex-direction:column;gap:6px;flex:1 1 130px;font-family:var(--ok-font-display);font-size:12.5px;font-weight:700;color:var(--ok-ink)}
.oki-tool input{font:inherit;font-size:16px;font-weight:600;color:var(--ok-ink);padding:10px 12px;border:1px solid var(--ok-line);border-radius:9px;background:var(--ok-surface-cool,#f4f6fb);width:100%}
.oki-tool input:focus{outline:2px solid var(--ok-green,#17b978);outline-offset:1px;border-color:transparent}
.oki-tool-result{margin:16px 0 0;padding:15px 17px;border-radius:11px;background:var(--ok-surface-mint,#e6f6ee);font-size:15px;line-height:1.5;color:var(--ok-ink)}
.oki-tool-result b{font-family:var(--ok-font-display);font-size:19px;color:var(--ok-green-ink,#0d7a4f)}
.oki-tool-result .oki-tool-sub{display:block;margin-top:4px;font-size:12.5px;color:var(--ok-text-soft)}
.oki-tool-note{margin:13px 0 0;font-size:12.5px;line-height:1.55;color:var(--ok-text-soft)}
.oki-tool-rg{margin-top:6px;padding:16px 18px;border:1px solid var(--ok-line);border-radius:12px;background:#fff;font-size:13px;line-height:1.6;color:var(--ok-text-soft)}
.oki-tool-rg b{color:var(--ok-ink)}
.oki-tool-rg a{color:var(--ok-green-ink,#0d7a4f);font-weight:600}
/* ── Verktygssviten (sex verktyg) ── */
.oki-tool--wide{grid-column:1/-1}
.oki-tool select{font:inherit;font-size:15px;font-weight:600;color:var(--ok-ink);padding:10px 12px;border:1px solid var(--ok-line);border-radius:9px;background:var(--ok-surface-cool,#f4f6fb);width:100%}
.oki-tool select:focus{outline:2px solid var(--ok-green,#17b978);outline-offset:1px;border-color:transparent}
.oki-tool-grid+.oki-tool-grid{margin-top:12px}
.oki-tool-prenote{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--ok-text-soft)}
.oki-tool-result--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px}
.oki-tool-result--grid>div{display:flex;flex-direction:column;gap:2px}
.oki-tool-result--grid>div span{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ok-text-soft)}
.oki-tool-result--grid .oki-tool-verdict{grid-column:1/-1;margin:6px 0 0;font-size:14px;color:var(--ok-ink)}
.oki-tool-formel{margin:13px 0 0}
.oki-tool-formel summary{cursor:pointer;font-family:var(--ok-font-display);font-size:13px;font-weight:700;color:var(--ok-ink)}
.oki-tool-formel p{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--ok-text-soft)}
.oki-tool-result--table{background:transparent;padding:0}
.oki-uk-casino{background:var(--ok-surface-mint,#e6f6ee);border-radius:11px;padding:13px 16px;margin-bottom:10px}
.oki-uk-name{margin:0 0 6px;font-family:var(--ok-font-display);font-size:15px;color:var(--ok-ink)}
.oki-uk-name a{color:var(--ok-ink)}
.oki-uk-checked{font-family:var(--ok-font-body);font-size:11.5px;font-weight:400;color:var(--ok-text-soft);margin-left:6px}
.oki-uk-casino ul{margin:0;padding-left:18px;font-size:14px;line-height:1.7}
.oki-uk-casino b{font-size:inherit;font-family:inherit;color:var(--ok-ink)}
.oki-tool-rank{margin-top:14px;font-size:13.5px}
.oki-tool-rank ol{margin:4px 0 0;padding-left:20px;line-height:1.8}
@media(max-width:760px){.oki-tools--suite{grid-template-columns:1fr}}
/* Kommersiella moduler på verktygssidan (okc/okgd-stilar via ok-guide.css) */
.okv-commercial{margin:34px 0 26px}
.okv-commercial-grid{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:18px;align-items:start;margin-top:6px}
@media(max-width:860px){.okv-commercial-grid{grid-template-columns:1fr}}
.okv-toolcta{margin:14px 0 2px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.okv-ctarev{font-size:13px;font-weight:600;color:var(--ok-action)}
.okv-ukcta{display:block;margin-top:10px}
.oki-body .okgd-endcta{margin:26px 0}
/* Embed-läge på systersidor: ett verktyg i full bredd inuti en ok-sec */
.oki-tools--embed{grid-template-columns:1fr;margin:14px 0 0}
.oki-tools--embed .oki-tool{grid-column:1/-1}
.okv-embed-more{margin:12px 0 0;font-size:13.5px}
.okv-embed-more a{font-weight:600;color:var(--ok-action)}

/* ── Provider catalog (spelutvecklare v2) ── */
.oki-prose{max-width:72ch;margin-bottom:8px}
.oki-prose p{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--ok-text-soft)}
.oki-prose a{color:var(--ok-green-ink,#0d7a4f);font-weight:600}
.oki-body .oki-h2{font-family:var(--ok-font-display);font-size:24px;letter-spacing:-.015em;color:var(--ok-ink);margin:34px 0 16px}
.oki-featgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.oki-featcard{background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.oki-feat-head{display:flex;align-items:center;gap:12px}
.oki-feat-logo{display:grid;place-items:center;width:92px;height:40px;flex:0 0 auto}
.oki-feat-logo img{max-height:34px;max-width:88px;width:auto;object-fit:contain}
.oki-feat-fallback{font-family:var(--ok-font-display);font-size:15px;color:var(--ok-ink);line-height:1.15}
.oki-feat-id{min-width:0;flex:1}
.oki-feat-name{display:block;font-family:var(--ok-font-display);font-size:17px;color:var(--ok-ink);line-height:1.2}
.oki-feat-meta{display:block;font-size:12px;color:var(--ok-text-soft);margin-top:2px}
.oki-feat-badge{flex:0 0 auto;font-family:var(--ok-font-display);font-weight:700;font-size:11px;color:var(--ok-green-ink,#0d7a4f);background:var(--ok-surface-mint,#e6f6ee);padding:5px 9px;border-radius:7px;white-space:nowrap}
.oki-feat-txt{margin:0;font-size:14px;line-height:1.6;color:var(--ok-text-soft)}
.oki-feat-chips{display:flex;flex-wrap:wrap;gap:7px}
.oki-feat-chips a,.oki-feat-chips span{font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:8px;border:1px solid var(--ok-line);color:var(--ok-ink);text-decoration:none;background:var(--ok-surface-cool,#f4f6fb)}
.oki-feat-chips a{color:var(--ok-green-ink,#0d7a4f);border-color:rgba(13,122,79,.28);background:var(--ok-surface-mint,#e6f6ee)}
.oki-feat-chips a:hover{filter:brightness(.96)}
.oki-feat-more{display:inline-block;margin-top:10px;font-weight:600;font-size:14px;color:var(--ok-link);text-decoration:none}
.oki-feat-more:hover{text-decoration:underline}
.oki-pr-name a{color:var(--ok-green-deep);text-decoration:none}
.oki-pr-name a:hover{text-decoration:underline}
.oki-feat-notis{margin:0;font-size:12px;color:var(--ok-muted,#8a93ab)}
.oki-provrows{border:1px solid var(--ok-line);border-radius:13px;overflow:hidden;background:#fff}
.oki-provrow{display:grid;grid-template-columns:200px 150px minmax(0,1fr);gap:14px;align-items:baseline;padding:13px 18px}
.oki-provrow:nth-child(even){background:var(--ok-surface-cool,#f7f8fb)}
.oki-pr-name{display:flex;align-items:baseline;gap:8px;min-width:0}
.oki-pr-name b{font-family:var(--ok-font-display);font-size:14.5px;color:var(--ok-ink)}
.oki-pr-count{font-size:10.5px;font-weight:700;color:var(--ok-green-ink,#0d7a4f);background:var(--ok-surface-mint,#e6f6ee);padding:2px 6px;border-radius:5px;white-space:nowrap}
.oki-pr-meta{font-size:12.5px;color:var(--ok-text-soft);white-space:nowrap}
.oki-pr-txt{margin:0;font-size:13px;line-height:1.5;color:var(--ok-text-soft)}
.oki-pr-txt i{font-style:normal;color:var(--ok-muted,#8a93ab)}
.oki-pr-games{color:var(--ok-muted,#8a93ab)}
.oki-pr-up{color:var(--ok-green-ink,#0d7a4f);font-weight:600;text-decoration:none}
.oki-pr-up:hover{text-decoration:underline}
.oki-showmore-wrap{margin:14px 0 0;text-align:center}
.oki-showmore{font:inherit;font-family:var(--ok-font-display);font-weight:700;font-size:14px;color:var(--ok-ink);background:#fff;border:1px solid var(--ok-line);border-radius:10px;padding:11px 22px;cursor:pointer;transition:box-shadow .15s ease}
.oki-showmore:hover{box-shadow:var(--ok-shadow,0 6px 18px rgba(11,16,34,.08))}
.oki-faq{max-width:76ch}
.oki-faq details{background:#fff;border:1px solid var(--ok-line);border-radius:11px;margin-bottom:10px;overflow:hidden}
.oki-faq summary{cursor:pointer;font-family:var(--ok-font-display);font-weight:700;font-size:15px;color:var(--ok-ink);padding:14px 18px;list-style:none;position:relative}
.oki-faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--ok-text-soft)}
.oki-faq details[open] summary::after{content:"–"}
.oki-faq summary::-webkit-details-marker{display:none}
.oki-faq details p{margin:0;padding:0 18px 15px;font-size:14px;line-height:1.6;color:var(--ok-text-soft)}
.oki-faq details a{color:var(--ok-green-ink,#0d7a4f);font-weight:600}

/* Inside guide bodies (.ok-trust-body, ~70ch column) the catalog modules adapt:
   featured profiles stack single-column; rows/buttons escape the prose max-width. */
.ok-trust-body .oki-featgrid{grid-template-columns:1fr;gap:12px;margin:18px 0 8px;max-width:none}
.ok-trust-body .oki-provrows{margin:16px 0 0;max-width:none}
.ok-trust-body .oki-showmore-wrap{max-width:none}
.ok-trust-body .oki-feat-txt,.ok-trust-body .oki-feat-notis,.ok-trust-body .oki-pr-txt{max-width:none}

@media(max-width:980px){.oki-gamegrid{grid-template-columns:repeat(3,1fr)}.oki-featgrid{grid-template-columns:1fr}}
@media(max-width:760px){.oki-provrow{grid-template-columns:1fr;gap:3px;padding:12px 15px}.oki-pr-meta{white-space:normal}}
@media(max-width:640px){.oki-gamegrid,.oki-provgrid{grid-template-columns:1fr 1fr}.oki-guidegrid,.oki-tools{grid-template-columns:1fr}}