/* Overview (dashboard) and the wallet figures on Billing: stat tiles, the two-column
   overview and the "connect your AI assistant" card. */
.dashboard-metrics { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.dashboard-metrics:has(> :nth-child(5)) { --cols: 5; }
.dashboard-metrics > div { position: relative; min-width: 0; padding: 16px 18px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.dashboard-metrics > div:first-child::after { content: ""; position: absolute; left: -1px; top: -1px; width: 28px; height: 3px; background: var(--cyan); }
.dashboard-metrics dt { font: 700 10.5px/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dashboard-metrics dd { margin: 10px 0 0; font-size: 32px; line-height: 1; font-weight: 850; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard-metrics a { color: inherit; text-decoration: none; }
.dashboard-metrics a:hover { color: var(--teal); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dashboard-grid .card, .dashboard-grid > .dashboard-side { margin: 0; }
.dashboard-side { display: grid; gap: 20px; min-width: 0; }
.dashboard-section { margin: 0 0 20px; }
.dashboard-grid + .dashboard-section { margin-top: 20px; }
.dashboard-section .list-row { padding: 12px 0; }
.dashboard-section .list-row time { flex-shrink: 0; }
.dashboard-section .list-row p { margin: 2px 0 0; }
.dashboard-section > .muted:last-child { margin: 6px 0 0; }
.dashboard-section .empty { margin-top: 6px; }

/* Connect your AI assistant: the connector address, larger than in the sidebar. */
.connector-card { background: var(--ink); color: #fff; border-color: var(--ink); }
.connector-card h2 { color: #fff; font-size: 17px; }
.connector-card p { color: #d6d9d7; font-size: 14px; margin-bottom: 14px; }
.connector-card .connector-copy { border-color: #fff; flex-wrap: wrap; }
.connector-card .connector-url { flex: 1 1 230px; font-size: 13px; padding: 10px 12px; overflow-wrap: normal; }
.connector-card .connector-button { flex: 1 0 auto; min-height: 40px; background: var(--yellow); color: var(--ink); border-left-color: #fff; padding: 0 16px; }
.connector-card .connector-button:hover { background: #ffe34d; }
.connector-card .connector-button:focus-visible { outline-color: var(--ink); }
.connector-card :focus-visible { box-shadow: 0 0 0 4px var(--yellow); }

@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 899px) {
  .dashboard-metrics:has(> :nth-child(5)) { --cols: 3; }
}
@media (max-width: 600px) {
  .dashboard-metrics { --cols: 1; gap: 8px; }
  .dashboard-metrics:has(> :nth-child(5)) { --cols: 2; }
  .dashboard-metrics > :nth-child(odd):last-child { grid-column: 1 / -1; }
  .dashboard-metrics > div { padding: 12px 14px 14px; }
  .dashboard-metrics dd { font-size: 26px; margin-top: 8px; }
  .dashboard-side { grid-template-columns: minmax(0, 1fr); }
  .dashboard-section .list-row { flex-wrap: wrap; }
}