/* The Lab's rule sets (js/lab-rulesets.js): the rules panel's section, the
   rule form's teaching note, and the dialogs (Rule sets, Details, Diff, Submit) */
.lab-rules .rs { display: grid; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lab-rules .rs h4, .lab-rules .accent h4 { margin: 0; }
.lab-rules .rs-row { font-size: 13px; min-width: 0; }
.lab-rules .rs-n b { color: var(--vellum); }
.rs-var { color: var(--dim); font-style: italic; }
.lab-rules .rs-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lab-rules .rs-act .sp { flex: 1; }
.lab-rules .rs-act button { font-size: 12px; padding: 3px 9px; }
.rform textarea { grid-column: 1 / -1; font: 12px/1.35 var(--mono); background: var(--nave); color: var(--vellum); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; resize: vertical; min-width: 0; }
.rform label.wide textarea { width: 100%; box-sizing: border-box; }
.rform .rs-ra { justify-content: flex-start; }

.lab-rs-dlg { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--gold); border-radius: 10px;
  background: var(--stone); color: var(--vellum); box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6); box-sizing: border-box; }
.lab-rs-dlg::backdrop { background: rgba(8, 9, 12, 0.6); }
.lab-rs-dlg .rs-dlg-in { display: grid; gap: 10px; padding: 14px 16px; overflow-wrap: anywhere; }
.lab-rs-dlg .rs-h { display: flex; align-items: center; gap: 8px; }
.lab-rs-dlg .rs-h h3 { margin: 0; flex: 1; font: 700 15px var(--label); letter-spacing: 0.06em; color: var(--gold); text-transform: lowercase; }
.lab-rs-dlg .rs-h button { padding: 2px 8px; }
.lab-rs-dlg .rs-sub { margin: -6px 0 0; color: var(--dim); font-size: 13px; }
.lab-rs-dlg section { display: grid; gap: 6px; }
.lab-rs-dlg h4 { margin: 4px 0 0; display: flex; align-items: center; gap: 8px; font: 700 12.5px var(--label); letter-spacing: 0.06em; color: var(--vellum); text-transform: lowercase; }
.lab-rs-dlg h4 .sp, .lab-rs-dlg .rs-foot .sp { flex: 1; }
.lab-rs-dlg h4 button { font-size: 12px; padding: 2px 8px; }
.lab-rs-dlg .rs-note { margin: 0; color: var(--dim); font-size: 13px; }
.lab-rs-dlg a { color: var(--gold); }
.lab-rs-dlg .rs-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 4px; }
.lab-rs-dlg .rs-to { font-size: 13px; }
.lab-rs-dlg .rs-to select { max-width: 100%; }
.lab-rs-dlg .rs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lab-rs-dlg .rs-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--stone-2); }
.lab-rs-dlg .rs-li { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13.5px; }
.lab-rs-dlg .rs-meta { flex-basis: 100%; font: 11.5px var(--label); letter-spacing: 0.03em; color: var(--dim); }
.lab-rs-dlg .rs-b { display: flex; flex-wrap: wrap; gap: 4px; }
.lab-rs-dlg .rs-b button { font-size: 12px; padding: 2px 8px; }
.lab-rs-dlg button.warn { border-color: var(--rubric); color: var(--rubric); }
.lab-rs-dlg .rs-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.lab-rs-dlg .rs-chips button { font-size: 12px; padding: 2px 8px; }
.lab-rs-dlg .rs-form { display: grid; gap: 8px; }
.lab-rs-dlg .rs-form label { display: grid; gap: 2px; font: 11.5px var(--label); letter-spacing: 0.04em; color: var(--dim); }
.lab-rs-dlg .rs-form input, .lab-rs-dlg .rs-form textarea { font: 13.5px var(--display); padding: 5px 8px; background: var(--nave); color: var(--vellum); border: 1px solid var(--line); border-radius: 6px; min-width: 0; resize: vertical; }
.lab-rs-dlg .rs-errs { margin: 0; padding-left: 18px; font: 12px var(--mono); color: var(--rubric); display: grid; gap: 2px; }
/* the diff */
.lab-rs-dlg .rs-diff { display: grid; gap: 10px; }
.lab-rs-dlg .rs-rl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lab-rs-dlg .rs-rl > li { padding: 5px 8px; border-left: 3px solid var(--line); background: var(--stone-2); border-radius: 0 6px 6px 0; font-size: 13px; }
.lab-rs-dlg .rs-rl > li.add { border-left-color: var(--ok); }
.lab-rs-dlg .rs-rl > li.del { border-left-color: var(--rubric); }
.lab-rs-dlg .rs-rl > li.del b { text-decoration: line-through; text-decoration-color: var(--rubric); }
.lab-rs-dlg .rs-rl b { font: 500 12.5px var(--mono); }
.lab-rs-dlg .rs-sum { font-size: 12.5px; color: var(--vellum); }
.lab-rs-dlg .rs-sum code { font: 11px var(--mono); color: var(--dim); }
.lab-rs-dlg .rsrc, .lab-rs-dlg .rs-teach { font-size: 12px; color: var(--dim); font-style: italic; }
.lab-rs-dlg .rs-t { border-collapse: collapse; width: 100%; font-size: 12.5px; margin-top: 3px; }
.lab-rs-dlg .rs-t th, .lab-rs-dlg .rs-t td { text-align: left; padding: 2px 8px 2px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.lab-rs-dlg .rs-t th { font: 11.5px var(--mono); color: var(--dim); font-weight: 400; white-space: nowrap; }
.lab-rs-dlg .rs-t thead th { font: 11.5px var(--label); letter-spacing: 0.04em; }
.lab-rs-dlg .rs-t td { font: 12px var(--mono); }
.lab-rs-dlg .rs-t td.from { color: var(--dim); }
.lab-rs-dlg .rs-t td.to { color: var(--gold); }
.lab-rs-dlg .rs-t td.to.same { color: var(--dim); }
.lab-rs-dlg .rs-heard th { font: 13px var(--display); color: var(--vellum); }
.lab-rs-dlg .rs-heard td { font: 13px var(--display); }
.lab-rs-dlg .rs-order { margin: 0; padding-left: 20px; font-size: 12.5px; }
.lab-rs-dlg .k { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: 1px; }
@media (max-width: 520px) {
  .lab-rs-dlg .rs-dlg-in { padding: 12px; }
  .lab-rs-dlg .rs-t td, .lab-rs-dlg .rs-t th { padding-right: 4px; }
}

/* the examples' dialog (lab.js labExOpen) */
.lab-ex-dlg { width: min(820px, calc(100vw - 32px)); }
.lab-ex-dlg .rs-dlg-in { max-height: calc(100vh - 50px); grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }
.lab-ex-dlg .ex-f { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-ex-dlg .ex-q { flex: 1 1 260px; min-width: 0; font-size: 15px; padding: 6px 10px; }
.lab-ex-dlg .ex-l { flex: 0 1 240px; min-width: 0; }
.lab-ex-dlg .ex-k { display: flex; gap: 4px; flex-wrap: wrap; }
.lab-ex-dlg .ex-k button { padding: 2px 9px; font-size: 12px; }
.lab-ex-dlg .ex-n { margin: 0; color: var(--dim); }
.lab-ex-dlg .ex-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; max-height: 60vh; display: grid; gap: 2px; }
.lab-ex-dlg .ex-list li { padding: 7px 10px; border-radius: 6px; cursor: pointer; border-left: 3px solid transparent; }
.lab-ex-dlg .ex-list li:hover, .lab-ex-dlg .ex-list li.cur { background: var(--stone-2); border-left-color: var(--gold); }
.lab-ex-dlg .ex-list li.none { cursor: default; color: var(--dim); }
.lab-ex-dlg .ex-t { font-size: 15px; color: var(--vellum); }
.lab-ex-dlg .ex-tr { font-size: 13px; color: var(--dim); font-style: italic; }
.lab-ex-dlg .ex-m { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.lab-ex-dlg .ex-note { font-size: 12.5px; color: var(--dim); margin-top: 3px; }
.lab-ex-dlg .ex-save { display: flex; gap: 8px; flex-wrap: wrap; }
.lab-ex-dlg .ex-sn { flex: 1 1 260px; min-width: 0; padding: 5px 10px; }
.lab-ex-dlg .ex-list li.mine .ex-m .sp { flex: 1; }
.lab-ex-dlg .ex-list li.mine .ex-m button { padding: 1px 8px; font-size: 11.5px; }
.lab-ex-dlg .ex-list li.mine .ex-m button.sure { border-color: var(--rubric); color: var(--rubric); }