/**
 * Bristle Up Categories — tile and pill looks (1.37.0, WO-043 part L). Loaded ONLY on a page that prints a row in a
 * look other than today's (Plain, Your theme, Medium; pills Outline in Your theme): pills-tiles.css stays as it was and
 * a default row is today's page. Every rule here keys on the classes such a row's <nav> carries:
 *   bpt-look-{plain|card|showcase|round|caption|compact} bpt-theme-{…} bpt-size-{s|m|l}     tile rows
 *   bpt-plook-{outline|soft|accent} bpt-theme-{…}                                          pill rows
 * The marked tile carries aria-current ("page" = here, "true" = inside) and data-bpt-state; never a class only a script
 * adds (R-94.6). Fonts come from the theme. The picture stage stays light in every theme and pictures multiply into it,
 * so white-background product photos blend instead of showing white squares; dark themes darken the card only (L3).
 */

/* ------------------------------------------------------------------ the eight themes (L3) */
:where(.bpt-row[class*="bpt-theme-"]) { /* no specificity: each theme below overrides these */
	--bpt-card: transparent; --bpt-ink: inherit; --bpt-muted: inherit; --bpt-line: rgba(0,0,0,.14);
	--bpt-fill: var(--bpt-acc); --bpt-on-fill: #fff; --bpt-glow: rgba(0,0,0,.18);
}
.bpt-theme-yours    { --bpt-acc: currentColor; --bpt-stage: rgba(0,0,0,.04); --bpt-on-fill: #fff; }
.bpt-theme-red      { --bpt-acc: #e01e2b; --bpt-stage: #eef1f4; --bpt-card: #fff;    --bpt-ink: #1d2327; --bpt-muted: #5c6370; --bpt-line: #e2e5e9; --bpt-glow: rgba(224,30,43,.28); }
.bpt-theme-sand     { --bpt-acc: #c2410c; --bpt-stage: #f3e7d3; --bpt-card: #fffaf2; --bpt-ink: #3b2a1a; --bpt-muted: #7a6550; --bpt-line: #eadfcd; --bpt-glow: rgba(194,65,12,.26); }
.bpt-theme-olive    { --bpt-acc: #5b6b2f; --bpt-stage: #e9e6d4; --bpt-card: #fbfbf6; --bpt-ink: #2a2e1f; --bpt-muted: #666b55; --bpt-line: #e1e3d3; --bpt-glow: rgba(91,107,47,.28); }
.bpt-theme-tactical { --bpt-acc: #ff3b3b; --bpt-stage: #eceef1; --bpt-card: #17191d; --bpt-ink: #f2f3f5; --bpt-muted: #a5abb5; --bpt-line: #2b2f36; --bpt-glow: rgba(255,59,59,.35); }
.bpt-theme-thermal  { --bpt-acc: #f97316; --bpt-stage: #f1efe9; --bpt-card: #0b0b0d; --bpt-ink: #f5f5f5; --bpt-muted: #a9a9b0; --bpt-line: #26262b; --bpt-glow: rgba(249,115,22,.38);
	--bpt-fill: linear-gradient(90deg, #fde047 0%, #f97316 38%, #dc2626 70%, #7e22ce 100%); --bpt-on-fill: #0b0b0d; }
.bpt-theme-nv       { --bpt-acc: #34d17f; --bpt-stage: #e8f3ec; --bpt-card: #0d1611; --bpt-ink: #dff5e8; --bpt-muted: #8fb79f; --bpt-line: #1f3326; --bpt-glow: rgba(52,209,127,.35); --bpt-on-fill: #0d1611; }
/* Custom: the highlight and stage are the row's two inline properties; the rest is derived where color-mix exists. */
.bpt-theme-custom   { --bpt-card: #fff; --bpt-ink: #1d2327; --bpt-muted: #5c6370; --bpt-line: #e2e5e9; --bpt-glow: rgba(0,0,0,.22); }
@supports (color: color-mix(in srgb, red, blue)) {
	.bpt-theme-custom { --bpt-line: color-mix(in srgb, var(--bpt-acc) 22%, #e2e5e9); --bpt-glow: color-mix(in srgb, var(--bpt-acc) 32%, transparent); }
}

/* ------------------------------------------------------------------ sizes (L2): tiles in view, computers / phones */
.bpt-tiles.bpt-size-s .bpt-tiles-row { grid-auto-columns: calc((100% - 6 * 12px) / 7); }
.bpt-tiles.bpt-size-m .bpt-tiles-row { grid-auto-columns: calc((100% - 4 * 12px) / 5); }
.bpt-tiles.bpt-size-l .bpt-tiles-row { grid-auto-columns: calc((100% - 3 * 12px) / 4); }
@media (max-width: 849px) {
	.bpt-tiles.bpt-size-s .bpt-tiles-row { grid-auto-columns: 23%; }
	.bpt-tiles.bpt-size-m .bpt-tiles-row { grid-auto-columns: 30%; }
	.bpt-tiles.bpt-size-l .bpt-tiles-row { grid-auto-columns: 43%; }
}
/* Room for rings and shadows inside the row's own scroll box; a row at its start shows no "previous" arrow. */
.bpt-tiles[class*="bpt-look-"] .bpt-tiles-row { padding: 6px 6px 12px; scroll-padding-inline: 6px; }

/* ------------------------------------------------------------------ shared: the stage, the words, the markers
 * The row part is inside :where() (no weight), so each look's own rules below win over these. */
/* The words take the PAGE's colours (as the mockup's .t: --s-ink): Plain, Round and Caption put them on the page, not on
 * a card, so a dark theme's light ink would vanish there. Only the looks that draw a card (Card, Showcase, Compact) use
 * the theme's ink and muted colours, set with each card below. */
:where(.bpt-tiles[class*="bpt-look-"]) .bpt-tile { position: relative; }
:where(.bpt-tiles[class*="bpt-look-"]) .bpt-tile-pic { background: var(--bpt-stage); }
:where(.bpt-tiles[class*="bpt-look-"]) .bpt-tile-pic img { mix-blend-mode: multiply; }
.bpt-look-card .bpt-tile, .bpt-look-showcase .bpt-tile, .bpt-look-compact .bpt-tile { color: var(--bpt-ink, inherit); }
.bpt-look-card .bpt-tile-count, .bpt-look-showcase .bpt-tile-count, .bpt-look-compact .bpt-tile-count { color: var(--bpt-muted); opacity: 1; }
:where(.bpt-tiles[class*="bpt-look-"]) .bpt-tile[aria-current] .bpt-tile-label { text-decoration: none; color: var(--bpt-acc); }
:where(.bpt-tiles[class*="bpt-look-"]) .bpt-tile-all .bpt-tile-label { color: var(--bpt-acc); }
.bpt-tile-in { display: block; font-size: .8em; line-height: 1.25; font-weight: 600; color: var(--bpt-acc); overflow-wrap: anywhere; }
.bpt-tile-tag {
	position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
	letter-spacing: .02em; line-height: 1.5; background: var(--bpt-fill); color: var(--bpt-on-fill);
}
.bpt-theme-yours .bpt-tile-tag { background: #1d2327; color: #fff; }

/* Plain: today's square picture with the name under it. Marker: a ring, the name in the highlight, a short bar. */
.bpt-look-plain .bpt-tile-pic { border-radius: 6px; }
.bpt-look-plain .bpt-tile[aria-current] .bpt-tile-pic { box-shadow: 0 0 0 2px var(--bpt-acc); }
.bpt-look-plain .bpt-tile[aria-current] .bpt-tile-label::after { content: ""; display: block; width: 28px; height: 3px; margin: 4px auto 0; border-radius: 2px; background: var(--bpt-fill); }

/* Card: picture and name in an outlined card. Marker: a highlight border, the name in the highlight. */
.bpt-look-card .bpt-tile { padding: 8px; border: 1px solid var(--bpt-line); border-radius: 10px; background: var(--bpt-card); }
.bpt-look-card .bpt-tile-pic { border-radius: 6px; }
.bpt-look-card .bpt-tile[aria-current] { border-color: var(--bpt-acc); box-shadow: inset 0 0 0 1px var(--bpt-acc); }

/* Showcase: 16 px corners, a lit stage, a soft layered shadow; a lift on hover. Marker: ring + glow, a bar, "Viewing". */
.bpt-look-showcase .bpt-tile {
	padding: 8px 8px 12px; border-radius: 16px; background: var(--bpt-card);
	box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.08); transition: transform .18s ease, box-shadow .18s ease;
}
.bpt-look-showcase .bpt-tile-pic { border-radius: 12px; background: radial-gradient(circle at 50% 42%, #fff 0%, var(--bpt-stage) 72%); }
.bpt-look-showcase .bpt-tile-pic img { transition: transform .25s ease; }
.bpt-look-showcase .bpt-tile[aria-current] { box-shadow: 0 0 0 2px var(--bpt-acc), 0 8px 22px var(--bpt-glow); }
.bpt-look-showcase .bpt-tile[aria-current]::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--bpt-fill);
}
@media (min-width: 850px) and (hover: hover) {
	.bpt-look-showcase .bpt-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 12px 26px rgba(0,0,0,.16); }
	.bpt-look-showcase .bpt-tile[aria-current]:hover { box-shadow: 0 0 0 2px var(--bpt-acc), 0 12px 28px var(--bpt-glow); }
	.bpt-look-showcase .bpt-tile:hover .bpt-tile-pic img { transform: scale(1.06); }
	.bpt-look-showcase .bpt-tile:hover .bpt-tile-label::after { content: " \2192"; }
}

/* Round: a round picture, the name under it. Marker: a double ring (white gap, then the highlight). */
.bpt-look-round .bpt-tile-pic { border-radius: 50%; }
.bpt-look-round .bpt-tile[aria-current] .bpt-tile-pic { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bpt-acc); }

/* Caption: the name on a dark bar across the bottom of the picture. Marker: the bar filled with the highlight, a ring. */
.bpt-look-caption .bpt-tile { gap: 2px; }
.bpt-look-caption .bpt-tile-pic { position: relative; border-radius: 10px; }
.bpt-look-caption .bpt-tile-label {
	margin-top: -2.4em; position: relative; z-index: 1; padding: .55em 8px; border-radius: 0 0 10px 10px;
	background: rgba(17,19,23,.78); color: #fff; font-size: .9em;
}
.bpt-look-caption .bpt-tile[aria-current] .bpt-tile-label { background: var(--bpt-fill); color: var(--bpt-on-fill); }
.bpt-look-caption .bpt-tile[aria-current] .bpt-tile-pic { box-shadow: 0 0 0 2px var(--bpt-acc); }
.bpt-theme-yours.bpt-look-caption .bpt-tile[aria-current] .bpt-tile-label { background: #1d2327; color: #fff; }

/* Compact: a small picture beside the name in a rounded card; the row's width follows the names. */
.bpt-look-compact .bpt-tiles-row { grid-auto-columns: max-content; }
@media (max-width: 849px) { .bpt-look-compact .bpt-tiles-row { grid-auto-columns: max-content; } }
.bpt-look-compact .bpt-tile {
	flex-direction: row; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; text-align: left;
	border: 1px solid var(--bpt-line); border-radius: 12px; background: var(--bpt-card);
}
.bpt-look-compact .bpt-tile-pic { flex: 0 0 auto; width: 48px; border-radius: 8px; }
.bpt-look-compact.bpt-size-s .bpt-tile-pic { width: 36px; }
.bpt-look-compact.bpt-size-l .bpt-tile-pic { width: 62px; }
.bpt-look-compact .bpt-tile-label { white-space: nowrap; overflow-wrap: normal; }
.bpt-look-compact .bpt-tile-count, .bpt-look-compact .bpt-tile-in { display: none; }
.bpt-look-compact .bpt-tile[aria-current] { border-color: var(--bpt-acc); box-shadow: inset 4px 0 0 var(--bpt-acc); }
.bpt-look-compact .bpt-tile[aria-current] .bpt-tile-in { display: block; }

/* ------------------------------------------------------------------ pills (L6, L7) */
:where(.bpt-pills[class*="bpt-plook-"]) .bpt-pill[aria-current] { border-color: var(--bpt-acc); color: var(--bpt-acc); box-shadow: inset 0 0 0 1px var(--bpt-acc); }
.bpt-plook-soft .bpt-pill { border-color: transparent; background: rgba(0,0,0,.06); }
@supports (color: color-mix(in srgb, red, blue)) {
	.bpt-plook-soft:not(.bpt-theme-yours) .bpt-pill { background: color-mix(in srgb, var(--bpt-acc) 11%, transparent); }
}
.bpt-plook-soft .bpt-pill[aria-current="page"], .bpt-plook-accent .bpt-pill[aria-current="page"] {
	background: var(--bpt-fill); color: var(--bpt-on-fill); border-color: transparent; box-shadow: none;
}
.bpt-theme-yours.bpt-plook-soft .bpt-pill[aria-current="page"], .bpt-theme-yours.bpt-plook-accent .bpt-pill[aria-current="page"] { background: #1d2327; color: #fff; }
.bpt-pill-count { margin-left: 6px; font-size: .85em; opacity: .7; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
	.bpt-look-showcase .bpt-tile, .bpt-look-showcase .bpt-tile-pic img { transition: none; }
	.bpt-look-showcase .bpt-tile:hover { transform: none; }
	.bpt-look-showcase .bpt-tile:hover .bpt-tile-pic img { transform: none; }
}