/* New listing and business setup only. */
#view-post { max-width: 1040px; padding-top: 36px; padding-bottom: 48px; }
:is(#view-post, .flow-body) > .pane-head { margin: 0 auto 24px; max-width: 880px; }
:is(#view-post, .flow-body) .post-form { max-width: 880px; padding: 32px; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 36px #002f3406; }
:is(#view-post, .flow-body) .post-progress { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 0 0 24px; margin: 0 0 28px; list-style: none; border-bottom: 1px solid var(--line); }
:is(#view-post, .flow-body) .post-step-dot { width: auto; height: auto; display: flex; align-items: center; gap: 9px; background: none; border-radius: 0; color: var(--muted); }
:is(#view-post, .flow-body) .post-step-dot span { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; font-size: 12px; }
:is(#view-post, .flow-body) .post-step-dot strong { font-size: 13px; font-weight: 600; }
:is(#view-post, .flow-body) .post-step-dot.is-on span { background: var(--forest); border-color: var(--forest); color: white; }
:is(#view-post, .flow-body) .post-step-dot.is-done span { background: var(--mint-bar); border-color: #addad3; }
:is(#view-post, .flow-body) .post-step-kicker { font-size: 12px; text-transform: none; letter-spacing: 0; color: #277269; margin-bottom: 12px; }
:is(#view-post, .flow-body) .post-panel-title { font-size: 30px; letter-spacing: -.035em; margin: 0 0 10px; }
:is(#view-post, .flow-body) .post-panel-blurb { margin-bottom: 26px; color: var(--muted); line-height: 1.6; }
:is(#view-post, .flow-body) .post-cat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
:is(#view-post, .flow-body) .post-cat-card { position: relative; display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: white; }
:is(#view-post, .flow-body) .post-cat-card strong { font-size: 13px; }
:is(#view-post, .flow-body) .post-cat-card .ui-icon { width: 26px; height: 26px; flex-shrink: 0; color: #327970; }
:is(#view-post, .flow-body) .post-cat-card:has(input:checked) { background: var(--mint-bar); border-color: #00877f; box-shadow: inset 0 0 0 1px #00877f; }
:is(#view-post, .flow-body) .post-cat-card:has(input:focus-visible) { outline: 3px solid #00877f; outline-offset: 3px; }
:is(#view-post, .flow-body) .post-field { margin-bottom: 18px; gap: 8px; }
:is(#view-post, .flow-body) .post-field > span { font-size: 13px; color: var(--forest); }
:is(#view-post, .flow-body) input:not([type=radio]):not([type=checkbox]), :is(#view-post, .flow-body) select, :is(#view-post, .flow-body) textarea, .upgrade-flow input:not([type=radio]):not([type=checkbox]), .upgrade-flow select, .upgrade-flow textarea { min-width: 0; width: 100%; background: white; border: 1px solid #b8cbca; border-radius: 7px; padding: 12px; font-size: 15px; box-sizing: border-box; }
:is(#view-post, .flow-body) :is(input,select,textarea):focus-visible, .upgrade-flow :is(input,select,textarea,button,a):focus-visible { outline: 2px solid #00877f; outline-offset: 2px; }
:is(#view-post, .flow-body) .post-photo-upload { padding: 26px; background: #f0f8f6; border: 1px dashed #6fa79e; border-radius: 10px; }
:is(#view-post, .flow-body) .post-photo-upload > span { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
:is(#view-post, .flow-body) input[type=file] { background: transparent; border: 0; padding: 12px 0 0; }
:is(#view-post, .flow-body) input[type=file]::file-selector-button { background: var(--forest); color: white; border: 0; border-radius: 6px; padding: 10px 14px; margin-right: 12px; }
:is(#view-post, .flow-body) .post-wizard-actions { padding-top: 22px; margin-top: 28px; border-top: 1px solid var(--line); }
:is(#view-post, .flow-body) .post-wizard-actions [hidden] { display: none !important; }
:is(#view-post, .flow-body) .post-wizard-actions .btn-teal { margin-left: auto; }
.upgrade-flow { color: var(--forest); }
.upgrade-hero { padding: 32px; background: var(--mint-bar); border: 1px solid #c7e5e1; border-radius: 12px; margin-bottom: 24px; }
.upgrade-hero h1 { font-size: clamp(28px,3vw,38px); letter-spacing: -.04em; line-height: 1.12; margin: 0 0 18px; }
.upgrade-hero p { color: var(--muted); line-height: 1.6; max-width: 540px; margin: 0; }
.upgrade-hero .upgrade-hero-note { margin-top: 20px; font-size: 13px; font-weight: 700; color: var(--forest); }
.upgrade-flow .sc-benefit-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 24px; }
.upgrade-flow .sc-benefit { padding: 22px; border-radius: 10px; border-color: var(--line); }
.upgrade-flow .sc-benefit h3 { font-size: 16px; margin-bottom: 10px; }
.upgrade-flow .sc-benefit p { color: var(--muted); line-height: 1.6; }
.upgrade-flow .sc-note { color: var(--muted); font-size: 13px; line-height: 1.6; }
.upgrade-steps { list-style: none; display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 4px; margin: 0 0 30px; padding: 0; }
.upgrade-steps li { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--muted); }
.upgrade-steps span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: white; font-size: 12px; }
.upgrade-steps strong { font-size: 10px; font-weight: 600; }
.upgrade-steps .is-current span { background: var(--forest); color: white; border-color: var(--forest); }
.upgrade-steps .is-complete span { background: var(--mint-bar); border-color: #addad3; }
.upgrade-flow .account-head h1 { font-size: 30px; letter-spacing: -.035em; }
.upgrade-flow .sc-step-kicker { text-transform: none; letter-spacing: 0; color: #277269; margin-bottom: 10px; }
.upgrade-flow #business-wizard-form { padding: 28px; border-radius: 12px; border-color: var(--line); }
.upgrade-flow .account-form-grid { gap: 20px; }
.upgrade-flow .account-form-grid label { gap: 8px; color: var(--forest); font-size: 13px; }
.upgrade-flow .sc-choice { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: white; font-size: 13px; }
.upgrade-flow .sc-choice:has(input:checked), .upgrade-flow .sc-plan:has(input:checked) { background: var(--mint-bar); border-color: #00877f; }
.upgrade-flow input[type=radio], .upgrade-flow input[type=checkbox] { accent-color: #00877f; flex-shrink: 0; }
.upgrade-flow .sc-wizard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.upgrade-flow .sc-wizard-actions .btn-teal { margin-left: auto; }
.upgrade-flow .sc-wizard-actions .btn-outline { border: 1px solid #b8cbca; font-size: 13px; }
.upgrade-flow .sc-plan { padding: 20px; border-radius: 8px; }
@media(max-width:640px) { #view-post { padding-top: 24px; } :is(#view-post, .flow-body) .post-form { padding: 20px; } :is(#view-post, .flow-body) .post-progress { gap: 6px; } :is(#view-post, .flow-body) .post-step-dot { flex-direction: column; gap: 6px; } :is(#view-post, .flow-body) .post-step-dot strong { font-size: 11px; } :is(#view-post, .flow-body) .post-cat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } :is(#view-post, .flow-body) .post-cat-card { flex-direction: column; align-items: start; padding: 14px; gap: 8px; } :is(#view-post, .flow-body) .post-panel-title { font-size: 25px; } .upgrade-hero { padding: 24px; } .upgrade-flow .sc-benefit-grid { grid-template-columns: 1fr; } .upgrade-steps { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px 6px; } .upgrade-flow #business-wizard-form { padding: 20px; } .upgrade-flow .sc-wizard-actions { flex-direction: column; } .upgrade-flow .sc-wizard-actions .btn-teal { margin-left: 0; } }

/* ── Onboarding (sign-up profile, welcome and Become a seller): one set of pieces, page or modal ── */
.onboarding-view { min-height: 70vh; padding: clamp(28px,6vw,64px) var(--content-gutter) 64px; background: #f4f7f6; }
.ob-card { width: min(100%, 680px); margin: 0 auto; padding: clamp(22px, 4vw, 36px); border: 1px solid #e3ebe8; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px #003b3706, 0 18px 50px #003b370d; }
.ob-card.is-wide { width: min(100%, 820px); }
.ob { --ob-ink: #18352f; --ob-muted: #6a8182; --ob-line: #e3ebe8; --ob-accent: #087c66; --ob-soft: #e8f4f0; display: grid; gap: 22px; color: var(--ob-ink); }
.ob-progress { display: grid; gap: 8px; }
.ob-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ob-steps li { flex: 1; height: 4px; border-radius: 99px; background: #e1eae7; }
.ob-steps li.is-done { background: #8fcbb9; }
.ob-steps li.is-on { background: var(--ob-accent); }
.ob-progress p { margin: 0; color: var(--ob-muted); font-size: 12.5px; }
.ob-progress p strong { color: var(--ob-ink); }
.ob-body { display: grid; gap: 18px; }
.ob-head { display: flex; align-items: flex-start; gap: 14px; }
.ob-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--ob-soft); color: var(--ob-accent); }
.ob-icon .ui-icon { width: 22px; height: 22px; }
.ob .ob-title { margin: 0 0 4px; color: var(--ob-ink); font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.ob-lead { margin: 0; color: var(--ob-muted); font-size: 14px; line-height: 1.55; }
.ob-hint { display: block; color: var(--ob-muted); font-size: 12.5px; line-height: 1.45; }
.ob-error { display: block; color: #a03a17; font-size: 12.5px; font-weight: 700; }
.ob-form-error { margin: -8px 0 0; padding: 10px 12px; border-radius: 6px; background: #fdf1ec; }
.ob-error[hidden] { display: none; }
.ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ob-field { display: grid; gap: 6px; align-content: start; }
.ob-field.is-wide { grid-column: 1 / -1; }
.ob-field > span { color: var(--ob-ink); font-size: 13px; font-weight: 700; }
.ob-field > span small { color: var(--ob-muted); font-weight: 500; }
.ob :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), textarea, select) { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid #d5dfda; border-radius: 6px; background: #fff; color: var(--ob-ink); font: inherit; font-size: 14.5px; }
.ob textarea { min-height: 72px; resize: vertical; }
.ob :is(input, textarea, select):focus-visible { outline: 0; border-color: var(--ob-accent); box-shadow: 0 0 0 3px #087c6626; }
.ob .ob-field.has-error :is(input, textarea) { border-color: #c4562e; }
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 18px; border-radius: 6px; font-size: 14px; font-weight: 800; white-space: nowrap; text-decoration: none; cursor: pointer; }
.ob-btn .ui-icon { width: 16px; height: 16px; }
.ob-btn[disabled] { opacity: .6; cursor: progress; }
label.ob-btn:focus-within { outline: 3px solid #087c6640; outline-offset: 2px; }
.ob-link { padding: 0; border: 0; background: none; color: #006d60; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; text-decoration: none; }
.ob-link:hover { text-decoration: underline; }
.ob-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--ob-line); }
.ob-foot.is-end { justify-content: flex-end; }
.ob-foot.is-center { justify-content: center; border-top: 0; padding-top: 4px; }

/* Lists, needs, choices */
.ob-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid var(--ob-line); border-radius: 8px; }
.ob-list li { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--ob-line); }
.ob-list li:first-child { border-top: 0; }
.ob-list strong, .ob-option strong { display: block; font-size: 14.5px; }
.ob-list small, .ob-option small { display: block; margin-top: 2px; color: var(--ob-muted); font-size: 13px; line-height: 1.45; }
.ob-list-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 8px; background: var(--ob-soft); color: var(--ob-accent); }
.ob-list-icon .ui-icon { width: 19px; height: 19px; }
.ob-needs { padding: 14px 16px; border-radius: 8px; background: #f4f8f7; }
.ob-needs p { margin: 0 0 10px; font-size: 13px; font-weight: 800; }
.ob-needs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-needs li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--ob-line); font-size: 13px; font-weight: 600; }
.ob-needs .ui-icon { width: 15px; height: 15px; color: var(--ob-accent); }
.ob-foot-note { margin: -4px 0 0; }
.ob-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.ob-choices legend { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.ob-choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--ob-line); border-radius: 8px; cursor: pointer; }
.ob-choice:has(input:checked) { border-color: var(--ob-accent); background: #f3faf7; box-shadow: 0 0 0 1px var(--ob-accent) inset; }
.ob .ob-choice input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--ob-accent); }
.ob-choice strong { display: block; font-size: 14px; }
.ob-choice small { display: block; color: var(--ob-muted); font-size: 12px; }
.ob-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ob-option { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--ob-line); border-radius: 8px; color: var(--ob-ink); text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.ob-option:hover { border-color: #9fcdbf; background: #f6faf8; }
.ob-option > span:nth-child(2) { flex: 1; min-width: 0; }
.ob-option > .ui-icon { flex: none; width: 16px; height: 16px; color: #8a9c98; transform: rotate(-90deg); }

/* Photos */
.ob-photos { display: grid; gap: 10px; }
.ob-photo { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px dashed #c3d4cf; border-radius: 8px; background: #fafcfb; }
.ob-photo.has-image { border-style: solid; border-color: var(--ob-line); background: #fff; }
.ob-photo.has-error { border-color: #c4562e; background: #fdf6f3; }
.ob-photo-preview { display: grid; place-items: center; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 8px; background: #e6eeeb; color: #7d948f; }
.ob-photo-preview.is-round { border-radius: 50%; }
.ob-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.ob-photo-preview .ui-icon { width: 50%; height: 50%; }
.ob-photo-copy { flex: 1; display: grid; gap: 2px; min-width: 0; }
.ob-photo-copy strong { font-size: 14px; }
.ob-photo-actions { display: grid; justify-items: center; gap: 4px; }
.ob-photo-actions .ob-btn { min-height: 36px; padding: 0 14px; font-size: 13px; }

/* Review */
.ob-summary-person { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--ob-line); border-radius: 8px; }
.ob-summary-person > div { flex: 1; display: grid; }
.ob-summary-person small { color: var(--ob-muted); font-size: 13px; }
.ob-summary { display: grid; margin: 0; border: 1px solid var(--ob-line); border-radius: 8px; }
.ob-summary-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--ob-line); }
.ob-summary-row:first-child { border-top: 0; }
.ob-summary dt { color: var(--ob-muted); font-size: 13px; }
.ob-summary dd { margin: 0; font-size: 14px; font-weight: 700; }
.ob-consent { display: flex; align-items: flex-start; gap: 10px; color: #4d6b63; font-size: 13px; line-height: 1.5; cursor: pointer; }
.ob .ob-consent input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; accent-color: var(--ob-accent); }
.ob-consent.has-error { color: #a03a17; }
.ob-consent a { color: #006d60; font-weight: 700; }

/* Done */
.ob-done { justify-items: center; padding: 18px 0 6px; text-align: center; }
.ob-done-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ob-soft); color: var(--ob-accent); }
.ob-done-mark .ui-icon { width: 30px; height: 30px; }
.ob-done .ob-title { margin: 0; }
.ob-done .ob-lead { max-width: 420px; margin-top: -14px; }
.ob-note { display: flex; gap: 10px; max-width: 460px; margin: 0; padding: 12px 14px; border-radius: 8px; background: #fff8e6; color: #6b4e00; font-size: 13px; line-height: 1.5; text-align: left; }
.ob-note .ui-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }

@media (max-width: 640px) {
  .onboarding-view { padding: 16px 12px 40px; }
  .ob-card { padding: 20px 16px; }
  .ob .ob-title { font-size: 19px; }
  .ob-grid, .ob-options { grid-template-columns: minmax(0, 1fr); }
  .ob-icon { width: 38px; height: 38px; }
  .ob-photo { flex-wrap: wrap; }
  .ob-photo-actions { width: 100%; grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; padding-left: 70px; }
  .ob-summary-row { grid-template-columns: 90px minmax(0, 1fr) auto; }
  .ob-foot > .ob-btn { flex: 1; }
  .ob-foot.is-center { flex-direction: column-reverse; width: 100%; }
}

:is(#view-post, .flow-body) .post-form,
:is(#view-post, .flow-body) .post-cat-card,
:is(#view-post, .flow-body) .post-photo-upload,
.upgrade-hero,
.upgrade-flow .sc-benefit,
.upgrade-flow #business-wizard-form,
.upgrade-flow .sc-choice,
.upgrade-flow .sc-plan { border-radius: 4px; }

:is(#view-post, .flow-body) .post-wizard-actions button,
:is(#view-post, .flow-body) input[type=file]::file-selector-button,
.upgrade-flow .sc-wizard-actions :is(button, a) { border-radius: 4px; }

/* Inside the dashboard's create flow the modal is the card: no second card around the form. */
#modal .flow-body .post-form { max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.flow-body .post-panel-title { font-size: 22px; }
/* The listing forms' own page header isn't needed inside the flow (the modal has the title). */
.flow-body .listing-form > .post-kicker,
.flow-body .listing-form > .post-title { display: none; }
#modal .flow-body .listing-form { border: 0; padding: 0; box-shadow: none; background: none; }

/* Listing photos: what's been added, before it's published. */
.post-photo-preview:empty { display: none; }
.post-photo-preview { margin: -6px 0 16px; }
.post-photo-status { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: #4d6b63; font-size: 13.5px; font-weight: 600; }
.post-photo-status .ui-icon { flex: none; width: 18px; height: 18px; padding: 3px; box-sizing: border-box; border-radius: 50%; background: #e2f4ee; color: #087c66; }
.post-photo-status.is-ready { color: #0b6b4f; }
.post-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.post-photo-thumb { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid #dfe8e5; border-radius: 6px; background: #f2f6f5; }
.post-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-photo-thumb.is-current { opacity: .85; }
.post-photo-cover { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: #003b37e6; color: #fff; font-size: 11px; font-weight: 800; }
.post-photo-remove { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #fffffff0; color: #18352f; box-shadow: 0 1px 4px #003b3733; cursor: pointer; }
.post-photo-remove:hover { background: #fff; color: #a03a17; }
.post-photo-remove:focus-visible { outline: 2px solid #00877f; outline-offset: 2px; }
.post-photo-remove .ui-icon { width: 14px; height: 14px; }
:is(#view-post, .flow-body) .post-photo-upload:focus-within { outline: 2px solid #00877f; outline-offset: 2px; }
.post-field--brand > span small { margin-left: 4px; color: #6a8182; font-weight: 600; }
:is(#view-post, .flow-body) select[aria-invalid="true"] { border-color: #c4562e; box-shadow: 0 0 0 3px #c4562e1f; }
:is(#view-post, .flow-body) .post-field .post-field-error { color: #a03a17; font-size: 12.5px; font-weight: 700; }
.post-field-error[hidden] { display: none; }

/* Job form: radios and checkboxes keep their own size (the generic "inputs fill the row" rule stretched them). */
.job-acc-form :is(.job-acc-radio, label) > input:is([type="radio"], [type="checkbox"]) { flex: none; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: #087c66; }
#modal .flow-body .job-acc-form.account-card { padding: 0; border: 0; box-shadow: none; background: none; }
/* Business/service listing wizard (listing-forms.js): Back on the left, Continue / Publish on the right. */
.listing-form .post-wizard-actions { justify-content: space-between; align-items: center; }
/* Signed-out "create" screen (app.js signInGate). */
.post-gate { max-width: 560px; margin: 32px auto 0; padding: 32px; border: 1px solid var(--line); border-radius: 4px; background: #fff; box-shadow: 0 10px 36px #002f340a; text-align: center; }
.post-gate h1 { margin: 0 0 10px; color: var(--forest); font-size: clamp(26px, 4vw, 32px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.post-gate-lead { max-width: 440px; margin: 0 auto 24px; color: #486660; font-size: 15px; line-height: 1.6; }
.post-gate-points { display: grid; gap: 4px; margin: 0 0 28px; padding: 0; list-style: none; text-align: left; }
.post-gate-points li { padding: 12px 16px; border-radius: 4px; background: #f6faf8; }
.post-gate-points strong { display: block; color: var(--forest); font-size: 14px; font-weight: 800; }
.post-gate-points small { display: block; margin-top: 2px; color: #5e7771; font-size: 13px; line-height: 1.5; }
.post-gate-actions { display: flex; gap: 10px; }
.post-gate-actions button { flex: 1; min-height: 48px; border-radius: 4px; font-size: 15px; font-weight: 800; }
@media (max-width: 560px) {
  .post-gate { margin: 23px 0 0; padding: 28px 18px 20px; }
  .post-gate-actions { flex-direction: column; }
}
#view-post:has(.post-gate) .pane-head { display: none; }
/* Equal space above and below the card: the footer's 48px margin plus 21px matches the 36px + 32px above. */
#view-post:has(.post-gate) { padding-bottom: 21px; }
@media (max-width: 560px) { #view-post:has(.post-gate) { padding-bottom: 0; } }

/* Supply-chain matches (roadmap Phase 7). */
.b2b-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.b2b-match a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid #e4ecec; border-radius: 4px; background: #fff; color: inherit; text-decoration: none; }
.b2b-match a:hover { border-color: #9fc9bd; }
.b2b-match strong { color: #18352f; font-size: 14px; }
.b2b-match small { color: #5c7471; font-size: 12.5px; }

/* Boost dialog (roadmap Phase 8). */
.boost-options { display: grid; gap: 8px; margin: 12px 0; }
.boost-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dbe5e3; border-radius: 4px; cursor: pointer; }
.boost-option:has(input:checked) { border-color: #003b37; background: #f2f8f6; }
.boost-option span { display: flex; justify-content: space-between; flex: 1; gap: 8px; }
.boost-option small { color: #18352f; font-weight: 700; font-size: 14px; }

/* ── Listing form photos: explicit slots (logo, cover, gallery) — an upload button, or the image with Replace/Remove ── */
.lf-photo-field { margin: 0 0 20px; }
.lf-photo-label { margin: 0 0 8px; font-size: 14px; font-weight: 800; color: #0f2a26; }
.lf-photo-label small { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: #6a8182; }
.lf-drop { position: relative; display: grid; place-items: center; align-content: center; gap: 4px; padding: 18px; border: 1.5px dashed #d4d8d6; border-radius: 4px; background: #fafaf9; color: #3d4744; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.lf-drop:hover, .lf-drop.is-over, .lf-drop:focus-within { border-color: #9aa5a1; background: #f4f5f4; }
.lf-drop strong { font-size: 14px; font-weight: 700; color: #3d4744; }
.lf-drop small { font-size: 12px; color: #8a9390; }
.lf-drop-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: #eef0ef; color: #6b7572; }
.lf-drop-icon svg { width: 20px; height: 20px; }
.lf-drop--logo { width: 140px; aspect-ratio: 1; padding: 12px; }
.lf-drop--logo small { display: none; }
.lf-drop--cover { width: 100%; aspect-ratio: 16 / 7; min-height: 150px; }
.lf-drop--tile { aspect-ratio: 1; padding: 10px; }
.lf-drop--tile strong { font-size: 13px; }
.lf-drop--tile small { display: none; }
.lf-preview { position: relative; overflow: hidden; border: 1px solid #e3e6e4; border-radius: 4px; background: #fafaf9; }
.lf-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lf-preview.lf-drop--logo { padding: 0; cursor: default; }
.lf-preview.lf-drop--logo img { object-fit: contain; background: #fff; }
.lf-preview.lf-drop--cover { min-height: 0; padding: 0; }
.lf-preview-actions { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lf-preview-tag { margin-right: auto; padding: 3px 8px; border-radius: 999px; background: rgba(8, 25, 22, .62); color: #fff; font-size: 11.5px; font-weight: 800; }
.lf-preview-btn { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: #fff; color: #0f2a26; font: inherit; font-size: 13px; font-weight: 800; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); cursor: pointer; }
.lf-preview-btn:hover { background: #f1f2f1; }
.lf-drop--logo .lf-preview-actions { left: 6px; right: 6px; bottom: 6px; gap: 4px; }
.lf-drop--logo .lf-preview-tag { display: none; }
.lf-drop--logo .lf-preview-btn { min-height: 26px; padding: 0 8px; font-size: 12px; }
.lf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.lf-thumb { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid #e3e6e4; border-radius: 4px; }
.lf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lf-thumb-remove { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(8, 25, 22, .7); color: #fff; font-size: 17px; line-height: 1; cursor: pointer; }
.lf-thumb-remove:hover { background: rgba(8, 25, 22, .9); }