/* jane.css — the page layer over toolforge-ds.css 1.1.0. Grid columns, cards and the modal are
   site-specific; everything else (color, type, spacing, buttons, inputs) comes from the DS. */

/* .tf-section sets display:flex, which beats the UA [hidden]{display:none} rule — restore it. */
.tf-section[hidden] { display: none; }

.jane-topbar__mark { width: 40px; height: 31px; }
.jane-crumb { color: var(--tf-muted-rev); margin-left: 14px; }
.jane-lede { color: var(--tf-ink-60); }

/* tables are div-grids: .tf-table__head / .tf-table__row hold padding+borders,
   this class defines the column template so a head row and its body rows line up. */
.jane-row { display: grid; align-items: center; gap: 12px; }
.jane-row--prod { grid-template-columns: 2.6fr 1.2fr 0.9fr 0.7fr 0.7fr; }
.jane-row--brand { grid-template-columns: 2.4fr 0.8fr 0.9fr 0.9fr; }
.jane-table .tf-table__row > *, .jane-table .tf-table__head > * { min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.jane-table { cursor: default; }
.jane-table .tf-table__row { cursor: pointer; }
.jane-table .tf-table__row:hover { background: var(--tf-canvas); }

.jane-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.jane-field { display: flex; flex-direction: column; gap: 8px; min-width: 140px; }
.jane-field__label { font-family: var(--tf-font-label); font-weight: 700; font-size: var(--tf-size-label-s);
  letter-spacing: var(--tf-track-x-12); color: var(--tf-muted); text-transform: uppercase; }
.jane-searchrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.jane-searchrow .tf-search { flex: 1 1 320px; }
.jane-searchrow .tf-search input { border: none; outline: none; font-family: var(--tf-font);
  font-size: var(--tf-size-body); padding: 11px 14px; flex: 1; min-width: 0; background: transparent; }

.jane-note { color: var(--tf-muted); font-size: var(--tf-size-small); }
.jane-empty-note { padding: 24px; color: var(--tf-muted); }

.jane-grid-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.jane-bcard { border: var(--tf-border-hairline) solid var(--tf-line); background: var(--tf-paper);
  padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.jane-bcard:hover { border-color: var(--tf-ink); }
.jane-bcard__logo { width: 100%; height: 84px; object-fit: contain; background: var(--tf-canvas); }
.jane-bcard__swatch { width: 100%; height: 84px; }
.jane-bcard__name { font-weight: 600; font-size: var(--tf-size-body); }
.jane-bcard__meta { font-family: var(--tf-font-mono); font-size: var(--tf-size-helper);
  color: var(--tf-muted); }

.jane-pcard-media { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--tf-canvas); }

.jane-badge { display: inline-block; font-family: var(--tf-font-label); font-weight: 700;
  font-size: var(--tf-size-label-s); letter-spacing: var(--tf-track-x-08); text-transform: uppercase;
  padding: 3px 8px; border: var(--tf-border-hairline) solid var(--tf-line); color: var(--tf-ink-60); }

/* horizontal bars for analytics — value display, not an action, so fill stays Ink per RULE 4
   (one red action per view; red is reserved for the search button). */
.jane-barlist { display: grid; grid-template-columns: minmax(110px, 1.4fr) 1fr max-content;
  gap: 8px 12px; align-items: center; }
.jane-barlist .jane-bar-lbl { font-size: var(--tf-size-small); overflow-wrap: anywhere; }
.jane-barlist .jane-bar-track { background: var(--tf-canvas); height: 14px; }
.jane-barlist .jane-bar-fill { background: var(--tf-ink); height: 100%; }
.jane-barlist .jane-bar-n { font-family: var(--tf-font-mono); font-size: var(--tf-size-helper);
  color: var(--tf-muted); text-align: right; font-variant-numeric: tabular-nums; }

.jane-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.jane-dialog { width: min(760px, 100%); max-width: 760px; max-height: 88vh; overflow-y: auto; }
.jane-dialog__media { width: 100%; max-height: 320px; object-fit: contain; background: var(--tf-canvas); }
.jane-dialog__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.jane-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: var(--tf-size-body); }
.jane-kv dt { color: var(--tf-muted); }
.jane-kv dd { margin: 0; }

.jane-spinner-wrap { display: flex; justify-content: center; padding: 40px; }

@media (max-width: 860px) {
  .jane-row--prod { grid-template-columns: 2fr 1fr 0.8fr; }
  .jane-row--prod > :nth-child(4), .jane-row--prod > :nth-child(5) { display: none; }
  .jane-row--brand { grid-template-columns: 2fr 1fr; }
  .jane-row--brand > :nth-child(3), .jane-row--brand > :nth-child(4) { display: none; }
  .jane-metrics { grid-template-columns: repeat(2, 1fr); }
}