/* /toolkit/ only. Everything structural here comes from assets/donor/donor.css, which this page
   loads first: the wrap, the hero, the band, the headings, the form controls, the buttons and the
   footer are all already defined there. This file holds the three things that page does not have.
   Keeping it this small is the point; a second copy of the design system would be a second thing to
   keep in step with the first. */

/* The builder. Controls on the left, what you are about to paste on the right, so that the preview
   and the code sit together and a change can be seen landing in both at once. */
.tk-build{display:grid;grid-template-columns:360px 1fr;gap:40px;align-items:start}
.tk-build input[type=text]{width:100%;min-height:46px;border:1px solid #86917F;background:#fff;border-radius:0;color:#0B0F0A;padding:12px;font-size:14px;margin-bottom:10px}
.tk-build form .small{margin:0}
.tk-output{border:1px solid #0B0F0A;padding:30px;background:#fff}
.tk-output textarea{min-height:0;margin-bottom:14px}
.tk-output .button{width:100%}
.kit-step{margin:0 0 9px}

/* The preview deliberately inherits nothing of ours. The snippet carries its own inline styles so
   that it looks the same on somebody else's site, and a preview that lent it our typography would
   promise an appearance it does not deliver. */
.kit-preview{background:#F4F6F3;border:1px dashed #86917F;padding:22px;margin-bottom:18px;font-family:system-ui,-apple-system,Arial,sans-serif;font-size:15px}
.kit-preview a{color:#155138}

/* The catalogue. */
.tk-group{margin-bottom:40px}
.tk-group h3{margin-bottom:4px}
.tk-group>.small{margin:0 0 16px}
.tk-table-wrap{overflow-x:auto}
.tk-table{border-collapse:collapse;width:100%;font-size:14px;color:#2A302A}
.tk-table th,.tk-table td{border:1px solid #E2E6DF;padding:11px 13px;text-align:left;vertical-align:top;line-height:1.55}
.tk-table th{background:#F4F6F3;font-weight:700;color:#0B0F0A;font-size:13px}
.tk-table td:first-child{font-weight:600;color:#0B0F0A}
.tk-count{white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5A6457}
.tk-one{color:#5A6457}

/* The feeds. */
.tk-feeds{list-style:none;padding:0;margin:20px 0 0}
.tk-feeds li{border-top:1px dashed #C8CEC6;padding:14px 0;font-size:14px}
.tk-feeds code{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#155138;overflow-wrap:anywhere}

@media(max-width:950px){
  .tk-build{grid-template-columns:300px 1fr;gap:26px}
  .tk-output{padding:22px}
}
@media(max-width:700px){
  .tk-build{grid-template-columns:1fr;gap:26px}
  .tk-output{padding:20px}
  .tk-table th,.tk-table td{padding:9px 10px}
}