/* Teams & shifts — the page's own diagrams: the week band (lanes of shift windows on a 7-day scale), the 24 h scale
   under a shift's day bar, and the members grid. Everything else is kit. */
@layer page {
  /* Week band: a sticky label column and seven day columns; bars and the now line sit at --at/--w (% of the week). */
  .ts-week { overflow-x: auto; border-radius: inherit; }
  .ts-grid { --lbl: 200px; min-width: 860px; display: grid; grid-template-columns: var(--lbl) minmax(0, 1fr); }
  .ts-days { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--line); padding-top: var(--s5); }
  .ts-day { padding: var(--s3) var(--s2) var(--s2); font-size: var(--t-small); font-weight: 600; color: var(--text-2); border-left: 1px solid var(--line); }
  .ts-day span { display: block; font-weight: 400; color: var(--text-3); font-size: var(--t-cap); }
  .ts-day[aria-current="date"] { color: var(--accent-text); }
  .ts-corner, .ts-lane-k { position: sticky; left: 0; z-index: 3; background: var(--sheet); }
  .ts-corner { border-bottom: 1px solid var(--line); padding: var(--s3) var(--s4) var(--s2); font-size: var(--t-cap); color: var(--text-3); align-self: stretch; display: flex; align-items: end; }
  .ts-lane-k { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); display: grid; gap: 2px; align-content: center; min-height: 60px; box-shadow: 1px 0 0 var(--line); }
  .ts-lane-n { font-size: var(--t-data); font-weight: 600; }
  .ts-lane-s { font-size: var(--t-small); color: var(--text-2); }
  .ts-lane { position: relative; border-bottom: 1px solid var(--line-soft); min-height: 60px; background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 7)), repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px calc(100% / 28)); }
  .ts-bar { position: absolute; top: 14px; bottom: 14px; left: calc(var(--at) * 1%); width: calc(var(--w) * 1%); border-radius: var(--r2); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--selected-line); }
  .ts-bar[data-kind="support"] { background: var(--idle-bg); box-shadow: inset 0 0 0 1px var(--idle-line); }
  .ts-bar[data-state="archived"] { background: transparent; box-shadow: inset 0 0 0 1px var(--idle-line); }
  .ts-bar[data-kind="gap"] { top: 18px; bottom: 18px; background: var(--warn-bg); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--warn-line) 50%, transparent); }
  .ts-now { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); width: 2px; background: var(--accent); z-index: 2; }
  .ts-now-lbl { position: absolute; top: 2px; left: calc(var(--at) * 1%); transform: translateX(-50%); font-size: var(--t-micro); font-weight: 700; color: var(--accent-text); background: var(--sheet); padding: 0 4px; border-radius: 3px; white-space: nowrap; }
  @media (max-width: 700px) { .ts-grid { --lbl: 112px; } .ts-lane-k { padding: var(--s2) var(--s3); } .ts-lane-s { font-size: var(--t-micro); } }

  /* The 24 h scale under a day bar. */
  .ts-scale { display: flex; justify-content: space-between; margin-top: var(--s1); font-size: var(--t-micro); color: var(--text-3); font-variant-numeric: tabular-nums; }

  .ts-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 0 var(--s4); }
}