/* Styling for the one popup (see modal.js).
 *
 * Same rules as every other piece: every colour, typeface and corner comes
 * from a token (D25), and anything that can be pressed gives at least 44px to
 * press (D67). Text sizes and spacing are written here directly because there
 * is no size scale in tokens.css yet -- recorded in DECISIONS.md rather than
 * claimed otherwise.
 *
 * Note how the state rules are written. Every one that could paint the same
 * property as a modifier class excludes it explicitly. Four separate times on
 * this project a hover or disabled rule has quietly beaten the rule that
 * paints a chosen thing, because a state counts for as much as a second class
 * whatever the order.
 */

.k-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay);
}

.k-modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  font-family: var(--font);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px var(--shadow);
}

.k-modal__title {
  margin: 0 0 10px;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand);
}

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

/* -------------------------------------------------------------- typing the name */

.k-modal__ask {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 4px;
  padding: 12px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
}

.k-modal__ask-text {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
}

.k-modal__ask-box {
  min-height: 44px;
  padding: 8px 10px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

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

/* -------------------------------------------------------------- buttons */

.k-modal__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* **THE POPUP NO LONGER PAINTS ITS OWN BUTTONS (D142).** Everything that was
 * here -- a height, a padding, a font, three sets of colours and four hover
 * rules -- is what `k-button` says, and the popup was saying it slightly
 * differently: 44px against the screen's 37px, with the plain one's hover
 * changing its background where nothing else in the product does.
 *
 * The kind classes stay, because ONE thing still needs them: the locked
 * dangerous button below. */

/* **A BUTTON THAT CANNOT BE PRESSED MUST NOT LOOK LIKE ONE.** This dimming
 * went with the block the button migration stripped, and the rule below then
 * put the danger colours back at full strength -- so the delete button sat
 * there in full red with white text while it was still switched off, identical
 * to the live one. Somebody presses it and nothing happens.
 *
 * `k-button:disabled` cannot answer this: it greys the button out, and the rule
 * below deliberately refuses that so the locked one still reads as dangerous.
 * Dimming is what is left. Found by an independent reviewer. */
.k-modal--locked .k-modal__button--danger:disabled {
  opacity: 0.55;
}

/* A dangerous button waiting for the name to be typed. Dimmed by the disabled
 * rule above; this keeps its own colour so it still reads as the dangerous
 * one rather than turning into a plain grey button. */
.k-modal--locked .k-modal__button--danger {
  color: var(--on-danger);
  background: var(--danger);
}

/* -------------------------------------------------------------- phones */

@media (max-width: 599.98px) {
  .k-modal__backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .k-modal {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius) var(--radius) 0 0;
  }

  /* Full width and stacked, so a thumb is not aiming at a small target near
   * the edge of the screen.
   *
   * Reversed on purpose: the FIRST button declared ends up at the very bottom,
   * nearest the thumb. Popups are declared with the safe way out first -- see
   * the note on openModal -- so what sits in the easiest place to hit by
   * accident is Cancel, never Delete. */
  .k-modal__buttons {
    flex-direction: column-reverse;
  }

  .k-modal__button {
    width: 100%;
  }
}