/*
  ed2_boardbar.css
  - Board-bar / tabs / pills UI unification
  - Single source of truth for: .boardbar*, .boardbar__tab, .pill
  - Page CSS must NOT redefine the skin of these components.
*/

@layer components {

/* Board bars (tabs/toolbars) — unified component */
.boardbar{
  display:flex;
  flex-direction: column;
  align-items:stretch;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--bar-border);
  border-radius: var(--radius-xl);
  background: var(--bar-bg);
  box-shadow: var(--shadow-xs);
}

/* Backward compatible single-row mode */
.boardbar.boardbar--tabs{
  flex-direction: row;
  align-items:center;
  flex-wrap: wrap;
}

.boardbar__row{
  display:flex;
  align-items:center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.boardbar__left{
  display:flex;
  align-items:center;
  gap: var(--space-2);
  min-width: 0;
}

.boardbar__right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap: var(--space-2);
}

/* compact search/sort tools inside boardbar */
.boardbar__tools{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.boardbar__tools .input,
.boardbar__tools .select{
  width: auto;
}

.boardbar__views{display:flex; gap:8px; align-items:center;}

.boardbar__title{
  font-weight: 900;
  letter-spacing: -0.01em;
}

/* Sort pills (instead of select) */
.sort-pills{
  display:flex;
  align-items:center;
  gap: 4px;
  flex-wrap: wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .32rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration:none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.pill:hover{
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--line) 70%, var(--text));
}

.pill.is-active{
  background: var(--accent-weak);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

/* keyword highlight */
mark.hl{
  background: color-mix(in oklab, var(--accent) 20%, var(--surface));
  color: inherit;
  border-radius: 6px;
  padding: 0 .18em;
}

/* Tabs */
.boardbar__tabs{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}

/* When using legacy .boardbar__tabs container in single-row mode */
.boardbar.boardbar--tabs .boardbar__tabs{
  margin-left:auto;
}

.boardbar__tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  text-decoration:none;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.boardbar__tab:hover{
  background: var(--surface-2);
  border-color: color-mix(in oklab, var(--line) 70%, var(--text));
  text-decoration:none;
}

.boardbar__tab.is-active,
.boardbar__tab[aria-selected="true"]{
  background: var(--accent-weak);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
  color: var(--accent);
  box-shadow: var(--shadow-xs);
}

}