/* シフト表の作成だけで使う見た目 */
.form { display: grid; gap: 16px; }
.form .field { align-content: start; }
.box { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 16px; margin: 0; display: grid; gap: 12px; min-width: 0; }
.box legend { font-weight: 700; padding: 0 6px; font-family: var(--display); }
.check { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; min-height: 40px; }
.choice .check { min-height: 36px; }

/* 時間帯の行 */
.slots { display: grid; gap: 8px; }
.slot { display: grid; gap: 6px 8px; align-items: end; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) repeat(2, minmax(0, .9fr)) auto; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.slot .field > span, .person .field > span { font-size: 12px; font-weight: 400; color: var(--muted); }
.slot input[type="time"] { min-width: 0; }
@media (max-width: 760px) {
  .slot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot .field:first-child { grid-column: 1 / -1; }
  .slot .del { justify-self: end; }
}

/* 人のカード */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.person { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.person .top { display: grid; grid-template-columns: minmax(0, 1fr) 84px auto; gap: 8px; align-items: end; }
.avail { border-collapse: collapse; width: 100%; font-size: 13px; }
.avail th { font-weight: 400; color: var(--muted); padding: 0 2px; text-align: center; }
.avail th:first-child { text-align: left; }
.avail td { text-align: center; padding: 1px 0; }
.avail td:first-child { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; }
.avail input { width: 22px; height: 22px; margin: 2px; }
.avail .sat { color: #2f5fb3; }
.avail .sun { color: var(--bad); }

/* シフト表 */
.sheet { display: grid; gap: 8px; }
.sheet-title { margin: 0; }
table.grid { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13px; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 0; text-align: center; min-width: 28px; height: 34px; }
table.grid th { font-weight: 400; font-size: 12px; line-height: 1.25; background: var(--bg); }
table.grid th.name, table.grid td.name { text-align: left; padding: 0 8px; white-space: nowrap; min-width: 84px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.grid th.name { background: var(--bg); }
table.grid .sat { color: #2f5fb3; }
table.grid .sun, table.grid .hol { color: var(--bad); }
table.grid .closed { background: repeating-linear-gradient(135deg, var(--bg), var(--bg) 4px, var(--line) 4px, var(--line) 5px); color: var(--muted); }
table.grid td.sum { padding: 0 6px; white-space: nowrap; font-size: 12px; }
table.grid button.cell { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 100%; min-height: 34px; cursor: pointer; font-size: 12px; }
table.grid button.cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.grid button.cell.on { background: var(--accent-soft); font-weight: 700; }
table.grid button.cell.edited { box-shadow: inset 0 0 0 2px var(--accent); }
table.grid button.cell.out { color: var(--warn); }
table.grid tr.need td { font-size: 12px; color: var(--muted); }
table.grid tr.need td.short { color: var(--bad); font-weight: 700; }
table.grid tr.need:first-of-type td, table.grid tr.need.first td { border-top: 2px solid var(--ink); }
.legend { margin: 0; font-size: 13px; color: var(--muted); }

@page { size: A4 landscape; margin: 8mm; }
@media print {
  main.page > div:first-child { display: none !important; }
  .tool { display: block; }
  .sheet-title { font-size: 14pt; margin-bottom: 2mm; }
  .table-wrap { overflow: visible; }
  table.grid { width: 100%; table-layout: fixed; font-size: 8pt; }
  table.grid th, table.grid td { min-width: 0; height: 6.4mm; border-color: #999; }
  table.grid th { font-size: 7pt; background: #eee; }
  table.grid th.name, table.grid td.name { position: static; width: 22mm; min-width: 0; padding: 0 1mm; font-size: 8pt; }
  table.grid th.sumh, table.grid td.sum { width: 13mm; padding: 0 1mm; font-size: 7pt; }
  table.grid button.cell { min-height: 0; font-size: 7.5pt; }
  table.grid button.cell.edited { box-shadow: none; }
  table.grid button.cell.on { background: none; }
  .legend { font-size: 8pt; }
}