/* Team (26 Oct 2026): People A1 + card T2 · Shift teams and Departments summary cards · people search in the top bar */
.tm-page{--tm-none:#E3E5F2;--tm-part-ink:#232842}
[data-theme="dark"] .tm-page{--tm-none:#3A4160;--tm-part-ink:#151827}

/* card T2 — how the team is made up */
.tm-made{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;align-items:center;padding:16px 18px}
.tm-made-n{display:flex;flex-direction:column;gap:2px;padding:0 6px}
.tm-made-n strong{font:800 40px/1.1 Manrope,var(--font-body)}
.tm-made-n span{font-size:14px;color:var(--ink-2)}
.tm-made-n small{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.45}
.tm-up{color:var(--dk-present-ink,#16733F);font-weight:600}.tm-down{color:var(--dk-absent-ink,#A93226);font-weight:600}
.tm-mixes{display:flex;flex-direction:column;gap:4px;min-width:0}
.tm-mix{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:center;padding:4px 6px}
.tm-mix-lbl{font-size:13px;color:var(--ink-2)}
.tm-mix-bar{display:flex;gap:2px;height:24px;border-radius:7px;overflow:hidden;min-width:0}
.tm-part{min-width:6px;border:0;padding:0 4px;margin:0;cursor:pointer;font:600 11px/24px var(--font-body);color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center;justify-content:center}
.tm-part.light{color:var(--tm-part-ink)}
.tm-part span{overflow:hidden;text-overflow:ellipsis}
.tm-part:hover{filter:brightness(1.06)}
.tm-part:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.tm-mix-bar:has(.tm-part.on) .tm-part:not(.on){opacity:.35}
.tm-part.on{box-shadow:inset 0 0 0 2px var(--ink)}
.detail-hint.tm-made-hint{margin:-16px 4px 0;font-size:12px}

/* the list */
.tm-list{padding:18px 20px}
.tm-filters{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tm-filters-l,.tm-filters-r{display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.tm-filters .search{width:220px;max-width:100%}
.tm-filters-r{margin-left:auto}
.tm-filters .ctrl,.tm-filters .select-trigger{min-height:40px}
.tm-chips{display:contents}
.tm-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 11px;border-radius:999px;background:var(--green-soft);color:var(--dk-tone-ink,#3F4585);font-size:12px;font-weight:600;white-space:nowrap}
.tm-chip button{border:0;background:none;color:inherit;font:600 15px/1 var(--font-body);width:26px;height:26px;border-radius:50%;cursor:pointer}
.tm-chip button:hover{background:rgba(90,97,168,.16)}
.tm-clear{border:0;background:none;padding:6px 2px;color:var(--dk-tone-ink,#3F4585);font:600 13px var(--font-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.tm-list .pick-bar{margin:12px 0 0}
.tm-table{margin-top:12px}
.tm-role{display:flex;flex-direction:column}.tm-role small,.tm-pay small{font-size:12px;color:var(--ink-3)}
.tm-pay{display:flex;flex-direction:column;align-items:flex-end}
.tm-muted{color:var(--ink-3)}
.tm-acts{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.tm-chev{color:var(--ink-3);font-size:18px;width:12px;text-align:right}
.tm-more-wrap{position:relative}
.tm-more{width:36px;padding:0!important;font-size:18px!important;line-height:1}
.tm-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:210px;padding:6px;border-radius:12px;background:var(--glass-solid,#fff);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);box-shadow:0 14px 34px rgba(40,46,90,.18);display:flex;flex-direction:column}
.tm-menu[hidden]{display:none}
.tm-menu button{border:0;background:none;color:inherit;text-align:left;font:500 14px var(--font-body);padding:10px 12px;border-radius:8px;cursor:pointer;min-height:40px}
.tm-menu button:hover,.tm-menu button:focus-visible{background:var(--green-soft)}
.tm-menu button.danger{color:var(--dk-absent-ink,#A93226);border-top:1px solid var(--line-2);border-radius:0 0 8px 8px}
/* ticks and ⋯ show on hover or focus (owner: the select bar showed all the time); always on touch screens */
@media (hover:hover){
  .tm-table .person-pick>input[type="checkbox"]{opacity:0;transition:opacity .12s}
  .tm-table tr:hover .person-pick>input,.tm-table .person-pick>input:focus-visible,.tm-table .person-pick>input:checked,.tm-table.tm-picking .person-pick>input{opacity:1}
  .tm-table .tm-more{opacity:0;transition:opacity .12s}
  .tm-table tr:hover .tm-more,.tm-table tr.tm-menu-open .tm-more,.tm-table .tm-more:focus-visible{opacity:1}
}

/* Shift teams and Departments: one summary card under the title */
.tm-sum{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;padding:16px 18px}
.tm-sum.three{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr)}
.tm-sum-main{padding:4px 6px;min-width:0}
.tm-sum-lbl{font-size:13px;color:var(--ink-3)}
.tm-sum-big{font:800 34px/1.1 Manrope,var(--font-body);margin-top:4px}.tm-sum-big small{font-size:18px;color:var(--ink-3);font-weight:700}
.tm-sum-note{font-size:12px;color:var(--ink-3);margin-top:6px}
.tm-box{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:16px;background:var(--glass-2,rgba(255,255,255,.5));border:1px solid var(--line-2);min-width:0;text-align:left;font:inherit;color:inherit}
button.tm-box{cursor:pointer}button.tm-box:hover{border-color:var(--dk-tone-line,#8F96D6)}
.tm-box .k{font-size:13px;color:var(--ink-3)}
.tm-box .v{font-size:18px;font-weight:700;margin-top:2px;overflow-wrap:anywhere}
.tm-box .v.num{font:800 22px Manrope,var(--font-body)}
.tm-box small{font-size:12px;color:var(--ink-3);line-height:1.4}
.tm-box.warn{background:var(--dk-half-soft,#FBF3E3);border-color:color-mix(in srgb,#B7791F 30%,transparent)}
.tm-box.warn .k,.tm-box.warn small{color:var(--dk-half-ink,#7A4E0E)}.tm-box.warn .k{font-weight:600}
.tm-box.bad{background:var(--dk-absent-soft,#FBEDE8);border-color:color-mix(in srgb,#C0392B 28%,transparent)}
.tm-box.bad .k,.tm-box.bad small{color:var(--dk-absent-ink,#8A3624)}.tm-box.bad .k{font-weight:600}
.tm-box .v.sm{font-size:15px;font-weight:600}
.tm-posts{display:flex;gap:4px;margin-top:10px}
.tm-posts i{flex:1;height:10px;border-radius:3px;box-sizing:border-box}
.tm-posts .p-day{background:#E0A03A}.tm-posts .p-night{background:var(--dk-tone-line,#454F96)}
.tm-posts .p-due{border:2px solid var(--line)}.tm-posts .p-gap{border:2px dashed var(--dk-absent-ink,#C0392B)}
.tm-split{display:flex;gap:3px;height:18px;border-radius:6px;overflow:hidden;margin-top:10px}
.tm-split i{min-width:3px}
.tm-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:var(--ink-2)}
.tm-legend span{display:inline-flex;align-items:center;gap:5px}.tm-legend i{width:8px;height:8px;border-radius:2px}

/* Departments: a card per department */
.dp-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.dp-tools>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dp-tools .search{width:240px;max-width:100%}
.dp-cards{--fit-gap:14px}
.dp-card{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0;margin:0}
.dp-card:hover{border-color:var(--dk-tone-line,#8F96D6)}
.dp-card.odd{border-color:color-mix(in srgb,#B7791F 45%,transparent)}
.dp-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dp-top b{display:inline-flex;align-items:center;gap:8px;font-size:17px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.dp-top b i{width:10px;height:10px;border-radius:3px;flex:none}
.dp-top span{font-size:13px;color:var(--ink-3);white-space:nowrap}
.dp-today{display:flex;flex-direction:column;gap:5px}
.dp-bar{display:flex;height:10px;border-radius:4px;overflow:hidden;background:var(--line-2)}
.dp-bar .in{background:var(--dk-present-ink,#1B8A4C)}.dp-bar .notin{background:#E8A49A}.dp-bar .away{background:#7FB8C9}
.dp-today small{font-size:12px;color:var(--ink-2)}
.dp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px 12px;border-radius:12px;background:var(--glass-2,rgba(255,255,255,.5));border:1px solid var(--line-2)}
.dp-facts span{font-size:11px;color:var(--ink-3);display:block}.dp-facts b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.dp-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12px}
.dp-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;background:var(--line-2);color:var(--ink-2)}
.dp-like{color:var(--dk-half-ink,#7A4E0E);font-weight:600}
.dp-people{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto}
.dp-people .member-link{display:flex;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border-radius:10px;text-align:left}
.dp-people .member-link:hover{background:var(--green-soft)}
.dp-people small{color:var(--ink-3);font-size:12px}
.dp-win-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* people search in the top bar */
.ps-box{position:relative;display:flex;align-items:center}
.ps-field{position:relative;display:flex;align-items:center}
.ps-field .ps-glass{position:absolute;left:11px;color:var(--ink-3);pointer-events:none}
.ps-input{width:clamp(180px,22vw,320px);padding-left:34px!important;padding-right:30px!important}
.ps-input::-webkit-search-cancel-button{display:none}
.ps-field kbd{position:absolute;right:9px}
.ps-box kbd{font:600 11px var(--font-body);padding:1px 6px;border-radius:5px;border:1px solid var(--line);background:var(--card);color:var(--ink-2)}
.ps-box.open .ps-field kbd,.ps-input:focus+kbd{display:none}
.ps-open{display:none;width:35px;min-height:35px;align-items:center;justify-content:center;color:var(--ink-2)}
.ps-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(520px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;padding:8px;border-radius:16px;background:var(--glass-solid,#fff);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--line);box-shadow:0 24px 60px rgba(30,34,70,.22)}
.ps-pop[hidden]{display:none}
.ps-cap{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);padding:8px 12px 4px}
.ps-cap+.ps-cap,.ps-quick+.ps-cap,.ps-row+.ps-cap{border-top:1px solid var(--line-2);margin-top:4px;padding-top:10px}
.ps-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border-radius:10px;cursor:pointer}
.ps-row:hover,.ps-row.on{background:var(--green-soft)}
.ps-row .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.ps-who{min-width:0}.ps-who b{display:block;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-who small{display:block;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-row.page small{font-size:12px;color:var(--ink-3)}
.ps-pg{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--line-2);color:var(--ink-2);font-weight:700}
.ps-quick{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:4px 12px 10px 58px;font-size:12px;color:var(--ink-3)}
.ps-quick .btn.sm{min-height:30px;padding:4px 10px}
.ps-note{margin:0;padding:10px 12px;font-size:13px;color:var(--ink-3)}
.ps-keys{display:flex;gap:14px;flex-wrap:wrap;padding:10px 12px 6px;border-top:1px solid var(--line-2);margin-top:4px;font-size:12px;color:var(--ink-3)}
.ps-keys .ps-any{margin-left:auto}
@media (hover:none){.ps-keys{display:none}.ps-field kbd{display:none}}

@container view (max-width:900px){
  .tm-made{grid-template-columns:minmax(0,1fr)}
  .tm-mix{grid-template-columns:minmax(0,1fr);gap:4px}
  .tm-sum,.tm-sum.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-sum-main{grid-column:1/-1}
}
@container view (max-width:520px){
  .tm-sum,.tm-sum.three{grid-template-columns:minmax(0,1fr)}
  .tm-filters .search{width:100%}
  .tm-filters-l{width:100%}
  .detail-hint.tm-made-hint{margin-top:-12px}
}
@media (max-width:780px){
  .ps-open{display:inline-flex}
  .ps-field{display:none}
  .ps-box.expanded .ps-field{display:flex;position:fixed;left:16px;right:16px;top:12px;z-index:61}
  .ps-box.expanded .ps-input{width:100%;min-height:44px;box-shadow:0 10px 30px rgba(30,34,70,.25)}
  .ps-box.expanded .ps-pop{position:fixed;left:16px;right:16px;top:64px;width:auto}
}
/* phone cards (the shared table turns rows into cards): ⋯ and › sit in the card's top corner, not on a line of their own */
@media (max-width:640px){
  .tm-table .request-table .t tr{position:relative}
  .tm-table .request-table .t td.cell-actions{position:absolute;top:14px;right:0;width:auto;padding:0!important}
  .tm-table .request-table .t td.cell-actions>.tm-acts{width:auto;gap:4px}
  .tm-table .request-table .t td.cell-actions .tm-more{opacity:1;flex:none;min-height:36px}
  .tm-table .request-table .t td:first-child{padding-right:70px!important}
}
@media (max-width:780px){
  .ps-box.expanded::before{content:'';position:fixed;inset:0;z-index:60;background:rgba(20,24,40,.35)}
  .ps-box.expanded .ps-pop{z-index:62}
}