/* app.css — what the kit does not already give us: the pending card, the
   roster rows, form fields and empty states. Everything else (tokens, shell,
   topbar, tab bar, sheet, toast, buttons) comes from agentics-pwa-kit. */

.h1 { font-size: 26px; font-weight: 700; margin: 22px 0 6px; letter-spacing: -.02em; }
.lede { color: var(--muted); font-size: 14px; margin: 0 0 18px; line-height: 1.5; }
.empty { color: var(--faint); font-family: var(--mono); font-size: 12px; padding: 8px 0; }

/* ---- cards + lists ---- */
.list { display: flex; flex-direction: column; gap: 12px; }

.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
}
.card-label { font-family: var(--mono); font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.card-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }

/* ---- the pending card: the whole point of the app ---- */
.pending {
  background: var(--panel);
  border: 1px solid var(--orange-35);
  border-radius: 18px;
  padding: 18px;
}
.pending-sp { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.pending-head { color: var(--ember); font-size: 14px; margin-top: 4px; }
.pending-body { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 8px; white-space: pre-wrap; }
.pending-who {
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.pending-actions { display: flex; gap: 10px; margin-top: 16px; }
.pending-actions .btn-primary { flex: 1; }

/* ---- roster ---- */
.group-head {
  font-family: var(--mono); font-size: 11px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .08em;
  margin: 22px 0 10px; display: flex; justify-content: space-between; align-items: baseline;
}
.user {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px;
}
.user-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.user-id {
  font-family: var(--mono); font-size: 15px; color: var(--fg);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
}
.user-id:active { color: var(--orange); }
.user-name { color: var(--muted); font-size: 13px; margin-top: 3px; }
.user-note { color: var(--faint); font-size: 12px; margin-top: 6px; }
.user-meta { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.user-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }

/* Auto-godkend: a quiet control until it is on, then unmistakably on. */
.arm {
  font-family: var(--mono); font-size: 11px; letter-spacing: .03em;
  border-radius: 999px; padding: 5px 11px; flex: none; cursor: pointer;
  background: none; border: 1px solid var(--hairline); color: var(--faint);
}
.arm:active { color: var(--fg); }
.arm.is-on { color: var(--ember); border-color: var(--orange-55); background: var(--orange-12); }
.arm:disabled { opacity: .5; }

.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  border-radius: 999px; padding: 3px 9px; flex: none;
  border: 1px solid var(--hairline); color: var(--faint);
}
.pill.ok { color: var(--success); border-color: rgba(52, 211, 153, .35); }
.pill.warn { color: var(--warning); border-color: rgba(251, 191, 36, .35); }
.pill.brand { color: var(--ember); border-color: var(--orange-35); background: var(--orange-12); }

/* ---- empty states ---- */
.empty-state { text-align: center; padding: 40px 12px; }
.empty-check { font-size: 34px; color: var(--success); }
.empty-title { font-size: 17px; font-weight: 700; margin: 12px 0 6px; }
.empty-sub { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 auto; max-width: 32ch; }

/* ---- forms ---- */
.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-family: var(--mono); font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px; }
.input {
  width: 100%; background: var(--panel-2); border: 1px solid var(--hairline);
  border-radius: 11px; color: var(--fg); font-family: var(--sans); font-size: 16px;
  padding: 12px 14px;
}
.input:focus { outline: none; border-color: var(--orange-55); }
.form-error { color: var(--danger); font-size: 13px; margin-top: 12px; line-height: 1.5; }

/* ---- the MCP key ---- */
.token {
  font-family: var(--mono); font-size: 12px; color: var(--ember);
  background: var(--panel-2); border: 1px solid var(--hairline); border-radius: 10px;
  padding: 12px; margin-bottom: 12px; word-break: break-all; user-select: all;
}