/* P-077 Att göra and Tavla. Colours, spacing and type sizes come from tokens.css. */
.lk{color:var(--acc);cursor:pointer;text-decoration:none}.lk:hover{text-decoration:underline}

/* Att göra: list rows */
.tklist{overflow:hidden}
.tk{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line2)}
.tk:last-child{border-bottom:0}
.tk.is-link{cursor:pointer}
.tk.isdone .tkm b{color:var(--muted);font-weight:500}
.tkchk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--faint);background:var(--surface);flex:none;padding:0;display:grid;place-items:center;color:var(--on-acc)}
.tkchk:hover{border-color:var(--acc);background:var(--acc-soft)}
.tkchk.on{background:var(--acc);border-color:var(--acc);cursor:default}.tkchk .i{width:12px;height:12px}
.tkic{color:var(--muted);flex:none;display:grid;place-items:center}
.tkm{min-width:0;flex:1}.tkm b{font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkr{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end}
.tkr input[type=date]{width:auto;height:28px;padding:0 6px;font-size:var(--fs-sm)}.tkr select{height:28px;font-size:var(--fs-sm);max-width:150px}

/* Dialogs and section headings shared by Att göra and Tavla */
.tk-sect{margin:var(--s-4) 0 var(--s-2)}
.tk-sect.tight{margin:var(--s-3) 0 var(--s-2)}
.tk-lead{margin:0 0 var(--s-3)}
.tk-flat{margin:0}
.tk-fh{margin:var(--s-1) 0 0}
.tk-p{margin:0;font-size:var(--fs-md)}
.tk-lbl{display:block;margin-top:var(--s-3);font-weight:650;font-size:var(--fs-base)}
.tk-lbl .sub{font-weight:400}
.outs{display:grid;gap:var(--s-1)}.outs .opt{display:flex;gap:var(--s-2);align-items:center;padding:6px var(--s-2);border:1px solid var(--line);border-radius:8px;cursor:pointer}
.skips{max-height:240px;overflow:auto;display:grid;gap:var(--s-2);border:1px solid var(--line);border-radius:8px;padding:var(--s-3);background:var(--surface2)}

/* Tavla: board */
.kb{display:grid;grid-template-columns:repeat(5,minmax(180px,1fr));gap:var(--s-2);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;align-items:start}
.kcol{scroll-snap-align:start;background:var(--surface2);border:0;box-shadow:var(--sh);border-radius:var(--r-lg);min-width:0}
.kcol header{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1) var(--s-2);padding:var(--s-3);box-shadow:inset 0 -1px 0 var(--line2)}
.kc-sum{margin-left:auto;white-space:nowrap}
.kl{display:grid;gap:var(--s-2);padding:var(--s-3);min-height:90px;border-radius:0 0 10px 10px}
.kl.over{background:var(--acc-soft);outline:2px dashed var(--acc-line);outline-offset:-4px}
.kc{background:var(--surface);border:0;border-radius:var(--r-md);padding:var(--s-3);box-shadow:var(--sh);cursor:grab;display:grid;gap:3px;transition:box-shadow var(--t),transform var(--t)}
.kc:hover,.kc:focus-visible{box-shadow:var(--sh-hover);transform:translateY(-1px);outline:0}.kc.drag{opacity:.45}.kc.sel{box-shadow:0 0 0 1.5px var(--acc)}.kc b{font-weight:500;overflow-wrap:anywhere}
.kcm{display:flex;justify-content:space-between;gap:var(--s-2);align-items:baseline}
.kempty{color:var(--faint);font-size:var(--fs-sm);text-align:center;padding:var(--s-4) 0}
.late{color:var(--red)}
.kdrop{border:2px dashed var(--line);border-radius:10px;padding:var(--s-3);text-align:center;color:var(--muted);margin-bottom:var(--s-3)}
.kdrop.over{border-color:var(--red);color:var(--red);background:var(--red-soft)}

/* Tavla: deal dialog */
.person.one{grid-template-columns:minmax(0,1fr)}
.tavla-hist{padding:2px 0}.tavla-hist b{font-weight:500}
.tavla-lostbtn{margin-right:auto}

@media (max-width:640px){
  .tk{flex-wrap:wrap;gap:var(--s-2)}
  .tkm{flex:1 1 calc(100% - 40px)}
  .tkm .sub{overflow-wrap:anywhere}
  .tkr{flex:1 1 100%;justify-content:flex-start}
}