@import 'default.css';

.profile-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 42rem;
}

.profile-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--textColor);
  margin-bottom: var(--space-4);
}

/* ── Read-only identity fields ────────────────────────────────────────── */

.profile-details {
  display: grid;
  grid-template-columns: minmax(5rem, auto) 1fr;
  gap: var(--space-2) var(--space-5);
  margin-bottom: var(--space-3);
}

.profile-details dt {
  font-size: var(--text-sm);
  color: var(--textMuted);
}

.profile-details dd {
  font-size: var(--text-sm);
  color: var(--textColor);
}

/* ── Act-as note ──────────────────────────────────────────────────────── */

.profile-actas-note {
  background: var(--bgColor);
  color: var(--textColor);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

/* ── Theme picker ─────────────────────────────────────────────────────── */

.theme-picker {
  border: none;
  padding: 0;
  margin: 0;
}

.theme-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.theme-option {
  cursor: pointer;
  flex: 1 1 8rem;
}

/* Visually replaced by the card below, but kept in the accessibility tree and
   focusable so arrow-key navigation and screen-reader semantics still work.
   Same technique as .sr-only in base/spacing.css — do NOT collapse to
   width/height 0, which drops the input out of the a11y tree entirely. */
.theme-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.theme-option__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  background: var(--bgColor);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.theme-option:hover .theme-option__body {
  background: var(--bgSurfaceHover);
}

.theme-option input:checked + .theme-option__body {
  border-color: var(--accentColor);
  box-shadow: inset 0 0 0 1px var(--accentColor);
}

.theme-option input:focus-visible + .theme-option__body {
  box-shadow: var(--focusRing);
}

.theme-option__label {
  font-size: var(--text-sm);
  color: var(--textColor);
}

/* Swatches must show what each option LOOKS like, so they cannot use the
   semantic vars — those always resolve to the mode currently in effect.
   This is the documented direct-token exception (see docs/frontend/css.md). */
.theme-option__swatch {
  width: 100%;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--borderColor);
}

.theme-option__swatch--light {
  background: linear-gradient(160deg, #ffffff 0%, #ffffff 55%, var(--neutral-100) 55%);
}

.theme-option__swatch--dark {
  background: linear-gradient(160deg, hsl(0, 0%, 13%) 0%, hsl(0, 0%, 13%) 55%, hsl(0, 0%, 22%) 55%);
}

/* Split down the middle — a slanted split reads as a corner wedge at this
   aspect ratio rather than as "one of each". */
.theme-option__swatch--system {
  background: linear-gradient(90deg, #ffffff 0 50%, hsl(0, 0%, 13%) 50%);
}

/* ── Save status ──────────────────────────────────────────────────────── */

.profile-status--warning {
  color: var(--warningText);
}

/* ── Security: API keys ───────────────────────────────────────────────── */

.apikeys__intro {
  margin-bottom: var(--space-4);
}

.apikeys {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.apikeys:empty,
.apikeys:has(.apikeys__empty) {
  border: none;
}

.apikeys__empty {
  margin: 0;
}

.apikey {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'main   revoke'
    'meta   revoke'
    'state  revoke';
  gap: var(--space-1) var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--borderColor);
}

.apikey:last-child {
  border-bottom: none;
}

/* A key that no longer works is still listed for 30 days, so a surprised user
   can see WHICH key stopped working. Dimmed, not hidden. */
.apikey--revoked,
.apikey--expired {
  opacity: 0.55;
}

.apikey__main   { grid-area: main; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.apikey__meta   { grid-area: meta; font-size: var(--text-sm); color: var(--textMuted); }
.apikey__state  { grid-area: state; font-size: var(--text-sm); color: var(--textMuted); }
.apikey__revoke { grid-area: revoke; }

.apikey__name {
  font-weight: 600;
  color: var(--textColor);
}

.apikey__id {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--text-sm);
  color: var(--textMuted);
}

.apikeys__actions {
  margin-top: var(--space-4);
}

/* ── One-time token reveal ────────────────────────────────────────────── */

.apikey-reveal {
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.apikey-reveal__title {
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.apikey-reveal__body {
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.apikey-reveal__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.apikey-reveal__token {
  flex: 1 1 24rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--text-sm);
}

.apikey-reveal__usage {
  margin-top: var(--space-3);
}

/* ── Create dialog ────────────────────────────────────────────────────── */

.apikeys__dialog {
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-lg);
  background: var(--bgSurface);
  color: var(--textColor);
  padding: var(--space-5);
  max-width: 30rem;
  width: calc(100vw - 2rem);
}

.apikeys__dialog::backdrop {
  background: rgb(0 0 0 / 0.4);
}

.apikeys__dialog-title {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.apikeys__dialog .form-label {
  display: block;
  margin-top: var(--space-3);
}

.apikeys__fieldset {
  border: none;
  padding: 0;
  margin: var(--space-4) 0 0;
}

.apikeys__check {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
  cursor: pointer;
}

.apikeys__check--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.apikeys__dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}