/* P-120 Teamet on Vilka vi är. Colours, spacing and radii come from tokens.css; buttons, fields, badges and empty state from styles/c/. */
.vk-wrap{container-type:inline-size}
.vk-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
.vk-main{container-type:inline-size;min-width:0}
@container (max-width:900px){.vk-cols{grid-template-columns:minmax(0,1fr)}}
/* the price list grid is built for the full page width: fold it when the left column is narrow */
@container (max-width:640px){.vk-main .pl-row{grid-template-columns:repeat(2,minmax(0,1fr))}.vk-main .pl-btns{grid-column:1/-1}}

.tm-card{container-type:inline-size;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh);padding:var(--s-5);min-width:0}
.tm-head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
.tm-ttl{flex:1;min-width:140px}
.tm-ttl h2{margin:0 0 2px;font-size:var(--fs-md);font-weight:600}
.tm-cnt{display:block;font:500 var(--fs-sm) var(--font-mono);color:var(--muted);min-height:1.2em}
.tm-search{margin-bottom:var(--s-2)}
.tm-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s-3)}
.tm-chip{height:28px;padding:0 11px;border-radius:var(--r-pill);border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--edge-strong);color:var(--ink2);font-size:var(--fs-sm);cursor:pointer}
.tm-chip:hover{box-shadow:inset 0 0 0 1px var(--acc-line)}
.tm-chip[aria-pressed=true]{background:var(--acc-soft);box-shadow:inset 0 0 0 1px var(--acc-line);color:var(--acc-ink)}
.tm-chip:focus-visible,.tm-row:focus-visible,.tm-x:focus-visible{outline:0;box-shadow:var(--glow-ring)}

.tm-list{display:flex;flex-direction:column;gap:6px;padding:0;margin:0;list-style:none}
.tm-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--s-3);align-items:center;width:100%;padding:10px var(--s-3);border:0;border-radius:var(--r-md);
  background:var(--surface2);box-shadow:0 0 0 1px var(--edge2);color:var(--ink);text-align:left;cursor:pointer;transition:box-shadow var(--t) var(--ease)}
.tm-row:hover{box-shadow:0 0 0 1px var(--edge-strong)}
.tm-row.off{opacity:.62}
.tm-av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:600;background:var(--surface3);box-shadow:0 0 0 1px var(--edge);color:var(--acc-ink)}
.tm-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.tm-nm{font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tm-meta{color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.tm-tag{font-size:var(--fs-xs);padding:1px 8px;border-radius:var(--r-pill);background:var(--surface3);color:var(--ink2)}
.tm-cap{text-align:right;min-width:84px}
.tm-n{display:block;font:500 var(--fs-sm) var(--font-mono);white-space:nowrap}
.tm-bar{display:block;height:4px;border-radius:2px;background:var(--surface3);margin-top:5px;overflow:hidden}
.tm-bar:before{content:"";display:block;height:100%;width:var(--p,0%);background:var(--acc)}
.tm-bar.hi:before{background:var(--amber)}
.tm-none{text-align:center;padding:var(--s-5) 0}
.tm-none p{color:var(--muted);margin:0 0 var(--s-2)}
.tm-trust{margin:var(--s-3) 0 0}
.tm-empty{box-shadow:none;background:transparent;padding:var(--s-5) var(--s-2)}
.tm-exist{margin-top:var(--s-4);text-align:left}
.tm-lab{font:500 var(--fs-xs) var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.tm-exist .hint{margin:2px 0 var(--s-2)}

/* inspector: glass panel from the right, full screen on phones */
.tm-scrim{position:fixed;inset:0;background:var(--scrim);z-index:60}
.tm-insp{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--sh-pop);z-index:61;
  transform:translateX(105%);visibility:hidden;transition:transform var(--t) var(--ease),visibility var(--t)}
.tm-insp.on{transform:none;visibility:visible}
.tm-ifm{display:flex;flex-direction:column;height:100%}
.tm-ih{display:flex;align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-5) var(--s-2)}
.tm-ih h2{margin:0;font-size:var(--fs-lg);letter-spacing:-.02em}
.tm-x{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:var(--surface2);color:var(--ink2);cursor:pointer}
.tm-x .i{width:18px;height:18px;transform:rotate(45deg)}
.tm-ib{flex:1;overflow:auto;padding:var(--s-2) var(--s-5) var(--s-4)}
.tm-if{display:flex;gap:var(--s-2);justify-content:flex-end;padding:var(--s-3) var(--s-5);box-shadow:0 -1px 0 var(--edge)}
.tm-f{margin-bottom:var(--s-3)}
.tm-f label{display:block;font-size:var(--fs-sm);color:var(--ink2);margin-bottom:var(--s-1)}
.tm-fields input[readonly]{color:var(--ink2);background:var(--surface3)}
.tm-fe{margin:var(--s-1) 0 0;font-size:var(--fs-sm)}
.tm-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.tm-hrs{display:flex;align-items:center;gap:var(--s-3)}
.tm-hrs input{width:96px}
.tm-pct{font:500 var(--fs-sm) var(--font-mono);color:var(--muted)}
.tm-chk{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-1);color:var(--ink)}
.tm-fields [aria-invalid]{box-shadow:0 0 0 1px var(--red)}
.tm-login{margin-top:var(--s-4);padding:var(--s-3);border-radius:var(--r-md);background:var(--surface2);box-shadow:0 0 0 1px var(--edge2)}
.tm-login h3{margin:0 0 var(--s-2)}
.tm-login p{margin:0 0 var(--s-2)}
.tm-login label{display:block;font-size:var(--fs-sm);color:var(--ink2);margin:var(--s-3) 0 var(--s-1)}
.tm-lrow{display:flex;gap:var(--s-2)}
.tm-lrow select{flex:1;min-width:0;width:100%}

@container (max-width:520px){.tm-row{grid-template-columns:40px minmax(0,1fr)}.tm-cap{grid-column:2;text-align:left}}
@media (max-width:640px){
  .tm-card{padding:var(--s-4)}
  .tm-insp{width:100%}
  .tm-two{grid-template-columns:1fr}
  .tm-card input,.tm-insp input:not([type=checkbox]),.tm-insp select,.tm-insp .btn,.tm-card .btn,.tm-chip,.tm-x{min-height:var(--tap)}
  .tm-chip{padding:0 var(--s-4)}
  .tm-x{width:var(--tap)}
  .tm-insp input[type=checkbox]{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){.tm-insp{transition:none}}