tenant profile

src/index.css

@@ -1376,17 +1376,16 @@ main {
   background: var(--color-surface-subtle);
   border: 1px solid var(--color-line);
 }
-.ob-flow-num {
-  width: 22px;
-  height: 22px;
+.ob-flow-icon {
+  /* Sized for a 17px glyph rather than the two digits that used to sit here. */
+  width: 28px;
+  height: 28px;
   flex: none;
-  border-radius: 999px;
+  border-radius: 9px;
   display: grid;
   place-items: center;
   background: var(--color-brand-tint);
   color: var(--color-brand);
-  font: 600 11px/1 var(--font-sans);
-  font-variant-numeric: tabular-nums;
 }
 @media (min-width: 900px) {
   .ob-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@@ -1411,3 +1410,192 @@ main {
 @media (prefers-reduced-motion: reduce) {
   .ob-tick { animation: none; }
 }
+
+/* ── Onboarding: the step frame ─────────────────────────────────────────────
+   A single card per step, in three bands: head (position, title, progress),
+   body (the step's own fields) and foot (Back / Continue). The bands are
+   separated by rules rather than gaps so the card reads as one object.       */
+.ob-frame {
+  border: 1px solid var(--color-line);
+  border-radius: 18px;
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.ob-frame-head {
+  padding: 20px 22px 18px;
+  border-bottom: 1px solid var(--color-line);
+  background: var(--color-surface);
+}
+
+.ob-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: .07em;
+  color: var(--color-brand);
+}
+
+.ob-bar {
+  flex: 1;
+  height: 7px;
+  border-radius: 999px;
+  background: var(--color-line);
+  overflow: hidden;
+}
+
+.ob-bar-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--color-brand);
+  transition: width .4s cubic-bezier(.4, 0, .2, 1);
+}
+
+.ob-frame-body { padding: 22px; }
+
+.ob-frame-foot {
+  padding: 16px 22px;
+  border-top: 1px solid var(--color-line);
+  /* Tinted, so the action row separates from the fields above it without
+     needing a heavier rule. */
+  background: var(--color-surface-subtle);
+}
+
+@media (max-width: 640px) {
+  .ob-frame-head { padding: 16px 16px 14px; }
+  .ob-frame-body { padding: 16px; }
+  .ob-frame-foot { padding: 14px 16px; }
+  /* Full-width actions on a phone: a 96px button in the corner of a 360px
+     screen is the hardest thing on the page to hit. */
+  .ob-frame-foot button { flex: 1; justify-content: center; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ob-bar-fill { transition: none; }
+}
+
+/* ── Onboarding: the way back from an errand ───────────────────────────────
+   Shown on Inventory when setup sent the merchant there. Brand-tinted while
+   the errand is outstanding, and green once products actually exist.         */
+.ob-returnbar {
+  padding: 12px 16px;
+  border: 1px solid var(--color-brand);
+  border-radius: 14px;
+  background: var(--color-brand-tint);
+}
+
+.ob-returnbar[data-done='yes'] {
+  border-color: var(--color-success, #1f9d55);
+  background: var(--color-success-tint, #eaf7ef);
+}
+
+.ob-returnbar-mark {
+  width: 28px;
+  height: 28px;
+  flex: none;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: var(--color-brand);
+  color: #fff;
+  font: 600 12px/1 var(--font-sans);
+}
+
+.ob-returnbar[data-done='yes'] .ob-returnbar-mark {
+  background: var(--color-success, #1f9d55);
+}
+
+/* ── Onboarding: the review summary ────────────────────────────────────────
+   One row per step: icon, what it says, and a way to change it. Grid rather
+   than flex so the Edit link stays hard right however long the detail runs.  */
+.ob-review {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: start;
+  padding: 14px 16px;
+  border: 1px solid var(--color-line);
+  border-radius: 14px;
+  background: var(--color-surface);
+}
+
+/* Text renders inline, so the title and its detail ran together on one line
+   ("Store informationHalfmart · 2 Test Street"). Stacked here rather than by
+   wrapping each in a div, so the row stays one grid cell. */
+.ob-review > div > * { display: block; }
+
+.ob-review-icon {
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: var(--color-brand-tint);
+  color: var(--color-brand);
+}
+
+.ob-review-edit {
+  align-self: center;
+  border: 0;
+  background: none;
+  padding: 4px 6px;
+  border-radius: 8px;
+  font: 600 13px/1 var(--font-sans);
+  color: var(--color-brand);
+  cursor: pointer;
+}
+
+.ob-review-edit:hover { background: var(--color-brand-tint); }
+.ob-review-edit:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
+
+/* The one consequence people do not expect, called out rather than listed. */
+.ob-warn {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--color-warning-line, #e8d9a8);
+  background: var(--color-warning-tint, #fdf7e6);
+  color: var(--color-ink-1);
+}
+
+@media (max-width: 520px) {
+  /* The detail wraps under the icon before the Edit link gets squeezed off. */
+  .ob-review { grid-template-columns: auto minmax(0, 1fr); }
+  .ob-review-edit { grid-column: 2; justify-self: start; padding-left: 0; }
+}
+
+/* ── Onboarding: work beside its guidance ──────────────────────────────────
+   The upload panel and the tips that govern it, side by side on a desktop and
+   stacked on a phone — where a narrow second column would be unreadable.     */
+.ob-two {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media (min-width: 900px) {
+  /* Guidance is secondary, so it takes the narrower column. */
+  .ob-two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
+}
+
+.ob-tips {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 9px;
+}
+
+.ob-tips li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+}
+
+.ob-tips svg {
+  color: var(--color-success, #1f9d55);
+  margin-top: 2px;
+  flex: none;
+}