/* Team Hub, Version C bento. Scoped under [data-station="team"].
   Grid: four core value tiles (3 each), blue handbook hero (4 x 2) beside the section index (8 x 2),
   three compliance to-do tiles (4 each), then the team directory as the Deep Ink tile (12). */

/* ---------- Core values ---------- */
[data-station="team"] .tm-value { gap: 0; }
[data-station="team"] .tm-value-num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--avid-blue); }
[data-station="team"] .tm-value-title { margin-top: 18px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
[data-station="team"] .tm-value-line { margin-top: 8px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* ---------- Blue handbook hero ---------- */
[data-station="team"] .tm-hero .big small { color: rgba(255, 255, 255, 0.85); }
[data-station="team"] .tm-hero-facts { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
[data-station="team"] .tm-hero-fact { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.12); font-size: 13px; color: rgba(255, 255, 255, 0.85); }
[data-station="team"] .tm-hero-fact strong { font-size: 22px; font-weight: 700; color: #fff; min-width: 26px; }
[data-station="team"] .tm-hero .tile-action { justify-content: flex-start; }

/* ---------- Handbook index: two columns of rows ---------- */
[data-station="team"] .tm-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(6, auto); column-gap: 24px; }
[data-station="team"] .tm-index-item { display: flex; align-items: center; gap: 14px; padding: 11px 8px; min-width: 0; border-bottom: var(--hairline); border-radius: 10px; cursor: pointer; transition: background var(--t); }
[data-station="team"] .tm-index-item:nth-child(6n) { border-bottom: 0; }
[data-station="team"] .tm-index-item:hover { background: var(--mist); }
[data-station="team"] .tm-index-item > svg { flex: none; color: var(--ink-disabled); }
[data-station="team"] .tm-index-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mist); color: var(--ink); font-size: 12px; font-weight: 700; }
[data-station="team"] .tm-index-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
[data-station="team"] .tm-index-title { font-size: 14px; font-weight: 700; line-height: 1.35; }
[data-station="team"] .tm-index-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
[data-station="team"] .tm-sep::before { content: "·"; margin-right: 6px; color: var(--ink-disabled); }

/* ---------- Compliance to-dos ---------- */
[data-station="team"] .tm-todo { flex-direction: column; }
[data-station="team"] .tm-todo > .tm-todo-icon { width: 44px; height: 44px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--avid-blue-tint); color: var(--avid-blue-strong); }
[data-station="team"] .tm-todo-main { margin-top: 14px; flex: 1; display: flex; flex-direction: column; min-width: 0; }
[data-station="team"] .tm-todo-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
[data-station="team"] .tm-todo-title { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
[data-station="team"] .tm-todo-detail { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 6px; }
[data-station="team"] .tm-todo-progress { margin-top: 14px; }
[data-station="team"] .tm-todo-due { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 12px; font-weight: 700; color: var(--ink); }
[data-station="team"] .tm-todo-due svg { color: var(--ink-3); }
[data-station="team"] .tm-todo-rel { color: var(--ink-3); font-weight: 600; }
[data-station="team"] .tm-todo-rel::before { content: "·"; margin-right: 6px; color: var(--ink-disabled); }
[data-station="team"] .tm-todo-rel.is-soon { color: var(--warn-ink); }

/* ---------- Directory: the Deep Ink tile ---------- */
[data-station="team"] .tm-people { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
[data-station="team"] .tm-person { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); min-width: 0; transition: background var(--t); }
[data-station="team"] .tm-person:hover { background: rgba(255, 255, 255, 0.1); }
[data-station="team"] .tm-person-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-station="team"] .tm-person-name { font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff; }
[data-station="team"] .tm-person-role { font-size: 12px; color: var(--on-dark-3); line-height: 1.35; }
[data-station="team"] .tm-person .entity-tags { margin-top: 4px; }

@media (max-width: 1360px) {
  [data-station="team"] .tm-index-item > svg { display: none; }
  [data-station="team"] .tm-index-meta { flex-wrap: wrap; white-space: normal; }
  [data-station="team"] .tm-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-station="team"] .tm-value-title { font-size: 17px; }
}

/* ---------- Statement skin (Version D) ----------
   One Deep moment: the slate handbook hero. The directory is a white card. Figures and titles in Playfair. */
[data-station="team"] .tm-value-num { font-family: var(--serif); font-weight: 600; font-size: 38px; letter-spacing: 0; color: var(--slate-tint); }
[data-station="team"] .tm-value-title { margin-top: 14px; font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--slate); letter-spacing: 0; }
[data-station="team"] .tm-hero-fact { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
[data-station="team"] .tm-hero-fact strong { font-family: var(--serif); font-weight: 600; font-size: 26px; }
[data-station="team"] .tm-index-item:hover { background: var(--surface-warm); }
[data-station="team"] .tm-index-num { background: var(--slate-wash); color: var(--slate); }
[data-station="team"] .tm-index-title { color: var(--ink); }
[data-station="team"] .tm-todo > .tm-todo-icon { background: var(--slate-wash); color: var(--slate); }
[data-station="team"] .tm-todo-title { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--slate); letter-spacing: 0; }
[data-station="team"] .tm-todo-top .st-chip, [data-station="team"] .tm-todo-top .badge { margin-top: 2px; }
[data-station="team"] .tm-todo-rel.is-soon { color: var(--ink); font-weight: 700; }
[data-station="team"] .tm-todo-rel.is-soon::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--watch); vertical-align: 1px; }
[data-station="team"] .tm-person { background: var(--surface-warm); box-shadow: inset 0 0 0 1px var(--line); }
[data-station="team"] .tm-person:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-station="team"] .tm-person-name { color: var(--ink); }
[data-station="team"] .tm-person-role { color: var(--ink-3); }
@media (max-width: 700px) {
  [data-station="team"] .tm-index { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  [data-station="team"] .tm-index-item:nth-child(6n) { border-bottom: var(--hairline); }
  [data-station="team"] .tm-people { grid-template-columns: 1fr 1fr; }
}
[data-station="team"] .tm-person .entity-tags { flex-wrap: wrap; row-gap: 4px; }
[data-station="team"] .tm-todo-progress .progress span { background: var(--slate); }
@media (max-width: 700px) {
  [data-station="team"] .tm-handbook > .tile-head { flex-wrap: wrap; row-gap: 6px; }
  [data-station="team"] .tm-handbook > .tile-head .tile-head-right { text-align: left; }
}
[data-station="team"] .tile-count { white-space: nowrap; }