/* ==========================================================================
   Shared track form and artwork form (.aero-* classes), a plain flat document in the portfolio look of /events and /contact.
   Pure CSS: no images, fonts or CDNs. Scoped to .aero-* / #group-block / #artists-limit so no other page is affected. Reads only
   the --th-* theme variables and the --yh-* tokens from site.css (blue tint on /submit and the owner edit pages, plain blue-grey
   on the admin edit page). Contexts: .aero-shell (/submit and the owner edit pages, on the page), the admin edit pane.

   No window chrome: a section is a numbered heading ("01 / ТРЕК И ИСПОЛНИТЕЛИ", mono) under a thin ink rule with its fields
   next to it. The layout follows the width of the FORM (a container query on .aero-track-form), not the screen, so the admin pane
   gets the same one:
     >= 900px  heading + helper text in a narrow left column, the fields in the wide right one, two to a row where they are short
     >= 600px  heading above, the fields still two to a row
     below     one column
   The fields are flat 1px-ink inputs on the light fill; the file picker, the + button, the submit button and the
   contact cards are flat as well. Buttons wear the portfolio link-button design (thin rule, mono label, a fill that rises on hover).
   ========================================================================== */

/* Structural only: class display rules must not defeat the hidden attribute. */
.aero-form [hidden] {
  display: none !important;
}

/* ---------- containers: no box of their own, the page is the frame ---------- */

.aero-shell {
  position: relative;
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  font-family: var(--yh-font);
  color: var(--th-ink);
}

.aero-form {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  font-family: var(--yh-font);
  color: var(--th-ink);
}

/* the form is the container the layout queries ask (the closing section and the edit page's save row sit beside .aero-form) */
.aero-track-form {
  --tf-head-col: minmax(200px, 24%);
  --tf-col-gap: clamp(24px, 3vw, 56px);
  position: relative;
  display: flex;
  flex-direction: column;
  container: aero-form / inline-size;
}

/* ---------- headings ---------- */

/* the page title: big, light, tight, uppercase (the portfolio's section title, smaller: the form is what the page is for) */
.aero-title {
  position: relative;
  margin: 0 0 clamp(12px, 1.3vw, 22px);
  color: var(--th-ink);
  font-family: var(--hud-display);
  font-size: clamp(1.7rem, 3vw, 3.4rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

/* ---------- sections: a thin rule on top, the numbered heading and its helper text beside the fields ---------- */

.aero-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 10px;
  min-width: 0;
  padding: 12px 0 clamp(16px, 1.6vw, 24px);
  border-top: 1px solid var(--th-ink);
  color: var(--th-ink);
}

/* "01 / ТРЕК И ИСПОЛНИТЕЛИ": one mono line (the number first, then the words) like the section labels of the portfolio */
.aero-section-head {
  margin: 0;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: clamp(0.76rem, 0.85vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.aero-section-head h2 {
  display: inline;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}
/* the section number: "1" in the markup, "01 /" on the page */
.aero-badge {
  display: inline;
}
.aero-badge::before {
  content: "0";
}
.aero-badge::after {
  content: " /";
}
.aero-badge + h2::before {
  content: " ";
}

.aero-section-hint {
  margin: 0;
  max-width: 28rem;
}

/* the fields of a section: a column; two to a row from 600px on, the long ones (.aero-field--full) take the whole row */
.aero-section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px 20px;
  min-width: 0;
}

/* ---------- fields ---------- */

.aero-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.aero-label {
  display: block;
  margin: 0;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.aero-hint {
  margin: 0;
  color: var(--th-ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

/* flat input: 1px ink border on the light fill, a square focus ring */
.aero-input {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--th-ink);
  border-radius: 0;
  background: var(--yh-paper-hi);
  color: var(--th-ink);
  font-family: var(--yh-font);
  font-size: 0.96rem;
  line-height: 1.4;
}
.aero-input::placeholder {
  color: var(--th-ink-soft);
  opacity: 1;
}
.aero-input:hover {
  box-shadow: inset 0 0 0 1px var(--th-ink);
}
.aero-input:focus-visible {
  outline: 2px solid var(--yh-accent);
  outline-offset: 1px;
}
.aero-input:user-invalid {
  border-color: var(--yh-danger);
  box-shadow: inset 3px 0 0 var(--yh-danger);
}
.aero-input:disabled {
  background: var(--th-soft);
  color: var(--th-ink-soft);
  cursor: not-allowed;
}

/* a text area is a few lines tall and can be pulled taller (its rows="" attribute is only the no-CSS fallback) */
.aero-textarea {
  height: 5.4em;
  min-height: 3.8em;
  resize: vertical;
}
#track-lyrics {
  height: 6.4em;
}

/* File chooser: the native one, its button in the link-button language (mono, thin ink outline, the fill is ink on hover). */
.aero-file {
  padding: 6px;
  cursor: pointer;
}
.aero-file::file-selector-button {
  margin-right: 12px;
  padding: 6px 16px;
  border: 1px solid var(--th-ink);
  border-radius: 0;
  background: transparent;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.aero-file:hover::file-selector-button {
  background: var(--th-ink);
  color: var(--yh-paper-hi);
}

/* ---------- file fields: a dashed drop zone, the chosen file (name, size, preview) and the check result ---------- */

/* the native chooser is the drop zone: a dashed frame; hover = solid frame */
.aero-dropzone {
  padding: 10px;
  border-style: dashed;
}
.aero-dropzone:hover,
.aero-dropzone.is-dragover {
  border-style: solid;
}
.aero-dropzone.is-dragover {
  border-color: var(--yh-accent);
  box-shadow: inset 0 0 0 1px var(--yh-accent);
}
/* a rejected file: the danger border and bar, like any invalid field */
.aero-dropzone[aria-invalid="true"] {
  border-color: var(--yh-danger);
  box-shadow: inset 3px 0 0 var(--yh-danger);
}

/* the chosen file: a bordered row, a square bullet + the name in mono, size / dimensions underneath */
.aero-filecard {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--th-ink);
  background: var(--th-bg2);
}
.aero-filecard-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--hud-mono);
  font-size: 0.8rem;
  line-height: 1.4;
}
.aero-file-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--th-ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.aero-file-name::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--yh-green-deep);
}
.aero-file-meta {
  padding-left: 14px;
  color: var(--th-ink-soft);
}

/* the cover thumbnail: a pixel frame (1px ink, a mat of paper, a second tint hairline standing off it) */
.aero-preview {
  flex: none;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  margin: 4px;
  padding: 3px;
  border: 1px solid var(--th-ink);
  outline: 1px solid var(--th-tint-deep);
  outline-offset: 3px;
  background: var(--yh-paper-hi);
}
.aero-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the check result: the shared error row, flush with the field */
.aero-field .aero-file-error {
  margin: 0;
}

/* «* — обязательные поля»: the line at the top of every form (the mark is the same .aero-req as on the labels) */
.aero-legend {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  color: var(--th-ink-soft);
  font-family: var(--hud-mono);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* a required question: the blue asterisk (decoration; the input carries the required attribute). Red stays for errors */
.aero-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.aero-consent-label input { margin-top: 3px; flex: none; }
.aero-consent-label a { color: var(--yh-accent-ink); }
.aero-req {
  color: var(--th-accent-ink);
  font-weight: 700;
}

/* ---------- artist names ---------- */

.aero-name-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aero-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.aero-name-row .aero-input {
  flex: 1 1 auto;
}

/* "убрать": a destructive button, an outline in the danger red, fills on hover */
.aero-remove {
  flex: none;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--yh-danger-ink);
  border-radius: 0;
  background: transparent;
  color: var(--yh-danger-ink);
  font-family: var(--hud-mono);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.aero-remove:hover {
  background: var(--yh-danger);
  color: var(--yh-on-accent);
}

/* the password field of the guest extension: the input and its "показать" button (public/js/account-fields.js unhides it) */
.aero-reveal-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}
.aero-reveal-row .aero-input {
  flex: 1 1 auto;
}
.aero-reveal {
  flex: none;
  min-width: 6.5rem;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--th-ink);
  border-radius: 0;
  background: transparent;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.aero-reveal:hover,
.aero-reveal[aria-pressed="true"] {
  background: var(--th-ink);
  color: var(--yh-paper-hi);
}
.aero-reveal:focus-visible {
  outline: 2px solid var(--th-ink);
  outline-offset: 3px;
}
/* "уже есть аккаунт": the link at the end of the error row */
.aero-error-link,
.aero-again-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aero-error-link:hover,
.aero-error-link:focus-visible,
.aero-again-link:hover,
.aero-again-link:focus-visible {
  text-decoration-thickness: 2px;
}
.aero-account-email [data-account-email-value] {
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---------- /submit after the server refused the form (views/partials/submit-error.ejs) ---------- */

.aero-error-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.aero-error-text,
.aero-error-again {
  margin: 0;
}
.aero-error-again {
  font-size: 0.88rem;
  font-weight: 500;
}
/* an error about the e-mail, retired by public/js/account-fields.js once the e-mail is edited: neutral, no longer a verdict */
.xp-error.is-stale {
  border-color: var(--th-ink-soft);
  background: var(--yh-paper-hi);
  color: var(--th-ink);
}
.xp-error.is-stale::before {
  background: var(--th-ink-soft);
}
/* what a browser never refills (the file, the password): a note right at the field. It goes away by itself (CSS, no script)
   once the field is valid again */
.aero-refill {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 4px solid var(--yh-accent);
  background: var(--yh-accent-wash);
  color: var(--yh-ink);
  font-size: 0.84rem;
  line-height: 1.4;
}
.aero-field:has(input:valid) .aero-refill {
  display: none;
}

/* ---------- the account holder of the guest forms: the e-mail the account is made for ---------- */

.aero-main-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--yh-accent);
  color: var(--yh-on-accent);
  font-family: var(--hud-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}
.aero-main-tag,
.aero-main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
}
.aero-main-tag {
  flex: 1 0 100%;
}
.aero-main-hint {
  color: var(--th-ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}
/* the track: the first artist's card; the artwork: the contact field. The accent frame, a thick rule on the left */
.aero-card.aero-card--main,
.aero-field.aero-field--main {
  border: 1px solid var(--yh-accent);
  border-left-width: 6px;
}
.aero-field.aero-field--main {
  padding: 8px 12px 10px;
  background: var(--th-bg2);
}
.aero-card.aero-card--main {
  padding-left: 12px;
}
.aero-card--main [data-field="email"],
.aero-field--main .aero-input {
  border-color: var(--yh-accent);
  box-shadow: inset 0 0 0 1px var(--yh-accent);
}
/* a refused value still reads as an error before it reads as the account holder's */
.aero-card.aero-card--main [data-field="email"]:user-invalid,
.aero-field.aero-field--main .aero-input:user-invalid {
  border-color: var(--yh-danger);
  box-shadow: inset 3px 0 0 var(--yh-danger);
}

/* the main e-mail of a logged-in person: the account's own, read only (a flat grey field, a square lock-style left bar) */
.aero-input.aero-input--locked {
  background: var(--th-bg2);
  border-style: dashed;
  box-shadow: inset 4px 0 0 var(--th-ink);
  color: var(--th-ink);
  cursor: not-allowed;
}
.aero-input.aero-input--locked:focus-visible {
  outline: 2px solid var(--yh-accent);
  outline-offset: 1px;
}
.aero-locked-hint {
  margin: 4px 0 0;
}

/* ---------- the correction form (/account/.../correction): the same flat page, other questions ---------- */

/* which submission the correction is about */
.aero-context {
  margin: 0 0 clamp(12px, 1.4vw, 20px);
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 0.84rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.aero-context strong {
  font-weight: 700;
}

/* «важно: правила правок»: a <details> whose summary is a link button of the portfolio (a thin rule over and under, the mono label at
   the left, a plus that turns into a minus, a fill that rises on hover); opened, a note on the light panel with an accent bar */
.aero-rules {
  margin: 0 0 clamp(14px, 1.6vw, 24px);
  border-top: 1px solid var(--th-ink);
  border-bottom: 1px solid var(--th-ink);
}
.aero-rules-summary {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 10px 0;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: clamp(0.84rem, 1vw, 1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color 0.12s ease, padding 0.3s ease;
}
.aero-rules-summary::-webkit-details-marker {
  display: none;
}
.aero-rules-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--th-ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.1s ease-in-out;
}
.aero-rules-summary:hover,
.aero-rules-summary:focus-visible {
  padding-right: 12px;
  padding-left: 12px;
  color: var(--yh-paper-hi);
}
.aero-rules-summary:hover::before,
.aero-rules-summary:focus-visible::before {
  transform: scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.aero-rules-summary:focus-visible {
  outline: 2px solid var(--th-ink);
  outline-offset: 3px;
}
.aero-rules-mark::before {
  content: "+";
}
.aero-rules[open] .aero-rules-mark::before {
  content: "\2212";
}
.aero-rules-body {
  margin: 0;
  padding: 12px 16px 14px;
  border-left: 4px solid var(--yh-accent);
  background: var(--th-bg2);
  color: var(--th-ink);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* the reason select: a flat input with the chevron drawn in the background */
.aero-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231e3049' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* the long text of the correction: a big area and its live counter */
.aero-textarea.aero-textarea--big {
  height: 16em;
  min-height: 10em;
}
.aero-counter {
  font-family: var(--hud-mono);
  font-size: 0.78rem;
  text-align: right;
}
.aero-counter.is-near {
  color: var(--th-ink);
  font-weight: 700;
}

/* the "+" button: a flat square, hover = invert */
.aero-plus {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  padding: 0 0 2px;
  border: 1px solid var(--th-ink);
  border-radius: 0;
  background: transparent;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.aero-plus:hover:not(:disabled) {
  background: var(--th-ink);
  color: var(--yh-paper-hi);
}
.aero-plus:disabled {
  border-style: dashed;
  color: var(--th-ink-soft);
  cursor: not-allowed;
}

/* the limit note: a bordered mono label with an accent square */
#artists-limit {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 0 12px;
  border: 1px solid var(--th-ink);
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 2;
}
#artists-limit::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--yh-accent);
}

/* Group name: a note row (suggested / required): a darker bar with a tint edge. */
#group-block {
  padding: 12px 14px 12px 20px;
  background: var(--th-soft);
  box-shadow: inset 3px 0 0 var(--th-tint-deep);
}

/* ---------- да / нет toggle: two segments, the selection is a sliding ink bar ---------- */

.aero-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-self: flex-start;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--th-ink);
  border-radius: 0;
  background: var(--yh-paper-hi);
}

/* Radios: visually hidden but still focusable and screen-reader visible. */
.aero-toggle input[type="radio"] {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.aero-toggle label {
  position: relative;
  z-index: 1;
  min-width: 5em;
  padding: 7px 22px;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.aero-toggle label:hover {
  color: var(--th-accent-ink);
}

/* The ink bar that slides under the selected label. Hidden until an answer is chosen. */
.aero-toggle-glider {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  box-sizing: border-box;
  background: var(--th-ink);
  box-shadow: inset 3px 0 0 var(--yh-accent-hi);
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.aero-toggle input:checked ~ .aero-toggle-glider {
  opacity: 1;
}
.aero-toggle input[value="yes"]:checked ~ .aero-toggle-glider {
  transform: translateX(0);
}
.aero-toggle input[value="no"]:checked ~ .aero-toggle-glider {
  transform: translateX(100%);
}

/* Selected label: light on the ink bar. */
.aero-toggle input:checked + label,
.aero-toggle input:checked + label:hover {
  color: var(--yh-paper-hi);
}

/* Keyboard focus: ring on the whole bar (parent, via :has) + on the focused label (sibling). */
.aero-toggle:has(input:focus-visible) {
  outline: 2px solid var(--yh-accent);
  outline-offset: 2px;
}
.aero-toggle input:focus-visible + label {
  outline: 1px solid var(--yh-paper-hi);
  outline-offset: -4px;
}

/* ---------- contact cards: bordered rows, as many to a row as fit ---------- */

.aero-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 14px;
}

.aero-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px 14px;
  padding: 12px 14px 14px;
  border: 1px solid var(--th-ink);
  background: var(--th-bg2);
}
.aero-card .aero-field {
  flex: 1 1 170px;
  margin: 0;
}
.aero-card > .aero-field:last-child {
  flex-basis: 100%;
}

/* the artist's name: a mono caps tag with a square bullet */
.aero-card-name {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--th-rule);
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.aero-card-name::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--yh-accent);
}

/* ---------- submit area ---------- */

/* the last line above the button */
.aero-closing {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
}
.aero-closing::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--yh-accent);
}

/* the save row of the edit pages: a rule, then the button, laid out like a section */
.aero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 14px 0 clamp(8px, 1.6vw, 20px);
  border-top: 1px solid var(--th-ink);
}

/* the primary button: the portfolio link button, wide: a thin rule over and under, the mono label at the left, an arrow at the right,
   a fill in the text colour that rises on hover (0.2s) and drops away upward on leave (0.1s) */
.aero-submit {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--th-ink);
  border-bottom: 1px solid var(--th-ink);
  border-radius: 0;
  background: none;
  color: var(--th-ink);
  font-family: var(--hud-mono);
  font-size: clamp(0.9rem, 1.19vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color 0.12s ease, padding 0.3s ease;
}
.aero-submit::before {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  z-index: -1;
  background: var(--th-ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.1s ease-in-out;
}
.aero-submit::after {
  content: "\2197\FE0E";
  flex: none;
  transition: transform 0.2s ease;
}
.aero-submit:hover:not(:disabled),
.aero-submit:focus-visible {
  padding-right: 12px;
  padding-left: 12px;
  color: var(--yh-paper-hi);
}
.aero-submit:hover:not(:disabled)::before,
.aero-submit:focus-visible::before {
  transform: scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.aero-submit:hover:not(:disabled)::after {
  transform: translate(2px, -2px);
}
.aero-submit:disabled {
  border-style: dashed;
  color: var(--th-ink-soft);
  cursor: not-allowed;
}
.aero-submit:disabled::after {
  content: none;
}

/* inside a section or the save row the rule over the section is the button's rule over it too */
.aero-section-body > .aero-submit,
.aero-actions > .aero-submit {
  border-top: 0;
}

/* Keyboard focus for the buttons. */
.aero-plus:focus-visible,
.aero-remove:focus-visible,
.aero-submit:focus-visible {
  outline: 2px solid var(--th-ink);
  outline-offset: 3px;
}
.aero-file:focus-visible {
  outline: 2px solid var(--yh-accent);
  outline-offset: 1px;
}

/* ---------- the layout, by the width of the form ---------- */

@container aero-form (min-width: 600px) {
  .aero-section-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .aero-section-body > .aero-field--full,
  .aero-section-body > .aero-cards,
  .aero-section-body > .aero-closing,
  .aero-section-body > .aero-submit {
    grid-column: 1 / -1;
  }
}

@container aero-form (min-width: 900px) {
  .aero-section {
    grid-template-columns: var(--tf-head-col) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: var(--tf-col-gap);
  }
  .aero-section-head {
    grid-column: 1;
    grid-row: 1;
  }
  .aero-section-hint {
    grid-column: 1;
    grid-row: 2;
  }
  .aero-section-body {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .aero-actions {
    grid-template-columns: var(--tf-head-col) minmax(0, 1fr);
    column-gap: var(--tf-col-gap);
  }
  .aero-actions > .aero-submit {
    grid-column: 2;
  }
}

/* ---------- narrow screens ---------- */

@media (max-width: 640px) {
  .aero-name-row {
    flex-wrap: wrap;
  }
  .aero-name-row .aero-input {
    flex-basis: 100%;
  }
  .aero-remove {
    margin-left: auto;
  }
  .aero-card {
    padding: 10px 12px 12px;
  }
  .aero-dropzone {
    padding: 8px;
  }
  .aero-filecard {
    gap: 12px;
    padding: 8px 10px;
  }
  .aero-preview {
    width: 64px;
    height: 64px;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .aero-rules-summary,
  .aero-rules-summary::before,
  .aero-remove,
  .aero-reveal,
  .aero-plus,
  .aero-submit,
  .aero-submit::before,
  .aero-submit::after,
  .aero-file::file-selector-button,
  .aero-toggle label,
  .aero-toggle-glider {
    transition: none;
  }
  .aero-submit:hover:not(:disabled),
  .aero-submit:focus-visible {
    padding-right: 0;
    padding-left: 0;
  }
  .aero-submit:hover:not(:disabled)::after,
  .aero-submit:active:not(:disabled),
  .aero-remove:active,
  .aero-plus:active:not(:disabled) {
    transform: none;
  }
}