/* Send for review (v2): one card per store with a numbered checklist that ends in the one primary button. */ .sub-card.card { background: var(--ds-surface); border: 1px solid var(--ds-stroke); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e2); padding: 0; overflow: hidden; min-width: 0; } .sub-card .sub-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px 16px; border-bottom: 1px solid var(--ds-stroke); background: linear-gradient(180deg, hsl(var(--tint-h, 250) var(--ds-tint-s) var(--ds-tint-l) / var(--ds-tint-a2)), transparent); } .sub-card .sub-mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ds-raised); border: 1px solid var(--ds-stroke); flex: none; } .sub-card .sub-mark svg { width: 20px; height: 20px; } .sub-card .sub-head-t { flex: 1; min-width: 180px; } .sub-card .sub-head-t h3 { font-size: var(--ds-t-h2); font-weight: var(--ds-w-title); letter-spacing: -.015em; margin: 0; } .sub-card .sub-head-s { color: var(--muted); font-size: var(--ds-t-meta); margin-top: 2px; } .sub-card .sub-count { display: inline-flex; align-items: baseline; padding: 6px 12px; border-radius: var(--ds-r-pill); background: var(--ds-inset); font-weight: var(--ds-w-display); font-size: 18px; color: var(--ink); } .sub-card .sub-count .of { font-size: var(--ds-t-meta); color: var(--muted); font-weight: var(--ds-w-strong); } .sub-card .sub-count.all { background: var(--ok-bg); color: var(--ok-ink); } .sub-card .sub-count.all .of { color: var(--ok-ink); } .sub-card .sub-head-a { flex-basis: 100%; justify-content: flex-start; } .sub-card .sub-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; } /* checklist */ .sub-card .sub-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .sub-card .sub-step { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 18px; } .sub-card .sub-step:last-child { padding-bottom: 0; } .sub-card .sub-step::before { content: ""; position: absolute; left: 16px; top: 36px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--ds-stroke); } .sub-card .sub-step:last-child::before { display: none; } .sub-card .sub-step.ready::before { background: color-mix(in srgb, var(--ok-solid) 55%, var(--ds-stroke)); } .sub-card .sub-node { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ds-inset); border: 2px solid var(--ds-stroke-strong); color: var(--muted); font-weight: var(--ds-w-title); font-size: var(--ds-t-meta); position: relative; z-index: 1; } .sub-card .sub-node svg { width: 16px; height: 16px; } .sub-card .sub-step.ready .sub-node { background: var(--ok-solid); border-color: var(--ok-solid); color: #fff; } .sub-card .sub-step.blocked .sub-node { background: var(--bad-bg); border-color: var(--bad-solid); color: var(--bad-solid); } .sub-card .sub-step.warn .sub-node { background: var(--warn-bg); border-color: var(--warn-solid); color: var(--warn-ink); } .sub-card .sub-step-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 5px; } .sub-card .sub-step-h { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .sub-card .sub-step-t { font-size: var(--ds-t-h3); font-weight: var(--ds-w-title); } .sub-card .sub-step.todo .sub-step-t { color: var(--muted); } .sub-card .sub-hint { font-size: var(--ds-t-meta); color: var(--muted); } .sub-card .sub-field select.input { width: 100%; max-width: 520px; height: 40px; border-radius: var(--ds-r-sm); font-size: var(--ds-t-body); } .sub-card .sub-version { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .sub-card .sub-version-v { font-size: 24px; font-weight: var(--ds-w-display); letter-spacing: -.02em; } .sub-card .sub-check { gap: 8px; } .sub-card .sub-go .btn-primary { height: 42px; padding: 0 20px; font-size: var(--ds-t-body); border-radius: var(--ds-r-sm); } /* submissions */ .sub-card .sub-list { display: flex; flex-direction: column; gap: 8px; } .sub-card .sub-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--ds-r-sm); background: var(--ds-inset); border: 1px solid var(--ds-stroke); } .sub-card .sub-item-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--neutral-bg); color: var(--neutral-ink); } .sub-card .sub-item-ic svg { width: 16px; height: 16px; } .sub-card .sub-item.tone-info .sub-item-ic { background: var(--info-bg); color: var(--info-ink); } .sub-card .sub-item.tone-bad { border-color: color-mix(in srgb, var(--bad-solid) 40%, var(--ds-stroke)); } .sub-card .sub-item.tone-bad .sub-item-ic { background: var(--bad-bg); color: var(--bad-ink); } .sub-card .sub-item.tone-ok .sub-item-ic { background: var(--ok-bg); color: var(--ok-ink); } .sub-card .sub-item-m { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sub-card .sub-item-t { font-weight: var(--ds-w-title); } .sub-card .sub-item-s { font-size: var(--ds-t-meta); color: var(--muted); overflow-wrap: anywhere; } .sub-card .sub-item .note-list { margin: 6px 0 0; padding-left: 18px; font-size: var(--ds-t-meta); } /* extras: in-app purchases, console steps */ .sub-card .sub-extra { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--ds-r); background: var(--ds-inset); border: 1px dashed var(--ds-stroke-strong); } .sub-card .sub-extra-h { display: flex; align-items: center; gap: 8px; } .sub-card .sub-extra-h svg { width: 16px; height: 16px; color: var(--tint, var(--accent-solid)); }