/* Epic 0068 — the schedule print modal (schedule_prints/new): settings on the
   left, the print page itself in a scaled iframe on the right (§3.5). Every
   rule is scoped under .sp-modal. */

.ruleset-modal.sp-modal { width: min(1440px, 96vw); height: min(900px, 92vh); display: flex; flex-direction: column; }
.sp-modal .sp-modal__form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; }
/* 420px keeps Name highlighting's five options on one row. */
.sp-modal .sp-modal__body {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
}
.sp-modal .sp-modal__settings { overflow-y: auto; padding: 1rem 1.25rem; border-right: 1px solid var(--line); }
/* The same grey as the print page's own background, so the centred page
   sits in one even field with no seam where the iframe ends. */
.sp-modal .sp-modal__preview { position: relative; overflow: hidden; background: #e5e7eb; }
.sp-modal .sp-modal__frame {
  position: absolute; top: 0; left: 0; border: 0; background: #e5e7eb;
  transform-origin: top left;
}
/* Narrow: the preview is hidden but NOT display:none — Print prints this
   iframe, and it paginates by measuring its own layout, which a frame inside
   a display:none parent doesn't have. Clipped to nothing, it keeps the
   full-size layout it measures and prints. */
@media (max-width: 900px) {
  .sp-modal .sp-modal__body { grid-template-columns: 1fr; }
  .sp-modal .sp-modal__settings { border-right: 0; }
  .sp-modal .sp-modal__preview {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}

.sp-modal .sp-summary { margin-bottom: 1rem; font-size: 0.9rem; line-height: 1.45; }
.sp-modal .sp-summary__filters { color: var(--ink-2); }
/* The "what will print" line (D41): always there, coloured by pages. */
.sp-modal .sp-summary__counts {
  margin-top: 0.5rem; padding: 0.45rem 0.65rem; border-radius: var(--r-sm);
  background: var(--bg-2); color: var(--ink); font-weight: 600; font-size: 0.85rem; line-height: 1.4;
}
.sp-modal .sp-summary__counts[data-level="big"] { background: var(--warning-soft); }
.sp-modal .sp-summary__counts[data-level="very-big"] { background: var(--danger-soft); }
.sp-modal .sp-modal__warn {
  margin-top: 0.5rem; padding: 0.45rem 0.65rem; border-radius: var(--r-sm);
  background: var(--warning-soft); color: var(--ink); font-size: 0.85rem; line-height: 1.4;
}

.sp-modal .sp-field { margin-top: 1rem; }
.sp-modal .sp-field__label {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.sp-modal .sp-field__label--section { margin-top: 1.25rem; }
.sp-modal .sp-field__hint { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--ink-3); }
.sp-modal .sp-field__color { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.85rem; }
.sp-modal .sp-field__color[hidden] { display: none; }
.sp-modal .sp-select { width: 100%; }

/* segmented radios: the input is hidden, the label is the button */
.sp-modal .segmented { flex-wrap: wrap; width: auto; max-width: 100%; }
.sp-modal .segmented__btn { font-size: 0.85rem; padding: 0.25rem 0.75rem; }
.sp-modal .segmented__btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-modal .segmented__btn:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.sp-modal .segmented__btn:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.sp-modal .sp-sheets { border: 1px solid var(--line); border-radius: var(--r-md); max-height: 220px; overflow-y: auto; }
.sp-modal .sp-sheets__row {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.65rem;
  font-size: 0.87rem; line-height: 1.35; cursor: pointer;
}
.sp-modal .sp-sheets__row + .sp-sheets__row { border-top: 1px solid var(--line); }
.sp-modal .sp-sheets__row input { margin-top: 3px; }
.sp-modal .sp-sheets__meta { display: block; color: var(--ink-3); font-size: 0.8rem; }
.sp-modal .sp-sheets__actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.sp-modal .sp-select-btn {
  padding: 0.2rem 0.9rem; border: 1px solid var(--accent); border-radius: var(--r-pill);
  background: var(--surface); color: var(--accent); font-weight: 700; font-size: 0.82rem; cursor: pointer;
}
.sp-modal .sp-select-btn:hover { background: var(--accent-light); }

.sp-modal .sp-switches { border: 1px solid var(--line); border-radius: var(--r-md); }
.sp-modal .sp-switches__row { display: flex; padding: 0.55rem 0.75rem; width: 100%; }
/* rows are separated by each switch's hidden "0" input, hence ~ not + */
.sp-modal .sp-switches > .sp-switches__row ~ .sp-switches__row { border-top: 1px solid var(--line); }

.sp-modal .sp-modal__footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; }
.sp-modal .sp-modal__reason { margin-right: auto; font-size: 0.85rem; color: var(--ink-3); }
.sp-modal .sp-modal__reason[hidden] { display: none; }