.save-guard { border: 1px solid var(--line); border-radius: 5px; padding: 16px 20px; margin-bottom: 22px; background: var(--soft); }
.save-guard.saving-paused { background: #fff0dd; border-color: #d5c2a5; }
.save-guard p { color: var(--ink); font-size: 13px; margin: 0 0 10px; }
.save-guard-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.save-guard-actions .button { font-size: 12px; }
.save-guard-actions a { font-size: 12px; }
#keep-work { scroll-margin-top: 20px; }
.backup-panel { margin-top: 28px; padding-top: 25px; border-top: 1px solid var(--line); }
.backup-panel h3 { font-size: 21px; }
.backup-panel .help { line-height: 1.8; }
.backup-preview { margin-top: 20px; padding: 20px; background: white; border: 1px solid var(--line); border-radius: 5px; }
.backup-preview h4 { margin: 0 0 12px; }
.backup-preview details { margin: 18px 0; font-size: 13px; }
.backup-preview summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: 10px 0; }
.backup-preview > label { display: block; font-size: 12px; font-weight: 600; margin: 20px 0 8px; }
.backup-preview select, .backup-preview textarea { width: 100%; padding: 10px; background: var(--soft); border: 1px solid #c8d1c2; border-radius: 4px; font-size: 13px; }
.backup-preview textarea { font: 12px/1.7 var(--mono); }
.backup-drafts { padding-left: 22px; max-height: 250px; overflow-y: auto; font-size: 12px; overflow-wrap: anywhere; }
.backup-drafts li { margin: 8px 0; }
#backup-result { margin-top: 15px; overflow-wrap: anywhere; }
.notebook { margin: 40px 0 30px; padding-top: 35px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.notebook .section-heading { align-items: center; }
.notebook .section-heading h2 { font-size: 28px; }
.notebook .eyebrow { font-size: 10px; }
.notebook-intro { max-width: 790px; font-size: 14px; }
.test-toolbar { display: flex; gap: 12px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 5px; background: var(--soft); margin: 25px 0 12px; }
.test-toolbar label { font: 11px var(--mono); white-space: nowrap; }
.test-toolbar select { flex: 1; min-width: 0; }
.notebook select { background: white; border: 1px solid #c8d1c2; border-radius: 4px; padding: 10px; font-size: 13px; }
.notebook .button { font-size: 12px; }
.test-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin: 20px 0; }
.notebook .panel h3 { font-size: 21px; letter-spacing: -.02em; }
.notebook .panel .help { margin-bottom: 10px; }
.notebook .two-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }
.manual-summary { font: 11px/1.8 var(--mono); color: var(--ink); background: var(--soft); border-radius: 4px; padding: 12px; margin-top: 20px; overflow-wrap: anywhere; }
.notebook details { margin: 20px 0 0; border-top: 1px solid var(--line); padding-top: 16px; font-size: 12px; }
.notebook summary { cursor: pointer; font-weight: 600; }
.notebook pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.7 var(--mono); background: var(--soft); border: 1px solid var(--line); padding: 15px; max-height: 330px; overflow: auto; border-radius: 4px; }
.captured-details .button { margin-top: 15px; }
.notebook textarea[readonly] { background: var(--soft); }
.criteria-panel { margin-bottom: 22px; }
.criteria-panel .section-heading { gap: 25px; margin-bottom: 10px; }
.criteria-panel .help { max-width: 720px; }
.criteria-panel .section-heading .button { flex-shrink: 0; }
.criterion { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 10px 20px; margin: 20px 0 0; border: 1px solid var(--line); padding: 0 18px 12px; min-width: 0; border-radius: 5px; }
.criterion legend { font: 10px var(--mono); padding: 0 8px; }
.criterion label { font-size: 11px; }
.criterion select { width: 100%; }
.criterion .text-button { grid-column: 1 / -1; justify-self: start; }
.criterion > div { min-width: 0; }
.comparison > select { width: 100%; max-width: 500px; }
.comparison { margin-bottom: 30px; }
.comparison .test-grid > article { border: 1px solid var(--line); border-radius: 5px; padding: 20px; min-width: 0; }
.comparison h4 { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; margin: 0 0 10px; }
.comparison h5 { font-size: 12px; margin: 20px 0 10px; }
.comparison p, .comparison li { font-size: 12px; overflow-wrap: anywhere; }
.comparison .notice { margin: 20px 0; font-size: 12px; }
.comparison-checks { list-style: none; margin: 20px 0; padding: 0; }
.comparison-checks li { padding-top: 15px; border-top: 1px solid var(--line); }
.comparison-checks p { white-space: pre-wrap; margin-top: 8px; }
@media (max-width: 1000px) {
  .notebook > .section-heading { align-items: start; flex-direction: column; }
  .test-toolbar { flex-wrap: wrap; }
  .test-toolbar select { flex-basis: 65%; }
  .criterion { grid-template-columns: minmax(0, 1fr) 150px; }
  .criterion > div:nth-of-type(3) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .test-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .notebook .two-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .test-toolbar label { width: 100%; }
  .test-toolbar select { flex-basis: 100%; width: 100%; }
  .criteria-panel .section-heading { align-items: start; flex-direction: column; gap: 0; }
  .criterion { grid-template-columns: minmax(0, 1fr); padding: 0 12px 12px; }
  .notebook .section-heading h2 { font-size: 25px; }
  .notebook pre { max-height: 250px; }
}