/* Submission flow — form, files, check-up, send.
 *
 * Uses the existing tokens from typesetter.css (saffron for surfaces,
 * bistre for text and links) and its shared components (.surface-card,
 * .page-header, .flash, .field-hint, .primary-button). Only what the
 * flow needs on top of those lives here.
 *
 * Accessibility is the journal's own subject matter, so it is not a
 * pass at the end: focus states are visible, every control has a
 * label, hit areas clear 44px, and the layout reflows to one column
 * rather than scrolling sideways.
 */

/* One measure for the whole flow. The prose used to carry its own
   caps: 62ch on the lede, 62ch on the group blurb, 46rem here, 44rem
   there. 62ch is not one width — at 17px it is 664px and at 14px it is
   547px, so the same rule produced two different right edges. Together
   with the 832px card there were five, and the narrowest paragraph
   stopped two thirds across. (The group blurbs have since gone
   entirely; the measure they helped expose has not.)

   The column is the measure now. 42rem set the lede at a textbook 70
   characters and made everything else feel pinched — the file cards
   and the form fields are the substance of these steps, not the two
   lines of prose above them, and they need room. 50rem gives the
   cards their width back; the ledes run to about 85 characters, which
   is long for a page of body text and unremarkable for two sentences.

   Whatever the number, it stays the only one: a per-element cap here
   is what produced five different right edges in the first place. */
.submit-shell {
  margin: 0 auto;
  max-width: 50rem;
  padding: var(--space-6) var(--space-4) var(--space-10);
}

/* Prose fills its container. Any max-width here would reintroduce the
   ragged edge the column exists to prevent. */
.submit-shell .page-header .lede,
.submit-shell .submit-section-blurb,
.submit-shell .submit-finding-why {
  max-width: none;
}

/* --- step rail ------------------------------------------------------ */

.submit-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: center;
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.submit-steps li {
  align-items: center;
  color: var(--ink-3);
  display: flex;
  font: 500 var(--text-sm) / 1.2 var(--font-ui);
  gap: var(--space-2);
}

.submit-steps li + li::before {
  color: var(--border-strong);
  content: "→";
  margin-right: var(--space-2);
}

.submit-step-num {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-3);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 600;
  height: 1.6rem;
  justify-content: center;
  width: 1.6rem;
}

.submit-steps li.is-current { color: var(--ink-1); font-weight: 600; }
.submit-steps li.is-current .submit-step-num {
  background: var(--saffron);
  border-color: var(--saffron);
  color: var(--bistre);
}

.submit-steps li.is-done .submit-step-num {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--bistre);
}
.submit-steps li a { color: inherit; text-decoration: none; }
.submit-steps li a:hover { text-decoration: underline; }
.submit-steps li a { align-items: center; display: flex; gap: var(--space-2); }

/* --- form ----------------------------------------------------------- */

.submit-template-note {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink-2);
  font: var(--text-sm) / 1.5 var(--font-ui);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
}

.submit-section { margin-bottom: var(--space-5); }
.submit-section h2 {
  font: 600 var(--text-md) / 1.3 var(--font-ui);
  margin: 0 0 var(--space-2);
}

.submit-section-blurb {
  color: var(--ink-3);
  font: var(--text-sm) / 1.55 var(--font-ui);
  margin: 0 0 var(--space-5);
  max-width: 46rem;
}

.submit-field { margin-bottom: var(--space-5); }
.submit-field:last-child { margin-bottom: 0; }

.submit-label {
  color: var(--ink-1);
  display: block;
  font: 600 var(--text-sm) / 1.4 var(--font-ui);
  margin-bottom: var(--space-2);
}

.submit-form input[type="text"],
.submit-form input[type="email"],
.submit-form select,
.submit-form textarea {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--ink-1);
  font: var(--text-base) / 1.5 var(--font-body);
  padding: 0.6rem 0.7rem;
  width: 100%;
}

.submit-form select { font-family: var(--font-ui); }
.submit-form textarea { resize: vertical; }

.submit-form input:focus-visible,
.submit-form select:focus-visible,
.submit-form textarea:focus-visible {
  border-color: var(--bistre);
  outline: 2px solid var(--saffron);
  outline-offset: 1px;
}

.submit-field.has-error input,
.submit-field.has-error select,
.submit-field.has-error textarea {
  border-color: var(--crimson);
}

.submit-field .field-hint { margin: var(--space-2) 0 0; }
.field-why { margin-top: var(--space-1) !important; }

/* --- authors -------------------------------------------------------- */

.submit-authors {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.submit-author {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0;
  padding: var(--space-4);
}

.submit-author-legend {
  padding: 0;
  margin-bottom: var(--space-3);
}

.submit-author-num {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--ink-3);
  display: inline-flex;
  font: 600 var(--text-xs) var(--font-ui);
  height: 1.55rem;
  justify-content: center;
  width: 1.55rem;
}

.submit-author-grid {
  display: grid;
  gap: var(--space-3) var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.submit-author-grid .submit-field { margin-bottom: 0; }
/* given | family — e-mail | ORCID — affiliation across.
   Affiliation is the only one that reliably needs the full width. */
.submit-field-affiliation { grid-column: 1 / -1; }

.submit-input-group { display: flex; gap: var(--space-2); }
.submit-input-group input { flex: 1 1 auto; min-width: 0; }

.submit-inline-button {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--bistre);
  cursor: pointer;
  flex: 0 0 auto;
  font: 600 var(--text-base) var(--font-ui);
  min-height: 44px;
  min-width: 44px;
}
.submit-inline-button:hover { background: var(--surface-2); }
.submit-inline-button:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 1px;
}

.submit-author-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  margin-top: var(--space-4);
}

.submit-corresponding {
  align-items: center;
  color: var(--ink-2);
  display: flex;
  font: var(--text-sm) var(--font-ui);
  gap: var(--space-2);
}

.submit-remove-author {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--crimson);
  cursor: pointer;
  font: var(--text-sm) var(--font-ui);
  padding: var(--space-2) var(--space-3);
}
.submit-remove-author:hover:not(:disabled) { border-color: var(--crimson); }
.submit-remove-author:disabled { color: var(--ink-3); cursor: not-allowed; opacity: 0.5; }

.submit-author-status {
  font: var(--text-xs) var(--font-ui);
  margin: var(--space-3) 0 0;
}
.submit-author-status[hidden] { display: none; }
.submit-author-status.is-info  { color: var(--ink-3); }
.submit-author-status.is-ok    { color: var(--forest); }
.submit-author-status.is-error { color: var(--crimson); }

.submit-add-author { margin-top: var(--space-2); }

/* --- actions -------------------------------------------------------- */

/* The foot of every step, all four the same shape: a rule across the
   column, the way back and any status text on the left, the action
   that moves forward on the right and flush with the column's edge.

   The back link comes first in the markup on each of them, so the tab
   order matches what the eye does rather than being reversed by CSS.
   The forward action is pushed right by margin rather than by
   space-between, which would have spread a status message and a back
   link to opposite ends of the row instead of keeping them together
   on the left. */
.submit-actions {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
}

.submit-actions .primary-button { margin-left: auto; }

.submit-back {
  align-items: center;
  color: var(--ink-3);
  display: inline-flex;
  font: 500 var(--text-sm) var(--font-ui);
  gap: var(--space-2);
  text-decoration: none;
}
.submit-back::before {
  content: "←";
  color: var(--border-strong);
}
.submit-back:hover { color: var(--ink-1); }
.submit-back:hover::before { color: var(--ink-3); }

/* Narrow: the action that moves forward goes on top, where a thumb
   reaches it, and the way back sits under it. */
@media (max-width: 34rem) {
  .submit-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }
  .submit-back { justify-content: center; }
  .submit-actions .primary-button { margin-left: 0; }
}

.submit-saved {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-ui);
}
.submit-saved.is-error { color: var(--crimson); }

/* Discarding is not a step in the flow, so it does not share the foot
   with the action that continues it. Quiet, below, and set apart. */
.submit-discard {
  margin-top: var(--space-5);
  text-align: center;
}
.submit-discard .link-button {
  color: var(--ink-3);
  font: var(--text-sm) var(--font-ui);
}
.submit-discard .link-button:hover { color: var(--crimson); }

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 640px) {
  .submit-author-grid { grid-template-columns: minmax(0, 1fr); }
  .submit-steps li + li::before { content: none; }
}

/* --- files step ----------------------------------------------------- */

/* The "am I done?" panel. Two tones only: what the submit gate
   enforces, and what is merely a good idea. Anything with three
   severities here would just be a second check-up. */
.submit-missing {
  border-left: 3px solid var(--saffron);
  margin-bottom: var(--space-6);
}
.submit-missing h2 {
  font: 600 var(--text-md) var(--font-ui);
  margin: 0 0 var(--space-3);
}
.submit-missing h2.is-complete { color: var(--forest); }
.submit-missing-done {
  color: var(--ink-3);
  font: var(--text-sm) var(--font-ui);
  margin: 0;
}
.submit-missing-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.submit-missing-item {
  align-items: baseline;
  color: var(--ink-2);
  display: grid;
  font: var(--text-sm) var(--font-ui);
  gap: var(--space-3);
  grid-template-columns: 6.5rem minmax(0, 1fr);
  line-height: 1.5;
}
.submit-missing-tag {
  border-radius: 999px;
  font: 600 var(--text-xs) var(--font-ui);
  padding: 0.15rem 0.55rem;
  text-align: center;
}
.submit-missing-item.is-needed .submit-missing-tag {
  background: rgb(var(--saffron-rgb) / 0.25);
  color: var(--bistre);
}
.submit-missing-item.is-suggested .submit-missing-tag {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-3);
}

/* One band per group, so the required pair reads as a unit rather
   than as the first two of seven equal boxes. */
.submit-group { margin-bottom: var(--space-8); }
.submit-group-head {
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
}
/* The heading is the whole group header now, so it carries no bottom
   margin of its own. */
.submit-group-head h2 {
  font: 600 var(--text-lg) var(--font-ui);
  margin: 0;
}
.submit-group .submit-category + .submit-category { margin-top: var(--space-4); }

.submit-template-link {
  font: var(--text-sm) var(--font-ui);
  white-space: nowrap;
}

.submit-category-head {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.submit-pill {
  border-radius: 999px;
  font: 600 var(--text-xs) var(--font-ui);
  margin-left: var(--space-2);
  padding: 0.15rem 0.55rem;
  vertical-align: middle;
}
.submit-pill.is-ok {
  background: rgb(45 94 62 / 0.12);
  color: var(--forest);
}
.submit-pill.is-needed {
  background: rgb(var(--saffron-rgb) / 0.25);
  color: var(--bistre);
}
.submit-pill.is-optional {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-3);
  font-weight: 400;
}

.submit-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.submit-file {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
}

.submit-file-main {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
}

.submit-file-name {
  color: var(--bistre);
  font: 500 var(--text-sm) var(--font-ui);
  overflow-wrap: anywhere;
}

.submit-file-size {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-ui);
  white-space: nowrap;
}

/* What DISIE saw when the file landed. Facts read as a definition
   list because that is what they are; problems read as a list of
   sentences because each one names something to do. Neither blocks
   anything — same rule as the check-up in the next step. */
.submit-file.is-warn { border-left: 3px solid var(--saffron); }
.submit-file.is-ok { border-left: 3px solid var(--forest); }

.submit-check-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
}
.submit-check-fact {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 7.5rem minmax(0, 1fr);
}
.submit-check-fact dt {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-ui);
  padding-top: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.submit-check-fact dd {
  color: var(--ink-2);
  font: var(--text-sm) var(--font-ui);
  margin: 0;
}
.submit-check-fact.is-ok dd { color: var(--forest); }
.submit-check-fact.is-warn dd { color: var(--bistre); }
.submit-check-detail {
  color: var(--ink-3);
  display: block;
  font-size: var(--text-xs);
  line-height: 1.5;
  margin-top: 0.1rem;
}

.submit-check-problems {
  color: var(--bistre);
  font: var(--text-sm) var(--font-ui);
  line-height: 1.5;
  margin: var(--space-3) 0 0;
  padding-left: 1.1rem;
}
.submit-check-problems li + li { margin-top: var(--space-1); }

.submit-check-unreadable {
  color: var(--ink-3);
  font: var(--text-sm) var(--font-ui);
  margin: var(--space-3) 0 0;
}

.submit-file-meta {
  display: grid;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: 5rem minmax(0, 1fr);
  margin-top: var(--space-3);
}
.submit-file-meta-wide { grid-column: 1 / -1; }

/* Number and caption are a filing label, not the published caption:
   they reach Janeway as "DISIE figure 3 (chart.png)" so the editor can
   match the file to the figure. The printed caption is typeset from
   the manuscript. Without saying so, the field reads like the one that
   ends up on the page. */
.submit-file-meta-note {
  color: var(--ink-3);
  font: var(--text-xs)/1.5 var(--font-ui);
  grid-column: 1 / -1;
  margin: 0;
  max-width: 52ch;
}
.submit-file-meta.is-unsaved { outline: 1px dashed var(--crimson); }

.submit-file-meta input {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font: var(--text-sm) var(--font-ui);
  padding: 0.45rem 0.55rem;
  width: 100%;
}
.submit-file-meta input:focus-visible {
  border-color: var(--bistre);
  outline: 2px solid var(--saffron);
  outline-offset: 1px;
}
.submit-file-meta .submit-label {
  font-size: var(--text-xs);
  margin-bottom: var(--space-1);
}

.submit-file-remove { margin-top: var(--space-2); }

.submit-upload {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.submit-upload-field input[type="file"] {
  font: var(--text-sm) var(--font-ui);
  max-width: 100%;
}

.submit-upload input[type="file"]:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .submit-file-meta { grid-template-columns: minmax(0, 1fr); }
  .submit-check-fact { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .submit-missing-item { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .submit-missing-tag { justify-self: start; }
  .submit-category-head { flex-wrap: wrap; }
}

/* --- check-up ------------------------------------------------------- */

.submit-checkup-start h2,
.submit-checkup-clean h2 {
  font: 600 var(--text-md) var(--font-ui);
  margin: 0 0 var(--space-3);
}
.submit-checkup-start p,
.submit-checkup-clean p {
  color: var(--ink-2);
  margin: 0;
  max-width: none;
}

/* The annotated PDF, as the first thing after the count. It is the
   report in the form the author can work from, so it gets the weight
   of a destination rather than the weight of a link. */
.submit-checkup-download {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--saffron);
  border-radius: var(--radius);
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
}
.submit-checkup-download:hover { border-color: var(--border-strong); }
.submit-checkup-download:hover .submit-checkup-download-text strong {
  text-decoration: underline;
}

.submit-checkup-download-chip {
  align-items: center;
  background: #6b2117;
  border-radius: var(--radius-sm);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font: 700 var(--text-xs) var(--font-ui);
  height: 2.6rem;
  justify-content: center;
  letter-spacing: 0.05em;
  width: 3rem;
}

.submit-checkup-download-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}
.submit-checkup-download-text strong {
  color: var(--ink-1);
  font: 600 var(--text-base) var(--font-ui);
}
.submit-checkup-download-text span {
  color: var(--ink-3);
  font: var(--text-sm)/1.5 var(--font-ui);
}

/* One heading per editing surface: the document, its text, its
   figures, its tables. Nine finding categories is the right
   granularity for a finding and too fine for a page. */
.submit-finding-section {
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  display: flex;
  font: 600 var(--text-lg) var(--font-ui);
  gap: var(--space-3);
  margin: var(--space-7) 0 var(--space-4);
  padding-bottom: var(--space-2);
}
.submit-finding-section .submit-cat-count {
  color: var(--ink-3);
  font: 500 var(--text-sm) var(--font-ui);
}

.submit-checkup-summary h2 {
  font: 600 var(--text-md) var(--font-ui);
  margin: 0 0 var(--space-4);
}

.submit-checkup-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.submit-checkup-categories a {
  align-items: baseline;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  display: inline-flex;
  font: var(--text-sm) var(--font-ui);
  gap: var(--space-2);
  padding: 0.3rem 0.75rem;
  text-decoration: none;
}
.submit-checkup-categories a:hover { border-color: var(--border-strong); }
.submit-cat-count {
  color: var(--ink-3);
  font-size: var(--text-xs);
  font-weight: 600;
}

.submit-finding { margin-bottom: var(--space-4); }

.submit-finding-title {
  align-items: baseline;
  display: flex;
  font: 600 var(--text-base) var(--font-ui);
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

/* A dot, not a word: these are observations, not verdicts. Colour
   carries emphasis only — the text says what the finding is, so the
   distinction survives being read aloud or seen without colour. */
.submit-finding-badge {
  border-radius: 999px;
  flex: 0 0 auto;
  height: 0.55rem;
  margin-top: 0.35rem;
  width: 0.55rem;
}
.submit-finding-badge.is-error   { background: var(--crimson); }
.submit-finding-badge.is-warning { background: #c97a00; }
.submit-finding-badge.is-suggestion { background: var(--forest); }

.submit-finding-explain,
.submit-finding-why {
  color: var(--ink-2);
  font: var(--text-sm) / 1.6 var(--font-ui);
  margin: 0 0 var(--space-3);
  max-width: 46rem;
}
.submit-finding-why { color: var(--ink-3); margin-bottom: 0; }

.submit-breakdown {
  border: 1px solid var(--border);
  border-radius: 8px;
  list-style: none;
  margin: 0 0 var(--space-3);
  max-width: 32rem;
  padding: 0;
}
.submit-breakdown li {
  border-bottom: 1px solid var(--border);
  display: flex;
  font: var(--text-sm) var(--font-ui);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}
.submit-breakdown li:last-child { border-bottom: 0; }
.submit-breakdown-label { color: var(--ink-2); }
.submit-breakdown-count { color: var(--ink-3); font-weight: 600; }

.submit-finding-items {
  color: var(--ink-2);
  font: var(--text-sm) / 1.6 var(--font-ui);
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}

.submit-anchor {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-mono);
  margin-right: var(--space-2);
}

.submit-acknowledge { margin-top: var(--space-6); }

.submit-acknowledge-label {
  align-items: flex-start;
  display: flex;
  font: var(--text-base) / 1.6 var(--font-ui);
  gap: var(--space-3);
  max-width: 44rem;
}
.submit-acknowledge-label input {
  flex: 0 0 auto;
  height: 1.15rem;
  margin-top: 0.2rem;
  width: 1.15rem;
}

.submit-rerun { margin-top: var(--space-4); }

/* --- confirm -------------------------------------------------------- */

.submit-summary h2 {
  font: 600 var(--text-md) / 1.35 var(--font-ui);
  margin: 0 0 var(--space-4);
}

.submit-summary-list {
  display: grid;
  gap: var(--space-3) var(--space-5);
  grid-template-columns: 8rem minmax(0, 1fr);
  margin: 0 0 var(--space-4);
}
.submit-summary-list dt {
  color: var(--ink-3);
  font: 600 var(--text-sm) var(--font-ui);
}
.submit-summary-list dd {
  color: var(--ink-1);
  font: var(--text-sm) / 1.6 var(--font-ui);
  margin: 0;
}

.submit-summary-authors,
.submit-summary-files {
  margin: 0;
  padding-left: var(--space-5);
}
.submit-summary-files { list-style: none; padding-left: 0; }
.submit-summary-authors li,
.submit-summary-files li { margin-bottom: var(--space-1); }

.submit-summary-edit {
  border-top: 1px solid var(--border);
  color: var(--ink-3);
  font: var(--text-sm) var(--font-ui);
  margin: 0;
  padding-top: var(--space-3);
}

.submit-agreements h2 {
  font: 600 var(--text-md) var(--font-ui);
  margin: 0 0 var(--space-4);
}
.submit-agreements .submit-acknowledge-label { margin-bottom: var(--space-4); }

.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .submit-summary-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-1) 0; }
  .submit-summary-list dd { margin-bottom: var(--space-3); }
}

/* --- drafts on the author dashboard --------------------------------- */

.draft-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--saffron);
  border-radius: 10px;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-5);
}
.draft-list h2 {
  font: 600 var(--text-sm) var(--font-ui);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
  text-transform: uppercase;
}
.draft-list ul { list-style: none; margin: 0; padding: 0; }

.draft-row {
  align-items: baseline;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
  padding: var(--space-3) 0;
}
.draft-row:first-child { border-top: 0; padding-top: 0; }

.draft-row-main {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.draft-row-main a {
  color: var(--bistre);
  font: 500 var(--text-base) var(--font-ui);
}
.draft-row-step,
.draft-row-date {
  color: var(--ink-3);
  font: var(--text-xs) var(--font-ui);
}

.submit-checkup-pdf {
  border-top: 1px solid var(--border);
  font: var(--text-sm) / 1.6 var(--font-ui);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-4);
}
.submit-checkup-pdf .muted { display: block; font-size: var(--text-xs); }

.submit-optional {
  border-top: 1px solid var(--border);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
}
.submit-optional > summary {
  color: var(--bistre);
  cursor: pointer;
  font: 500 var(--text-sm) var(--font-ui);
  list-style: none;
}
.submit-optional > summary::-webkit-details-marker { display: none; }
.submit-optional > summary::before {
  content: "+ ";
  font-weight: 600;
}
.submit-optional[open] > summary::before { content: "– "; }
.submit-optional > summary:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}
.submit-optional .submit-field { margin-top: var(--space-4); }

.submit-remaining {
  color: var(--ink-3);
  font: var(--text-sm) var(--font-ui);
}
.submit-remaining.is-outstanding { color: var(--bistre); font-weight: 500; }