/**
 * Tutor library filter — Lucide icon system.
 * Consumes shell tokens (--tf-*, --ink, --card, …). No ANS/R globals.
 * Define --tf-* in shell.css :root (or demo :root for the harness).
 */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.tf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tf-gap, 0.5rem) var(--tf-gap-x, 0.55rem);
  width: 100%;
}

.tf-search-wrap {
  position: relative;
  flex: 1 1 12rem;
  min-width: 10rem;
  display: flex;
  align-items: center;
}

.tf-search-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--tf-muted, var(--muted, #4a463f));
  pointer-events: none;
}

.tf-search {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--tf-touch, var(--touch, 44px));
  padding: 0.55rem 0.85rem 0.55rem 2.35rem;
  border: 2px solid var(--tf-border, var(--line, #ebe4d6));
  border-radius: var(--tf-radius, var(--radius-md, 12px));
  background: var(--tf-surface, var(--card, #fffdf8));
  font-size: var(--tf-text-input, var(--text-input, 16px));
  font-family: inherit;
  color: var(--tf-ink, var(--ink, #1a1a1a));
}

.tf-search:focus,
.tf-search:focus-visible {
  outline: none;
  border-color: var(--tf-border-strong, var(--ink, #1a1a1a));
}

/*
 * One horizontal strip: Clear + chips (never stacked above chips).
 * inline (with search): [Clear] [chips…]
 * wrap (row under search): [chips…] …… [Clear]
 */
.tf-filters-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 0;
}

.tf-filters-row[data-layout="inline"] {
  flex: 0 1 auto;
}
.tf-filters-row[data-layout="inline"] .tf-clear-all {
  order: 0;
  margin-left: 0;
  margin-right: 0;
}
.tf-filters-row[data-layout="inline"] .tf-filters {
  order: 1;
}

.tf-filters-row[data-layout="wrap"] {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  flex-flow: row nowrap;
  justify-content: flex-start;
}
.tf-filters-row[data-layout="wrap"] .tf-filters {
  order: 0;
  flex: 0 1 auto;
}
.tf-filters-row[data-layout="wrap"] .tf-clear-all {
  order: 1;
  margin-left: auto;
  flex-shrink: 0;
}

/* C: text button "Clear" — same row as chips only */
.tf-clear-all {
  box-sizing: border-box;
  flex: 0 0 auto;
  align-self: center;
  min-height: var(--tf-touch, var(--touch, 44px));
  height: var(--tf-touch, var(--touch, 44px));
  padding: 0 0.85rem;
  border: 2px solid var(--tf-border, var(--line, #ebe4d6));
  border-radius: var(--tf-radius, var(--radius-md, 12px));
  background: var(--tf-surface, var(--card, #fffdf8));
  color: var(--tf-ink, var(--ink, #1a1a1a));
  font-family: inherit;
  font-size: var(--tf-text-ui, 15px);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.tf-clear-all:hover {
  background: var(--tf-hover, rgb(0 0 0 / 0.04));
  border-color: var(--tf-border-strong, var(--ink, #1a1a1a));
}
.tf-clear-all:focus-visible {
  outline: 2px solid var(--tf-border-strong, var(--ink, #1a1a1a));
  outline-offset: 2px;
}
.tf-clear-all[hidden] {
  display: none !important;
}

.tf-filters {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  flex-shrink: 0;
}

.tf-menu {
  position: relative;
}

.tf-icon-btn {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tf-touch, var(--touch, 44px));
  height: var(--tf-touch, var(--touch, 44px));
  min-width: var(--tf-touch, var(--touch, 44px));
  min-height: var(--tf-touch, var(--touch, 44px));
  margin: 0;
  padding: 0;
  border: 2px solid var(--tf-border, var(--line, #ebe4d6));
  border-radius: var(--tf-radius, var(--radius-md, 12px));
  background: var(--tf-surface, var(--card, #fffdf8));
  color: var(--tf-ink, var(--ink, #1a1a1a));
  cursor: pointer;
  font-family: inherit;
  gap: 0;
}

/*
 * Width set per-chip in JS (canvas) = longest option label.
 * flex-shrink: 0 so neighbors never compress the sort chip.
 */
.tf-icon-btn--labeled {
  width: var(--tf-chip-fit, max-content);
  min-width: var(--tf-chip-fit, max-content);
  max-width: none;
  flex: 0 0 auto;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 0.75rem 0 0.55rem;
  gap: 0.45rem;
  justify-content: flex-start;
  overflow: visible;
  white-space: nowrap;
}

.tf-btn-label {
  font-size: var(--tf-text-ui, 15px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  flex: 0 0 auto; /* never shrink — chip width must fit full label */
  font-family: inherit;
  text-align: left;
}

.tf-icon-btn:hover {
  border-color: var(--tf-border, var(--line, #ebe4d6));
  background: var(--tf-hover, rgb(0 0 0 / 0.04));
}

.tf-icon-btn:focus-visible {
  outline: 2px solid var(--tf-border-strong, var(--ink, #1a1a1a));
  outline-offset: 2px;
}

/* Open menu: slight lift, not full ink frame */
.tf-icon-btn[aria-expanded="true"] {
  border-color: var(--tf-border, var(--line, #ebe4d6));
  background: var(--tf-hover, rgb(0 0 0 / 0.04));
}

/*
 * Active filter — same light box as idle; ink bookmark tab only
 * (top edge, right). overflow:visible on chip so tab shows.
 */
.tf-icon-btn[data-active="true"] {
  border-color: var(--tf-border, var(--line, #ebe4d6));
  background: var(--tf-surface, var(--card, #fffdf8));
}

.tf-icon-btn[data-active="true"] .tf-btn-label {
  font-weight: 600;
}

/* Ink bookmark — top edge, right-biased (original). × is separate, above. */
.tf-icon-btn[data-active="true"]::before {
  content: "";
  position: absolute;
  top: -2px;
  right: var(--tf-active-tab-inset, 8px);
  left: auto;
  transform: none;
  width: var(--tf-active-tab-w, 12px);
  height: var(--tf-active-tab-h, 3px);
  background: var(--tf-ink, var(--ink, #1a1a1a));
  border-radius: 0 0 2px 2px;
  pointer-events: none;
  z-index: 2;
}

/* B: × inside chip, right — solid scrim so label never shows through (img2) */
.tf-chip-clear {
  position: absolute;
  right: 3px;
  top: 50%;
  left: auto;
  transform: translateY(-50%);
  z-index: 3;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* Opaque fill = card cream — must fully cover text under × */
  background-color: var(--tf-surface, var(--card, #fffdf8));
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--tf-surface, var(--card, #fffdf8)) 28%,
    var(--tf-surface, var(--card, #fffdf8)) 100%
  );
  color: var(--tf-ink, var(--ink, #1a1a1a));
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  /* Soft fade into label so edge doesn’t look hard-cut */
  box-shadow:
    -10px 0 12px 4px var(--tf-surface, var(--card, #fffdf8)),
    0 0 0 1px var(--tf-surface, var(--card, #fffdf8));
  isolation: isolate;
}
.tf-chip-clear svg {
  width: 14px;
  height: 14px;
  display: block;
  position: relative;
  z-index: 1;
}
.tf-icon-btn[data-active="true"]:hover .tf-chip-clear,
.tf-icon-btn[data-active="true"]:focus-visible .tf-chip-clear {
  opacity: 1;
  pointer-events: auto;
}
.tf-chip-clear:hover {
  background-color: var(--tf-surface, var(--card, #fffdf8));
  filter: brightness(0.97);
}

.tf-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}

.tf-btn-icon svg {
  display: block;
}

/* Optical boost for smaller silhouettes (set via ICON_SCALE in filter.js) */
.tf-btn-icon svg.tf-icon-scaled,
.tf-opt-icon svg.tf-icon-scaled {
  transform-origin: center;
}

/*
 * Dropdown panel = shared components/menu (.tm-panel / .tm-option).
 * Keep .tf-panel class for selectors; chrome comes from menu.css.
 */
.tf-panel.tm-panel {
  /* filter chips open start-aligned under the button */
  min-width: max(100%, 10rem);
}

.tf-opt-icon {
  /* alias — menu.css owns .tm-option-icon */
}

.tf-opt-label {
  min-width: 0;
  flex: 1 1 auto;
}

/* Demo harness only */
.tf-summary {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--tf-muted, var(--muted, #4a463f));
  font-weight: 600;
}

.tf-icon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tf-icon-table th,
.tf-icon-table td {
  text-align: left;
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid var(--tf-border, var(--line, #ebe4d6));
}

.tf-icon-table th {
  font-size: var(--tf-text-sm, 0.72rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tf-muted, var(--muted, #4a463f));
}

.tf-icon-table code {
  font-size: 0.8rem;
}