/* 2.46.0: Scorecards (Modern Calm): quiet numbers, a soft green or red dot, room to breathe */
.sc { --sc-ok: var(--ok); --sc-off: var(--fault); }
.sc h1 { margin: 0; font-size: 22px; }
.sc-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--line); vertical-align: middle; }
.sc-dot.ok { background: var(--ok); }
.sc-dot.off { background: var(--fault); }
.sc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.sc-bar select { width: auto; max-width: 220px; }
.sc-sum { display: inline-flex; gap: 14px; margin-inline-start: auto; font-size: 13px; color: var(--muted); }
.sc-sum > span { display: inline-flex; align-items: center; gap: 4px; }
.sc-calm { display: flex; align-items: center; gap: 6px; margin: 0; }

/* the grid */
.sc-table-wrap { background: var(--panel); border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .04); overflow-x: auto; }
.sc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sc-table th, .sc-table td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sc-table thead th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--panel); white-space: normal; min-width: 92px; vertical-align: bottom; }
.sc-table tbody tr:last-child > * { border-bottom: 0; }
.sc-table tbody tr:hover { background: var(--sunk); }
.sc-table tbody th { font-weight: 400; background: transparent; }
.sc-cell { font-variant-numeric: tabular-nums; }
.sc-cell .sc-dot { margin-inline-end: 7px; }
.sc-none { color: var(--line); }
.sc-person { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; }
.sc-person:hover b { text-decoration: underline; }
.sc-person-text { display: flex; flex-direction: column; min-width: 0; }
.sc-person-text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

/* the grid on a phone: one row per person, their numbers as chips */
.sc-list { display: flex; flex-direction: column; gap: 8px; }
.sc-list-row { background: var(--panel); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sunk); font-size: 13px; color: var(--ink); max-width: 100%; }
.sc-chip-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-chip b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* a person's card */
.sc-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sc-head p { margin: 2px 0 0; }
.sc-head select { width: auto; }
.sc-notice { font-size: 13px; }
.sc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.sc-card { background: var(--panel); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .04); }
.sc-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-card-label { font-size: 14px; color: var(--muted); }
.sc-big { font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-card-foot { display: flex; justify-content: space-between; gap: 8px; }
.sc-spark { display: block; width: 100%; height: auto; max-height: 48px; overflow: visible; }
.sc-spark-line { fill: none; stroke: var(--sec); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sc-spark-target { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.sc-spark-end { fill: var(--sec); }
.sc-spark-end.ok { fill: var(--ok); }
.sc-spark-end.off { fill: var(--fault); }
.sc-enter-row { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.sc-enter { width: 110px; }

/* the leaderboard */
.sc-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.sc-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-rank li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.sc-rank li.me { background: var(--sec-soft); }
.sc-rank-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--sunk); color: var(--muted); }
.sc-rank-n.r1 { background: var(--sec); color: var(--panel); }

/* measures and targets */
.sc-setup { display: flex; flex-direction: column; }
.sc-setup-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sc-setup-row:last-child { border-bottom: 0; }
.sc-setup-row > .sc-ed { grid-column: 2 / -1; }
.sc-setup-who { display: flex; flex-direction: column; min-width: 0; }
.sc-ed { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sc-ed-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.sc-ed-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sc-ed-row select { width: auto; max-width: 280px; flex: 1 1 200px; }
.sc-ed-dir { min-width: 68px; }
.sc-ed-row input.sc-ed-target { width: 110px; flex: none; margin: 0; }
.sc-ed-row select { margin: 0; }
.sc-add-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc-add-row input[type="text"] { width: auto; flex: 1 1 180px; }
.sc-add-row .sc-unit { flex: 0 1 140px; }
.sc-add-row select { width: auto; }
.sc-board-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; }
.cmp-link.danger { color: var(--fault); }

/* My desk's strip, the org chart's dot, My Manager's line */
.desk-numbers:empty { display: none; }
.sc-desk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 8px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--panel); box-shadow: 0 1px 2px rgba(15, 23, 42, .05); color: var(--ink); text-decoration: none; font-size: 13px; }
.sc-desk:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .06); }
.sc-desk-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.sc-desk-title svg { color: var(--sec); }
.sc-desk-week { font-weight: 400; color: var(--muted); }
.sc-desk-item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cmp-avatar { position: relative; }
.sc-seat-dot { position: absolute; inset-block-end: -1px; inset-inline-end: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--panel); }
.sc-seat-dot.ok { background: var(--ok); }
.sc-seat-dot.off { background: var(--fault); }
.sc-mgr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 4px 0 8px; border-radius: 14px; background: var(--sunk); color: var(--ink); text-decoration: none; }
.sc-mgr small { display: block; color: var(--muted); }
.sc-mgr:hover { background: var(--sec-soft); }

@media (max-width: 640px) {
  .sc-setup-row { grid-template-columns: 1fr auto; }
  .sc-setup-row > .sc-chips, .sc-setup-row > .muted { grid-column: 1 / -1; grid-row: 2; }
  .sc-setup-row > .sc-ed { grid-column: 1 / -1; }
  .sc-sum { margin-inline-start: 0; width: 100%; }
  .sc-big { font-size: 24px; }
}