/* ASA OS new company setup (request 246D): #/setup and #/setup/<step>.
 * Loaded after shop.css; uses its tokens throughout (grouped cards, calm status text, the shared segmented control). */

.setup-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.setup-main { min-width: 0; max-width: 820px; }
.setup-layout > * { min-width: 0; }   /* the scrollable phone rail must not widen the column */

/* the step rail: number (or check) · name · state */
.setup-rail { position: sticky; top: 16px; }
.setup-progress { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.setup-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.setup-step { display: grid; grid-template-columns: 26px 1fr; grid-template-areas: "dot name" "dot state"; column-gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: var(--r-m); color: var(--ink); text-decoration: none; }
.setup-step:hover { background: var(--fill); text-decoration: none; }
.setup-step[aria-current="step"] { background: var(--surface); box-shadow: 0 0 0 .5px var(--hair); }
.setup-dot { grid-area: dot; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; background: var(--fill); color: var(--ink-2); }
.setup-step.is-ready .setup-dot { background: var(--green-soft); color: var(--green); }
.setup-step[aria-current="step"] .setup-dot { background: var(--accent); color: var(--accent-ink); }
.setup-step-name { grid-area: name; font-size: 14px; font-weight: 500; }
.setup-step-state { grid-area: state; font-size: 12px; color: var(--ink-2); }
.setup-step.is-skipped .setup-step-state { color: var(--amber); }

/* cards and rows */
.setup-card { display: flex; flex-direction: column; gap: 14px; }
.setup-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.setup-h { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.setup-h3 { margin: 0; font-size: 15px; }
.setup-lede { margin: -6px 0 0; font-size: 14px; color: var(--ink-2); }
.setup-note { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.setup-empty { margin: 0; font-size: 14px; color: var(--ink-2); }
.setup-sub { display: block; font-size: 13px; color: var(--ink-2); }
.setup-status .notice { margin: 0 0 14px; }
.setup-status .notice button { min-height: 26px; margin-left: 4px; }
.setup-list { display: flex; flex-direction: column; border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; }
.setup-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface); }
.setup-row + .setup-row { border-top: 1px solid var(--hair); }
.setup-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.setup-row-main strong { font-size: 15px; font-weight: 600; }

.setup-facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.setup-facts dt { color: var(--ink-2); }
.setup-facts dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.setup-chip { width: 16px; height: 16px; border-radius: 5px; background: var(--sw, var(--accent)); display: inline-block; }

/* forms */
.setup-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-m); background: var(--canvas); box-shadow: inset 0 0 0 .5px var(--hair); }
.setup-form-slot:empty { display: none; }
.setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.setup-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.setup-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.setup-field label, .setup-label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.setup-field input, .setup-field select { width: 100%; }
.setup-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.setup-actions a:not(.btn) { margin-right: auto; font-size: 14px; }
.setup-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.setup-check input { margin: 0; }
.setup-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }

.setup-hours { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.setup-hours legend { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: 4px; padding: 0; }
.setup-hours-row { display: grid; grid-template-columns: 140px auto auto auto; align-items: center; gap: 10px; justify-content: start; }
.setup-hours-row input[type="time"] { width: 124px; }
.setup-hours-row .setup-sub { display: inline; }
.setup-hours > button.quiet { align-self: flex-start; }

/* staff */
.setup-signin { margin: 0; }
.setup-group { display: flex; flex-direction: column; gap: 10px; }
.setup-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.setup-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; }
.setup-person { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; background: var(--surface); }
.setup-person + .setup-person { border-top: 1px solid var(--hair); }
.setup-person .shop-avatar { width: 32px; height: 32px; font-size: 13px; }
.setup-pill { font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.setup-pill.is-ready { background: var(--green-soft); color: var(--green); }
.setup-pill.is-todo { background: var(--amber-soft); color: var(--amber); }
/* Beta onboarding (Oct 21): an invited person who hasn't accepted yet; the invite and practice-login buttons side by side. */
.setup-pill.is-wait { background: var(--accent-soft); color: var(--accent); }
.setup-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.setup-invite .setup-sub { overflow-wrap: anywhere; }

/* money */
.setup-money { display: flex; flex-direction: column; border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; }
.setup-money .setup-money-row { padding: 10px 14px; background: var(--surface); }
.setup-money .setup-money-row + .setup-money-row { border-top: 1px solid var(--hair); }
.setup-money-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.setup-money-ctl { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.setup-money-ctl input { width: 104px; text-align: right; font-variant-numeric: tabular-nums; }
.setup-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* services */
.setup-svcs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; }
.setup-svc { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); }
.setup-svc + .setup-svc { border-top: 1px solid var(--hair); }
.setup-svc .setup-check > span { display: flex; flex-direction: column; }
.setup-svc button[hidden] { display: none; }

/* done */
.setup-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-radius: var(--r-m); box-shadow: 0 0 0 .5px var(--hair); overflow: hidden; }
.setup-check-item { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; background: var(--surface); }
.setup-check-item + .setup-check-item { border-top: 1px solid var(--hair); }
.setup-check-item a { font-size: 13.5px; white-space: nowrap; }
.setup-mark { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.setup-check-item.is-ready .setup-mark { background: var(--green-soft); color: var(--green); }
.setup-check-item.is-missing .setup-mark { background: var(--amber-soft); color: var(--amber); }
.setup-test { border: 0; box-shadow: inset 0 0 0 1px var(--hair-strong); background: transparent; }

/* U17-A: ready to run, per capability (under the steps) */
.setup-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.setup-side .setup-rail { position: static; }
.setup-caps { margin-top: 16px; border-top: .5px solid var(--hair); padding-top: 12px; }
.setup-caps-h { font-size: 14px; font-weight: 600; cursor: pointer; }
.setup-caps-sub { font-weight: 400; color: var(--ink-2); font-size: 13px; }
.setup-caps-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.setup-cap { padding: 8px 10px; border-radius: var(--r-m); background: var(--surface); box-shadow: 0 0 0 .5px var(--hair); }
.setup-cap-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.setup-cap-name { font-size: 13px; font-weight: 600; }
.setup-cap-state { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.setup-cap.is-ready .setup-cap-state { color: var(--green); }
.setup-cap.is-not_ready .setup-cap-state { color: var(--red, #c9302c); }
.setup-cap-sum, .setup-cap-why { margin: 4px 0 0; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.setup-cap-why { padding-left: 16px; }
.setup-cap-fix { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; }
.setup-caps-rule { margin: 8px 0 0; font-size: 11px; color: var(--ink-2); }

.setup-foot { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin: 4px 0 24px; }

@media (max-width: 860px) {
  .setup-layout { grid-template-columns: 1fr; gap: 14px; }
  .setup-rail { position: static; }
  .setup-side { position: static; max-height: none; overflow: visible; }
  .setup-rail ol { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; }
  .setup-rail ol::-webkit-scrollbar { display: none; }
  .setup-step { grid-template-columns: 22px auto; grid-template-areas: "dot name"; white-space: nowrap; padding: 6px 10px 6px 6px; background: var(--fill); border-radius: 999px; }
  .setup-step-state { display: none; }
  .setup-dot { width: 22px; height: 22px; font-size: 11px; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-hours-row { grid-template-columns: 1fr auto auto auto; gap: 6px; }
  .setup-hours-row input[type="time"] { width: 100px; }
  .setup-svc { grid-template-columns: 1fr; gap: 8px; }
  .setup-row { flex-direction: column; }
  .setup-foot { flex-direction: column-reverse; align-items: stretch; }
  .setup-foot .btn { text-align: center; }
}

/* role picker: the chosen role must be obvious in light and dark (the shared .seg's pressed state is too faint on dark) */
.setup-form .seg { flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
.shop-on .setup-form .seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.setup-form .setup-grid > .setup-field:has(.seg) { grid-column: 1 / -1; }

/* History import (075): the link to #/import above each step */
.setup-import-tip { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); }

/* 178: shop package prices and the package library */
.setup-prices { margin: 8px 0 4px; padding: 10px 12px; border-radius: var(--r-m, 10px); background: var(--canvas); box-shadow: 0 0 0 .5px var(--hair); flex-basis: 100%; }
.setup-prices[hidden] { display: none; }
.setup-price-lines { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.setup-price-lines td { padding: 4px 6px; vertical-align: middle; }
.setup-qty { width: 72px; } .setup-unit { width: 56px; margin-left: 4px; } .setup-price { width: 90px; }
.setup-library { margin-top: 16px; }
.setup-svc { grid-template-columns: minmax(150px, 1fr) minmax(120px, 170px) auto auto; }
.setup-svc > .setup-prices, .setup-library .setup-svc > div { grid-column: 1 / -1; }
.setup-library .setup-svc { grid-template-columns: minmax(0, 1fr) auto; }
/* a17/0: answer in your own words */
.setup-talk { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; margin: 0 0 16px; }
.setup-talk textarea { width: 100%; box-sizing: border-box; }
.setup-talk .setup-h2 { margin: 0; font-size: 1.05rem; }
.setup-talk .setup-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.setup-talk-list { margin: 0; padding-left: 18px; display: grid; gap: 2px; }