/* Fieldwork: the pieces only this template needs (the forms, the ticket grid, the roster strip). */
.err-list { padding: 12px 16px; border-radius: var(--r-s); background: color-mix(in srgb, var(--alert) 9%, var(--card)); color: var(--alert); font: 700 16px/1.5 var(--body); }
.err-list ul { display: grid; gap: 4px; margin-top: 6px; padding-left: 18px; list-style: disc; }
.err-list a { color: inherit; }
.form-card .field-set { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.form-card .field-set legend { margin-bottom: 8px; }
.field-set[aria-invalid="true"] .ticks { border-radius: var(--r-s); box-shadow: 0 0 0 2px var(--alert); }
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 4px; }
@media (max-width: 560px) { .ticks { grid-template-columns: minmax(0, 1fr); } }
.fw-sum { min-height: 1.4em; padding: 12px 14px; border-radius: var(--r-s); background: var(--hl-soft); color: var(--ink); font: 500 14.5px/1.45 var(--mono); }
.fw-sum:empty { display: none; }
.ok-msg { padding: 14px 16px; border-radius: var(--r-m); background: var(--green-soft); color: var(--ink); font-size: 16.5px; box-shadow: inset 4px 0 0 var(--green); }

/* the roster strip: one cell a day, on site in the accent, home in the line colour */
.rosters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .rosters { grid-template-columns: minmax(0, 1fr); } }
.roster { display: grid; gap: 14px; margin: 0; padding: 20px 22px; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); min-width: 0; }
.roster figcaption { display: grid; gap: 2px; }
.roster figcaption b { font: 700 21px/1.15 var(--display); }
.roster figcaption span { font: 500 13.5px/1.3 var(--mono); color: var(--muted); }
.rs-days { display: grid; grid-template-columns: repeat(var(--d), minmax(0, 1fr)); gap: 3px; }
.rs-days i, .rs-key i { display: block; height: 30px; border-radius: 4px; background: var(--line); }
.rs-days i.on, .rs-key i.on { background: var(--green); }
html:not(.calm) .rs-days i.on { animation: fw-fill 600ms var(--ease) both; }
html:not(.calm) .rs-days i.on:nth-child(n) { animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes fw-fill { from { transform: scaleY(0.2); opacity: 0.3; } }
.rs-key { display: flex; gap: 18px; font-size: 14px; color: var(--ink-2); }
.rs-key span { display: inline-flex; align-items: center; gap: 8px; }
.rs-key i { width: 14px; height: 14px; }