/* components.css — command blocks, buttons, cards, repo list, software cards. */

/* ── command block: the app's signature. Every command is a prompt line
      with an orange $ and a copy affordance. ─────────────────────────── */

.cmd {
  background: var(--panel);
  border: 1px solid var(--line);
  margin: 0 0 16px;
  max-width: 76ch;
}

.cmd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--raised);
  font-size: 11.5px;
  color: var(--dim);
}

.cmd-head .prompt-glyph {
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
}

.cmd-head .cmd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cmd-copy {
  margin-left: auto;
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  padding: 2px 10px;
  cursor: pointer;
  border-radius: 2px;
  flex: none;
}
.cmd-copy:hover { color: var(--orange); border-color: var(--orange); }
.cmd-copy.copied {
  color: #101214;
  background: var(--orange);
  border-color: var(--orange);
  font-weight: 700;
}

.cmd pre {
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}

/* ── buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-block;
  appearance: none;
  font: inherit;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--dim); text-decoration: none; }

.btn-primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #101214;
  font-weight: 700;
}
.btn-primary:hover { background: #ff7d1f; border-color: #ff7d1f; }

.btn-danger {
  color: var(--err);
  border-color: var(--err);
  background: transparent;
}
.btn-danger:hover { background: rgba(224, 108, 117, 0.1); }

.btn[disabled] { opacity: 0.5; cursor: default; }

/* ── key panel ───────────────────────────────────────────── */

.key-card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px 20px;
  margin-bottom: 26px;
}

.key-card .key-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 700;
}

.key-meta {
  color: var(--dim);
  font-size: 12px;
  margin: 10px 0 14px;
  word-break: break-all;
}

.key-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.warn-note {
  color: var(--warn);
  font-size: 12.5px;
  margin-top: 12px;
}

/* ── repo create + list ──────────────────────────────────── */

.create-row {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 8px 8px 8px 14px;
  margin-bottom: 6px;
}

.create-row .prompt { color: var(--orange); font-weight: 700; }

.create-row input {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 6px 0;
}
.create-row input:focus { outline: none; }
.create-row input::placeholder { color: var(--dim); }

.msg { font-size: 12.5px; }
.msg.msg-ok  { color: var(--ok); }
.msg.msg-err { color: var(--err); }

.repo-group-label {
  margin: 26px 0 8px;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.repo {
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--panel);
}
.repo:last-of-type { border-bottom: 1px solid var(--line); }

.repo summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}
.repo summary::-webkit-details-marker { display: none; }
.repo summary::before { content: "▸"; color: var(--dim); font-size: 11px; }
.repo[open] summary::before { content: "▾"; color: var(--orange); }
.repo summary:hover { background: var(--raised); }

.repo .repo-name { font-weight: 700; }
.repo .repo-owner { color: var(--dim); }
.repo .repo-name .mine-mark { color: var(--orange); }

.repo-ssh {
  margin-left: auto;
  color: var(--dim);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) { .repo-ssh { display: none; } }

.badge {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 2px;
  border: 1px solid var(--line);
  color: var(--dim);
  flex: none;
}
.badge-orange { border-color: var(--orange); color: var(--orange); }
.badge-green  { border-color: var(--ok); color: var(--ok); }

.repo-detail { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.repo-detail .cmd { margin-top: 12px; }

.empty {
  color: var(--dim);
  border: 1px dashed var(--line);
  padding: 18px 20px;
  max-width: 76ch;
}

/* ── software cards ──────────────────────────────────────── */

.pkg {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.pkg-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pkg-name { font-size: 15px; font-weight: 700; }
.pkg-ver  { color: var(--orange); font-size: 12.5px; }
.pkg-size { color: var(--dim); font-size: 12px; margin-left: auto; }

.pkg-desc { color: var(--text); margin-bottom: 12px; }

.pkg-launch {
  color: var(--dim);
  font-size: 12.5px;
  margin: 10px 0 0;
}
.pkg-launch b { color: var(--text); }