/* What this dashboard draws that the kit does not: a few list and table details, the token packs
   and the key secret. Tokens only (castomo-dashkit rule 4: no colour literal outside 00-tokens.css),
   logical properties only, so dir="rtl" mirrors by itself. */

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere; }
.num { text-align: end; font-variant-numeric: tabular-nums; }
td.num[data-tone="bad"] { color: var(--bad, inherit); }
td.num[data-tone="ok"] { color: var(--ok, inherit); }

.table-wrap { overflow-x: auto; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-end: .75rem; }

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.list > li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.list-main { display: grid; gap: .1rem; min-inline-size: 0; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }

/* A token pack: the amount is the headline, the price the action's neighbour. */
.product { display: grid; gap: .35rem; align-content: start; }
.product[data-best="true"] { outline: 2px solid var(--brand-1, currentColor); outline-offset: -2px; }
.product-price { font-size: var(--t3, 1.25rem); font-weight: 700; margin-block: .25rem 0; }

/* The one-time key secret reads as code and selects whole on a click. */
.dialog .input.mono { inline-size: 100%; }

/* A screen is a run of blocks (stat grid, cards, tables) appended straight into #view, which the kit
   leaves as plain block flow, so they touched. One rule gives every screen the kit's own gap between
   its blocks; the page head keeps its larger bottom margin because margins collapse to the bigger one. */
#view > * + * { margin-block-start: var(--gap); }

/* ── Connections ──
   A 12-track grid whose tiles span 4 (three across), 6 (two across) or 12 (one), and whose last row
   stretches to fill itself, so a search that leaves 5 or 7 tiles never ends in a hole (guidelines §0.13). */
.svc-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s2) var(--s3); margin-block-end: var(--gap); }
.svc-search { flex: 1 1 18rem; max-inline-size: 28rem; }
.svc-search .input { inline-size: 100%; }
.svc-toolbar .hint { margin: 0; flex-basis: 100%; }

.svc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.svc-grid > * { grid-column: span 4; min-inline-size: 0; }
.svc-grid[data-empty="true"] > * { grid-column: 1 / -1; }
@media (min-width: 1101px) {
  .svc-grid > .svc:nth-child(3n + 1):last-child { grid-column: span 12; }
  .svc-grid > .svc:nth-child(3n + 1):nth-last-child(2),
  .svc-grid > .svc:nth-child(3n + 2):last-child { grid-column: span 6; }
}
@media (max-width: 1100px) and (min-width: 561px) {
  .svc-grid > * { grid-column: span 6; }
  .svc-grid > .svc:nth-child(odd):last-child { grid-column: span 12; }
}
@media (max-width: 560px) {
  .svc-grid > * { grid-column: span 12; }
}

.svc { display: flex; flex-direction: column; gap: var(--s2); }
.svc-top { display: flex; align-items: center; gap: var(--s2); }
.svc-name { display: grid; gap: .25rem; justify-items: start; min-inline-size: 0; }
.svc-name h3 { margin: 0; overflow-wrap: anywhere; }
.svc-logo { flex: none; display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: var(--r2, 12px); background: var(--tile, var(--surface-2, transparent)); border: 1px solid var(--rule); }
.svc-logo svg { inline-size: 1.75rem; block-size: 1.75rem; }
.svc-desc { margin: 0; flex: 1 1 auto; }
.svc-accounts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; border-block-start: 1px solid var(--rule); padding-block-start: var(--s2); }
.svc-accounts > li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.svc-actions { margin-block-start: auto; }
.svc[data-connected="true"] { border-color: var(--ok, var(--rule)); }