/* Positioning Utilities */
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-10 { z-index: var(--z-base); }

/* Icon Sizing Utilities (Matches Font Sizes) */
.i-1 { width: var(--font-1); height: var(--font-1); }
.i-2 { width: var(--font-2); height: var(--font-2); }
.i-3 { width: var(--font-3); height: var(--font-3); }
.i-4 { width: var(--font-4); height: var(--font-4); }
.i-5 { width: var(--font-5); height: var(--font-5); }
.i-6 { width: var(--font-6); height: var(--font-6); }
.i-7 { width: var(--font-7); height: var(--font-7); }
.i-8 { width: var(--font-8); height: var(--font-8); }
.i-9 { width: var(--font-9); height: var(--font-9); }
.i-10 { width: var(--font-10); height: var(--font-10); }
.i-11 { width: 11rem; height: 11rem; }
.i-12 { width: 12rem; height: 12rem; }
.i-13 { width: 13rem; height: 13rem; }
.i-14 { width: 14rem; height: 14rem; }
.i-15 { width: 15rem; height: 15rem; }

.i-1 svg, .i-2 svg, .i-3 svg, .i-4 svg, .i-5 svg, .i-6 svg, .i-7 svg, .i-8 svg, .i-9 svg, .i-10 svg, .i-11 svg, .i-12 svg, .i-13 svg, .i-14 svg, .i-15 svg { width: 100%; height: 100%; display: block; }

/* --- Deep Utility System (Pattern: Self, c-Child, g-Grandchild) --- */

/* Background Utilities */
.b-1 { background-color: var(--bg-1); }
.b-2 { background-color: var(--bg-2); }
.b-3 { background-color: var(--bg-3); }
.b-4 { background-color: var(--bg-4); }
.b-5 { background-color: var(--bg-5); }
.c-b-1 > * { background-color: var(--bg-1); }
.c-b-2 > * { background-color: var(--bg-2); }
.c-b-3 > * { background-color: var(--bg-3); }
.c-b-4 > * { background-color: var(--bg-4); }
.c-b-5 > * { background-color: var(--bg-5); }
.g-b-1 > * > * { background-color: var(--bg-1); }
.g-b-2 > * > * { background-color: var(--bg-2); }
.g-b-3 > * > * { background-color: var(--bg-3); }
.g-b-4 > * > * { background-color: var(--bg-4); }
.g-b-5 > * > * { background-color: var(--bg-5); }

/* System Color Backgrounds */
.b-red-1 { background-color: var(--red-1); } .b-red-2 { background-color: var(--red-2); } .b-red-3 { background-color: var(--red-3); } .b-red-4 { background-color: var(--red-4); } .b-red-5 { background-color: var(--red-5); }
.b-yellow-1 { background-color: var(--yellow-1); } .b-yellow-2 { background-color: var(--yellow-2); } .b-yellow-3 { background-color: var(--yellow-3); } .b-yellow-4 { background-color: var(--yellow-4); } .b-yellow-5 { background-color: var(--yellow-5); }
.b-green-1 { background-color: var(--green-1); } .b-green-2 { background-color: var(--green-2); } .b-green-3 { background-color: var(--green-3); } .b-green-4 { background-color: var(--green-4); } .b-green-5 { background-color: var(--green-5); }
.b-blue-1 { background-color: var(--blue-1); } .b-blue-2 { background-color: var(--blue-2); } .b-blue-3 { background-color: var(--blue-3); } .b-blue-4 { background-color: var(--blue-4); } .b-blue-5 { background-color: var(--blue-5); }

/* Text Color Utilities */
.t-1 { color: var(--text-1); }
.t-2 { color: var(--text-2); }
.t-3 { color: var(--text-3); }
.t-4 { color: var(--text-4); }
.t-5 { color: var(--text-5); }
.t-white { color: #ffffff; }
.t-black { color: #000000; }
.c-t-1 > * { color: var(--text-1); }
.c-t-2 > * { color: var(--text-2); }
.c-t-3 > * { color: var(--text-3); }
.c-t-4 > * { color: var(--text-4); }
.c-t-5 > * { color: var(--text-5); }
.g-t-1 > * > * { color: var(--text-1); }
.g-t-2 > * > * { color: var(--text-2); }
.g-t-3 > * > * { color: var(--text-3); }
.g-t-4 > * > * { color: var(--text-4); }
.g-t-5 > * > * { color: var(--text-5); }

/* System Color Text */
.t-red-1 { color: var(--red-1); } .t-red-2 { color: var(--red-2); } .t-red-3 { color: var(--red-3); } .t-red-4 { color: var(--red-4); } .t-red-5 { color: var(--red-5); }
.t-yellow-1 { color: var(--yellow-1); } .t-yellow-2 { color: var(--yellow-2); } .t-yellow-3 { color: var(--yellow-3); } .t-yellow-4 { color: var(--yellow-4); } .t-yellow-5 { color: var(--yellow-5); }
.t-green-1 { color: var(--green-1); } .t-green-2 { color: var(--green-2); } .t-green-3 { color: var(--green-3); } .t-green-4 { color: var(--green-4); } .t-green-5 { color: var(--green-5); }
.t-blue-1 { color: var(--blue-1); } .t-blue-2 { color: var(--blue-2); } .t-blue-3 { color: var(--blue-3); } .t-blue-4 { color: var(--blue-4); } .t-blue-5 { color: var(--blue-5); }

/* --- Sub-System Semantic Colors (P1-P16) --- */
.t-p1-3 { color: var(--p1-3); } .t-p2-3 { color: var(--p2-3); } .t-p3-3 { color: var(--p3-3); } .t-p4-3 { color: var(--p4-3); } .t-p5-3 { color: var(--p5-3); } .t-p6-3 { color: var(--p6-3); } .t-p7-3 { color: var(--p7-3); } .t-p8-3 { color: var(--p8-3); }
.t-p9-3 { color: var(--p9-3); } .t-p10-3 { color: var(--p10-3); } .t-p11-3 { color: var(--p11-3); } .t-p12-3 { color: var(--p12-3); } .t-p13-3 { color: var(--p13-3); } .t-p14-3 { color: var(--p14-3); } .t-p15-3 { color: var(--p15-3); } .t-p16-3 { color: var(--p16-3); }

.b-p1-3 { background-color: var(--p1-3); } .b-p2-3 { background-color: var(--p2-3); } .b-p3-3 { background-color: var(--p3-3); } .b-p4-3 { background-color: var(--p4-3); } .b-p5-3 { background-color: var(--p5-3); } .b-p6-3 { background-color: var(--p6-3); } .b-p7-3 { background-color: var(--p7-3); } .b-p8-3 { background-color: var(--p8-3); }
.b-p9-3 { background-color: var(--p9-3); } .b-p10-3 { background-color: var(--p10-3); } .b-p11-3 { background-color: var(--p11-3); } .b-p12-3 { background-color: var(--p12-3); } .b-p13-3 { background-color: var(--p13-3); } .b-p14-3 { background-color: var(--p14-3); } .b-p15-3 { background-color: var(--p15-3); } .b-p16-3 { background-color: var(--p16-3); }

/* Alpha-Adjusted "Tint" Backgrounds (90% transparency) */
.b-p1-3-tint { background-color: color-mix(in srgb, var(--p1-3), transparent 90%); }
.b-p2-3-tint { background-color: color-mix(in srgb, var(--p2-3), transparent 90%); }
.b-p3-3-tint { background-color: color-mix(in srgb, var(--p3-3), transparent 90%); }
.b-p4-3-tint { background-color: color-mix(in srgb, var(--p4-3), transparent 90%); }
.b-p5-3-tint { background-color: color-mix(in srgb, var(--p5-3), transparent 90%); }
.b-p6-3-tint { background-color: color-mix(in srgb, var(--p6-3), transparent 90%); }
.b-p7-3-tint { background-color: color-mix(in srgb, var(--p7-3), transparent 90%); }
.b-p8-3-tint { background-color: color-mix(in srgb, var(--p8-3), transparent 90%); }
.b-p9-3-tint { background-color: color-mix(in srgb, var(--p9-3), transparent 90%); }
.b-p10-3-tint { background-color: color-mix(in srgb, var(--p10-3), transparent 90%); }
.b-p11-3-tint { background-color: color-mix(in srgb, var(--p11-3), transparent 90%); }
.b-p12-3-tint { background-color: color-mix(in srgb, var(--p12-3), transparent 90%); }
.b-p13-3-tint { background-color: color-mix(in srgb, var(--p13-3), transparent 90%); }
.b-p14-3-tint { background-color: color-mix(in srgb, var(--p14-3), transparent 90%); }
.b-p15-3-tint { background-color: color-mix(in srgb, var(--p15-3), transparent 90%); }
.b-p16-3-tint { background-color: color-mix(in srgb, var(--p16-3), transparent 90%); }

.b-red-3-tint { background-color: color-mix(in srgb, var(--red-3), transparent 90%); }
.b-yellow-3-tint { background-color: color-mix(in srgb, var(--yellow-3), transparent 90%); }
.b-green-3-tint { background-color: color-mix(in srgb, var(--green-3), transparent 90%); }
.b-blue-3-tint { background-color: color-mix(in srgb, var(--blue-3), transparent 90%); }

/* Font Size Utilities */
.f-1 { font-size: var(--font-1); }
.f-2 { font-size: var(--font-2); }
.f-3 { font-size: var(--font-3); }
.f-4 { font-size: var(--font-4); }
.f-5 { font-size: var(--font-5); }

.c-f-1 > * { font-size: var(--font-1); }
.c-f-2 > * { font-size: var(--font-2); }
.c-f-3 > * { font-size: var(--font-3); }
.c-f-4 > * { font-size: var(--font-4); }
.c-f-5 > * { font-size: var(--font-5); }
.g-f-1 > * > * { font-size: var(--font-1); }
.g-f-2 > * > * { font-size: var(--font-2); }
.g-f-3 > * > * { font-size: var(--font-3); }
.g-f-4 > * > * { font-size: var(--font-4); }
.g-f-5 > * > * { font-size: var(--font-5); }

/* Padding Utilities */
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.c-p-1 > * { padding: var(--spacing-1); }
.c-p-2 > * { padding: var(--spacing-2); }
.c-p-3 > * { padding: var(--spacing-3); }
.c-p-4 > * { padding: var(--spacing-4); }
.c-p-5 > * { padding: var(--spacing-5); }
.p-t-1 { padding-top: var(--spacing-1); } .p-b-1 { padding-bottom: var(--spacing-1); } .p-l-1 { padding-left: var(--spacing-1); } .p-r-1 { padding-right: var(--spacing-1); }
.p-t-2 { padding-top: var(--spacing-2); } .p-b-2 { padding-bottom: var(--spacing-2); } .p-l-2 { padding-left: var(--spacing-2); } .p-r-2 { padding-right: var(--spacing-2); }
.p-t-3 { padding-top: var(--spacing-3); } .p-b-3 { padding-bottom: var(--spacing-3); } .p-l-3 { padding-left: var(--spacing-3); } .p-r-3 { padding-right: var(--spacing-3); }
.p-t-4 { padding-top: var(--spacing-4); } .p-b-4 { padding-bottom: var(--spacing-4); } .p-l-4 { padding-left: var(--spacing-4); } .p-r-4 { padding-right: var(--spacing-4); }
.p-t-5 { padding-top: var(--spacing-5); } .p-b-5 { padding-bottom: var(--spacing-5); } .p-l-5 { padding-left: var(--spacing-5); } .p-r-5 { padding-right: var(--spacing-5); }
.p-x-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); } .p-x-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); } .p-x-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); } .p-x-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); } .p-x-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.p-y-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); } .p-y-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); } .p-y-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); } .p-y-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); } .p-y-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }

/* Combined Margin Utilities */
.m-x-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); } .m-x-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); } .m-x-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); } .m-x-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); } .m-x-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
.m-y-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); } .m-y-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); } .m-y-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); } .m-y-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); } .m-y-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }

/* Safe Area Padding Utilities - Immersive Pattern */
.p-safe-top { padding-top: calc(var(--spacing-3) + env(safe-area-inset-top, 0px)); }
.p-safe-bottom { padding-bottom: calc(var(--spacing-3) + var(--bottom-safe-area-buffered, 0px)); }
.p-safe-l { padding-left: calc(var(--spacing-3) + env(safe-area-inset-left, 0px)); }
.p-safe-r { padding-right: calc(var(--spacing-3) + env(safe-area-inset-right, 0px)); }
.m-safe-top { margin-top: env(safe-area-inset-top, 0px); }
.m-safe-bottom { margin-bottom: var(--bottom-safe-area-buffered, 0px); }

/* Haptic Interaction Buffer: Protects interactive elements near the Home Indicator */
.hit-safe-bottom {
    padding-bottom: calc(var(--spacing-3) + var(--bottom-safe-area-buffered));
}

/* Margin Utilities */
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-5 { margin: var(--spacing-5); }
.m-t-1 { margin-top: var(--spacing-1); } .m-b-1 { margin-bottom: var(--spacing-1); } .m-l-1 { margin-left: var(--spacing-1); } .m-r-1 { margin-right: var(--spacing-1); }
.m-t-2 { margin-top: var(--spacing-2); } .m-b-2 { margin-bottom: var(--spacing-2); } .m-l-2 { margin-left: var(--spacing-2); } .m-r-2 { margin-right: var(--spacing-2); }
.m-t-3 { margin-top: var(--spacing-3); } .m-b-3 { margin-bottom: var(--spacing-3); } .m-l-3 { margin-left: var(--spacing-3); } .m-r-3 { margin-right: var(--spacing-3); }
.m-t-4 { margin-top: var(--spacing-4); } .m-b-4 { margin-bottom: var(--spacing-4); } .m-l-4 { margin-left: var(--spacing-4); } .m-r-4 { margin-right: var(--spacing-4); }
.m-t-5 { margin-top: var(--spacing-5); } .m-b-5 { margin-bottom: var(--spacing-5); } .m-l-5 { margin-left: var(--spacing-5); } .m-r-5 { margin-right: var(--spacing-5); }


/* Opacity Utilities */
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* Shadow Utilities */
.s-1 { box-shadow: var(--shadow-1); }
.s-2 { box-shadow: var(--shadow-2); }
.s-3 { box-shadow: var(--shadow-3); }
.s-4 { box-shadow: var(--shadow-4); }
.s-5 { box-shadow: var(--shadow-5); }
.c-s-1 > * { box-shadow: var(--shadow-1); }
.c-s-2 > * { box-shadow: var(--shadow-2); }
.c-s-3 > * { box-shadow: var(--shadow-3); }
.c-s-4 > * { box-shadow: var(--shadow-4); }
.c-s-5 > * { box-shadow: var(--shadow-5); }
.g-s-1 > * > * { box-shadow: var(--shadow-1); }
.g-s-2 > * > * { box-shadow: var(--shadow-2); }
.g-s-3 > * > * { box-shadow: var(--shadow-3); }
.g-s-4 > * > * { box-shadow: var(--shadow-4); }
.g-s-5 > * > * { box-shadow: var(--shadow-5); }

/* Radius Utilities */
.r-1 { border-radius: var(--radius-1); overflow: hidden; }
.r-2 { border-radius: var(--radius-2); overflow: hidden; }
.r-3 { border-radius: var(--radius-3); overflow: hidden; }
.r-4 { border-radius: var(--radius-4); overflow: hidden; }
.r-5 { border-radius: var(--radius-5); overflow: hidden; }
.r-t-1 { border-top-left-radius: var(--radius-1); border-top-right-radius: var(--radius-1); overflow: hidden; }
.r-t-2 { border-top-left-radius: var(--radius-2); border-top-right-radius: var(--radius-2); overflow: hidden; }
.r-t-3 { border-top-left-radius: var(--radius-3); border-top-right-radius: var(--radius-3); overflow: hidden; }
.r-b-1 { border-bottom-left-radius: var(--radius-1); border-bottom-right-radius: var(--radius-1); overflow: hidden; }
.r-b-2 { border-bottom-left-radius: var(--radius-2); border-bottom-right-radius: var(--radius-2); overflow: hidden; }
.r-b-3 { border-bottom-left-radius: var(--radius-3); border-bottom-right-radius: var(--radius-3); overflow: hidden; }
.r-circle { border-radius: var(--radius-circle); overflow: hidden; }
.r-pill { border-radius: var(--radius-pill); overflow: hidden; }
.r-l-0 { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.r-r-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.c-r-1 > * { border-radius: var(--radius-1); }
.c-r-2 > * { border-radius: var(--radius-2); }
.c-r-3 > * { border-radius: var(--radius-3); }
.c-r-4 > * { border-radius: var(--radius-4); }
.c-r-5 > * { border-radius: var(--radius-5); }
.c-r-circle > * { border-radius: var(--radius-circle); }
.c-r-pill > * { border-radius: var(--radius-pill); }
.g-r-1 > * > * { border-radius: var(--radius-1); }
.g-r-2 > * > * { border-radius: var(--radius-2); }
.g-r-3 > * > * { border-radius: var(--radius-3); }
.g-r-4 > * > * { border-radius: var(--radius-4); }
.g-r-5 > * > * { border-radius: var(--radius-5); }
.g-r-circle > * > * { border-radius: var(--radius-circle); }
.g-r-pill > * > * { border-radius: var(--radius-pill); }

/* --- Layout System (Grid & Containers) --- */

/* Standard Container Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; height: 100dvh; }
.w-1 { max-width: var(--w-1); margin-inline: auto; width: 100%; }
.w-2 { max-width: var(--w-2); margin-inline: auto; width: 100%; }
.w-3 { max-width: var(--w-3); margin-inline: auto; width: 100%; }
.w-4 { max-width: var(--w-4); margin-inline: auto; width: 100%; }
.w-5 { max-width: var(--w-5); margin-inline: auto; width: 100%; }

/* Fixed Width Utilities */
.w-fix-1 { width: 4rem; flex-shrink: 0; }
.w-fix-2 { width: var(--w-1); flex-shrink: 0; }
.w-fix-3 { width: var(--w-2); flex-shrink: 0; }
.w-fix-4 { width: var(--w-3); flex-shrink: 0; }
.w-fix-5 { width: var(--w-4); flex-shrink: 0; }

/* Fixed Height Utilities */
.h-fix-1 { height: 4rem; flex-shrink: 0; }
.h-fix-2 { height: var(--w-1); flex-shrink: 0; }
.h-fix-3 { height: var(--w-2); flex-shrink: 0; }
.h-fix-4 { height: var(--w-3); flex-shrink: 0; }
.h-fix-5 { height: var(--w-4); flex-shrink: 0; }
.h-fix-px { height: 1px; flex-shrink: 0; }
.h-fix-2px { height: 2px; flex-shrink: 0; }

/* Semantic Size Utilities */
.h-stat { min-height: var(--size-stat); }
.h-button { min-height: var(--size-button); }
.h-header { height: var(--size-header); }
.h-footer { min-height: var(--rail-width); }
.w-panel { width: var(--size-panel); }

.flex-1 { flex: 1; min-width: 0; min-height: 0; }
.flex-2 { flex: 2; min-width: 0; min-height: 0; }
.flex-3 { flex: 3; min-width: 0; min-height: 0; }
.flex-4 { flex: 4; min-width: 0; min-height: 0; }
.flex-5 { flex: 5; min-width: 0; min-height: 0; }
.flex-none { flex: none; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

/* Flex & Alignment Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.t-left { text-align: left; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.gap-0 { gap: 0; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }

/* Stack System (SwiftUI Inspired) */
.v-stack { display: flex; flex-direction: column; }
.h-stack { display: flex; flex-direction: row; align-items: center; }

.z-stack { display: grid; align-items: center; justify-items: center; }
.z-stack > * { grid-area: 1 / 1 / 2 / 2; }

/* --- Ratio System (Mathematical Mirror) --- */
.ratio-1 { aspect-ratio: 1 / 2; }
.ratio-2 { aspect-ratio: 2 / 3; }
.ratio-3 { aspect-ratio: 1 / 1; }
.ratio-4 { aspect-ratio: 3 / 2; }
.ratio-5 { aspect-ratio: 2 / 1; }

.fit-cover { object-fit: cover; }
.fit-contain { object-fit: contain; }

/* --- Grid System (3-Level Doubling Architecture) --- */

/* Base Grid setup - Sets baseline for all 3 density levels */
.grid-1, .grid-2, .grid-3 {
    display: grid;
    gap: var(--spacing-3);
    --grid-c: 1;

    /* DEFAULT: Fill (Fluid container fill) - Items expand to fill total width */
    grid-template-columns: repeat(var(--grid-c), minmax(0, 1fr));
    grid-auto-rows: 1fr;
}

/* Customization 1: Stay (Static architectural width) - Items maintain size and align left */
.grid-stay {
    grid-template-columns: repeat(var(--grid-c), minmax(0, var(--grid-w)));
    justify-content: start;
}

/* Customization 2: Stretch (Explicit Alias for Default) */
.grid-stretch {
    grid-template-columns: repeat(var(--grid-c), minmax(0, 1fr));
}

/* Behavior 2: Fill (Fluid) - Stretches items to fill the row using auto-fit */
.grid-fill {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-w)), 1fr));
}

/* Behavior 3: Auto (Stretches to fill container, caps at --grid-c columns) */
.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--grid-c) - var(--spacing-3)), 1fr));
}

/* Modifier: Uniform (Enforces equal sizes by preventing row stretching) */
.grid-uniform {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-w)), 1fr)) !important;
}

.grid-auto.grid-uniform {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / var(--grid-c) - var(--spacing-3)), 1fr)) !important;
}

/* Responsive Span Utilities */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.span-16 { grid-column: span 16; }

/* Palette Utilities (Legacy Aliases) */
.b-p1-alt { background-color: var(--p1-3); }

/* Border Utilities */
.border { border: 1px solid var(--bg-4); }
.border-b { border-bottom: 1px solid var(--bg-4); }
.border-l { border-left: 1px solid var(--bg-4); }
.border-r { border-right: 1px solid var(--bg-4); }
.border-t { border-top: 1px solid var(--bg-4); }

/* Temporary Developer Utilities */
.is-prefetching {
    position: relative;
    box-shadow: 0 0 15px color-mix(in srgb, var(--yellow-3), transparent calc(100% - var(--glow-opacity)));
    transition: box-shadow 0.2s ease;
    z-index: 60;
}
.is-complete {
    position: relative;
    box-shadow: 0 0 15px color-mix(in srgb, var(--green-3), transparent calc(100% - var(--glow-opacity)));
    transition: box-shadow 0.2s ease;
    z-index: 60;
}
.is-cached {
    position: relative;
    box-shadow: 0 0 15px color-mix(in srgb, var(--blue-3), transparent calc(100% - var(--glow-opacity)));
    transition: box-shadow 0.2s ease;
    z-index: 60;
}
.is-failed {
    position: relative;
    box-shadow: 0 0 15px color-mix(in srgb, var(--red-3), transparent calc(100% - var(--glow-opacity)));
    transition: box-shadow 0.2s ease;
    z-index: 60;
}