/* The body of a widget: the three shapes a source can be drawn as.

   The board (index.html) and the single-widget page (widget.html) still carry
   their own copies of these rules; the gallery links this file instead. When
   the board is next opened up, point it here and delete its copy. The
   renderers in widgets.js emit exactly this markup and nothing else. */

.col-row{display:flex;align-items:center;gap:6px;padding:0 11px;
  height:var(--row-h,28px);font:400 12px/1 var(--font-text);color:var(--ink);
  text-decoration:none;border-radius:0;}
.col-row.plain{background:none;box-shadow:inset 0 -1px 0 var(--line);}
.col-row.plain:last-child{box-shadow:none;}
.col-row .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:500;}
.col-row .px{font-size:10.5px;opacity:.75;flex:none;text-align:right;}
.col-row .v{font-weight:700;font-size:12px;flex:none;text-align:right;}
.col-row .chart{flex:1 1 54px;min-width:34px;height:19px;min-height:0;margin:0;display:block;}
.col-row .n + .chart{flex:0 1 72px;}
.col-row .chart svg{width:100%;height:19px;display:block;overflow:visible;}
/* Each column is its own vertical line. The list declares the tracks once and
   every row is a subgrid of them, so a row holding 14.43 and one holding
   26,406 start their sparklines at the same x. */
.rows{display:grid;align-content:start;column-gap:6px;flex:none;}
.rows .col-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;}
@supports not (grid-template-columns:subgrid){.rows .col-row{display:flex;}}
.rows .cell{min-width:0;}

/* Rows are quiet, as on the board: the move is a tick and a coloured number. */
.rows .col-row{background:none;color:var(--ink);box-shadow:inset 0 1px 0 var(--line);}
.rows .col-row:first-child{box-shadow:none;}
.rows .col-row .v{color:var(--mv);}
.rows .col-row.plain .v{color:inherit;}
.rows .col-row .n::before{content:"";display:inline-block;width:3px;height:11px;border-radius:2px;
  background:var(--mv);margin-right:7px;vertical-align:-1px;}

.tm{position:relative;flex:1;min-height:0;overflow:hidden;}
.tm i{position:absolute;border-radius:3px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow:hidden;
  font:600 10px/1.1 var(--font-text);color:#fff;text-align:center;
  padding:1px 2px;font-style:normal;}
.tm i span{opacity:.92;font-weight:500;font-size:9px;}

.chart{flex:1;min-height:0;display:flex;flex-direction:column;gap:3px;}
.chart svg{width:100%;flex:1;min-height:0;display:block;overflow:visible;}
.chart .lg{display:flex;flex-wrap:wrap;gap:7px;font:400 10px/1 var(--font-text);
  color:var(--ink-2);flex:none;}
.chart .lg span{display:inline-flex;align-items:center;gap:4px;}
.chart .lg i{width:8px;height:2.5px;border-radius:2px;}
.num{font-variant-numeric:tabular-nums;}
.up{color:var(--up-ink);} .down{color:var(--down-ink);}