/* Check view (site/views/check.js): the bad-click check. Colours come only from tokens.css custom properties. */

.ck-bar { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 8px 8px 18px; }
.ck-bar input { flex: 1; min-width: 0; height: 40px; border: 0; outline: none; background: none; color: var(--ink); font: 500 14px/1 var(--font-mono); }
.ck-bar input::placeholder { color: var(--grey-3); }
.ck-bar.big { max-width: 780px; padding: 10px 10px 10px 22px; }
.ck-bar.big input { height: 48px; font-size: 15px; }

/* the face of the page: one giant number */
.ck-hero { margin-top: 8px; padding: 28px 28px 22px; }
.ck-total { margin: 14px 0 4px; font: 600 clamp(56px, 11vw, 128px)/.95 var(--font-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.ck-total.hot { color: var(--red-ink); text-shadow: 0 0 40px var(--red-glow); }
.ck-sub { margin: 0 0 18px; }
.ck-verdict { margin: 18px 0 8px; max-width: 760px; font: 500 17px/1.45 var(--font-body); color: var(--ink-2); }
.ck-src { color: var(--red-ink); }
.ck-foot { margin: 18px 0 8px; text-align: center; }

/* SOL vs tokens */
.ck-split { display: flex; height: 14px; overflow: hidden; border-radius: var(--r-pill); background: var(--grey-tint); box-shadow: inset 0 0 0 1px var(--grey-1); }
.ck-seg { display: block; height: 100%; min-width: 0; }
.ck-seg.sol { background: var(--blue); }
.ck-seg.tok { background: var(--teal); }
.ck-seg.none { background: var(--grey-1); }
.ck-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; }
.ck-legend span { display: inline-flex; align-items: center; gap: 7px; }
.ck-key { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); }
.ck-key.sol { background: var(--blue); }
.ck-key.tok { background: var(--teal); }

.ck-hero + .counters { margin-top: 20px; }

/* holdings | approvals + oracles */
.ck-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ck-side > .sec:first-child { margin-top: 20px; }
.ck-list { margin: 0; padding: 4px 0; list-style: none; }
.ck-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--grey-1); }
.ck-row:first-child { border-top: 0; }
.ck-row:hover { background: var(--row-hover); }
.ck-row.other .ck-sym { color: var(--ink-3); font: 500 12px/1.3 var(--font-mono); }
.ck-sym { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 600; text-decoration: none; }
a.ck-sym:hover { color: var(--blue-ink); }
.ck-amt { color: var(--ink-3); font: 500 12.5px/1 var(--font-mono); text-align: right; }
.ck-usd { min-width: 72px; color: var(--ink); font: 600 13.5px/1 var(--font-mono); text-align: right; }
.ck-usd.dim { color: var(--grey-3); font-weight: 500; }
.ck-none { margin: 0; color: var(--ink-3); }

/* approvals: red when any delegate is set */
.ck-approvals.alert { box-shadow: inset 0 0 0 1px var(--red-line), var(--shadow-glass); background: var(--red-wash); }
.ck-approvals.alert h2, .ck-approvals.alert .sec-h .cap { color: var(--red-ink); }
.ck-del { color: var(--red-ink); font-size: 12px; text-decoration: none; }
.ck-del:hover { text-decoration: underline; }

/* oracles you copy: alias pills */
.ck-shared { grid-template-columns: minmax(64px, auto) minmax(0, 1fr); align-items: start; }
.ck-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ck-alias { gap: 7px; padding-left: 4px; color: var(--ink); }
.ck-alias .pill { height: 20px; min-width: 20px; padding: 0 6px; }
.ck-alias small { color: var(--ink-3); font-size: 10px; letter-spacing: .04em; }
.ck-alias:hover { border-color: var(--blue-line); background: var(--blue-tint); }

@media (max-width: 1000px) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 760px) {
  .ck-hero { padding: 22px 16px 18px; }
  .ck-row { padding: 10px 14px; gap: 8px; }
  .ck-shared { grid-template-columns: minmax(0, 1fr); }
  .ck-pills { justify-content: flex-start; }
  .ck-bar, .ck-bar.big { padding: 6px 6px 6px 14px; }
  .ck-verdict { font-size: 15.5px; }
}