/* onboard/style.css - the set-up flow's own parts, on top of the portal's design system (../portal/style.css:
   its colours, type, buttons, fields, switches, cards, hours rows and colour pairs are used as they are).
   Contrast: the same tokens as the portal (ink 15:1, muted 6.4:1, white on accent 7.9:1). */

/* header */
.ob-top { position: sticky; top: 0; z-index: 20; background: var(--bg); border-block-end: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding: 8px var(--gutter); }
.ob-brand { display: flex; flex-direction: column; min-width: 0; }
.ob-brand .wordmark { font-size: 0.8rem; }
.ob-sub { font-weight: 650; font-size: 1.05rem; }
.ob-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-tools .lang { min-height: 40px; }

/* layout */
.ob-shell { padding: 0 var(--gutter) 24px; }
#main { max-width: 760px; margin-inline: auto; padding-block: 8px 0; outline: none; }
.lead { margin: 0 0 14px; }
.kept { text-align: center; margin: 4px 0 16px; }
.narrow-card { max-width: 520px; }
.req { font-weight: 400; color: var(--muted); font-size: 0.8rem; }

/* progress */
.ob-steps { max-width: 760px; margin: 12px auto 4px; }
.ob-count { margin: 0 0 6px; font-weight: 650; color: var(--muted); font-size: 0.9rem; }
.ob-bar { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.ob-bar span { height: 6px; border-radius: 99px; background: #e2ddd2; }
.ob-bar span.is-done { background: var(--accent); }
.ob-bar span.is-now { background: #7fa89c; }
.ob-steps ol { list-style: none; margin: 10px 0 0; padding: 0; display: none; }
.ob-step { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--tap); padding: 6px 10px; border-radius: 12px; border: 0; background: none;
  font: inherit; color: var(--muted); text-align: start; cursor: default; }
button.ob-step { cursor: pointer; color: var(--ink); }
button.ob-step:hover { background: #ece8df; }
.ob-step.is-now { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.ob-num { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; }
.ob-step.is-done .ob-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-step.is-now .ob-num { border-color: var(--accent); }
.ob-num .ic { width: 15px; height: 15px; stroke-width: 2.6; }

/* the Back / Continue bar: sticks to the bottom of the screen while the step is longer than it */
.ob-foot { position: sticky; inset-block-end: 0; z-index: 25; background: var(--bg); border-block-start: 1px solid var(--line); margin-inline: calc(-1 * var(--gutter));
  padding: 8px var(--gutter) calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0,0,0,.06); }
.ob-foot .save-status { text-align: center; margin: 0 0 6px; }
.ob-foot-btns { display: flex; justify-content: space-between; gap: 10px; }
.ob-foot .btn.next { flex: 1; max-width: 360px; margin-inline-start: auto; }
.ob-foot .btn .ic { width: 18px; height: 18px; }
html[dir="rtl"] .ob-foot .btn .ic, html[dir="rtl"] .icon-flip { transform: scaleX(-1); }

/* small controls */
.linkish { background: none; border: 0; padding: 0 4px; min-height: var(--tap); font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.switch-mode { margin: 14px 0 0; color: var(--muted); }
.pw { display: flex; gap: 8px; align-items: center; }
.pw input { flex: 1; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px 10px; }
.chips-wrap .chip { flex: none; min-height: var(--tap); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.yesno { display: flex; gap: 8px; }
.yesno .chip { min-width: 88px; }
.add-chip { display: inline-flex; align-items: center; gap: 4px; border-style: dashed; }
.add-chip .ic { width: 16px; height: 16px; }
.sm-label { font-size: 0.875rem; margin: 10px 0 0; }
.ok-note { color: var(--ok); font-weight: 600; }
.warn-note { color: var(--warn); font-weight: 600; }
.slug-show { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.slug-show .ltr { font-weight: 650; overflow-wrap: anywhere; white-space: normal; }
.slug-edit { display: block; margin-block-start: 6px; }
.field-err { color: var(--danger); font-weight: 600; font-size: 0.9rem; margin: 4px 0 0; }

/* look */
.pic-box.logo { width: 96px; height: 96px; border-radius: 18px; background: #fff; }
.pic-box.logo img { object-fit: contain; padding: 6px; }
.pic .btn.file:not(.ghost) { color: #fff; }

/* menu: the running count */
.count { display: flex; align-items: center; gap: 12px; background: var(--warn-soft); border: 1px solid #f0d3a8; border-radius: var(--radius); padding: 10px 14px; margin-block: 0 14px; }
.count.is-ready { background: var(--accent-soft); border-color: #b9d8cc; }
.count .tick { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid #c79a5b; display: grid; place-items: center; }
.count.is-ready .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.count .tick .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.count .note { margin: 0; }
.sec-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sec-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 2px 6px 2px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
html[dir="rtl"] .sec-chip { padding: 2px 14px 2px 6px; }
.sec-n { font-weight: 400; color: var(--muted); font-size: 0.85rem; padding-inline-end: 8px; }
.sec-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; margin-inline-start: -4px; }
.sec-x .ic { width: 16px; height: 16px; }
.inline-add .field { margin-block-start: 10px; }
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1; min-width: 0; }

/* the three ways to add dishes */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #ece8df; border-radius: 14px; padding: 4px; margin-block: 4px 6px; }
.seg-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; border-radius: 11px; background: none;
  font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--ink); cursor: pointer; padding: 4px; text-align: center; line-height: 1.2; }
html[dir="rtl"] .seg-btn { line-height: 1.6; font-size: 0.95rem; }
.seg-btn .ic { width: 22px; height: 22px; }
.seg-btn[aria-selected="true"] { background: #fff; color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.editing-note { background: var(--warn-soft); color: #5c3200; border-radius: 10px; padding: 8px 12px; margin: 10px 0 0; font-weight: 600; }
.sizes { border: 0; padding: 0; margin: 10px 0 0; min-width: 0; }
.size-head { display: grid; grid-template-columns: 1fr 7.5rem var(--tap); gap: 8px; font-size: 0.85rem; color: var(--muted); font-weight: 600; margin-block-end: 2px; }
.size-row { display: grid; grid-template-columns: 1fr 7.5rem var(--tap); gap: 8px; align-items: center; border: 0; padding: 0; margin-block-end: 8px; }
.size-row .field-err { grid-column: 1 / -1; }
.size-row .icon-btn { width: var(--tap); height: var(--tap); }
.sizes > .btn { margin-block-start: 2px; }
.wide-btn { width: 100%; min-height: 56px; margin-block-start: 10px; }
.photo-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* the menu so far */
.list-sec + .list-sec { margin-block-start: 14px; }
.list-h { font-size: 1rem; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dish-list, .paste-list { list-style: none; margin: 0; padding: 0; }
.dish-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-block-start: 1px solid var(--line); flex-wrap: wrap; }
.dish-main { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; }
.dish-name { font-weight: 650; overflow-wrap: anywhere; }
.dish-price { color: var(--muted); font-size: 0.925rem; }
.dish-price .ltr { color: var(--ink); }
.dish-btns { display: flex; gap: 6px; }
.tick-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-block-start: 1px solid var(--line); cursor: pointer; min-height: var(--tap); }
.tick-row input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.paste-out { margin-block-start: 14px; border-block-start: 2px solid var(--line); padding-block-start: 10px; }
.paste-out .big { outline: none; }
.paste-sec { margin-block-start: 12px; }
.pill.new { background: var(--warn-soft); color: #6a3d00; font-weight: 600; }
.unread { margin-block-start: 14px; background: var(--warn-soft); border-radius: 12px; padding: 10px 14px; }
.unread ul { margin: 4px 0 0; padding-inline-start: 1.1em; }
.unread .note { display: inline; }
#paste-text { font-family: ui-monospace, Consolas, monospace; font-size: 15px; line-height: 1.5; }

/* designs */
.filters { margin-block: 0 4px; }
.designs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.design { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.design.is-picked { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.frame { position: relative; aspect-ratio: 390 / 640; overflow: hidden; background: #efe9dd; direction: ltr; }
.frame iframe { position: absolute; inset-block-start: 0; left: 0; width: 390px; height: 640px; border: 0; transform-origin: 0 0; transform: scale(var(--s, .44)); pointer-events: none; background: #fff; }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.design-body { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.design-body .h3 { margin: 0; font-size: 1rem; }
.dn { color: var(--muted); font-weight: 600; font-size: 0.8rem; }
.d-line { margin: 0; font-size: 0.875rem; color: var(--muted); }
.d-good { margin: 0; font-size: 0.8rem; color: var(--ink); }
.d-btns { display: flex; flex-direction: column; gap: 6px; margin-block-start: auto; padding-block-start: 6px; }
.d-btns .btn { width: 100%; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.look-sheet { max-width: 480px; height: 92vh; }
.look-body { padding: 0; display: flex; }
.look-body iframe { flex: 1; width: 100%; border: 0; min-height: 60vh; }

/* preview */
.preview-grid { display: grid; gap: 16px; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; }
.phone { width: min(380px, 100%); height: min(720px, 78vh); border: 10px solid #1d2125; border-radius: 34px; overflow: hidden; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.phone iframe { width: 100%; height: 100%; border: 0; display: block; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.center-row { justify-content: center; }
.center-text { text-align: center; }
.ck-list { list-style: none; margin: 4px 0 0; padding: 0; }
.ck { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 0; border-block-end: 1px solid var(--line); }
.ck:last-child { border-block-end: 0; }
.ck .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.ck .tick .ic { width: 15px; height: 15px; color: #fff; stroke-width: 2.6; }
.ck.is-done .tick { background: var(--ok); border-color: var(--ok); }
.ck-label { flex: 1; }
.ck.is-done .ck-label { color: var(--muted); }

/* go live and done */
.plan p { margin: 0 0 4px; }
.done-card { text-align: center; max-width: 560px; margin: 24px auto; padding: 28px 20px; }
.done-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; margin: 0 auto 8px; }
.done-mark .ic { width: 36px; height: 36px; stroke-width: 2.6; }

/* sheets (the portal's look, without its form machinery) */
body.has-sheet { overflow: hidden; }
.toast { inset-block-end: calc(96px + env(safe-area-inset-bottom)); }
.toast.has-link { pointer-events: auto; }
.toast-act { background: none; border: 0; color: #b7f0d6; font: inherit; font-weight: 700; min-height: var(--tap); padding: 0 8px; cursor: pointer; text-decoration: underline; }

@media (max-width: 380px) { .size-row, .size-head { grid-template-columns: 1fr 6.5rem var(--tap); } }
@media (min-width: 640px) {
  .designs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-btns { flex-direction: row; } .d-btns .btn { width: auto; flex: 1; }
}
@media (min-width: 960px) {
  .ob-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; max-width: 1240px; margin-inline: auto; }
  .ob-steps { position: sticky; top: 76px; align-self: start; margin: 16px 0 0; }
  .ob-steps ol { display: grid; gap: 2px; }
  #main { max-width: 960px; margin-inline: 0; padding-block-start: 16px; }
  .ob-shell > #main:only-child { grid-column: 1 / -1; margin-inline: auto; }
  .designs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .preview-grid { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .ob-foot { margin-inline: 0; border-radius: 14px 14px 0 0; }
  .ob-top { padding-inline: max(var(--gutter), calc((100% - 1240px) / 2 + var(--gutter))); }
  .toast { inset-block-end: 100px; }
}

/* ── review pass 1: a one-row header that scrolls away, sign-out at the foot, one-line dish rows ── */
.ob-top { position: static; flex-wrap: nowrap; }
.ob-brand { flex: 1 1 auto; }
.ob-sub { font-size: 1rem; line-height: 1.25; }
.ob-tools .lang { min-width: var(--tap); padding: 0 10px; }
.quiet-out { text-align: center; color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }
.dish-row { flex-wrap: nowrap; padding: 6px 0; }
.dish-btns { flex: none; }
.icon-btn.danger { color: var(--danger); }
.icon-btn:hover { border-color: var(--accent); }
.icon-btn .ic { width: 20px; height: 20px; }
details.list-sec { border-block-start: 1px solid var(--line); }
details.list-sec > summary.list-h { min-height: var(--tap); cursor: pointer; padding: 6px 0; margin: 0; }
.list-sec + .list-sec { margin-block-start: 0; }
@media (min-width: 960px) { .ob-steps { position: static; } }

/* ── round 2: help on every step, tips, the card, waiting for approval ── */
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 6px; }
.foot-top .save-status { flex: 1; text-align: start; margin: 0; }
.help-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--card); color: var(--accent); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; flex: none; }
.help-btn .ic { width: 20px; height: 20px; }
.help-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.tip { margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: #eef4fb; color: #183a5c; font-size: 0.875rem; }
html[dir="rtl"] .tip { font-size: 16px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; }
.consent input { width: 24px; height: 24px; min-height: 0; flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.consent .field-err { flex-basis: 100%; }
.card-on { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.card-on > div:nth-child(2) { flex: 1 1 10rem; }
.card-on .big { margin: 0; }
.card-chip { width: 56px; height: 40px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.note .ic { width: 16px; height: 16px; vertical-align: -3px; }
.changes { border-inline-start: 6px solid var(--danger); background: var(--danger-soft); }
.changes .asked { font-weight: 650; margin: 0 0 4px; }
.done-mark.is-wait { background: #8a5300; }
.help-sheet { max-width: 480px; }
.help-ways { display: grid; gap: 8px; margin-block-start: 8px; }
.help-ways .btn { width: 100%; }
.wa-btn { background: #136c3a; border-color: #136c3a; }
.wa-btn:hover { background: #0e5730; }
.help-part { border-block-start: 1px solid var(--line); margin-block-start: 16px; padding-block-start: 10px; }
.help-part .h3 { margin-block-end: 0; }
.slots .chip { min-width: 0; }
.sbx-msg { white-space: pre-wrap; background: #f3f0ea; border-radius: 8px; padding: 8px; font: 14px/1.4 var(--font); margin: 8px 0 0; }
/* review pass 2: nine steps in the bar; help sits in the bottom bar, a round "?" on a phone */
.ob-bar { grid-template-columns: repeat(9, 1fr); }
.ob-foot-btns { align-items: center; }
.ob-foot-btns .help-btn { padding: 0; width: var(--tap); justify-content: center; }
.ob-foot-btns .help-word { display: none; }
.ob-foot-btns > span:empty { display: none; }
@media (min-width: 640px) { .ob-foot-btns .help-btn { width: auto; padding: 0 14px; } .ob-foot-btns .help-word { display: inline; } }
/* review round 2 fixes */
.consent { flex-wrap: wrap; }
.consent > span { flex: 1 1 12rem; min-width: 0; }
.consent .field-err { flex: 1 1 100%; }
.ob-tools .lang { min-height: var(--tap); }
.file-ic { position: relative; overflow: hidden; cursor: pointer; padding: 0; }
.file-ic input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file-ic:focus-within { outline: 3px solid #1f6feb; outline-offset: 2px; }
.file-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dish-btns { gap: 6px; }
.tick-row { padding-block: 10px; }
.help-ways .note { margin: -2px 0 6px; }
/* desktop: forms keep a reading width; the gallery and the preview use the room */
@media (min-width: 960px) { #main:not([data-step="design"]):not([data-step="preview"]) > .card, #main:not([data-step="design"]):not([data-step="preview"]) > .count { max-width: 680px; } }
/* review round 2b: Urdu letters join in the paste box; long web addresses wrap; the front door centred on desktop */
html[dir="rtl"] #paste-text { font-family: var(--font-rtl); line-height: 2; }
.kv dd .ltr { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 960px) { main.join#main { margin-inline: auto; max-width: 760px; } main.join .designs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }