/*
 * The contact page on css/ui.css: the correction form (js/feedback-client.js)
 * and the API access request form (js/api-access-request-client.js), each in a
 * plain panel.
 */

/* A form in a panel of its own. */
.form-panel {
  margin-top: 0; padding: 16px; border-radius: 14px;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.form-panel .primary { margin-top: 2px; }
.form-note { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

/* A group of checkboxes with a label, like a field. */
.checks { margin: 0; padding: 0; border: 0; min-width: 0; }
.checks legend { padding: 0; margin-bottom: 4px; font-weight: 600; font-size: 13px; }
.checks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.checks .check { padding: 8px 0; }
@media (min-width: 600px) {
  .checks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Only a bot fills in this field, so people never see it. It takes no room
   instead of sitting off screen, so it never pushes the page sideways. */
.api-access-honeypot {
  position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none;
}

.section-lede a { font-weight: 600; }

/* A wide screen has room for both forms next to each other. */
@media (min-width: 1200px) {
  .contact-page {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px); align-items: start;
  }
  .contact-page > .page-head { grid-column: 1 / -1; }
  .contact-page > .section { margin-top: 0; }
}