/* Product FAQ (content/product.md): the test / fuzzer / proof figure and the contact form. */

/* a test, a fuzzer, a proof (layouts/shortcodes/proofprimer.html) */
.primer { margin: var(--sp-6) 0 var(--sp-8); padding: var(--sp-5); background: var(--ground); outline: 1px solid var(--line, var(--ink)); outline-offset: -1px; }
.primer__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.primer__cell { min-width: 0; }
.primer svg { display: block; width: 100%; height: auto; }
.primer__frame { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.primer__frame--proof { fill: color-mix(in srgb, var(--brand) 16%, var(--paper)); stroke: var(--brand); stroke-width: 2; }
.primer__test { fill: var(--brand); }
.primer__fuzz { fill: var(--orange, #DC3A00); }
.primer__crash { fill: none; stroke: #C8102E; stroke-width: 1.6; stroke-linecap: round; }
.primer__cell p { margin: var(--sp-2) 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--dim, var(--ink)); }
.primer__cell b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.primer figcaption { margin-top: var(--sp-4); font-size: 14px; line-height: 1.55; }
@media (max-width: 560px) {
  .primer { padding: var(--sp-3); }
  .primer__row { gap: var(--sp-3); }
  .primer__cell p { font-size: 11px; }
}

/* the contact form (layouts/shortcodes/contactform.html) */
.contact-form { max-width: 40rem; margin: var(--sp-6) 0 var(--sp-8); }
.contact-form__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.contact-form__row { margin-bottom: var(--sp-5); }
.contact-form label { display: block; margin-bottom: var(--sp-2); font: 600 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.contact-form label span { margin-left: var(--sp-2); font-weight: 400; color: var(--dim, var(--ink)); text-transform: none; letter-spacing: 0; }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line, var(--ink)); border-radius: 0;
  background: var(--paper); color: var(--ink); font: 400 16px/1.4 var(--font-sans); }
.contact-form textarea { resize: vertical; min-height: 5.5rem; }
.contact-form textarea::placeholder { color: var(--dim, var(--ink)); opacity: 0.8; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; border-color: var(--brand); }
.contact-form [aria-invalid="true"] { border-color: #B3261E; }
.contact-form [hidden] { display: none; }
.contact-form__error { margin: 0 0 var(--sp-4); font-size: 14px; color: #B3261E; }
.contact-form__sent { margin: 0 0 var(--sp-4); font-size: 14px; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.contact-form__note { font-size: 13px; color: var(--dim, var(--ink)); }
.contact-form button { padding: 13px 22px; border: 0; background: var(--brand); color: var(--paper); cursor: pointer; font: 500 14px var(--font-mono); }
.contact-form button:hover { background: var(--brand-press); }
.contact-form button:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; }
@media (max-width: 560px) { .contact-form__pair { grid-template-columns: 1fr; } }

/* the section's tabs (layouts/partials/product.html), in the header nav's type */
.product-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin: var(--sp-3) 0 var(--sp-6); border-bottom: 1px solid var(--line); }
.product-tabs a { padding: var(--sp-2) 0; margin-bottom: -1px; border-bottom: 2px solid transparent; font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.product-tabs a:hover { color: var(--brand); }
.product-tabs a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.product-tabs a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* testing vs verification across the lifecycle (layouts/shortcodes/lifecycle.html) */
.lifecycle { margin: var(--sp-6) 0 var(--sp-8); padding: var(--sp-5); background: var(--ground); outline: 1px solid var(--line, var(--ink)); outline-offset: -1px; }
.lifecycle__fig { margin: 0 0 var(--sp-4); font: 12px/1.4 var(--font-mono); color: var(--dim, var(--ink)); }
.lifecycle__grid { display: grid; grid-template-columns: 7rem repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); align-items: start; }
.lifecycle__col { display: contents; }
.lifecycle__col > * { grid-column: var(--c); min-width: 0; }
.lifecycle__head { grid-row: 1; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); }
.lifecycle__bug { grid-row: 2; }
.lifecycle__card { grid-row: 3; }
.lifecycle__card--proof { grid-row: 4; }
.lifecycle__rowlabel { grid-column: 1; padding-top: var(--sp-2); font-weight: 600; font-size: 15px; line-height: 1.3; }
.lifecycle__head b { display: block; font-size: 16px; }
.lifecycle__head .lc-mono { display: block; font: 12px/1.4 var(--font-mono); color: var(--dim, var(--ink)); }
.lc-mono { font-family: var(--font-mono); font-size: 0.9em; }
.lifecycle__bug svg { display: block; width: 100%; max-width: 220px; height: auto; margin: var(--sp-2) 0 var(--sp-1); }
.lifecycle__bug p { margin: var(--sp-1) 0 0; font-size: 14px; line-height: 1.45; }
.lc-cell { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.lc-cell--over { fill: color-mix(in srgb, #C8102E 10%, var(--paper)); stroke: #C8102E; stroke-dasharray: 2 2; }
.lc-chunk { fill: none; stroke: var(--dim, var(--ink)); stroke-width: 1; }
.lc-chunk--bad { stroke: #C8102E; }
.lc-read { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.lc-read--over { stroke: #C8102E; stroke-dasharray: 3 2.5; }
.lifecycle__card { padding: var(--sp-3) var(--sp-3) var(--sp-2); background: var(--paper); border: 1px solid var(--line); }
.lifecycle__card--proof { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--paper)); }
.lifecycle__card dl { margin: 0; font: 12.5px/1.5 var(--font-mono); }
.lifecycle__card dl div { display: flex; justify-content: space-between; gap: var(--sp-2); }
.lifecycle__card dt { font-weight: 400; }
.lifecycle__card dd { margin: 0; color: var(--dim, var(--ink)); text-align: right; }
.lifecycle__card dd.ok { color: var(--green); }
.lifecycle__card dd.bad { color: #C8102E; }
.lifecycle__spec { margin: 0 0 var(--sp-2); font: 12.5px/1.5 var(--font-mono); white-space: pre-wrap; }
.lifecycle__spec i { font-style: normal; color: var(--dim, var(--ink)); }
.lifecycle__verdict { margin: var(--sp-2) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.lifecycle figcaption { margin-top: var(--sp-5); font-size: 15px; line-height: 1.55; color: var(--dim, var(--ink)); }
.lifecycle figcaption b { display: block; color: var(--ink); font-size: 16px; }
@media (max-width: 760px) {
  .lifecycle { padding: var(--sp-3); }
  .lifecycle__grid { display: block; }
  .lifecycle__rowlabel { display: none; }
  .lifecycle__col { display: block; margin-bottom: var(--sp-5); }
  .lifecycle__col:last-child { margin-bottom: 0; }
  .lifecycle__col > * { margin-top: var(--sp-3); }
  .lifecycle__col > .lifecycle__head { margin-top: 0; }
  .lifecycle__col > [data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--sp-1); font: 600 10.5px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim, var(--ink)); }
}