/* The team: marking a day, one person's month as a calendar, and the pay.
   Only what the shared styles do not already give. Loaded after them. */

/* ---------- stepping through days and months ---------- */
.st-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.st-stepper > b, .st-date { flex: 1; min-width: 0; text-align: center; }
.st-stepper b { font-weight: 500; font-size: 15px; letter-spacing: -0.01em; }
.st-date { display: grid; gap: 4px; justify-items: center; }
.st-date .field { max-width: 190px; height: 40px; text-align: center; }

/* ---------- a day for everyone: big choices, one row a person ---------- */
.st-bulk { margin-bottom: 10px; }
.st-bulk .pill { flex: 1 1 auto; }
.st-rows { display: grid; margin-top: 12px; }
.st-row { display: grid; gap: 8px; padding: 12px 0; }
.st-row + .st-row { border-top: 1px dashed var(--dash); }
.st-row:last-child { padding-bottom: 0; }
.st-who { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; }
.st-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-name small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.st-hours.field { flex: none; width: 76px; height: 40px; padding: 0 8px; text-align: center; }
.st-extra { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 11px; border: 0; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--muted); background: rgba(31, 32, 35, 0.06); }
.st-extra:hover { background: rgba(31, 32, 35, 0.1); color: var(--ink); }
.st-extra.on { background: var(--yellow-bg); color: var(--yellow-ink); font-weight: 500; }
.st-marks button { height: 44px; padding: 0 4px; font-size: 14px; }
/* the choice made is filled in its own colour, so a list can be read at a glance */
.st-marks button[aria-pressed="true"][data-mark="present"] { background: var(--green-ink); }
.st-marks button[aria-pressed="true"][data-mark="half"] { background: var(--yellow-ink); }
.st-marks button[aria-pressed="true"][data-mark="absent"] { background: var(--red-ink); }
.st-marks button[aria-pressed="true"][data-mark="leave"] { background: var(--c-tax); }
.st-marks button:disabled, .st-extra:disabled, .st-stepper .pill:disabled { opacity: 0.4; pointer-events: none; }
.st-chip { height: 40px; }

/* ---------- choices in a form ---------- */
.st-pick button { height: 40px; padding: 0 6px; }
.st-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.st-week .chip { height: 42px; padding: 0; }

/* ---------- one person's month ---------- */
.st-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.st-dow { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 2px; }
.st-day { position: relative; display: grid; place-items: center; height: 46px; padding: 0; border: 0; border-radius: 12px; cursor: pointer; font-size: 14px; color: var(--ink); background: #fff; }
.st-day:disabled { cursor: default; }
.st-day i { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 9.5px; font-weight: 600; }
.st-day.today { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 600; }
/* one colour for each kind of day, on the calendar and in the key under it */
.st-cal .s-present, .st-key .s-present { background: var(--green-bg); color: var(--green-ink); }
.st-cal .s-half, .st-key .s-half { background: var(--yellow-bg); color: var(--yellow-ink); }
.st-cal .s-absent, .st-key .s-absent { background: var(--red-bg); color: var(--red-ink); }
.st-cal .s-leave, .st-key .s-leave { background: var(--t-tax); color: var(--c-tax); }
.st-cal .s-holiday, .st-key .s-holiday { background: var(--t-stock); color: var(--c-stock); }
.st-cal .s-off, .st-key .s-off { background: var(--t-plain); color: var(--c-plain); }
.st-cal .s-unmarked, .st-key .s-unmarked { background: #fff; box-shadow: inset 0 0 0 1px var(--dash); }
.st-cal .s-none { background: none; color: var(--faint); }
.st-day:not(.s-none):not(.s-unmarked) { font-weight: 500; }
.st-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.st-key i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; }
.st-money .row-main { flex: 1; }
.st-money .row-meta { white-space: normal; }
.st-drop { width: 40px; height: 40px; }
table.data.st-year th:first-child, table.data.st-year td:first-child { min-width: 48px; }

/* ---------- pay, line by line ---------- */
.st-slip { display: grid; gap: 10px; }
.st-slip .actions { margin-top: 2px; }
.st-line > span:first-child { min-width: 0; color: var(--ink); }
.st-line small { display: block; font-size: 12.5px; color: var(--muted); }
.st-pay > summary { align-items: center; }
.st-pay .chev { margin-top: 0; }
.st-net { flex: none; text-align: right; font-family: var(--mono); letter-spacing: -0.03em; font-size: 14px; }
.st-net small { display: block; font-family: var(--sans); letter-spacing: 0; font-size: 12px; color: var(--muted); }
.st-net small.paid { color: var(--green-ink); font-weight: 500; }