/* Shared by every rearranged page: base type, the header with its nav, controls, tables.
   Choices, drop zones, section labels and icon buttons are the design's. */
@import url("vendor/design/controls.css");
@import url("vendor/design/iconbutton.css");
@import url("vendor/design/themeswitch.css");
* { box-sizing: border-box; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans);
       font-variant-numeric: tabular-nums; font-size: 14px; line-height: 1.45; }
/* The header is the design's (.ds-header): the name, which goes back to your projects, and
   at its end the page's status and the Engine switch. */
/* the first shown item of the end group goes right; the rest follow it */
.ds-header .end:not([hidden]) ~ .end { margin-left: 0; }
/* the quiet way back to your projects, over a page's first section */
.back { margin: 0 0 16px; font-size: 13px; }
main .back a { color: var(--ink-mut); text-decoration: none; }
main .back a:hover { color: var(--ink); }
/* a section's head is the design's label (controls.css .ds-label), as in Coming Undone */
h2 { margin: 24px 0 8px; color: var(--ink-mut); font: 600 12px/1.3 var(--font-mono); text-transform: var(--button-case); letter-spacing: .04em; }
main { max-width: 960px; margin: 0 auto; padding: 24px; }   /* one column width on every page */
.mut { color: var(--ink-mut); } .mono { font-family: var(--font-mono); font-size: 12.5px; }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
button, select, a.btn { font: inherit; color: var(--ink); background: var(--ground-2); border: var(--hairline); border-radius: 0; padding: 6px 12px; cursor: pointer; }
button:hover, select:hover { border-color: var(--ink); }
a.btn { display: inline-block; text-decoration: none; }
button:disabled { opacity: .45; cursor: default; }
button.primary, a.btn.primary { background: var(--acc); color: var(--ground); border-color: var(--acc); font-weight: 700; }
table { border-collapse: collapse; width: 100%; margin-top: 8px; }
td, th { text-align: left; padding: 4px 8px 4px 0; border-bottom: var(--hairline); vertical-align: top; }
th { font-size: 12px; color: var(--ink-mut); font-weight: 400; }
.err { color: var(--acc); font-weight: 700; }
.spacer { flex: 1; }
main a:not(.btn) { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--ink-mut); }
main a:not(.btn):hover { text-decoration-color: var(--acc); }
input[type=file] { font: inherit; color: var(--ink-mut); }
input[type=file]::file-selector-button { font: inherit; color: var(--ink); background: var(--ground-2);
  border: var(--hairline); border-radius: 0; padding: 6px 12px; margin-right: 12px; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--ink); }
/* a label column and a value column, so every row of options lines up */
.grid { display: grid; grid-template-columns: 8.5rem 1fr; gap: 10px 16px; align-items: center; margin: 12px 0; }
.grid > .label { color: var(--ink-mut); font-size: 13px; }
/* options that belong together sit joined, one of them on: .choice.ds-choice (controls.css) */
button.on { background: var(--acc); color: var(--ground); border-color: var(--acc); }
select { appearance: none; -webkit-appearance: none; padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-mut) 50%), linear-gradient(135deg, var(--ink-mut) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 32px 0 4px; border-top: var(--hairline); padding-top: 16px; }
.section-head h2 { margin: 0; }
details.keys { font-size: 13px; color: var(--ink-mut); margin: 16px 0; }
details.keys summary { cursor: pointer; }
kbd { font-family: var(--font-mono); font-size: 12px; border: var(--hairline); padding: 0 4px; }
/* where it runs: the switch sits at the header's end, a line under the header says so */
.ds-header .runs { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-mut); }
.ds-header .runs[hidden] { display: none; }
.runs-bar { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 6px 24px;
            border-bottom: var(--hairline); color: var(--ink-mut); font-size: 13px; }
details.contact summary { cursor: pointer; color: var(--ink-mut); }
details.contact summary:hover { color: var(--ink); }
.contact-slot:has(details[open]) { flex-basis: 100%; order: 3; }
.contact-form { display: grid; gap: 8px; max-width: 460px; margin: 8px 0 4px; color: var(--ink); }
.contact-form p { margin: 0; }
.contact-form label { display: grid; gap: 4px; font-size: 13px; }
.contact-form label span { color: var(--ink-mut); }
.contact-form input, .contact-form textarea { font: inherit; color: var(--ink); background: var(--ground-2);
  border: var(--hairline); border-radius: 0; padding: 6px 8px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--ink); }
.contact-form .gotcha { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-thanks { color: var(--ink); margin: 8px 0; }
@media (max-width: 600px) {
  .ds-header .runs { margin-left: 0; flex-wrap: wrap; }
  .runs-bar { padding: 6px 16px; }
  main { padding: 16px; }
  .wide { overflow-x: auto; }
  .grid { grid-template-columns: 1fr; gap: 4px; }
  .grid > .label { margin-top: 8px; }
}