/*
 * css/pages/scan.css: /scan, Ponchoscan (group scan, SPEC 5.2).
 * Colours come from css/tokens.css only. Buttons, chips, states, stat cards, the segmented control, tables and
 * the feed are the shared components of css/site.css, used as they are; this file lays them out and adds what
 * the explorer needs of its own: the page head with the live status, the service mark, the sparkline, the bar
 * chart and its tooltip, the tail's address cells and the small labelled grid of a tail row on a phone.
 * Designed at 360px first. The services table replaces its feed rows at 820px, the tail table at 1180px.
 * The example layer (SPEC 1.3, 5.5) is at the end: the shared .is-example frame, banner and chips of css/site.css,
 * and here only its spacing, the place of the row chip and the plain (unlinked) sample address cells.
 */

/* ------------------------------------------------------------------------------------------------ head */
.sc-head { display: flex; flex-direction: column; gap: var(--s6); padding-block: calc(var(--section) * .7) var(--s4); }
.sc-head__copy { min-width: 0; }
.sc-head .kicker { margin-bottom: var(--s3); }
.sc-head .lede { margin-top: var(--s5); max-width: 62ch; }
.sc-live { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.sc-live:empty { display: none; }
.sc-live__line { min-height: 24px; font: 400 12.5px/1.8 var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-live__line > * + * { margin-left: 12px; }
.sc-live__line > [hidden] + * { margin-left: 0; }
.sc-live__block { color: var(--dim); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.sc-live__block:hover { color: var(--accent); text-decoration-color: currentColor; }
.sc-live__retry { font-size: 13.5px; }
@media (min-width: 820px) { .sc-live__retry { min-height: 32px; } }
@media (min-width: 820px) {
  .sc-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--s9); }
  .sc-live { align-items: flex-end; text-align: right; flex: none; max-width: 340px; padding-bottom: 6px; }
}

.sc-boot, .sc-launch { padding-bottom: var(--section); }
.sc-launch .state { max-width: 720px; }

/* ------------------------------------------------------------------------------------------------ sections */
.sc-sec { padding-top: var(--s9); }
.sc-sec--first { padding-top: var(--s6); }
.sc-sec--last { padding-bottom: var(--section); }
.sc-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s5); }
.sc-bar__title { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 260px; }
@media (min-width: 820px) { .sc-bar .btn--quiet { min-height: 36px; } }
.sc-range:empty { display: none; }

/* stat values carry their unit smaller, in the muted ink */
.sc-unit { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.sc-stats .stat__sub { min-height: 18px; }
/* three across from a small tablet up: the figures are short, a stack of three wastes the screen */
@media (min-width: 560px) and (max-width: 819px) {
  .sc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sc-stats .stat { padding: 16px; }
  .sc-stats .stat__value { font-size: 20px; }
}

/* ------------------------------------------------------------------------------------------------ service mark */
/* the category tone as a small square: .tone-* (css/site.css) sets --chip from CATEGORIES[].tone */
.sc-mark { display: block; width: 12px; height: 12px; border-radius: 3px; background: var(--chip, var(--spec-slate)); flex: none; }
.sc-mark--other { background: transparent; border: 1px dashed var(--line-input); }

/* ------------------------------------------------------------------------------------------------ sparkline */
.sc-spark { display: block; overflow: visible; }
.sc-spark__base { stroke: var(--line-strong); stroke-width: 1; }
.sc-spark__line { fill: none; stroke: var(--spec-blue); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sc-spark__area { fill: var(--spec-blue); fill-opacity: .12; stroke: none; }

/* ------------------------------------------------------------------------------------------------ services: table */
.sc-svc-table th, .sc-svc-table td { padding: 10px 14px; }
.sc-svc-table thead th { padding-block: 6px; }
.sc-sort {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
.sc-sort:hover { color: var(--text); }
.sc-sort .icon { color: var(--accent); }
.sc-svc-table th[aria-sort] .sc-sort { color: var(--text); }
.sc-svc-td { width: 42%; max-width: 0; }
.sc-svc { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-svc__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sc-svc__name { color: var(--text); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sc-svc__name:hover { color: var(--accent); }
.sc-svc__sum { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-svc__spark { width: 112px; }
.sc-latest { white-space: nowrap; color: var(--muted); }
.sc-go { width: 44px; padding-inline: 4px 10px !important; text-align: right; }
.sc-go .icon-btn { color: var(--muted); }
.sc-other td { color: var(--muted); }
.sc-other .sc-svc__name { color: var(--dim); font-weight: 500; }

/* ------------------------------------------------------------------------------------------------ services: feed rows */
.sc-svc-list { display: flex; flex-direction: column; gap: 10px; }
.sc-svc-list__bar { display: flex; justify-content: flex-end; }
.sc-sortsel { width: auto; min-width: 0; max-width: 100%; height: 44px; font-size: 14.5px; }
/* each row is one link: .feed__row sits on the <a>, so the list item only carries the hairline between rows */
.sc-svc-feed > .sc-svc-item > .feed__row { border-bottom: 0; }
.sc-svc-feed > .sc-svc-item + .sc-svc-item { border-top: 1px solid var(--line-row); }
a.sc-svc-row { color: inherit; }
a.sc-svc-row:hover .sc-svc-row__name { color: var(--accent); }
a.sc-svc-row:focus-visible { outline-offset: -2px; }
.sc-svc-row__spark { display: flex; align-items: center; }
.sc-svc-row__name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-svc-row__name > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) { .sc-svc-row__name > span:last-child { overflow: visible; overflow-wrap: anywhere; } }
.sc-svc-row .feed__fee { letter-spacing: .06em; }
.sc-svc-none { margin-bottom: 10px; }

.sc-more { display: flex; justify-content: center; margin-top: var(--s4); }

/* ------------------------------------------------------------------------------------------------ chart */
.sc-chart {
  display: flex; flex-direction: column; gap: var(--s4); min-width: 0;
  padding: 20px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel); box-shadow: var(--shadow-card);
}
.sc-chart__head { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.sc-chart__head:has(p:empty:first-child + p:empty) { display: none; }
.sc-chart__total { font: 500 22px/1.25 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sc-chart__sub { font: 400 12px/1.5 var(--font-mono); color: var(--faint); }
.sc-chart__plot { position: relative; min-width: 0; min-height: 120px; }
.sc-chart__plot:focus-visible { outline-offset: 6px; border-radius: var(--r1); }
.sc-bars { display: block; max-width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.sc-bars text { font: 400 11px/1 var(--font-mono); fill: var(--muted); font-variant-numeric: tabular-nums; }
.sc-grid line { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.sc-series--volume .sc-bar { fill: var(--spec-blue); }
.sc-series--count .sc-bar { fill: var(--spec-violet); }
.sc-bar { transition: opacity var(--t1); }
.sc-series.has-hot .sc-bar:not(.is-hot) { opacity: .45; }
.sc-chart__plot:has(> .sc-chart__empty) { min-height: 0; }
.sc-chart__empty { padding: 8px 0; font-size: 15.5px; color: var(--body); max-width: 62ch; }
@media (max-width: 639px) { .sc-chart { padding: 16px; } }

.sc-tip {
  position: absolute; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; gap: 2px;
  min-width: 168px; max-width: 240px; padding: 10px 12px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r2); box-shadow: var(--shadow-pop);
  transform: translateY(calc(-100% + 8px));
}
.sc-tip[hidden] { display: none; }
.sc-tip__v { font: 600 14px/1.35 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.sc-tip__l { font: 400 12px/1.45 var(--font-body); color: var(--muted); }

.sc-viewdata { border-top: 1px solid var(--line-row); padding-top: 4px; }
.sc-viewdata summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; cursor: pointer; list-style: none;
  font: 600 13.5px/1 var(--font-body); color: var(--dim);
}
.sc-viewdata summary::-webkit-details-marker { display: none; }
.sc-viewdata summary:hover { color: var(--text); }
.sc-viewdata summary .icon { color: var(--accent); transition: transform var(--t2) var(--ease-out); }
.sc-viewdata[open] summary .icon { transform: rotate(90deg); }
.sc-viewdata .table-wrap { margin-top: 8px; max-height: 360px; overflow-y: auto; }
.sc-datatable th, .sc-datatable td { padding: 8px 14px; }
@media (max-width: 819px) { .sc-viewdata summary { min-height: 44px; } }

/* ------------------------------------------------------------------------------------------------ tail: controls */
.sc-pause { flex: none; }
.sc-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-filters > .sc-filter:first-child { flex: 1 1 200px; max-width: 320px; min-width: 0; }
.sc-filter--addr { flex: 2 1 260px; min-width: 0; }
.sc-filter--addr .input { font-size: 14px; }
.sc-filters .btn--quiet { min-height: 44px; }
@media (max-width: 559px) { .sc-filters > .sc-filter:first-child { max-width: none; flex-basis: 100%; } }
.sc-filter-note { min-height: 20px; margin-block: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sc-filter-note:empty { min-height: 0; margin-block: 0 12px; }
.sc-source { margin-top: var(--s5); max-width: 90ch; }

/* ------------------------------------------------------------------------------------------------ tail: cells */
.sc-addr { font: 500 12.5px/1.4 var(--font-mono); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-addr:hover { color: var(--accent); }
.sc-addr.is-me { color: var(--text); }
/* the link stays inline (a phone taps it as text), the "you" marker sits after it */
.sc-addr-wrap { white-space: nowrap; }
.sc-you {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-tint); border-radius: var(--r-pill); padding: 3px 6px;
}
.sc-unmatched { font: 500 12.5px/1.4 var(--font-mono); color: var(--muted); cursor: help; text-decoration: underline dotted var(--line-input); text-underline-offset: 3px; }
.sc-route { font: 500 12.5px/1.4 var(--font-mono); color: var(--dim); }

.sc-tail-table th, .sc-tail-table td { padding: 10px 10px; }
.sc-tail-table th:first-child, .sc-tail-table td:first-child { padding-left: 16px; }
.sc-tail-table th:last-child, .sc-tail-table td:last-child { padding-right: 16px; }
.sc-tail-table td { white-space: nowrap; }
.sc-tail-table .sc-t { color: var(--faint); width: 56px; }
.sc-tail__svccell, .sc-tail__routecell { max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-tail__svccell { width: 22%; }
.sc-tail__routecell { width: 18%; }
.sc-tail-table .sc-amt { color: var(--text); }
.sc-tail-table tr.sc-new { background: var(--accent-tint); }
html.motion .sc-tail-table tr.sc-new { animation: sc-in var(--t4) var(--ease-out) 1.2s both; }
@keyframes sc-in { from { background: var(--accent-tint); } to { background: transparent; } }

/* a tail row on a phone: time, service and route, then the four chain facts as a labelled grid */
.sc-tail-row { align-items: start; }
.sc-tail-row .feed__age { padding-top: 2px; }
.sc-tail-row__title .sc-tail__svc { margin-right: 8px; }
.sc-tail__svc { color: var(--text); }
.sc-tail__svc:hover { color: var(--accent); }
.sc-tail-row__title .sc-route { font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
.sc-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px 14px; margin-top: 6px; }
.sc-kv > div { min-width: 0; }
.sc-kv dt { font: 600 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.sc-kv dd { margin: 0; min-width: 0; }
.sc-kv .sc-addr-wrap { white-space: normal; }
@media (min-width: 640px) { .sc-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) {
  .sc-tail-row .feed__side { align-self: start; }
  .sc-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------------------------------------ example layer */
/*
 * While nothing is settled, [data-ex-host] holds a real line that says so (.sc-none, outside the region) and the
 * region example.js builds with exampleRegion(): the same sections as the real page, inside the dashed frame.
 */
.sc-ex-host { padding-block: var(--s6) var(--section); }
.sc-launch:has(+ .sc-ex-host:not([hidden])) { padding-bottom: var(--s6); }
.sc-launch + .sc-ex-host { padding-top: 0; }
.sc-none {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--s5); min-width: 0;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r3); background: var(--panel);
}
.sc-none > .icon { flex: none; color: var(--muted); margin-top: 1px; }
.sc-none > p { min-width: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }

.sc-ex-sec + .sc-ex-sec { padding-top: var(--s9); }
@media (max-width: 639px) { .sc-ex-sec + .sc-ex-sec { padding-top: var(--s8); } }

/* the row chip: before the service in a tail row, after the name in a services row */
.sc-tail__svccell > .example-chip, .sc-tail-row__title > .example-chip { margin-right: 8px; vertical-align: 1px; }
.sc-svc__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-svc__line > .sc-svc__name { min-width: 0; }
.sc-svc-row__name > .sc-svc-row__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc-svc-row__name > .example-chip { overflow: visible; }
@media (max-width: 639px) { .sc-svc-row__name > .sc-svc-row__text { overflow: visible; overflow-wrap: anywhere; } }

/* a sample address or the Tx cell's "example": the mono face of a real one, but plain text that opens nothing */
.sc-exaddr { font: 500 12.5px/1.4 var(--font-mono); color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-kv .sc-exaddr { white-space: normal; overflow-wrap: anywhere; }