/* B5 polish: I3 two-tone tiles with first-visit names and the H1 fold button. */

/* Inline glyphs do not get the sprite's svg:has(> use) defaults. */
#app[data-ui-filter="B5"] .b5g { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#app[data-ui-filter="B5"] .b5g .t { fill: var(--b5-tone, transparent); stroke: none; }

/* ---------- icon-only tiles ---------- */
#app[data-ui-filter="B5"][data-b5-icons] .b5-tiles button {
  gap: 0; padding: 0;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
#app[data-ui-filter="B5"][data-b5-icons] .b5-name { display: none; }
@container app (min-width: 700px) {
  #app[data-ui-filter="B5"][data-b5-icons] .b5-tiles { flex: none; }
}

/* ---------- I3 두 톤: one segmented bar, 26px two-tone glyphs, an underline bar when on ---------- */
#app[data-ui-filter="B5"][data-b5-icons] .b5-tiles {
  gap: 1px; overflow: hidden; background: var(--border); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-1);
  grid-template-columns: repeat(4, minmax(0, 1fr)) 3px repeat(2, minmax(0, 1fr));
}
#app[data-ui-filter="B5"][data-b5-icons] .b5-tiles button {
  min-height: 44px; border: 0; border-radius: 0; box-shadow: none; background: var(--surface); color: var(--fg-2); --b5-tone: var(--border);
}
#app[data-ui-filter="B5"][data-b5-icons] .b5-tiles button:focus-visible { outline-offset: -3px; }
#app[data-ui-filter="B5"][data-b5-icons] .b5-tiles .b5g { width: 26px; height: 26px; stroke-width: 1.75; }
#app[data-ui-filter="B5"][data-b5-icons] .b5-tiles button[aria-pressed="true"] {
  background: var(--accent-soft); color: var(--accent-text);
  --b5-tone: color-mix(in oklch, var(--accent) 28%, transparent);
}
#app[data-ui-filter="B5"][data-b5-icons] .b5-tiles button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: currentColor;
}
/* First visit only: each tile also shows its name until the first tap (+2.5 s) or 10 s. */
#app[data-ui-filter="B5"][data-b5-icons][data-b5-intro] .b5-tiles button { flex-direction: column; gap: 1px; }
#app[data-ui-filter="B5"][data-b5-icons][data-b5-intro] .b5-tiles .b5g { width: 20px; height: 20px; }
#app[data-ui-filter="B5"][data-b5-icons][data-b5-intro] .b5-name { display: block; font-size: 13px; line-height: 1.2; }
@container app (min-width: 700px) {
  #app[data-ui-filter="B5"][data-b5-icons] .b5-tiles { grid-template-columns: repeat(4, 50px) 3px repeat(2, 50px); }
  #app[data-ui-filter="B5"][data-b5-icons][data-b5-intro] .b5-tiles { grid-template-columns: repeat(4, 56px) 3px repeat(2, 56px); }
}

/* ---------- putting the row away ---------- */
#app[data-ui-filter="B5"][data-b5-hide] .b5-bar { transition: transform 180ms cubic-bezier(.23, 1, .32, 1), opacity 150ms ease-out; }
#app[data-ui-filter="B5"][data-b5-moving] .b5-bar { transform: translateY(calc(-100% - 12px)); opacity: 0; }
#app[data-ui-filter="B5"][data-b5-hidden="true"] .b5-bar { display: none; }

/* H1: a fold button ends the row; folded, a small pill keeps the on items as mini glyphs. */
#app[data-ui-filter="B5"] .b5-bar .b5p-foldbtn { flex: none; width: 44px; padding: 0; border-radius: 14px; box-shadow: var(--shadow-1); }
#app[data-ui-filter="B5"] .b5p-fold {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; margin: 2px var(--edge) 6px; padding: 0 14px 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-chip); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-1);
  font: 500 15px/1.3 var(--font-ko); cursor: pointer;
}
#app[data-ui-filter="B5"] .b5p-fold .b5g { width: 20px; height: 20px; }
#app[data-ui-filter="B5"] .b5p-fold .b5g.b5p-mini { width: 18px; height: 18px; }
#app[data-ui-filter="B5"] :is(.b5p-foldbtn, .b5p-fold):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@container app (min-width: 861px) {
  #app[data-ui-filter="B5"] .b5p-fold { margin-inline: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #app[data-ui-filter="B5"] .b5-bar { transition: none !important; }
}