/* Klubbar och grupper (klubbar.js). Bygger på forumets .trow/.post och träffarnas .tr-date/.tr-go. */
.kl-h{font-size:19px;margin:24px 0 12px}
.kl-list{border:1px solid var(--line);border-radius:16px;overflow:hidden}
.kl-card{display:flex;align-items:center;gap:16px;padding:14px 16px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;background:#fff}
.kl-card:first-child{border-top:0}
.kl-card:hover{background:#F7FAF8}
.kl-card>svg{flex:none;width:18px;height:18px;color:var(--muted)}
.kl-flag{flex:none;width:60px;display:flex;justify-content:center}
.kl-cb{flex:1;min-width:0;display:flex;flex-direction:column}
.kl-cb b{font-weight:600;font-size:16px}
.kl-cb small{font-size:13px;color:var(--muted)}
.kl-next{font-size:13px;color:var(--act);margin-top:2px}
.kl-st{flex:none;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--ok-soft);color:var(--ok)}
.kl-st.admin{background:var(--act-mist);color:var(--act)}
.kl-st.wait{background:#FBEFD2;color:#7A5B12}
.kl-st.big{font-size:14px;padding:8px 14px}
.kl-emblem{display:block;height:auto}

/* En klubb */
.kl-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--kc) 10%,#fff) 0%,#fff 100%);border-bottom:1px solid var(--line)}
.kl-hero .wrap{padding-bottom:0}
.kl-id{display:flex;align-items:center;gap:20px;margin:6px 0 18px}
.kl-id h1{margin:0}
.kl-id p{margin:2px 0 0;color:var(--muted)}
.kl-join{margin-left:auto;flex:none}
.kl-join .btn svg{width:16px;height:16px}
.kl-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -4px}
.kl-tabs::-webkit-scrollbar{display:none}
.kl-tabs a{flex:none;padding:12px 14px;font-weight:500;font-size:15px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.kl-tabs a:hover{color:var(--ink)}
.kl-tabs a.on{color:var(--ink);border-bottom-color:var(--kc,var(--act))}
.kl-body{padding-top:24px}
.kl-desc{font-size:17px;line-height:1.65;margin:0 0 18px}
.kl-sech{margin:28px 0 12px}
.kl-side{position:sticky;top:calc(var(--top) + 20px)}
#klMap{height:200px;border-radius:16px;border:1px solid var(--line);margin-bottom:18px}
.kl-pin{position:absolute;transform:translate(-14px,-31px)}
.kl-board,.kl-people{list-style:none;margin:0;padding:0}
.kl-board li,.kl-people li{display:flex;align-items:center;gap:12px;padding:8px 0}
.kl-board span,.kl-people span{display:flex;flex-direction:column}
.kl-board b,.kl-people b{font-weight:600;font-size:15px}
.kl-board small,.kl-people small{font-size:13px;color:var(--muted)}
.kl-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 16px}
.kl-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.kl-bar h2{margin:0}
.kl-bar .btn svg{width:15px;height:15px}
.kl-h3{font-size:16px;color:var(--muted);margin:26px 0 10px}
.kl-dt{margin:6px 0 14px}
.kl-locked{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px dashed #CCD8CF;border-radius:16px;max-width:560px}
.kl-locked>svg{flex:none;width:22px;height:22px;color:var(--act);margin-top:2px}
.kl-locked p{margin:4px 0 14px;color:var(--muted)}
/* Möten */
.kl-meet{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:16px;margin-bottom:10px;background:#fff}
.kl-meet.past{background:#FAFBFA}
.kl-mb{flex:1;min-width:0;display:flex;flex-direction:column}
.kl-mb b{font-size:16px;font-weight:600}
.kl-mb small{font-size:13px;color:var(--muted)}
.kl-mb details{margin-top:8px;font-size:14px}
.kl-mb summary{cursor:pointer;color:var(--act);font-weight:500}
.kl-mb ol{margin:6px 0 0;padding-left:20px}
.kl-mb details p{margin:6px 0 0;white-space:pre-line}
/* Regler */
.kl-rules section{padding:16px 0;border-top:1px solid var(--line)}
.kl-rules section:first-child{border-top:0;padding-top:0}
.kl-rules h3{display:flex;align-items:center;gap:10px;font-size:17px;margin:0 0 8px}
.kl-rules h3 span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--act-mist);color:var(--act);font-size:13px}
.kl-rules ul{margin:0;padding-left:56px}
.kl-rules li{margin:4px 0}
/* Chatt */
.kl-chat{display:flex;flex-direction:column;height:calc(100dvh - var(--top) - 260px);min-height:380px;max-width:760px}
.kl-chat .ch-list{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#FBFCFB}
/* Grupper */
.kl-gbadge{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:var(--kc);color:#fff;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25)}
.kl-gbadge svg{width:52%;height:52%}
.kl-pin.g{transform:translate(-14px,-14px)}
.kl-filters{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.kl-tchips{flex:1;min-width:0}
.kl-chipic svg{width:15px;height:15px;display:block;margin-right:6px}
.kl-tchips .chip{display:inline-flex;align-items:center}
.kl-kinds{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kl-kinds label{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;cursor:pointer}
.kl-kinds label.on{border-color:var(--act);box-shadow:inset 0 0 0 1px var(--act);background:var(--act-mist)}
.kl-kinds input{position:absolute;opacity:0}
.kl-kinds b{font-weight:600}
.kl-kinds small{font-size:13px;color:var(--muted);line-height:1.45}
.kl-cover{width:100%;height:240px;object-fit:cover;border-radius:18px;display:block;margin-bottom:18px}
/* Resor */
.kc-add{cursor:pointer}
.kc-add input{display:none}
.kc-add svg{width:15px;height:15px}
.kc-rule{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);background:var(--act-mist);border-radius:12px;padding:12px 14px;margin:0 0 16px;max-width:760px}
.kc-rule svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--act)}
.kc-tops{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.kc-tops div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column}
.kc-tops span{font-size:13px;color:var(--muted)}
.kc-tops b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.kc-tops small{font-size:12px;color:var(--muted)}
.kc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.kc-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.kc-ph{position:relative;aspect-ratio:4/3;background:#E4ECE6}
.kc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.kc-cr{position:absolute;left:10px;top:10px;font-size:11px;font-weight:600;color:#fff;background:rgba(31,107,58,.92);border-radius:999px;padding:3px 9px}
.kc-b{position:relative;padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px}
.kc-b b{font-weight:600;padding-right:52px}
.kc-b small{font-size:13px;color:var(--muted)}
.kc-like{position:absolute;right:10px;top:10px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 10px;font-size:13px;color:var(--muted);min-height:30px}
.kc-like.on{color:#C2412D;border-color:#E8B4AA;background:#FCEFEC}

/* Avgifter */
.kf-switch{display:inline-flex;background:#EEF3EF;border-radius:999px;padding:3px;margin-bottom:18px}
.kf-switch button{border:0;background:none;border-radius:999px;padding:7px 16px;font-size:14px;font-weight:500;color:var(--muted);min-height:36px}
.kf-switch button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(20,38,28,.15)}
.kf-left{font-weight:600;color:var(--ink)}
.kf-list{border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:760px}
.kf-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--line)}
.kf-row:first-child{border-top:0}
.kf-rb{flex:1;min-width:0;display:flex;flex-direction:column}
.kf-rb b{font-weight:600}
.kf-rb small{font-size:13px;color:var(--muted)}
.kf-amt{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.kf-st{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.kf-st.ok{background:var(--ok-soft);color:var(--ok)}
.kf-st.open{background:#EEF3EF;color:var(--muted)}
.kf-st.late{background:#FCEBE8;color:#B03A2E}
.kf-acts{display:flex;gap:8px}
.kf-acts .btn svg{width:15px;height:15px}
.kf-kpis b.late{color:#B03A2E}
.kf-fees{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.kf-fee{border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.kf-fee b{font-weight:600}
.kf-fee small{display:block;font-size:13px;color:var(--muted)}
.kf-bar{height:8px;border-radius:4px;background:#EEF3EF;overflow:hidden}
.kf-bar i{display:block;height:100%;background:var(--ok);border-radius:4px}
.kf-n{font-size:12px!important}
.kf-mh{margin-top:26px}
.kf-mh .chips-row{flex-wrap:wrap}
.kf-remind{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;border-radius:12px;background:#FCEBE8;color:#7A2A20;margin-bottom:12px;font-size:15px}
.kf-table{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
.kf-table table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.kf-table th{text-align:left;font-weight:500;color:var(--muted);font-size:13px;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.kf-table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.kf-table tr:first-child td{border-top:0}
.kf-table td b{display:block;font-weight:600}
.kf-table td small{font-size:12px;color:var(--muted)}
.kf-table td.na{color:#BCC6C0}
.kf-mark{display:block;font-size:12px;margin-top:4px}
.kf-methods{display:flex;gap:10px;margin:14px 0 8px;flex-wrap:wrap}
.kf-methods label{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.kf-methods input{accent-color:var(--act)}

/* Starta */
.kl-newflag{display:flex;align-items:center;gap:24px;margin-top:10px}
.kl-colors{display:flex;gap:10px;flex-wrap:wrap}
.kl-colors input{position:absolute;opacity:0}
.kl-colors span{display:block;width:36px;height:36px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.kl-colors input:checked+span{outline:3px solid var(--ink);outline-offset:2px}
.kl-colors input:focus-visible+span{outline:3px solid var(--act);outline-offset:2px}

@media (max-width:860px){
  .kl-card{gap:12px;padding:12px}
  .kl-flag{width:46px}
  .kl-flag svg{width:46px}
  .kl-id{flex-wrap:wrap;gap:14px}
  .kl-id .kl-emblem{width:54px}
  .kl-join{margin-left:0;width:100%}
  .kl-join .btn{width:100%}
  .kl-side{position:static;margin-top:24px}
  .kl-hero.compact .back,.kl-hero.compact .kl-id p,.kl-hero.compact .kl-join{display:none}
  .kl-hero.compact .kl-id{flex-wrap:nowrap;margin:10px 0 6px}
  .kl-hero.compact .kl-emblem{width:34px}
  .kl-hero.compact h1{font-size:20px}
  .kl-hero.compact~.kl-body{padding-top:12px}
  .kl-chat{height:calc(100dvh - var(--top) - var(--tab) - 200px);min-height:300px}
  .kl-chat~*{display:none}
  .kl-rules ul{padding-left:36px}
  .kl-kinds{grid-template-columns:1fr}
  .kl-filters{flex-direction:column;align-items:stretch;flex-wrap:nowrap}
  .kl-tchips{margin:0 -16px;padding:2px 16px}
  .kl-filters .fo-reg select{width:100%}
  .kl-cover{height:180px;margin:0 -16px 16px;width:calc(100% + 32px);border-radius:0}
  .kc-grid{grid-template-columns:1fr 1fr;gap:10px}
  .kc-b{padding:10px 10px 12px}
  .kc-b b{font-size:14px;padding-right:0}
  .kc-like{position:static;align-self:flex-start;margin-top:6px}
  .kl-meet{gap:12px;padding:12px;flex-wrap:wrap}
  .kl-meet .tr-go{margin-left:64px}
}