/* Setting a business up, the first and only time.
 *
 * The same shape as the sign-in page it follows: one card, centred, nothing on
 * screen but the thing being done. Every colour and corner comes from a token.
 */

.k-setup {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  box-sizing: border-box;
  background: var(--bg);
}

.k-setup__card {
  width: 100%;
  max-width: 560px;
  height: fit-content;
  padding: 28px 24px;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-setup__title {
  margin: 0 0 12px;
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  color: var(--brand);
}

.k-setup__line {
  margin: 0 0 20px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* **A LINK DRESSED AS A BUTTON, and it takes the button's own shape now.**
 *
 * It was a complete second primary button written out here -- 44px, its own
 * padding, its own font, its own fill and its own hover -- and the migration
 * missed it because it is an anchor, not a button. So "Open the Firebase
 * console" stood 7px taller than "Connect this business" directly below it,
 * with bigger text, and the two hovered to different shades. That is verbatim
 * the screen comparison that produced D142, still on the set-up page.
 *
 * The markup carries `k-button k-button--main` now; all that is left here is
 * the one thing a link needs and a button does not. */
.k-setup__link {
  text-decoration: none;
}

.k-setup__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.k-setup__steps {
  margin: 16px 0 24px;
  padding-left: 20px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.k-setup__step {
  margin-bottom: 8px;
}

/* The one choice on this page that can never be undone. */
.k-setup__warn {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}

.k-setup__label {
  display: block;
  margin: 18px 0 6px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.k-setup__paste,
.k-setup__text {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

/* The pasted block is code the console wrote, so it is shown in the typeface
 * code is shown in everywhere else here -- it makes a truncated paste visible. */
.k-setup__paste {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.k-setup__paste:focus-visible,
.k-setup__text:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.k-setup__shapes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}

/* **THE WHOLE ROW IS THE TARGET, so the whole row is sized (D67).** Said as a
 * number rather than left to whatever the text inside happens to come to.
 * The note under this block already says a 13px checkbox is too small; that
 * is only true if the row it sits in is big enough to press instead. */
.k-setup__shape {
  display: flex;
  min-height: 44px;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}

/* The whole row is the target, not just the little square -- a 13px checkbox is
 * well under the 40px a thumb needs (D67). */
.k-setup__shape input {
  margin: 2px 0 0;
  min-width: 18px;
  min-height: 18px;
  cursor: pointer;
}

.k-setup__shape-words {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.k-setup__shape-label {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.k-setup__shape-explain {
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-muted);
}

.k-setup__go {
  width: 100%;
  margin-top: 20px;
}

.k-setup__problem {
  margin: 16px 0 0;
  padding: 12px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------- this business, and starting over */

.k-facts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 20px 0 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* **THE NAME AND ITS ANSWER, side by side while there is room for both.**
 *
 * `flex-wrap` was doing the deciding, and on a phone it decided differently for
 * every row: a short answer stayed on the line and a long one dropped below it.
 * So the list read as two columns for three rows, one column for the next, and
 * back again -- and where they did share a line, a 180px name and a right-hand
 * answer sat at opposite edges of a 320px screen with a gulf between them and
 * nothing joining them. **His words, with a photograph of his own phone: the
 * two columns collide.**
 *
 * They stack below, deliberately and for EVERY row, which is the thing the old
 * rule could not promise. */
.k-facts__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 12px 14px;
  background: var(--surface);
}

.k-facts__name {
  min-width: 180px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-muted);
}

.k-facts__value {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* **ON A PHONE THEY STACK, EVERY ROW THE SAME WAY.**
 *
 * There is not room for a 180px name and a real answer beside it on a 320px
 * screen, and pretending there is produced the collision above. Name first, in
 * the quieter colour; answer under it, in the darker one. The eye reads the
 * pair as a pair because they are close together, not because they are lined up
 * in columns that only sometimes exist. */
@media (max-width: 600px) {
  .k-facts__row {
    display: block;
    padding: 10px 14px;
  }

  .k-facts__name {
    display: block;
    min-width: 0;
    margin: 0 0 2px;
    font-size: 13px;
  }

  .k-facts__value {
    display: block;
  }
}


.k-facts__danger {
  margin: 28px 0 0;
  padding: 16px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
}

.k-facts__danger-title {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  color: var(--danger);
}

.k-facts__danger-line {
  margin: 0 0 14px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

/* ------------------------------------------------- connecting the fetching */

/* **SHAPED LIKE THE PEOPLE SECTION, deliberately.** Both are a section added
 * below the facts on this one tab, and two sections on one screen that look like
 * two different products is the drift D142 exists to stop. Nothing here is a
 * button, a height or a font size that any other screen already has: the button
 * comes from `button.css`, the wording box from `screen.css`.
 */
.k-fetching {
  margin: 32px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
}

.k-fetching__title {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 16px;
  color: var(--text);
}

.k-fetching__intro {
  margin: 0 0 8px;
  max-width: 70ch;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.k-fetching__steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0 0;
}

.k-fetching__step {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.k-fetching__step-title {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.k-fetching__step-line {
  margin: 0;
  max-width: 70ch;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* **WHY A STEP CANNOT RUN, and it is deliberately NOT the danger colour.**
 * Nothing is wrong and nothing the seller did caused it -- a red box would tell
 * them to go looking for a mistake of their own that does not exist. */
.k-fetching__step-cannot {
  margin: 10px 0 0;
  padding: 10px 12px;
  max-width: 70ch;
  background: var(--info-bg);
  border-radius: 6px;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.k-fetching__outcome {
  margin: 14px 0 0;
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.k-fetching__outcome-title {
  margin: 0 0 6px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.k-fetching__outcome-line {
  margin: 0 0 4px;
  max-width: 70ch;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  /* A reason a platform sent back can be long, and must not push a phone sideways. */
  overflow-wrap: anywhere;
}

/* **THE THREE AMAZON VALUES, and this is the only real form in the section.**
 * Label above its box and every box the full width, because these are long
 * pasted values and a label sitting beside one leaves no room to see what was
 * pasted -- which is the whole reason the "show what I pasted" tick exists.
 */
.k-fetching__label {
  display: block;
  margin: 12px 0 4px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-muted);
}

.k-fetching__value {
  display: block;
  width: 100%;
  /* A pasted key is longer than any box, so what is typed reads as one line
   * rather than being cut off in the middle of a word. */
  font-family: var(--font-mono);
  font-size: 13px;
}

.k-fetching__show {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 14px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-muted);
}