/* Brand > References: what Volare measured from each saved link (js/references.js), and the "Your editing style"
   targets. Tokens only (styles.css / css/looks.css); both looks. Type: --type-body-strong / --type-meta. */
.ref-measure { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); font: var(--type-meta); color: var(--muted); }
.ref-measure-head { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: baseline; margin: 0; color: var(--ink-strong);
  font-weight: var(--fw-strong); }
.ref-measure-head .ref-measure-when { color: var(--muted); font-weight: var(--fw-body); }
.ref-measure-lines { margin: var(--s1) 0 0; padding-left: var(--s4); }
.ref-measure-lines li { margin: 2px 0; }
.ref-measure-note { margin: 0; }
/* measuring: a narrow working row (the dots, the words) that fits a card */
.ref-measure .wstate--row { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s2); padding: var(--s1) 0 0; }
.ref-measure .wstate--row .wstate-field { width: 3rem; height: 1.5rem; }

.yes-card .yes-list { list-style: none; margin: 0; padding: 0; display: grid; }
.yes-card .yes-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); padding: var(--rhythm-rows) 0;
  border-bottom: 1px solid var(--line); font: var(--type-body); }
.yes-card .yes-row:last-child { border-bottom: 0; }
.yes-card .yes-name { color: var(--ink-strong); font-weight: var(--fw-strong); }
.yes-card .yes-range { font-variant-numeric: var(--nums-tabular); }
.yes-card .yes-source { width: 100%; color: var(--muted); font: var(--type-meta); }

/* up to three chips with what was measured: pace, captions, length */
.ref-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s2); }
.ref-chip { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 var(--s2); border-radius: 999px; background: var(--pill); color: var(--ink);
  font: var(--type-meta); white-space: nowrap; }