/* =========================================================================
   Thumbnail system - the render rules (grounds are inline var() values from includes/thumbnails.php;
   this file holds the motif, layout, icon and text mechanics). Shared by the Admin gallery / builder
   (linked from includes/admin_layout.php) and the public Showcase cards (linked from
   templates/layout_top.php). The Admin-only chrome (gallery grid, swatch pickers, canvas edit mode)
   stays in admin.css. Moved out of admin.css 2026-10-06 when the system was wired into Showcase.
   ========================================================================= */

/* Ground + motif + layout markup/CSS ported 1:1 from 2_design/thumbnails/Figma Make
   (src/index.css) — ids and geometry match THUMBNAIL_SYSTEM_SPEC.md so that file stays the
   source of truth. Grounds are set inline (includes/thumbnails.php, var(--token) values only,
   no new hex), so only the motif/layout/icon mechanics live here. */
.thumbsys { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; container-type: inline-size; }
.thumbsys--dark { color: #fff; }
.thumbsys--light { color: var(--body-text); }

.thumbsys-icon-wrap { position: absolute; z-index: 4; left: 40%; top: 32.25%; width: 20%; height: 35.5%; display: grid; place-items: center; }
.thumbsys-icon-wrap svg { width: 100%; height: 100%; display: block; }
.thumbsys-chip { position: absolute; z-index: 5; top: 8%; left: 5%; font-size: clamp(7px, 1.25vw, 15px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.thumbsys-chip::before { content: ""; display: inline-block; width: 15px; height: 2px; background: currentColor; vertical-align: middle; margin-right: 9px; }
.thumbsys-title { position: absolute; z-index: 5; left: 5%; bottom: 9%; width: 48%; font: 600 clamp(12px, 2.1vw, 30px)/1.1 var(--font-display); letter-spacing: -.02em; }
.thumbsys--compact .thumbsys-chip { font-size: clamp(5px, .72vw, 9px); }
.thumbsys--compact .thumbsys-chip::before { width: 8px; height: 1.5px; margin-right: 5px; }
.thumbsys--compact .thumbsys-title { font-size: clamp(8px, 1.2vw, 15px); }

/* Layouts (THUMBNAIL_SYSTEM_SPEC.md §9) */
.thumbsys-layout-chip .thumbsys-chip { top: 10%; }
.thumbsys-layout-lower .thumbsys-icon-wrap { left: 6%; top: 44%; width: 14%; height: 25%; }
.thumbsys-layout-lower .thumbsys-title { left: 6%; bottom: 10%; width: 62%; }
.thumbsys-layout-lower .thumbsys-chip { display: none; }
.thumbsys-layout-editorial .thumbsys-icon-wrap { left: auto; right: 6%; top: 10%; width: 11%; height: 20%; }
.thumbsys-layout-editorial .thumbsys-chip { top: 16%; }
.thumbsys-layout-editorial .thumbsys-title { left: 5%; bottom: 16%; width: 52%; }
.thumbsys-icon-wrap--badge { background: var(--ice); color: var(--navy); left: 39%; top: 30.5%; width: 22%; height: 39%; border-radius: var(--radius-lg); padding: 5%; }
.thumbsys--light .thumbsys-icon-wrap--badge { background: var(--navy); color: #fff; }

/* Motifs (THUMBNAIL_SYSTEM_SPEC.md §7) — one rule block per family, opacity 5-11% per §5 */
.thumbsys-motif { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.thumbsys-dot {
  opacity: .065; background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.7px); background-size: 23px 23px;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 72%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 4%, #000 72%, transparent 100%);
}
.thumbsys-dot-2 {
  opacity: .085;
  -webkit-mask-image: radial-gradient(ellipse at 78% 34%, #000 0, transparent 64%);
          mask-image: radial-gradient(ellipse at 78% 34%, #000 0, transparent 64%);
}
.thumbsys-dot-3 {
  -webkit-mask-image: linear-gradient(135deg, transparent 18%, #000 62%, transparent 92%);
          mask-image: linear-gradient(135deg, transparent 18%, #000 62%, transparent 92%);
}
.thumbsys-dot-4 {
  -webkit-mask-image: radial-gradient(circle at center, transparent 0 23%, #000 48%, transparent 92%);
          mask-image: radial-gradient(circle at center, transparent 0 23%, #000 48%, transparent 92%);
}
.thumbsys-shape { opacity: .11; }
.thumbsys-shape::before {
  content: ""; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; right: -15%; top: -36%; border: 2px solid currentColor;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 82%);
          mask-image: linear-gradient(135deg, #000, transparent 82%);
}
.thumbsys-line {
  opacity: .05; background-image: repeating-linear-gradient(0deg, transparent 0 25px, currentColor 25px 26.5px);
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 76%, transparent);
          mask-image: linear-gradient(90deg, transparent 8%, #000 76%, transparent);
}
.thumbsys-iso {
  fill: currentColor; fill-opacity: .025; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .1;
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 72%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 34%, #000 72%, transparent 100%);
}
.thumbsys-iso-1 { opacity: .085; transform: translateY(-2%); }
.thumbsys-iso-2 { opacity: .075; }
.thumbsys-iso-3 { opacity: .085; }
.thumbsys-iso circle { fill: currentColor; fill-opacity: .55; stroke: none; }
.thumbsys-form3d {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .1;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 68%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 68%, transparent 100%);
}
.thumbsys-form3d-1 { opacity: .085; }
.thumbsys-form3d-4, .thumbsys-form3d-6 { opacity: .09; }
.thumbsys--light .thumbsys-form3d { opacity: .075; }
.thumbsys-health3d {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .105;
  -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 68%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 28%, #000 68%, transparent 100%);
}
.thumbsys-health3d circle { fill: currentColor; stroke: none; }
.thumbsys-health3d-1 { opacity: .09; }
.thumbsys-health3d-2 { opacity: .08; }
.thumbsys-health3d-3 { opacity: .085; }
.thumbsys--light .thumbsys-health3d { opacity: .07; }
.thumbsys-concept {
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .095;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 68%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 25%, #000 68%, transparent 100%);
}
.thumbsys-concept circle { fill: currentColor; stroke: none; }
.thumbsys-transform-1 { opacity: .075; }
.thumbsys-transform-4 { opacity: .085; }
.thumbsys--light .thumbsys-concept { opacity: .065; }
.thumbsys-contour {
  fill: none; stroke: currentColor; stroke-width: 2; opacity: .105;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 62%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 62%, transparent 100%);
}
.thumbsys-contour-1 {
  -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 62%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 18%, #000 62%, transparent 100%);
}
.thumbsys-contour-2 { opacity: .08; }
.thumbsys-contour-3 { opacity: .07; }
.thumbsys--light .thumbsys-contour { opacity: .07; }
.thumbsys-rectfield {
  fill: none; stroke: currentColor; stroke-width: 2; opacity: .085;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 66%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 66%, transparent 100%);
}
.thumbsys--light .thumbsys-rectfield { opacity: .06; }

/* Phase 2 — free text boxes (admin/thumbnail-set-edit.php's canvas builder). Position is always
   inline style (per-instance x/y from thumb_render_set()), so these rules only set what inline
   style doesn't: type, weight, line-height. font-size is in cqw (percent of the thumbnail's own
   width, via container-type: inline-size on .thumbsys above) so a set reads the same size relative
   to the card whether shown at master scale or shrunk to a 220px list thumbnail. */
.thumbsys-text { position: absolute; z-index: 5; font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; white-space: nowrap; }