/* Rules only this page uses. The colours and the base shapes are the shared look, /look.css. */
button.wide { width: 100%; }
hr.rule { border: 0; border-top: 1px solid var(--line); margin: 24px 0 0; }
.legend { font-size: 14px; font-weight: 650; margin: 0 0 10px; }
.legend.after { margin-top: 24px; }
.card {
  display: block; width: 100%; text-align: left; font-weight: 400; padding: 12px 14px; margin: 0 0 10px;
  border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink);
}
.card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.card .name { display: block; font-weight: 650; }
.card code { font-size: 13px; color: var(--muted); word-break: break-all; }
.card .muted { display: block; }
.rows {
  display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; border-top: 1px solid var(--line);
  padding-top: 12px; margin: 0 0 24px; font-size: 14px;
}
.rows code { font-size: 13px; color: var(--muted); word-break: break-all; }
.notice { margin: 0 0 16px; }
.notice code { font-size: 13px; color: var(--muted); display: block; word-break: break-all; }
.card.wait { opacity: .6; }
.card:disabled { cursor: default; }