/* DupeEats · submit.css (A5 §5): /submit-a-dupe/ layout, steps, rows, sticky nav,
   confirmation, other views, "Your data". Form parts come from community.css.
   :root tokens of main.css only. Mobile first. */

.submit-page .page-head { margin-bottom: var(--s-5); }
.submit-page .page-head h1 { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.028em; }
.submit-layout { display: grid; gap: var(--s-7); align-items: start; }
.submit-main { min-width: 0; }
.submit-form { display: grid; gap: var(--s-5); max-width: 720px; }
.submit-form[hidden], .sf-done[hidden], .sf-view[hidden] { display: none; }
.sf-notice { padding: var(--s-4); border-radius: var(--r-sm); background: var(--sunken); color: var(--ink-2); font-weight: 600; max-width: 720px; }
.sf-soon { max-width: 720px; }

/* progress */
.sf-progress { display: grid; gap: var(--s-2); }
.sf-progress__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); }
.sf-step-label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sf-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-2); min-height: 28px; font-size: var(--fs-xs); color: var(--muted); }
.sf-draft .link-btn { min-height: 44px; margin-block: -8px; font-size: var(--fs-xs); }
.sf-draft .link-btn[hidden] { display: none; }
.sf-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sf-bar span { height: 6px; border-radius: 3px; background: var(--line); transition: background-color 200ms var(--ease-out); }
.sf-bar .is-on { background: var(--ink); }

/* steps */
.sf-step { display: grid; gap: var(--s-5); margin: 0; padding: 0; border: 0; min-width: 0; }
.sf-step[hidden] { display: none; }
/* the visible "Step n of 4 · name" line names the step; the legend stays for screen readers */
.sf-step-title { padding: 0; }
.sf-step-title:focus { box-shadow: none; outline: none; }
.sf-summary { padding: var(--s-3) var(--s-4); border: 1px solid oklch(48% 0.18 30); border-radius: var(--r-sm); background: oklch(97.5% 0.012 30); font-size: var(--fs-sm); }
.sf-summary[hidden] { display: none; }
.sf-summary__title { font-weight: 700; }
.sf-summary__go { display: inline-block; vertical-align: top; min-height: 0; padding: 2px 0; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.sf-summary ul { margin-top: var(--s-1); padding-left: 1.1em; list-style: disc; color: oklch(38% 0.15 30); }
.sf-prefill { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-md); background: var(--bg); }
.sf-prefill img { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; }
.sf-prefill span { display: block; font-size: var(--fs-sm); color: var(--muted); }
.sf-manual-toggle { justify-self: start; min-height: 44px; font-size: var(--fs-sm); }
.sf-manual-toggle[hidden] { display: none; }
.sf-manual { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg); }
.sf-manual[hidden], .sf-manual [hidden] { display: none; }
.submit-form .df-combo { position: relative; min-width: 0; }
#sf-product { scroll-margin-top: var(--s-4); }
.submit-form .df-listbox { position: absolute; z-index: var(--z-pop); left: 0; right: 0; top: calc(100% + 4px); max-height: 336px; overflow-y: auto; padding: var(--s-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-pop); }
.submit-form .df-listbox[hidden], .submit-form .df-chip[hidden], .submit-form [data-product-search][hidden] { display: none; }
.df-option { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-1) var(--s-3); border-radius: 6px; cursor: pointer; }
.df-option:hover, .df-option[aria-selected="true"] { background: var(--sunken); }
.df-option__img, .df-chip__img { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--sunken); }
.df-option__img img, .df-chip__img img { width: 100%; height: 100%; object-fit: cover; }
.df-option__text, .df-chip__text { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.df-option__name, .df-chip__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-option__chain, .df-chip__chain { font-size: var(--fs-sm); color: var(--muted); }
.df-option--free { min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--cobalt); }
.df-chip { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-1) var(--s-2) var(--s-2); border: 1px solid var(--ink); border-radius: var(--r-sm); background: var(--surface); }
.df-chip__clear { flex: none; min-width: 44px; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.sf-rules { padding: var(--s-5); border-radius: var(--r-md); background: var(--bg); }
.sf-rules h2, .sf-rules h3, .sf-next h2 { font-size: var(--fs-base); margin-bottom: var(--s-3); }
.start-rules { display: grid; gap: var(--s-3); }
.start-rules li { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--ink-2); font-size: var(--fs-sm); }
.start-rules .icon { margin-top: 1px; color: var(--lime-text); }

/* rows */
.sf-rows { display: grid; }
.sf-row { display: grid; gap: var(--s-1); padding-block: var(--s-2); border-bottom: 1px solid var(--line); }
.sf-row:first-child { padding-top: 0; }
.ir-heads { display: grid; grid-template-columns: 68px 96px minmax(0, 1fr); gap: var(--s-2); font-size: var(--fs-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ir-grid { display: grid; grid-template-columns: 68px 96px minmax(0, 1fr); gap: var(--s-2); }
.ir-grid--group { grid-template-columns: 24px minmax(0, 1fr); align-items: center; }
.ir-group-icon { color: var(--muted); }
.ir--group .sf-input { font-weight: 700; }
.ir-unit { padding-left: var(--s-3); padding-right: 30px; background-position: right 8px center; }
.ir-qty { padding-inline: var(--s-3); text-align: center; }
.ir-note[hidden] { display: none; }
.row-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 44px; }
.row-tools .row-note { min-height: 44px; font-size: var(--fs-sm); }
.row-tools .row-note[hidden] + .row-move, .ir--group .row-move, .sr .row-move { margin-left: auto; }
.row-move { display: flex; gap: var(--s-1); }
.row-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2); }
.row-btn:hover:not(:disabled) { background: var(--sunken); color: var(--ink); }
.row-btn:disabled { opacity: 0.3; cursor: default; }
.row-btn[hidden] { display: none; }
.has-error.sf-row .sf-input:not([data-k="note"]) { border-color: oklch(48% 0.18 30); }
.sr-head { display: flex; align-items: center; justify-content: space-between; }
.sr-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: var(--fs-sm); font-weight: 700; }
.sr-head .sf-count { font-size: var(--fs-xs); color: var(--muted); }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: var(--s-2); align-items: center; }
.sf-rows--tips .sf-row { border: 0; padding-block: 0 var(--s-2); }
.sf-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.sf-row-actions .link-btn { min-height: 44px; font-size: var(--fs-sm); }
.sf-row-actions [hidden] { display: none; }
.btn-sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.sf-paste-top { margin-bottom: var(--s-4); }
.sf-paste { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--bg); }
.sf-paste[hidden] { display: none; }

/* method extras */
.sf-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.sf-grid2__full { grid-column: 1 / -1; }
.sf-grid2__full[hidden] { display: none; }
.sf-stepper { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--s-1); }
.sf-stepper .sf-input { padding: 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-stepper .row-btn { border: 1px solid var(--line-strong); }
.sf-suffix { position: relative; display: block; }
.sf-suffix .sf-input { padding-right: 48px; }
.sf-suffix > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-sm); }
.sf-credit .sf-choices { gap: var(--s-2); }
[data-credit-name][hidden], [data-social][hidden], [data-newsletter][hidden] { display: none; }
.sf-check--license details { margin-top: var(--s-1); }

/* sticky nav: thumb zone on phones, safe area respected */
html:has(.sf-nav) { scroll-padding-bottom: 96px; } /* A11 (2.4.11): focus never lands under the bar */
.sf-nav {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--s-2);
  margin-inline: calc(var(--gutter) * -1); padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line);
}
.sf-nav .btn[hidden] { display: none; }
.sf-nav [data-step-next], .sf-nav [data-submit] { flex: 1; }
.sf-nav [data-submit][aria-disabled="true"] { opacity: 0.7; cursor: progress; transform: none; }

/* revise note, confirmation, views */
.sf-revise { padding: var(--s-4); border-radius: var(--r-md); background: var(--cobalt-soft); }
.sf-revise[hidden] { display: none; }
.sf-revise__title { font-weight: 700; color: var(--cobalt); }
.sf-revise__msg { margin-top: var(--s-1); font-size: 1.0625rem; }
.sf-revise .panel-note { margin-top: var(--s-2); }
.sf-done { display: grid; gap: var(--s-3); justify-items: start; max-width: 60ch; padding: var(--s-6) 0; }
.sf-done__icon { width: 56px; height: 56px; }
.sf-done h2 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
.sf-done h2:focus { box-shadow: none; outline: none; }
.sf-done__ref { font-variant-numeric: tabular-nums; }
.sf-done p:empty { display: none; }
.sf-view { display: grid; gap: var(--s-3); justify-items: start; max-width: 60ch; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sf-view h2 { font-size: var(--fs-lg); }
.sf-view h2:focus { box-shadow: none; }
.sf-view--report { justify-items: stretch; max-width: 720px; }

/* aside */
.submit-aside { display: grid; gap: var(--s-5); }
.submit-aside .sf-rules--aside { display: none; }
.sf-next { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); }
.sf-next-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); counter-reset: n; }
.sf-next-list li { position: relative; padding-left: 36px; font-size: var(--fs-sm); color: var(--ink-2); counter-increment: n; }
.sf-next-list li::before { content: counter(n); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sunken); color: var(--ink); font-size: var(--fs-xs); font-weight: 700; }
.sf-next-list strong { color: var(--ink); }

/* your data */
.your-data { max-width: 720px; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.yd-details summary { display: grid; gap: 2px; min-height: 44px; color: var(--ink); list-style: none; }
.yd-details summary::-webkit-details-marker { display: none; }
.yd-title { font-weight: 700; }
.yd-sub { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }
.yd-sub .text-link { font-size: inherit; }
.yd-form { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.yd-form .btn { justify-self: start; }

@media (max-width: 760px) {
  /* the "Saved on this device" line always has its own row, so nothing jumps on the first save */
  .sf-draft { flex-basis: 100%; }
}
@media (min-width: 761px) {
  .sf-step { gap: var(--s-6); }
  .sf-nav { position: static; margin: 0; padding: var(--s-3) 0 0; background: none; }
  .sf-nav [data-step-next], .sf-nav [data-submit] { flex: 0 0 auto; min-width: 200px; }
  .sf-nav [data-step-back] { order: -1; }
  .sf-grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ir-heads, .ir-grid { grid-template-columns: 84px 120px minmax(0, 1fr); }
}
@media (min-width: 1101px) {
  .submit-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
  .submit-aside { position: sticky; top: 150px; }
  .submit-aside .sf-rules--aside { display: block; }
  .sf-rules--inline { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sf-bar span { transition: none; } }
@media (max-width: 760px) { .toasts { bottom: calc(84px + env(safe-area-inset-bottom)); } }