/* ============================================================
   Pipezoom - css/teamboard.css, the Team page's stylesheet.

   The team line with the super admin's select, the week strip of 7 day
   cards in the look of the Routes page's strip, and the board: 1 column
   per rep side by side from 700px, scrolled sideways once the columns
   pass the board's width, and 1 column a row under 700px.
   Defines the classes under .tmb.
   Notes: docs/notes/app.pipezoom.com/css/teamboard.css.md
   ============================================================ */

.tmb{display:flex;flex-direction:column;gap:16px;}

/* The page head's day, and Today beside it. */
.tmb-dateline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.tmb-today{
  padding:1px 9px;border-radius:var(--radius-pill);
  background:var(--accent-strong);color:var(--ink-inverse);
  font-size:.72rem;font-weight:700;
}

/* The team line and the select */
.tmb-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;}
.tmb-who{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;font-size:.92rem;color:var(--ink-soft);}
.tmb-who b{font-size:1rem;color:var(--ink);}
.tmb-pick{display:flex;align-items:center;gap:8px;margin:0;}
.tmb-pick-l{font-size:.82rem;font-weight:600;color:var(--ink-soft);}
.tmb-sel{width:auto;min-width:220px;}

/* The week strip */
.tmb-week{display:flex;align-items:stretch;gap:8px;}
.tmb-step{flex:none;display:flex;align-items:center;gap:6px;}
.tmb-days{flex:1;min-width:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.tmb-card{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  padding:7px 10px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--ink-soft);
  text-decoration:none;
}
.tmb-card:hover{background:var(--surface-hover);color:var(--ink);text-decoration:none;}
.tmb-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring-soft);}
/* In a narrow card, with the rail open, Today is on a 2nd line. */
.tmb-card-d{font-size:.8rem;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;}
.tmb-card-t{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.tmb-card-n{font-size:.78rem;font-weight:600;}
.tmb-card-m{font-size:.72rem;color:var(--ink-faint);white-space:nowrap;}
.tmb-card-on,.tmb-card-on:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink-inverse);}
.tmb-card-on .tmb-card-d,.tmb-card-on .tmb-card-m{color:var(--ink-inverse);}

/* The board: columns from 260px to 360px share the width, and the board scrolls sideways past it. */
.tmb-board{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,360px);
  gap:12px;align-items:start;justify-content:start;
  overflow-x:auto;padding-bottom:6px;
}
.tmb-empty{margin:0;font-size:.92rem;color:var(--ink-soft);}
.tmb-col{
  display:flex;flex-direction:column;min-width:0;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.tmb-head{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line);}
.tmb-name{margin:0;font-size:1rem;font-weight:700;color:var(--ink);overflow-wrap:anywhere;}
.tmb-figs{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0;font-size:.82rem;color:var(--ink-soft);}
.tmb-figs b{color:var(--ink);}
.tmb-meter{display:block;height:6px;margin-top:4px;border-radius:var(--radius-pill);background:var(--surface-high);overflow:hidden;}
.tmb-meter > span{display:block;height:100%;background:var(--accent-strong);}
.tmb-none{margin:0;padding:14px;font-size:.86rem;color:var(--ink-soft);}

/* 1 stop in 2 lines: the time, the kind and the outcome word, then the business; the mark spans both. */
.tmb-stops{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:6px;}
.tmb-stop{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);
  grid-template-areas:"mark time meta" "mark name name";
  align-items:center;gap:2px 8px;
  padding:7px 10px;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.tmb-mark{grid-area:mark;align-self:start;margin-top:2px;font-size:.9rem;color:var(--ink-faint);}
.tmb-stop-done .tmb-mark{color:var(--accent);}
.tmb-time{grid-area:time;font-size:.76rem;font-weight:700;color:var(--ink);white-space:nowrap;}
.tmb-sn{grid-area:name;font-size:.9rem;font-weight:600;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;}
.tmb-meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.72rem;color:var(--ink-faint);}
.tmb-word{padding:1px 8px;border-radius:var(--radius-pill);background:var(--surface-high);color:var(--ink);font-weight:600;}
.tmb-word-win{background:var(--accent-strong);color:var(--ink-inverse);}
/* Read by a screen reader and drawn nowhere. */
.tmb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

@media (max-width:699px){
  .tmb-week{flex-wrap:wrap;}
  .tmb-step{flex:1;justify-content:center;}
  .tmb-days{order:3;flex-basis:100%;display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;}
  .tmb-card{flex:0 0 31%;scroll-snap-align:start;}
  .tmb-pick{flex:1 1 100%;}
  .tmb-sel{flex:1;min-width:0;}
  /* 1 column a row: each rep's day reads down the page. */
  .tmb-board{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow-x:visible;}
}