/* Solomon console — auth + project picker. Uses the tokens defined in index.html. */

.acct { display: flex; align-items: center; gap: 8px; }
.acct img { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); }
.acct .who { font-family: var(--font-mono); font-size: 11px; color: var(--dim); letter-spacing: .04em; }
.acct button {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; cursor: pointer;
  background: transparent; color: var(--dim); border: 1px solid var(--line-2);
  border-radius: 6px; padding: 5px 9px;
}
.acct button:hover { color: var(--text); border-color: var(--faint); }

.modal-back {
  position: fixed; inset: 0; background: rgba(5, 8, 12, .72);
  backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 50;
}
.modal-back[hidden] { display: none; }

.modal {
  width: min(760px, 100%); max-height: 86vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}
.modal.narrow { width: min(520px, 100%); }

.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--panel);
}
.modal-head h3 { margin: 0; font-size: 15px; letter-spacing: .01em; color: var(--text); }
.modal-head .x {
  background: transparent; border: 0; color: var(--faint); cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 6px;
}
.modal-head .x:hover { color: var(--text); background: var(--panel-hi); }
.modal-body { padding: 16px 18px; }

.seg { margin-bottom: 22px; }
.seg:last-child { margin-bottom: 0; }
.seg > h4 {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .12em; color: var(--faint); font-weight: 500;
}

.plist { display: flex; flex-direction: column; gap: 8px; }

.prow {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2);
}
.prow:hover { border-color: var(--line-2); }
.prow .pmain { flex: 1; min-width: 0; }
.prow .pname {
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prow .pmeta {
  font-size: 11px; color: var(--faint); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prow .pacts { display: flex; gap: 6px; flex-shrink: 0; }

.tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--faint);
}
.tag.dirty { color: var(--warn); border-color: var(--warn-dim); }
.tag.run { color: var(--good); border-color: var(--good-dim); }
.tag.priv { color: var(--info); border-color: var(--line-2); }
.tag.unpushed { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.tag.pushed { color: var(--good); border-color: var(--good-dim); }

.mini {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; cursor: pointer;
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line-2);
  background: transparent; color: var(--dim);
}
.mini:hover:not([disabled]) { color: var(--text); border-color: var(--faint); }
.mini[disabled] { opacity: .45; cursor: not-allowed; }
.mini.go { color: #14100a; background: var(--brass); border-color: var(--brass); font-weight: 600; }
.mini.go:hover:not([disabled]) { background: var(--brass-hi); }
:root[data-theme="light"] .mini.go { color: #fff; }
.mini.danger { color: var(--crit); border-color: var(--crit); }
.mini.danger:hover:not([disabled]) { background: var(--crit); color: #fff; }

.empty { color: var(--faint); font-size: 12px; padding: 10px 2px; }

.field { margin-bottom: 14px; }
.field label {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 6px;
}
.field input[type="text"] {
  width: 100%; padding: 9px 11px; border-radius: 7px; background: var(--bg);
  border: 1px solid var(--line-2); color: var(--text); font-family: var(--font-mono); font-size: 13px;
}
.field input[type="text"]:focus { outline: 2px solid var(--brass); outline-offset: 1px; }
.field .check { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 12px; }

.warn-box {
  border: 1px solid var(--crit); border-radius: 9px; padding: 13px 15px;
  background: color-mix(in srgb, var(--crit) 9%, transparent); margin-bottom: 15px;
}
.warn-box p { margin: 0 0 8px; color: var(--text); font-size: 13px; line-height: 1.55; }
.warn-box p:last-child { margin-bottom: 0; }
.warn-box code {
  font-family: var(--font-mono); font-size: 12px; color: var(--brass);
  background: var(--bg); padding: 1px 5px; border-radius: 4px;
}
.warn-box .lede { font-weight: 600; color: var(--crit); }

.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--line);
}

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--panel-hi); border: 1px solid var(--line-2); color: var(--text);
  padding: 11px 17px; border-radius: 9px; font-size: 13px; box-shadow: var(--shadow);
  z-index: 90; max-width: min(640px, 92vw);
}
.toast[hidden] { display: none; }
.toast.bad { border-color: var(--crit); color: var(--crit); }
.toast.good { border-color: var(--good-dim); }

.spin {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--faint); border-top-color: transparent;
  animation: spin .7s linear infinite; vertical-align: -1px; margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }