/* The Trends page (trends-view.js). Kept apart from index.html's styles so the page can be
   reworked on its own; it uses the same tokens (--mute, --rule, --pack, --accent). */

/* chart head: period · measure · layers as text tabs in one row, then legend and selection */
.tr-ctrl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: -2px 0 8px; }
.tr-tabs { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.tr-tabs button { background: none; border: 0; padding: 0; cursor: pointer; color: #000; font: inherit; }
.tr-tabs button.on { font-weight: 700; }
.tr-tabs button:focus-visible, .tr-sort:focus-visible, .tr-note:focus-visible, .mix:focus-visible, .tr-fchip:focus-visible { outline: 1px solid #000; outline-offset: 2px; }
.tr-legend { height: 16px; display: flex; gap: 16px; align-items: center; color: var(--soft); white-space: nowrap; overflow: hidden; }
.tr-sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; box-sizing: border-box; }
.tr-sw.cur, .tr-sw.web { background: #000; }
.tr-sw.stack { background: linear-gradient(to top, #000 0 4px, #fff 4px 6px, #6F6F6F 6px); }
.tr-sw.prior { background: #fff; border: 1px solid #999; }
.tr-sw.draft { background: #6F6F6F; }
.tr-sw.pos { background: repeating-linear-gradient(45deg, #000 0 1px, #fff 1px 3px); border: 1px solid #000; }
.tr-sw.other { background: #D9D7D2; }
.tr-sel { height: 16px; margin: 6px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the chart */
.tr-chart { position: relative; height: 218px; }
.tr-svg { display: block; overflow: visible; outline: none; touch-action: manipulation; }
.tr-svg:focus-visible { outline: 1px solid #000; outline-offset: 4px; }
.tr-svg text { font: 400 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.tr-svg .tr-hit { cursor: pointer; }
.tr-svg .tr-cross, .tr-svg text, .tr-svg .tr-grid { pointer-events: none; }
.tr-svg.ch .tr-m.dim .tr-seg { opacity: .45; }
.tr-svg.grow .tr-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: tr-grow .2s ease-out both; }
@keyframes tr-grow { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .tr-svg.grow .tr-bar { animation: none; } }
.tr-tip { position: absolute; top: 0; z-index: 4; background: #000; color: #fff; padding: 6px 8px; line-height: 16px; white-space: nowrap; pointer-events: none; }
.tr-tip span { color: #C8C8C8; }
.tr-under { margin-top: 6px; }
.tr-tblwrap { overflow-x: auto; margin-top: 8px; }
.tr-tbl { width: 100%; border-collapse: collapse; }
.tr-tbl th, .tr-tbl td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tr-tbl th { font-weight: 400; color: var(--mute); border-bottom-color: #000; }
.tr-tbl .num { text-align: right; }

/* notes that lead to what they are about */
.tr-note { background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.tr-note:hover { text-decoration: underline; text-underline-offset: 2px; }

/* the style table: tools, sortable heads, a row that opens */
.tr-tools { flex-wrap: wrap; gap: 12px 24px; }
.tr-tools .chips { flex-wrap: wrap; }
.tr-fchip { background: #fff; border: 1px solid #000; padding: 3px 9px; cursor: pointer; }
.tr-sort { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; white-space: nowrap; }
.tr-sort.on { color: #000; font-weight: 700; }
.sty .tr.row:focus-visible { outline: 1px solid #000; outline-offset: -1px; }
.sty .tr.row.on { background: #F8F7F5; border-bottom-color: transparent; }
.tr-exp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 12px 16px 16px 52px; background: #F8F7F5; border-bottom: 1px solid var(--rule); }
.tr-exp .mix { padding: 4px 0; }
.tr-mini { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-top: 8px; }
.tr-mini span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 14px; }
.tr-mini i { display: block; width: 10px; background: #D9D7D2; }
.tr-mini i.cur { background: #000; }
.tr-mini i.zero { background: #999; }
.tr-mini em { font-style: normal; color: var(--mute); line-height: 12px; }

/* mixes: every bar is a filter */
button.mix { width: 100%; background: none; border: 0; padding: 6px 0; margin: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
button.mix.on span:first-child { font-weight: 700; }
button.mix.dim i { background: #D9D7D2; }
button.mix:hover span:first-child { text-decoration: underline; text-underline-offset: 2px; }

/* skeleton: the page's shape in grey */
.tr-skl { min-height: 16px; display: flex; align-items: center; }
.tr-skbars { display: flex; align-items: flex-end; padding: 22px 0 36px; box-sizing: border-box; }
.tr-skslot { flex: 1; display: flex; justify-content: center; }
.tr-loading .mix { grid-template-columns: 80px 1fr 44px; }

@media (max-width: 760px) {
  .tr-ctrl { gap: 6px 16px; }
  .tr-exp { grid-template-columns: 1fr; gap: 16px; padding: 12px 16px; min-width: 760px; }
  .tr-tools .search { flex-basis: 100%; }
}