/* Tags: one colour each (tokens --t-*), used by the divider tabs, the chips and the filtered band. */

.tag--engineering { --tag: var(--t-eng); }
.tag--ai { --tag: var(--t-ai); }
.tag--product { --tag: var(--t-product); }
.tag--maker { --tag: var(--t-maker); }
.tag--food-for-thought { --tag: var(--t-food); }

.tag {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 5px;
  background: var(--tag);
  color: var(--tab-ink);
  font: 700 .72rem/1.5 var(--f-ui);
  white-space: nowrap;
  text-decoration: none;
}

/* Divider tabs tucked under the right edge of the sheet (z-index -1: behind the paper). */
.tag-tabs {
  position: absolute;
  top: 80px;
  left: 100%;
  z-index: -1;
}
.tag-tabs ul { display: grid; justify-items: start; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tag-tabs__tab {
  display: block;
  padding: 5px 19px 5px 17px;
  border-radius: 0 9px 9px 0;
  background: var(--tag);
  color: var(--tab-ink);
  box-shadow: 3px 3px 6px var(--shadow);
  font: 700 .75rem var(--f-ui);
  white-space: nowrap;
  text-decoration: none;
  transition: translate .15s;
}
.tag-tabs__tab:hover { translate: 4px 0; }
.tag-tabs__tab[aria-current="page"] { padding-right: 38px; translate: 6px 0; }

/* Leave room on the right of the sheet for the tabs. */
@media (min-width: 981px) {
  .sheet:has(.tag-tabs) {
    margin-left: max(16px, calc((100% - 1190px) / 2));
    margin-right: max(166px, calc((100% - 1190px) / 2 + 150px));
  }
}

/* Narrow screens: the tabs stand on the top edge of the sheet and scroll sideways. */
@media (max-width: 980px) {
  .tag-tabs { top: auto; right: 0; bottom: 100%; left: 16px; }
  .tag-tabs ul { display: flex; gap: 5px; padding-top: 6px; overflow-x: auto; scrollbar-width: none; }
  .tag-tabs__tab { margin-bottom: -4px; padding: 5px 12px 9px; border-radius: 8px 8px 0 0; box-shadow: none; }
  .tag-tabs__tab:hover, .tag-tabs__tab[aria-current="page"] { padding-right: 12px; translate: 0 -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .tag-tabs__tab { transition: none; }
}