/* /cli: approve a device code and manage CLI tokens. Builds on login.css and the base.css tokens. */
.cli-card { max-width: 440px; }
.cli-card code { font-family: var(--mono); font-size: 0.92em; color: var(--text); }

/* signature: the code, set large in mono so it's easy to compare with the terminal */
.cli-code { margin: 0 0 var(--s-3); padding: var(--s-5) var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface);
  color: var(--text); font-family: var(--mono); font-size: clamp(28px, 8vw, 38px); font-weight: 500; letter-spacing: 0.16em; text-align: center; font-variant-numeric: tabular-nums; }
.cli-code span { color: var(--muted); }
.cli-device { margin: 0 0 var(--s-5); color: var(--body); font-size: var(--fs-1); line-height: 1.5; }
.cli-device b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

.cli-scope { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-5); }
.cli-scope h2 { margin: 0 0 var(--s-2); color: var(--text); font-size: var(--fs-0); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cli-scope ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--body); font-size: var(--fs-0); line-height: 1.45; }
.cli-scope li { padding-left: 18px; position: relative; }
.cli-scope div:first-child li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 8px; height: 4px; border-left: 1.5px solid var(--ok); border-bottom: 1.5px solid var(--ok); rotate: -45deg; }
.cli-scope div:last-child li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 9px; height: 1.5px; background: var(--muted); }

.cli-actions { display: flex; gap: var(--s-2); }
.cli-actions .btn { flex: 1; }
.cli-done p { margin: 0; padding: var(--s-4); border-radius: var(--r-menu); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--text); font-size: var(--fs-1); line-height: 1.5; }

.cli-tokens { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.cli-tokens h2 { margin: 0 0 var(--s-3); color: var(--text); font-size: var(--fs-2); font-weight: 500; }
.cli-tokens ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.cli-tokens li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); border-radius: var(--r-menu); background: var(--surface); }
.cli-tokens li div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cli-tokens li b { color: var(--text); font-size: var(--fs-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-tokens li small { color: var(--muted); font-size: var(--fs-0); }
.cli-empty { margin: 0; color: var(--muted); font-size: var(--fs-1); line-height: 1.5; }

@media (max-width: 420px) { .cli-scope { grid-template-columns: 1fr; } }