/* Team · agents (ink) — the responsibility matrix in a console frame, the agents as white ID badges, the five rules
   (partials/team/agents.php, assets/js/team/agents.js). R is blue, A is white, C an outline, I a faint outline; the agent
   column is marked and never holds an A. On phones each row of the matrix becomes a block of four labelled letters. */
.tm-ag{overflow:hidden}
.tm-ag__dots{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.tm-ag .wrap{position:relative}

.tm-ag__console{border:1px solid var(--on-ink-line);border-radius:var(--r-xl);background:var(--on-ink-card);overflow:hidden}
.tm-ag__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px 24px;border-bottom:1px solid var(--on-ink-line)}
.tm-ag .tm-ag__bt{font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink)}
.tm-ag__legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--t-xs);line-height:1.3;color:var(--on-ink-2)}
.tm-ag__legend li{display:inline-flex;align-items:center;gap:8px}

.tm-raci{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;font-family:var(--f);font-size:var(--t-xs);font-weight:500;line-height:1}
.tm-ag__legend .tm-raci{width:24px;height:24px;border-radius:7px}
.tm-raci--r{background:var(--blue-d);color:var(--on-ink)}
.tm-raci--a{background:var(--on-ink);color:var(--ink)}
.tm-raci--c{box-shadow:inset 0 0 0 1px var(--on-ink-3);color:var(--on-ink)}
.tm-raci--i{box-shadow:inset 0 0 0 1px var(--on-ink-line);color:var(--on-ink-3)}
.tm-raci--none::after{content:"";width:10px;height:1px;background:var(--on-ink-line)}

.tm-ag__table{width:100%;border-collapse:collapse;table-layout:fixed}
.tm-ag__th{padding:16px 10px;border-bottom:1px solid var(--on-ink-line);text-align:center;vertical-align:bottom;font-weight:normal;
  font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;line-height:1.35;color:var(--on-ink-3)}
.tm-ag__th--task{width:46%;padding-left:24px;text-align:left}
.tm-ag__th--agent{color:var(--on-ink);background:var(--on-ink-card)}
.tm-ag__row>*{border-top:1px solid var(--on-ink-line);transition:background var(--d1) var(--e-io)}
.tm-ag__row:first-child>*{border-top:0}
.tm-ag__task{padding:16px 14px 16px 24px;text-align:left;vertical-align:top;font-weight:normal}
.tm-ag__tt{display:block;font-size:var(--t-sm);font-weight:500;line-height:1.4;color:var(--on-ink)}
.tm-ag__td{display:block;margin-top:5px;font-size:var(--t-xs);line-height:1.6;color:var(--on-ink-3);max-width:56ch}
.tm-ag__c{padding:12px 8px;text-align:center;vertical-align:middle}
.tm-ag__c--agent{background:var(--on-ink-card)}
.tm-ag__cn{display:none}
.tm-ag__row.is-hot>*{background:var(--on-ink-card)}
.tm-ag__row.is-hot .tm-ag__tt{text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:4px}
.tm-ag__note{display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid var(--on-ink-line);font-family:var(--f);font-size:var(--t-xs);line-height:1.5;color:var(--on-ink-2)}
.tm-ag__nd{flex:none;width:12px;height:12px;border-radius:3px;background:var(--on-ink-card);box-shadow:inset 0 0 0 1px var(--on-ink-3)}

.tm-ag__sub{margin-top:var(--bdh-block)}
.tm-ag .tm-ag__k{margin-bottom:24px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-ink-3)}

/* ---------- the badges ---------- */
.tm-ag__badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bdh-gap);align-items:stretch}
.tm-badge{position:relative;display:flex;flex-direction:column;gap:14px;padding:34px 22px 24px;border-radius:var(--r-lg);background:var(--paper);color:var(--txt);
  transition:box-shadow var(--d2) var(--e),transform var(--d2) var(--e)}
.tm-badge__slot{position:absolute;top:13px;left:50%;width:46px;height:8px;border-radius:var(--r-pill);background:var(--ink);transform:translateX(-50%)}
.tm-badge.is-hot{box-shadow:0 0 0 3px var(--blue);transform:translateY(-3px)}
.tm-badge__top{display:flex;justify-content:space-between;gap:10px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tm-badge__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--blue-wash);color:var(--blue-d)}
.tm-badge__icon .xt-ico{--xt-accent:currentColor}
.tm-ag .tm-badge__n{font-family:var(--f-h);font-size:1.25rem;font-weight:500;letter-spacing:-.012em;line-height:1.2;color:var(--ink)}
.tm-badge__kv{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.tm-badge__r{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;align-items:baseline}
.tm-badge__r dt{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);line-height:1.4}
.tm-badge__r dd{font-size:var(--t-xs);line-height:1.55;color:var(--txt)}
.tm-badge__r--owner dd{font-weight:600;color:var(--ink)}
.tm-badge__r--never dd{color:var(--ink)}

/* ---------- the rules ---------- */
.tm-ag__rules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--bdh-gap)}
.tm-ag__rule{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--on-ink-line)}
.tm-ag__ri{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--on-ink-card);box-shadow:inset 0 0 0 1px var(--on-ink-line);color:var(--on-ink)}
.tm-ag__rn{margin-top:4px;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;color:var(--blue)}
.tm-ag .tm-ag__rt{font-family:var(--f-h);font-size:1.0625rem;font-weight:500;line-height:1.3;color:var(--on-ink)}
.tm-ag__rx{font-size:var(--t-sm);line-height:1.6;color:var(--on-ink-2)}

@media (max-width:1180px){
  .tm-ag__badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-ag__rules{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .tm-ag__bar{padding:16px 18px}
  .tm-ag__table,.tm-ag__table tbody,.tm-ag__table tr,.tm-ag__table th,.tm-ag__table td{display:block}
  .tm-ag__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* each task becomes a block: the task, then its four letters in two pairs, each letter beside whose it is */
  .tm-ag__table .tm-ag__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding:18px;border-top:1px solid var(--on-ink-line)}
  .tm-ag__table .tm-ag__row:first-child{border-top:0}
  .tm-ag__row>*{border-top:0}
  .tm-ag__task{grid-column:1 / -1;padding:0 0 4px}
  .tm-ag__table .tm-ag__c{display:flex;align-items:center;gap:10px;min-width:0;padding:0;text-align:left;background:none}
  .tm-ag__c--agent{background:none}
  .tm-ag__cn{display:block;order:1;min-width:0;font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.04em;line-height:1.3;color:var(--on-ink-2)}
  .tm-ag__c .tm-raci{flex:none}
  .tm-ag__note{padding:14px 18px}
  .tm-ag__rules{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  /* the badges become a row that scrolls sideways, one and a bit on screen */
  .tm-ag__bscroll{margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .tm-ag__bscroll::-webkit-scrollbar{display:none}
  .tm-ag__bscroll:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
  .tm-ag__badges{display:flex;gap:12px;width:max-content}
  .tm-badge{width:min(300px,78vw);scroll-snap-align:start}
  .tm-ag__rules{grid-template-columns:minmax(0,1fr);gap:0}
  .tm-ag__rule{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:18px 0}
  .tm-ag__ri{grid-row:1 / span 3}
  .tm-ag__rn{margin-top:0}
  .tm-ag__td{font-size:var(--t-xs);line-height:1.55}
}
@media (prefers-reduced-motion:reduce){
  .tm-badge,.tm-ag__row>*{transition:none}
  .tm-badge.is-hot{transform:none}
}