/* Submit a Recipe: full-width layout (section list, form, live preview). Theme colours only. */
.sr-page.srx-page { max-width: 1560px; padding: 28px 24px 80px; }
.srx-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.srx-main { min-width: 0; }
.srx-side, .srx-preview { position: sticky; top: 124px; max-height: calc(100vh - 140px); overflow-y: auto; }
.srx-side-h { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mid); margin: 0 0 8px; }

.srx-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.srx-nav-a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 9px; text-decoration: none; color: var(--text-high); font: 500 13px 'DM Sans', sans-serif; }
.srx-nav-a:hover { background: var(--hover-wash, rgb(from var(--text-high) r g b / 0.05)); }
.srx-nav-a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.srx-nav-a.is-here { background: rgb(from var(--accent) r g b / 0.1); }
.srx-nav-num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text-mid); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.srx-nav-a.is-done .srx-nav-num { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #15120c); }
.srx-nav-a.has-error .srx-nav-num { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }
.srx-nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srx-nav-mark { font-size: 10px; color: var(--text-mid); white-space: nowrap; }
.srx-nav-a.is-done .srx-nav-mark { color: var(--success-text, var(--success)); }
.srx-nav-a.has-error .srx-nav-mark { color: var(--danger); font-weight: 600; }
.srx-progress { font: 400 12px 'DM Sans', sans-serif; color: var(--text-mid); margin: 12px 8px 0; }
.srx-side-tools { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.srx-side-tools .sr-flow-collapse { width: 100%; text-align: center; }

/* Sections use the shared tcj-step look; drop the old section box styling. */
.sr-section.tcj-step { padding: 0; margin-bottom: 14px; }
.sr-section.tcj-step.collapsed { padding: 0; margin-bottom: 14px; }
.sr-section.tcj-step.collapsed > .tcj-step-h { display: block !important; }
.tcj-step-body > .sr-field:last-child, .tcj-step-body > .sr-grid:last-child { margin-bottom: 0; }

/* Recipe basics: Cuisine and Course side by side, same height. */
.srx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; align-items: end; }
.srx-pair .sr-field { margin: 0; }
.srx-pair .sr-input { width: 100%; box-sizing: border-box; min-height: 44px; }
#section-details .sr-field { margin-bottom: 20px; }

/* Levels: one row each (spice, sweet, difficulty). */
.levels-grid.srx-levels { display: flex !important; flex-direction: column; gap: 0; }
.srx-levels .level-col { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.srx-levels .level-col:first-child { padding-top: 0; }
.srx-levels .level-col:last-child { border-bottom: 0; padding-bottom: 0; }
.srx-levels .level-col > .sr-label { margin: 0; }
.level-opt { display: block !important; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.level-opt:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* "How to fill this in" line where a help note has no label of its own. */
.srx-about { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 12px; font: 500 12px 'DM Sans', sans-serif; color: var(--text-mid); }

/* Preview card */
.srx-pv { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--bg); }
.srx-pv-img { aspect-ratio: 16 / 10; background: var(--text-ghost); display: flex; align-items: center; justify-content: center; font-size: 44px; }
.srx-pv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srx-pv-body { padding: 14px 16px 16px; }
.srx-pv-cat { font: 700 10px 'DM Sans', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text, var(--accent)); margin-bottom: 4px; }
.srx-pv-name { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: var(--text-high); overflow-wrap: anywhere; }
.srx-pv-native { font: italic 400 13px 'DM Sans', sans-serif; color: var(--text-mid); margin-top: 2px; }
.srx-pv-meta { font: 400 12px 'DM Sans', sans-serif; color: var(--text-mid); margin-top: 6px; }
.srx-pv-levels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; align-items: center; }
.srx-pv-level { display: inline-flex; align-items: center; }
.srx-pv-level .chilli, .srx-pv-level .sugar-cube { width: 16px; height: 16px; }
.srx-pv-level .diff-dot { width: 14px; height: 14px; }
.srx-pv-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.srx-pv-facts span { font: 500 11px 'DM Sans', sans-serif; color: var(--text-high); background: var(--text-ghost); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }
.srx-pv-intro { font: 400 12px/1.55 'DM Sans', sans-serif; color: var(--text-mid); margin: 10px 0 0; }
.srx-pv-counts { font: 400 11px 'DM Sans', sans-serif; color: var(--text-mid); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.srx-pv-note { font: 400 11px/1.5 'DM Sans', sans-serif; color: var(--text-mid); margin: 8px 2px 0; }

/* Narrower screens */
@media (max-width: 1280px) {
  .srx-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .srx-preview { display: none; }
}
@media (max-width: 980px) {
  .sr-page.srx-page { padding: 18px 14px 64px; }
  .srx-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .srx-side { position: static; max-height: none; overflow: visible; }
  .srx-side-h, .srx-progress { display: none; }
  .srx-nav ol { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .srx-nav-a { display: inline-flex; gap: 6px; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 6px; }
  .srx-nav-name { overflow: visible; }
  .srx-nav-mark { display: none; }
  .srx-side-tools { flex-direction: row; margin-top: 8px; }
  .srx-side-tools .sr-flow-collapse { width: auto; flex: 1; }
}
@media (max-width: 640px) {
  .srx-pair { grid-template-columns: 1fr; }
  .srx-levels .level-col { grid-template-columns: 1fr; gap: 8px; }
}
body.sr-embedded .srx-layout { grid-template-columns: minmax(0, 1fr); }
body.sr-embedded .srx-side, body.sr-embedded .srx-preview { display: none; }
@media print { .srx-side, .srx-preview { display: none !important; } .srx-layout { display: block; } }