/* forms
   Fields, labels, buttons.

   Loaded by `stylesheet_link_tag :app`, which includes every .css under
   app/assets sorted by filename — so the NUMBER PREFIX IS THE CASCADE ORDER.
   Renaming a file moves it in the cascade. */

/* ---------------- forms ---------------- */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--ink-2); }
input[type=text], input[type=email], input[type=number], input[type=password],
input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font: 400 14px var(--ui);
  background: var(--surface);
  color: var(--ink);
}
input.mono, textarea.mono { font: 400 13px var(--mono); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(23,25,26,.09);
}
textarea { resize: vertical; }
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.row { display: grid; gap: 12px; }
.row-2 { grid-template-columns: 1fr 1fr; }
.row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .row-2, .row-3 { grid-template-columns: 1fr; } }

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.checkbox-inline input { width: auto; }

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 16px 0 0;
}
.actions-sticky {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--paper) 68%, rgba(244,244,241,0));
  padding: 18px 0 14px;
  margin-top: -6px;
  z-index: 5;
}

button, .button {
  padding: 8px 15px;
  border-radius: var(--r);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font: 500 14px var(--ui);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .button:hover { background: #000; }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.button-secondary:hover { background: var(--paper); }
.button-danger { background: var(--danger); border-color: var(--danger); }
.button-danger:hover { background: #7d2820; }
.button-small { padding: 5px 10px; font-size: 13px; }
.button-ghost {
  background: none; border: 1px dashed var(--line-2); color: var(--ink-2);
  width: 100%; text-align: center; padding: 9px;
}
.button-ghost:hover { background: var(--sunken); border-color: var(--ink-3); color: var(--ink); }
.link-button { background: none; border: none; color: var(--ink-3); padding: 4px 6px; font-weight: 400; }
.link-button:hover { background: none; color: var(--danger); }

.icon-button {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-3);
  width: 32px; height: 34px;
  border-radius: var(--r);
  font-size: 17px; line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.icon-button:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }

/* Belt and braces for the payment credential groups, which the provider
   select shows and hides. `.field` carries no display rule today, but a
   `display:` added later would beat the `hidden` attribute silently — the
   mistake this codebase has made before. */
.provider-fields[hidden] { display: none; }

/* Password strength meter.
   The bar is one element with a width driven by --strength rather than four
   segments: a segmented bar reads as a score out of four, and the number is
   an estimate that does not deserve that much precision. */
.password-strength .strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.password-strength .strength-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.password-strength .strength-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--strength, 0) * 25%);
  border-radius: 2px;
  background: var(--danger);
  transition: width .18s ease, background-color .18s ease;
}

.password-strength .strength-bar[data-score="2"]::after { background: var(--signal); }
.password-strength .strength-bar[data-score="3"]::after,
.password-strength .strength-bar[data-score="4"]::after { background: var(--ok); }

.password-strength .strength-label {
  font-size: 12px;
  color: var(--ink-3);
  min-width: 108px;
  text-align: right;
  white-space: nowrap;
}

/* Two-step setup: the square beside what to do with it. Stacks on a phone,
   which is the device most people are holding while they do this. */
.two-factor-setup {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.two-factor-setup .qr svg { width: 100%; height: auto; display: block; }

.two-factor-setup .setup-key {
  font-size: 14px;
  letter-spacing: .06em;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 8px 10px;
  display: inline-block;
}

@media (max-width: 700px) {
  .two-factor-setup { grid-template-columns: minmax(0, 1fr); }
  .two-factor-setup .qr { max-width: 200px; }
}

/* Recovery codes. Monospace and roomy because they are read aloud and copied
   onto paper, which is the whole point of them. */
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 16px;
  font-size: 14.5px;
}

.recovery-codes span {
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 7px 10px;
  text-align: center;
}