/* forms.css — every input-bearing widget: inline-form (admin rows),
   field-form (most pages), file inputs, the <details class="configure">
   disclosure, generic buttons (.more), and the notice/warn blocks. */

/* monochrome form controls that follow light/dark via accent-color */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--ink); cursor: pointer;
}

.inline-form { display: inline; margin: 0; }
.inline-form select {
  font-family: inherit; font-variation-settings: var(--mono); font-size: 12px;
  border: 1px solid var(--field-border); background: var(--paper); padding: 1px 3px;
}

.field-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

/* signing-key-fields: the swap target on the add-key form. htmx swaps
   its innerHTML between an OpenPGP textarea (~8rem tall) and a pair
   of sigstore inputs (~4rem tall) when the kind dropdown changes;
   without a min-height the form below jumps up/down on every swap
   and reads as a flash. Lock it to the taller of the two so the
   layout stays put across both kinds. */
.signing-key-fields { min-height: 8.5rem; }
.signing-key-fields textarea { width: 100%; box-sizing: border-box; }
.field-form input[type="text"], .field-form input[type="email"], .field-form input[type="password"],
.field-form input[type="number"], .field-form select, .inline-form select {
  font-family: inherit; font-size: 13px; padding: 0.3rem 0.5rem;
  border: 1px solid var(--field-border); background: var(--paper); color: var(--ink);
}
.field-form input[type="text"], .field-form input[type="email"], .field-form input[type="password"] { min-width: 14rem; flex: 1 1 14rem; }
/* Opt-out for short numeric / id inputs (job interval, port, etc.):
   the 14rem default expands tables and triggers horizontal scroll. */
.field-form input.narrow { min-width: 0; flex: 0 0 auto; width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.field-form input[type="text"]:focus, .field-form input[type="email"]:focus, .field-form input[type="password"]:focus,
.field-form input[type="number"]:focus, .field-form select:focus,
textarea:focus { outline: none; border-color: var(--ink); }
/* Keyboard focus keeps a visible ring (WCAG 2.4.7); mouse focus uses the border
   change above. Same specificity as :focus, declared after, so it wins for kbd. */
.field-form input[type="text"]:focus-visible, .field-form input[type="email"]:focus-visible, .field-form input[type="password"]:focus-visible,
.field-form input[type="number"]:focus-visible, .field-form select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Selects: reset the platform appearance so the border/background tokens above
   actually take. Without appearance:none, Safari/WebKit paints its native
   rounded chrome on top of our styling and the control reads as "broken".
   Resetting it drops the native caret, so we draw our own (a monochrome
   chevron that works on the paper background in light and dark). */
.field-form select, .inline-form select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.7rem;
  padding-right: 1.5rem;
}
.inline-form select { background-position: right 0.25rem center; background-size: 0.6rem; padding-right: 1.1rem; }

/* The create-repo token field only applies to a source-proxy forge
   (github/gitlab); hide it for other ecosystems. Scoped via :has() to forms
   that carry an ecosystem picker, so the standalone passthrough-token field
   (which has no picker) stays visible. */
.field-form:has(select[name="ecosystem"]) input[name="token"] { display: none; }
.field-form:has(select[name="ecosystem"] option[value="github"]:checked) input[name="token"],
.field-form:has(select[name="ecosystem"] option[value="gitlab"]:checked) input[name="token"] { display: inline-block; }

/* Textareas use the same paper/ink/hair tokens as text inputs so a
   paste block (public key, news body, license) reads identically in
   light and dark. Browser default styling lights the field paper-white
   in dark mode and inverts text, which is jarring next to the rest of
   the form. */
textarea {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--field-border);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
}
.field-form label.check {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 12px; color: var(--grey); white-space: nowrap;
}

.field-form button, .inline-form button {
  font-family: inherit; font-variation-settings: var(--mono); font-size: 12px;
  border: 1px solid var(--field-border); background: var(--paper); padding: 0.3rem 0.7rem; cursor: pointer;
}
.field-form button:hover, .inline-form button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* generic full-width "load more" / row button used by listings */
button.more {
  font-family: inherit;
  font-variation-settings: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.25rem 0.8rem;
  cursor: pointer;
  width: 100%;
}
button.more:hover { background: var(--ink); color: var(--paper); }
.htmx-request button.more { opacity: 0.5; }

/* file inputs: theme the browse button + "no file" text */
input[type="file"] {
  font-family: inherit; font-size: 12px; color: var(--grey);
  border: 1px solid var(--field-border); background: var(--paper); padding: .2rem; max-width: 100%;
}
input[type="file"]::file-selector-button {
  font-family: inherit; font-variation-settings: var(--mono); font-size: 11px;
  border: 1px solid var(--field-border); background: var(--paper); color: var(--ink);
  padding: .25rem .6rem; margin-right: .5rem; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* "configure client" disclosure on a repo */
.configure { margin: .15rem 0; }
.configure > summary {
  display: inline-block; list-style: none; cursor: pointer;
  font-size: 11px; font-variation-settings: var(--mono);
  padding: 0 .5em; border: 1px dashed var(--hair); border-radius: 0; color: var(--grey);
}
.configure > summary::-webkit-details-marker { display: none; }
.configure[open] > summary { border-style: solid; border-color: var(--ink); color: var(--ink); }
.configure pre.setup-code { margin: .4rem 0 .2rem; }

/* shared callout blocks: a soft notice + an emphatic warn */
.notice { border: 1px solid var(--ink); border-left: 3px solid var(--ink); padding: 0.55rem 0.8rem; margin: 1rem 0; background: var(--surface); }
.warn {
  font-variation-settings: var(--prose);
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--ink);
  border-left: 3px solid var(--ink);
  font-size: 13px; font-weight: 600;
  overflow-wrap: anywhere;
}