/* Team Hub v2 (2026-10-13) — scoped to #module-team. Uses existing tokens only
   (no new colours/fonts/gradients). Calm, dense, neutral surfaces; one accent
   for primary actions + focus; status colours only for status. */

#module-team { --th-ease: cubic-bezier(.2,.8,.2,1); --th-dur: 180ms; font-family: var(--font-ui); }
#module-team .th-n, #module-team .th-num-inline, #module-team .dec-vote-count,
#module-team .th-count, #module-team time, #module-team .role-candidates { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* Language pairs: the shell lane owns html[data-lang]; these scoped rules only
   make Team Hub correct before/without it (no data-lang → both, spaced). */
html[data-lang="en"] #module-team [lang="zh"], html[data-lang="zh"] #module-team [lang="en"] { display: none !important; }
html:not([data-lang]) #module-team [lang="zh"]:not(:first-child)::before { content: " "; }
#module-team [lang="zh"] { font-family: var(--font-cn); }
#module-team .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── toolbar ── */
#module-team .th-toolbar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 16px; }
#module-team .th-summary { flex: 1 1 260px; margin: 0; font-size: 13px; color: var(--text-secondary); min-height: 20px; }
#module-team .th-actions { display: flex; gap: 8px; margin-left: auto; }
#module-team .th-dot-sep { color: var(--text-muted); margin: 0 4px; }
#module-team .th-num-inline { color: var(--text-primary); font-weight: 600; }
#module-team .th-over-text { color: var(--red); }

/* ── buttons (solid primary, neutral secondary, ghost) ── */
#module-team .th-btn { min-height: 32px; padding: 6px 12px; font-size: 13px; font-weight: 500; border-radius: var(--radius); box-shadow: none; transition: background-color var(--th-dur) var(--th-ease), border-color var(--th-dur) var(--th-ease), color var(--th-dur) var(--th-ease); }
#module-team .th-btn::after { display: none; }
#module-team .btn-primary.th-btn { background: var(--accent); color: white; border: 1px solid transparent; }
#module-team .btn-primary.th-btn:hover { filter: brightness(1.08); }
#module-team .btn-secondary.th-btn { background: transparent; color: var(--text-primary); border: 1px solid var(--border-light); }
#module-team .btn-secondary.th-btn:hover { background: var(--bg-hover); border-color: var(--border-light); }
#module-team .th-ghost { border-color: transparent !important; color: var(--text-secondary) !important; }
#module-team button:focus-visible, #module-team select:focus-visible, #module-team input:focus-visible,
#module-team textarea:focus-visible, #module-team [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#module-team button[aria-busy="true"] { cursor: progress; opacity: .75; }

/* ── segmented control ── */
#module-team .th-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: var(--radius); }
#module-team .th-seg [role="radio"] { min-height: 28px; padding: 4px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); font: 500 13px/1.2 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background-color var(--th-dur) var(--th-ease), color var(--th-dur) var(--th-ease); }
#module-team .th-seg [role="radio"]:hover { color: var(--text-primary); }
#module-team .th-seg [role="radio"][aria-checked="true"] { background: var(--card-bg); color: var(--text-primary); box-shadow: 0 0 0 1px var(--border-light); }
#module-team .th-count { color: var(--text-muted); font-size: 12px; margin-left: 2px; }
#module-team .th-count:empty { display: none; }

/* ── cards ── */
#module-team .th-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; min-width: 0; }
#module-team .th-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#module-team .th-card-head-wrap { flex-wrap: wrap; }
#module-team .th-h { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: 0; text-transform: none; }
#module-team .th-sub { margin: 0 0 12px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
#module-team .th-foot { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
#module-team .th-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
#module-team .th-key { width: 10px; height: 6px; border-radius: 2px; display: inline-block; margin-left: 6px; }
#module-team .th-key-open, #module-team .th-bar-open { background: var(--text-secondary); fill: var(--text-secondary); }
#module-team .th-key-over, #module-team .th-bar-over { background: var(--red); fill: var(--red); }
#module-team .th-bar-track { fill: var(--bg-tertiary); }

/* ── roster table (dense rows) ── */
#module-team .th-roster-head, #module-team .th-row { display: grid; grid-template-columns: minmax(200px, 2.2fr) repeat(4, minmax(56px, .6fr)) minmax(120px, 1.4fr) minmax(96px, .9fr); align-items: center; gap: 12px; }
#module-team .th-roster-head { padding: 0 12px 8px; font-size: 12px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
#module-team .th-r { text-align: right; justify-self: end; }
#module-team .th-row { width: 100%; min-height: 52px; padding: 8px 12px; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--th-dur) var(--th-ease); }
#module-team .th-row-wrap:last-child .th-row { border-bottom: 0; }
#module-team .th-row:hover { background: var(--bg-hover); }
#module-team .th-row[aria-pressed="true"] { background: var(--bg-tertiary); box-shadow: inset 0 0 0 1px var(--border-light); }
#module-team .th-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
#module-team .th-avatar { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-tertiary); border: 1px solid var(--border-light); color: var(--text-primary); font-size: 12px; font-weight: 600; }
#module-team .th-person-text { display: flex; flex-direction: column; min-width: 0; }
#module-team .th-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#module-team .th-name-cn { color: var(--text-secondary); font-family: var(--font-cn); font-weight: 400; margin-left: 4px; }
#module-team .th-role { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#module-team .th-n { font-size: 14px; font-weight: 500; }
#module-team .th-zero { color: var(--text-muted); font-weight: 400; }
#module-team .th-bar { width: 100%; height: 6px; display: block; }
#module-team .th-last { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }

/* ── decisions + hiring grid ── */
#module-team .th-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
#module-team .th-grid > .th-card { margin-bottom: 0; }
#module-team .th-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#module-team .th-select { width: auto; min-height: 32px; padding: 4px 10px; font-size: 13px; }

/* timeline */
#module-team .th-timeline { position: relative; }
#module-team .th-day { margin: 16px 0 4px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
#module-team .th-day:first-child { margin-top: 0; }
#module-team .th-dec { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
#module-team .th-dec:last-child { border-bottom: 0; }
#module-team .th-dec-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--text-muted); }
#module-team .th-dec-ratified .th-dec-dot { background: var(--green); }
#module-team .th-dec-rejected .th-dec-dot { background: var(--red); }
#module-team .th-dec-pending .th-dec-dot { background: var(--orange); }
#module-team .th-dec-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; }
#module-team .th-dec-title { margin: 0; font-size: 14px; font-weight: 500; color: var(--text-primary); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
#module-team .th-dec-badges { display: flex; gap: 6px; flex-wrap: wrap; }
#module-team .th-dec-cn { font-size: 13px; color: var(--text-secondary); font-family: var(--font-cn); }
#module-team .th-dec-desc { margin: 4px 0 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
#module-team .th-dec-meta { margin-top: 6px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
#module-team .th-dec-meta strong { color: var(--text-primary); font-weight: 500; }
#module-team .th-status, #module-team .th-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px; font-size: 12px; font-weight: 500; border: 1px solid var(--border-light); color: var(--text-secondary); background: transparent; white-space: nowrap; }
#module-team .th-status-ok { color: var(--green); }
#module-team .th-status-bad { color: var(--red); }
#module-team .th-status-wait { color: var(--orange); }
#module-team .th-links { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
#module-team .dec-ctl-row { gap: 4px; margin-top: 8px; }
#module-team .dec-ctl-row .dec-ctl { min-height: 32px; min-width: 0; padding: 4px 10px; font-size: 12px; font-weight: 500; background: transparent; color: var(--text-secondary); border: 1px solid var(--border); box-shadow: none; }
#module-team .dec-ctl-row .dec-ctl::after { display: none; }
#module-team .dec-ctl-row .dec-ctl:hover { color: var(--text-primary); background: var(--bg-hover); }
#module-team .dec-ctl-row .th-danger-text:hover { color: var(--red); }

/* record-decision form */
#module-team .th-form { margin: 0 0 16px; padding: 16px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-secondary); }
#module-team .th-form[hidden] { display: none; }
#module-team .th-form-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text-primary); }
#module-team .th-field { display: block; margin: 0 0 12px; min-width: 0; border: 0; padding: 0; }
#module-team .th-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
#module-team .th-field .form-input, #module-team .th-import-text { font-size: 13px; padding: 8px 10px; }
#module-team .th-field-row { display: flex; flex-wrap: wrap; gap: 0 24px; }
#module-team .th-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
#module-team .th-check { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
#module-team .th-check input { width: 16px; height: 16px; accent-color: var(--accent); }
#module-team .th-form-note { margin: 0 0 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
#module-team .th-form-note strong { color: var(--text-primary); font-weight: 500; }
#module-team .th-form-msg { margin: 0 0 8px; font-size: 12px; color: var(--red); min-height: 0; }
#module-team .th-form-msg:empty { display: none; }
#module-team .th-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }

/* hiring (snapshot) */
#module-team .th-snapshot { margin: -4px 0 12px; padding: 0; background: none; border: 0; opacity: 1; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
#module-team .team-hiring-asof { display: block; margin-bottom: 2px; color: var(--orange); font-size: 12px; font-weight: 500; }
#module-team .hiring-roles-grid { display: block; margin: 0; }
#module-team .hiring-role-card { padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
#module-team .hiring-role-card:last-child { border-bottom: 0; }
#module-team .hiring-role-card.priority-high, #module-team .hiring-role-card.priority-medium, #module-team .hiring-role-card.priority-low { border-left: 0; }
#module-team .hiring-role-card .role-header { margin-bottom: 4px; }
#module-team .hiring-role-card .role-title { font-size: 14px; font-weight: 500; }
#module-team .hiring-role-card .role-level { font-size: 12px; color: var(--text-secondary); }
#module-team .hiring-role-card .role-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-start; margin: 0; font-size: 12px; color: var(--text-secondary); }
#module-team .hiring-role-card .role-status { padding: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
#module-team .hiring-role-card .role-prio-high { color: var(--red); }

/* empty / error / skeleton */
#module-team .th-empty { padding: 24px 12px; text-align: center; }
#module-team .th-empty p { margin: 0; }
#module-team .th-empty-title { font-size: 14px; font-weight: 500; color: var(--text-primary); }
#module-team .th-empty-sub { margin-top: 4px !important; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
#module-team .th-error p { color: var(--text-primary); font-size: 13px; margin-bottom: 12px; }
#module-team .th-err-detail { color: var(--text-secondary); }
#module-team .th-skel { display: block; border-radius: 6px; background: var(--bg-tertiary); animation: th-pulse 1.2s ease-in-out infinite alternate; }
#module-team .th-skel-row { height: 44px; margin: 8px 0; }
#module-team .th-skel-line { display: inline-block; width: 240px; max-width: 100%; height: 14px; vertical-align: middle; }
@keyframes th-pulse { from { opacity: .45; } to { opacity: 1; } }

/* import drawer (native <dialog>: focus trap, Esc, inert background) */
#module-team .th-drawer, .th-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; outline: 1px solid var(--border-light); background: var(--card-bg); color: var(--text-primary); box-shadow: -16px 0 48px rgba(0,0,0,.28); overflow: hidden; }
.th-drawer[open] { display: flex; flex-direction: column; animation: th-slide 200ms cubic-bezier(.2,.8,.2,1); }
.th-drawer::backdrop { background: rgba(0,0,0,.45); animation: th-fade 200ms cubic-bezier(.2,.8,.2,1); }
#module-team .th-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
#module-team .th-drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px 24px; }
#module-team .th-icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--radius); background: transparent; color: var(--text-secondary); cursor: pointer; }
#module-team .th-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
#module-team .th-import-text { width: 100%; min-height: 180px; resize: vertical; font-family: var(--font-ui); }
#module-team .th-import-history { margin-top: 16px; font-size: 12px; color: var(--text-secondary); }
#module-team #teamIntakeHost { margin-top: 12px; }
@keyframes th-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes th-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── responsive: stacked rows on mobile ── */
@media (max-width: 1100px) {
  #module-team .th-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  #module-team .th-toolbar { gap: 12px; }
  #module-team .th-actions { margin-left: 0; width: 100%; }
  #module-team .th-actions .th-btn { flex: 1 1 0; min-height: 44px; }
  #module-team .th-seg [role="radio"] { min-height: 40px; }
  #module-team .th-card { padding: 12px; }
  #module-team .th-roster-head { display: none; }
  #module-team .th-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 8px; padding: 12px 4px; }
  #module-team .th-person { grid-column: 1 / -1; }
  #module-team .th-cell.th-r { justify-self: stretch; text-align: left; display: flex; flex-direction: column; }
  #module-team .th-cell.th-r::before { content: attr(data-label-en); font-size: 12px; color: var(--text-muted); }
  html[data-lang="zh"] #module-team .th-cell.th-r::before { content: attr(data-label-zh); }
  #module-team .th-bar-cell { grid-column: 1 / -1; }
  #module-team .th-last { grid-column: 1 / -1; text-align: left; justify-self: start; }
  #module-team .th-last::before { content: none !important; }
  #module-team .th-filters, #module-team .th-filters .th-seg { width: 100%; }
  #module-team .th-filters .th-seg [role="radio"] { flex: 1 1 0; padding: 4px 6px; }
  #module-team .th-select-wrap, #module-team .th-select { width: 100%; }
  #module-team .dec-ctl-row .dec-ctl { min-height: 44px; flex: 1 1 auto; }
  #module-team .th-legend { display: none; }
  .th-drawer { width: 100vw; outline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #module-team *, .th-drawer, .th-drawer::backdrop { animation: none !important; transition: none !important; }
}
html[data-reduce-motion="on"] #module-team *, html[data-reduce-motion="on"] .th-drawer { animation: none !important; transition: none !important; }