/* ══════════════ Your own API keys (keys.js) ══════════════
   The card in Settings where a signed-in student saves a Soniox and a Gemini
   key, and the few controls the "your key did not work" sheet adds to the
   top-up sheet it borrows (.topup-* in app.css). Everything is under the
   .keys- prefix. A key is a long secret typed once: its field is a plain text
   input drawn as dots — not a password field, which makes the browser offer
   to save an API key as the site's password. */

[data-keys-slot][hidden] { display: none; }

.keys-provider { margin-top: .875rem; padding-top: .875rem; border-top: 1px solid #f3f4f6; }
.keys-provider a { color: #4f46e5; font-weight: 500; text-decoration: none; }
.keys-provider a:hover { text-decoration: underline; }

/* The field with Save beside it; under each other when there is no room. */
.keys-field { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.keys-input-wrap { position: relative; flex: 1 1 14rem; min-width: 0; }
.keys-input { padding-right: 2.5rem; font-family: 'Cascadia Code', 'Fira Code', ui-monospace, monospace; }
.keys-input::placeholder { font-family: Inter, system-ui, sans-serif; }
/* Dots instead of the characters, until the eye is pressed. The placeholder
   is not masked: an empty field still says what goes in it. */
.keys-input.is-masked:not(:placeholder-shown) { -webkit-text-security: disc; text-security: disc; }
.keys-reveal {
  position: absolute; top: 50%; right: .25rem; transform: translateY(-50%);
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 0; border-radius: 6px; background: transparent; color: #6b7280; cursor: pointer;
}
.keys-reveal:hover { background: #f3f4f6; color: #374151; }
.keys-reveal:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.keys-card .btn:disabled { opacity: .6; cursor: default; }

/* "● Working · ends in …9f3c · checked 14 Oct 10:32" */
.keys-status { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem .375rem; margin-top: .5rem; font-size: .8125rem; color: #6b7280; }
.keys-status strong { font-weight: 600; color: #111827; }
.keys-dot { width: .5rem; height: .5rem; border-radius: 999px; background: #9ca3af; flex-shrink: 0; margin-right: .125rem; }
.keys-dot.is-ok { background: #10b981; }
.keys-dot.is-warn { background: #f59e0b; }
.keys-dot.is-bad { background: #ef4444; }
.keys-sep { color: #d1d5db; }
.keys-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.keys-error { margin-top: .375rem; font-size: .75rem; font-weight: 500; color: #b91c1c; }

.keys-notes { margin-top: .875rem; padding: .75rem 0 0 1rem; border-top: 1px solid #f3f4f6; list-style: disc; font-size: .75rem; color: #9ca3af; }
.keys-notes li + li { margin-top: .25rem; }

/* The sheet's two ways out, one under the other. */
.keys-sheet .topup-status + .topup-status { margin-top: .25rem; }
.keys-sheet-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }

@media (max-width: 767px) {
  /* The field takes the row; Save and Cancel share the one under it, each
     wide enough to tap. */
  .keys-input-wrap { flex-basis: 100%; }
  .keys-field .btn { flex: 1 1 0; justify-content: center; min-height: 2.5rem; }
  .keys-actions .btn { min-height: 2.25rem; }
  .keys-sheet-actions .btn { min-height: 2.75rem; }
}

.dark .keys-provider,
.dark .keys-notes { border-top-color: var(--d-border-l); }
.dark .keys-provider a { color: var(--d-brand); }
.dark .keys-reveal { color: var(--d-text3); }
.dark .keys-reveal:hover { background: var(--d-surface3); color: var(--d-text); }
.dark .keys-status { color: var(--d-text3); }
.dark .keys-status strong { color: var(--d-text); }
.dark .keys-sep { color: var(--d-border); }
.dark .keys-error { color: #fca5a5; }
.dark .keys-notes { color: var(--d-text3); }

@media (forced-colors: active) {
  .keys-dot { forced-color-adjust: none; }
}