/* Reusable form pieces; scoped to this page until another page adopts them. */
#new-page .form-stack { display: grid; gap: var(--space-4); min-width: 0; }
#new-page .form-card {
  min-width: 0;
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(var(--shadow-rgb), .04);
}
#new-page .form-card-heading { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; margin-bottom: var(--space-5); }
#new-page .form-card-heading > div { min-width: 0; }
#new-page .form-number {
  display: grid; place-items: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--radius-badge);
  background: var(--soft); color: var(--accent);
  font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
#new-page .form-card-heading h3 { margin: 2px 0 0; font-size: var(--text-base); font-weight: 700; line-height: var(--lh-ui); }
#new-page .form-card-description { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-xs); font-weight: 400; line-height: var(--lh-prose); }
#new-page .form-fields { display: grid; gap: var(--space-4); min-width: 0; }
#new-page .form-fields label { margin: 0; font-size: var(--text-sm); font-weight: 650; }
#new-page .form-grid { gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
#new-page :is(input, select, textarea) {
  min-height: 44px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-field);
  transition: border-color 180ms var(--motion-ease), box-shadow 180ms var(--motion-ease);
}
#new-page :is(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--soft); }
#new-page button { transition: opacity 180ms var(--motion-ease), transform 180ms var(--motion-ease), border-color 180ms var(--motion-ease), box-shadow 180ms var(--motion-ease); }
#new-page .field-hint, #new-page #problem-photo-quota { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-prose); }
#new-page :is(#problem-photo-quota, #problem-photo-status):empty { display: none; }
#new-page .actions { margin: 0; gap: var(--space-3); }
#new-page #mistake-inputs { display: grid; gap: var(--space-4); }
#new-page .mistake-row { margin: 0; padding: var(--space-4); }
#new-page .mistake-row > button { margin-top: var(--space-3); }
#new-page .form-footer { margin: 0; padding-top: var(--space-2); }
#new-page .photo-dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2); padding: var(--space-5); text-align: center; cursor: pointer;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--paper-2);
  transition: border-color 180ms var(--motion-ease), box-shadow 180ms var(--motion-ease);
}
#new-page #problem-photo-file {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
#new-page .photo-dropzone:focus-within,
#new-page .photo-dropzone.is-dragging { border-color: var(--accent); box-shadow: 0 0 0 4px var(--soft); }
#new-page .photo-dropzone-icon { display: grid; place-items: center; width: 44px; height: 44px; color: var(--accent); background: var(--soft); border-radius: var(--radius-option); }
#new-page .photo-dropzone-icon svg { width: 26px; height: 26px; }
#new-page .photo-dropzone-format, #new-page .photo-dropzone-filename { color: var(--muted); font-size: var(--text-xs); font-weight: 400; overflow-wrap: anywhere; max-width: 100%; }
#new-page .photo-dropzone-button { margin-top: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-field); color: var(--on-accent); background: var(--accent); }
#new-page .photo-dropzone .photo-preview { margin-top: var(--space-3); max-height: 240px; }
#new-page .form-photo-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
@media (hover: hover) and (pointer: fine) {
  #new-page .photo-dropzone:hover { border-color: var(--accent); }
}
#new-page .form-section-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3) 0; background: var(--paper); }
#new-page .form-section-progress > span { height: 3px; border-radius: var(--radius-pill); background: var(--line); }
#new-page .form-section-progress > .is-current { background: var(--accent); }
#new-page .form-fold { display: block; }
#new-page .form-fold-heading { position: relative; min-height: 36px; }
#new-page .form-fold-heading .form-card-heading { align-items: center; margin: 0; padding-right: 88px; }
#new-page .form-fold-heading h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#new-page .form-fold-toggle {
  position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2);
  width: 100%; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius-badge); background: transparent;
}
#new-page .form-fold-toggle:hover:not(:disabled) { background: transparent; }
#new-page .form-fold-toggle:focus-visible { outline-offset: 6px; }
#new-page .form-fold-state { padding: var(--space-1) var(--space-2); border-radius: var(--radius-badge); color: var(--muted); background: var(--paper-2); font-size: var(--text-meta); font-weight: 500; }
#new-page .form-fold-state.is-filled { color: var(--accent); background: var(--soft); }
#new-page .form-fold-arrow { width: 16px; color: var(--muted); font-size: var(--text-lg); transition: transform 200ms var(--motion-ease); }
#new-page .form-fold-toggle[aria-expanded="true"] .form-fold-arrow { transform: rotate(180deg); }
/* F3's explicit height transition is the sole layout-property exception. */
#new-page .form-fold-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms var(--motion-ease); }
#new-page .form-fold-inner { min-height: 0; overflow: hidden; display: grid; gap: var(--space-4); opacity: 0; transition: opacity 180ms var(--motion-ease); }
#new-page .form-fold-inner > :first-child { margin-top: var(--space-4); }
#new-page .form-fold-inner > .form-fields { padding: var(--space-1); margin: 0 calc(-1 * var(--space-1)); }
#new-page .form-fold[data-expanded="true"] > .form-fold-content { grid-template-rows: 1fr; }
#new-page .form-fold[data-expanded="true"] .form-fold-inner { opacity: 1; }
#new-page .form-fold-instant :is(.form-fold-content, .form-fold-inner) { transition: none; }
@media (min-width: 600px) {
  #new-page .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #new-page .form-grid > label:first-child { grid-column: 1 / -1; }
  #new-page .form-grid:has([data-role="language-field"][hidden]) > label:first-child { grid-column: auto; }
}
@media (min-width: 1024px) {
  #new-page .form-card { display: grid; grid-template-columns: var(--form-aside-width) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
  #new-page .form-card-heading { margin-bottom: 0; align-self: start; }
  #new-page .form-fold { display: block; }
  #new-page .form-fold-heading .form-card-heading { width: var(--form-aside-width); padding-right: 0; }
  #new-page .form-fold-inner { grid-template-columns: var(--form-aside-width) minmax(0, 1fr); gap: var(--space-6); }
  #new-page .form-fold-inner > .form-fields { margin-top: var(--space-4); }
  #new-page .form-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
  #new-page .form-grid > label:first-child { grid-column: auto; }
  #new-page .form-grid:has([data-role="language-field"][hidden]) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
@media (max-width: 599px) {
  #new-page .form-card { padding: var(--space-4); }
  #new-page .form-section-progress { position: sticky; top: 0; z-index: 10; }
  #new-page .form-footer {
    position: sticky; bottom: var(--form-keyboard-inset, 0px); z-index: 9;
    padding: var(--space-5) 0 calc(var(--space-4) + env(safe-area-inset-bottom));
    background: var(--paper);
  }
  #new-page .form-footer > .primary { flex: 1; min-height: 46px; }
  #new-page .form-footer > #add-mistake { font-size: var(--text-xs); }
  @supports (background: linear-gradient(to bottom, transparent, var(--paper))) {
    #new-page .form-footer { background: linear-gradient(to bottom, transparent, var(--paper) var(--space-5)); }
  }
}
@media (prefers-reduced-motion: reduce) {
  #new-page *, #new-page *::before, #new-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}