/* ═══════════════════════════ START (tabs with templates, Oct 7) ═══════════════════════════
   "What do you want to create?" — every product a tab, all visible at once
   (owner, Oct 7: option C), its templates right under it, and the three ways
   in beneath them; Reorder keeps its card on the right. Loaded after app.css;
   the older start rules there (.ptile, .sizechip) are overridden here where
   the page reuses their class names. Every colour is a tenant token or a
   neutral. */

.page--start {
  --stage-h: clamp(300px, 44vh, 400px);
}
.page--start .start__inner {
  width: 100%; max-width: 1160px;
  margin: 0 auto;
  padding: clamp(22px, 4.5vh, 48px) 28px 64px;
  display: flex; flex-direction: column; align-items: stretch; gap: 26px;
}

.start__view {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  animation: startIn .34s var(--ease) both;
}
@keyframes startIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.start__head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.start__lead { margin: 0; max-width: 64ch; font-size: var(--fs-lead); line-height: 1.45; color: var(--ink-70); text-wrap: balance; }

/* ---- the row: the products, and Reorder on the right ---- */
.start__row {
  width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 24px;
  align-items: start;
}
.sbrowse { min-width: 0; display: flex; flex-direction: column; gap: 0; }

/* ---- the tabs ---- */
.stabs {
  display: flex; gap: 6px;
  padding: 6px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1px solid var(--line-soft); border-bottom: 0;
  background: var(--paper);
  overflow-x: auto; scrollbar-width: none;
}
.stabs::-webkit-scrollbar { display: none; }
.stab {
  flex: 1 1 0; min-width: 132px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 62px; padding: 8px 12px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-70);
  text-align: center;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.stab:hover { background: var(--accent-soft); color: var(--ink); }
.stab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.stab__label { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.stab__meta { font-size: var(--fs-micro); opacity: .8; font-variant-numeric: tabular-nums; }

/* ---- the panel under the tabs ---- */
.spanel {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 20px 22px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(circle, var(--workspace-dot) 1px, transparent 1.4px) 0 0 / 18px 18px,
    var(--workspace);
}
.spanel [hidden] { display: none !important; }

/* a row of size chips (the older size-step rules in app.css are overridden) */
.page--start .spanel .start__sizes {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: flex-start; gap: 8px;
  margin: 0; width: auto;
}
.start__sizelabel { font-size: var(--fs-small); font-weight: 600; color: var(--ink-70); margin-right: 4px; }
.page--start .spanel .sizechip {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 0; min-height: 40px; margin: 0; padding: 0 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper); box-shadow: none;
  color: var(--ink);
  font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums;
}
.page--start .spanel .sizechip:hover { border-color: var(--accent-line); }
.page--start .spanel .sizechip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* the tab's own templates: tap one to start */
.sthumbs {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}
.sthumbs[data-family="flyer"] { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.sthumbs[data-family="door-hanger"] { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.sthumb {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  min-width: 0; padding: 0;
  border: 0; background: none; text-align: left;
  color: var(--ink);
}
.sthumb__img {
  position: relative; display: block;
  aspect-ratio: var(--ar, 1.5);
  border-radius: 6px; overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  transition: transform .16s ease, box-shadow .16s ease;
}
.sthumb__pic {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none; -webkit-user-drag: none;
}
.sthumb__img.is-loaded .sthumb__pic { opacity: 1; }
.sthumb__name {
  font-size: var(--fs-small); font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sthumb:hover:not(:disabled) .sthumb__img { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.sthumb:focus-visible { outline: none; }
.sthumb:focus-visible .sthumb__img { outline: 2px solid var(--accent); outline-offset: 2px; }
.sthumb:disabled { cursor: default; opacity: .6; }
.sthumb.is-working { opacity: 1; }
.sthumb.is-working .sthumb__img::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2.5px solid var(--accent); border-right-color: transparent;
  animation: spin .8s linear infinite;
}
/* still coming: blank stock with a slow sheen */
.sthumb--wait .sthumb__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--ink) 6%, transparent) 50%, transparent 65%) 0 0 / 260% 100% no-repeat;
  animation: sthumbSheen 1.6s ease-in-out infinite;
}
@keyframes sthumbSheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sthumbs__empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.sthumbs__art { display: block; width: min(100%, 420px); }
.sthumbs__art .mk { display: block; width: 100%; height: auto; overflow: visible; }
.sthumbs__note { margin: 0; font-size: var(--fs-small); color: var(--ink-70); text-align: center; }

/* the three ways in, under the templates */
.start__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.startopt {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  min-width: 0; min-height: 68px; padding: 12px 14px;
  text-align: left;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line-soft);
  background: var(--paper);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.startopt:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-float); }
.startopt:disabled { cursor: default; }
.startopt.is-empty { opacity: .55; }
.startopt__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.startopt__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.startopt__title { font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.startopt__text { font-size: var(--fs-micro); line-height: 1.35; color: var(--ink-70); }
.startopt.is-working .startopt__icon::after {
  content: ""; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .8s linear infinite;
}
.startopt.is-working .startopt__icon svg { display: none; }

/* the Signs & banners tab: two quote cards, a photo of the real thing each */
.senq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.senq .ptile.senq__card {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0; overflow: hidden; min-width: 0;
  text-align: left;
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line-soft);
  background: var(--paper);
  box-shadow: var(--shadow-float);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.senq .ptile.senq__card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.senq__art { display: block; aspect-ratio: 3 / 2; background: var(--workspace); }
.senq__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.senq__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px 16px; }
.senq .ptile__label { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.senq .ptile__meta { font-size: var(--fs-small); color: var(--muted); }
.senq__go {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-small); font-weight: 600;
}
.senq__go::after { content: "\2192"; transition: transform .16s ease; }
.senq .ptile.senq__card:hover .senq__go::after { transform: translateX(3px); }

/* the drawing's inks: tenant tokens only */
.mk-paper { fill: var(--paper); }
.mk-accent { fill: var(--accent); }
.mk-soft { fill: var(--accent-soft); }
.mk-ink { fill: var(--ink); opacity: .82; }
.mk-mute { fill: var(--ink); opacity: .34; }
.mk-line { fill: var(--ink); opacity: .15; }
.mk-on { fill: var(--accent-ink); opacity: .95; }
.mk-glow { fill: var(--accent-ink); opacity: .28; }
.mk-glow2 { fill: var(--accent-ink); opacity: .16; }
.mk-edge { stroke: var(--ink-45); stroke-width: 1.2; }
.mk-onstroke { stroke: var(--accent-ink); }

/* a tenant-sent "coming soon" (none today): quiet, and not a button */
.start__soon { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.start__soon[hidden] { display: none; }
.start__soon .start__soonitem {
  width: auto; flex-direction: row; align-items: center; gap: 8px;
  padding: 6px 8px 6px 14px; border-radius: 999px;
}
.start__soon .ptile__label { font-size: var(--fs-small); font-weight: 600; }
.start__soon .ptile__badge { margin-top: 0; }

/* ---- Reorder: a card of its own ---- */
.startcta {
  height: var(--stage-h);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: 28px 26px 24px;
  text-align: left;
  border-radius: var(--r-xl);
  border: 1.5px solid var(--line-soft);
  background: var(--paper);
  box-shadow: var(--shadow-float);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.startcta:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.startcta__icon {
  flex: 0 0 auto;
  width: 58px; height: 58px; border-radius: 18px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.startcta__icon { display: none; }   /* the phone's row layout uses the icon; here the drawing speaks */
.startcta__text { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.startcta__art { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.startcta__art svg { display: block; width: 100%; height: 100%; max-height: 132px; overflow: visible; filter: drop-shadow(0 8px 14px rgba(20, 22, 28, .10)); }
.startcta__title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.startcta__label { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--ink); }
.startcta__note { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.startcta__go {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--accent-line);
  font-size: var(--fs-small); font-weight: 600; color: var(--accent);
  transition: background var(--dur) var(--ease);
}
.startcta__go::after { content: "\2192"; transition: transform .16s ease; }
.startcta:hover .startcta__go { background: var(--accent-soft); }
.startcta:hover .startcta__go::after { transform: translateX(3px); }

/* ---- narrower windows: Reorder moves under the products ---- */
@media (max-width: 900px) {
  .start__row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .startcta {
    height: auto; min-height: 76px;
    flex-direction: row; align-items: center; gap: 14px;
    padding: 14px 16px;
    border-radius: var(--r-lg);
  }
  .startcta__icon { display: grid; width: 48px; height: 48px; border-radius: 14px; }
  .startcta__text { flex: 1 1 auto; }
  .startcta__art { display: none; }
  .startcta__title { display: none; }
  .startcta__label { font-size: var(--fs-body); }
  .startcta__note { font-size: var(--fs-micro); }
  .startcta__go { padding: 0; width: 44px; justify-content: center; border: 0; font-size: 0; }
  .startcta__go::after { font-size: 20px; }
  .start__opts { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- phones (390px) ---- */
@media (max-width: 640px) {
  .page--start .start__inner { padding: 18px 16px 44px; gap: 18px; }
  .start__view { gap: 16px; }
  .page--start .start__title { font-size: 30px; }
  .start__lead { font-size: var(--fs-body); }
  /* all four tabs on screen at once: two by two, never a row that scrolls away */
  .stabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; overflow: visible; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 5px; }
  .stab { min-width: 0; min-height: 56px; padding: 6px 10px; }
  .stab__label { font-size: 15px; }
  .spanel { padding: 14px 12px 16px; border-radius: 0 0 var(--r-lg) var(--r-lg); gap: 14px; }
  .sthumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sthumbs[data-family="flyer"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sthumbs[data-family="door-hanger"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* two rows on a phone, so the ways in stay close: the gallery has the rest */
  .sthumbs[data-family="business-card"] .sthumb:nth-child(n+5),
  .sthumbs[data-family="flyer"] .sthumb:nth-child(n+7),
  .sthumbs[data-family="door-hanger"] .sthumb:nth-child(n+9) { display: none; }
  .senq { grid-template-columns: 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .start__view { animation: none; }
  .sthumb__pic { transition: none; }
  .sthumb--wait .sthumb__img::after { animation: none; }
  .startcta:hover, .startopt:hover:not(:disabled), .sthumb:hover:not(:disabled) .sthumb__img,
  .senq .ptile.senq__card:hover { transform: none; }
}