/**
 * The mint form.
 *
 * Shaped like the consent screen's scope list on purpose — same grouping, same disclosure, same
 * "name then description" line — because they are the same decision reached from two directions:
 * there somebody is answering an application's request, here they are writing their own.
 */
/**
 * Carried here as well as in `accountControls.css`, deliberately.
 *
 * This element is mounted on two views and a card, and the failure it prevents is the worst one this
 * screen has: `.token-mint-result` sets `display: flex`, so without a rule that outranks it the
 * panel that shows a freshly cut secret is on the page, empty, before anything has been cut. A sheet
 * this element does not control should not be the only thing standing between a reader and that.
 */
.token-mint [hidden] {
  display: none !important;
}

.token-mint {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 18px;
}

.token-mint-scopes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.token-mint-scopes-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.token-mint-templates {
  display: flex;
  gap: 8px;
}

.token-mint-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* `<details>` because it collapses with no JavaScript, as the consent screen's does. */
.token-mint-group {
  border: 1px solid var(--light);
  border-radius: 6px;
  overflow: hidden;
}

/**
 * A group holding a selection says so from the outside.
 *
 * These collapse, and a shut group is exactly where a forgotten tick hides — so the border brightens
 * and the count beside the name changes to "2 of 4 selected". Somebody about to press Cut can read
 * what they are about to grant without opening nine accordions to check.
 */
.token-mint-group[data-on] {
  border-color: var(--text);
}

.token-mint-group[data-on] .token-mint-group-name {
  font-weight: 600;
}

.token-mint-group[data-on] .account-note {
  opacity: 0.9;
}

.token-mint-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.token-mint-group-name {
  text-transform: uppercase;
  color: var(--text);
}

.token-mint-list {
  margin: 0;
  padding: 0 14px 12px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.token-mint-scope {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: 12px;
}

.token-mint-scope label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

/**
 * The box itself, made visible.
 *
 * A native checkbox on this ground renders as a dark square on a dark square: the first version of
 * this screen was reported as "hard to see what selected", and it was — the control was there and
 * invisible. `accent-color` takes the browser's own control and paints it in the design's ink, which
 * keeps the keyboard behaviour and the platform's focus ring rather than rebuilding both badly.
 */
.token-mint-scope input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: none;
  accent-color: var(--text);
  cursor: pointer;
}

/**
 * And the row, so the state is legible without hunting for a 15px square. Selection is what this
 * screen is *for*, so it is marked the way a selected thing should be — the whole row changes, not
 * one glyph inside it.
 */
.token-mint-scope[data-on] .token-mint-scope-name {
  opacity: 1;
  font-weight: 600;
}

.token-mint-scope[data-on] .token-mint-scope-description {
  opacity: 0.8;
}

.token-mint-scope[data-on] {
  border-left: 2px solid var(--text);
  margin-left: -10px;
  padding-left: 8px;
}

.token-mint-scope-name {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text);
}

.token-mint-scope-description {
  grid-column: 1 / -1;
  padding-left: 24px;
  opacity: 0.6;
  font-size: 11.5px;
}

.token-mint-privileged {
  align-self: start;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  border: 1px solid var(--light);
  border-radius: 999px;
  padding: 2px 8px;
}

/**
 * The result. Loud on purpose: this is the only time the string exists, and a panel that read like
 * a receipt would be closed by somebody who assumed they could come back for it.
 */
.token-mint-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.token-mint-warning {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.token-mint-secret {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--light);
  border-radius: 6px;
  background: var(--shade, transparent);
}

.token-mint-secret code {
  flex: 1 1 260px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  word-break: break-all;
  user-select: all;
}