@charset "UTF-8";
/**
 *  ▗▄▄▖ ▗▄▖ ▗▖  ▗▖▗▄▄▖ ▗▄▄▄▖▗▄▄▄▖
 * ▐▌   ▐▌ ▐▌▐▛▚▞▜▌▐▌ ▐▌  █    █  
 * ▐▌▝▜▌▐▛▀▜▌▐▌  ▐▌▐▛▀▚▖  █    █  
 * ▝▚▄▞▘▐▌ ▐▌▐▌  ▐▌▐▙▄▞▘▗▄█▄▖  █  v1
 *
 * Gambit CSS Framework
 * Main import file that combines all component and utility files
 */
/**
 *  ▗▄▄▖ ▗▄▖ ▗▄▄▖ ▗▄▄▄▖
 * ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌   
 * ▐▌   ▐▌ ▐▌▐▛▀▚▖▐▛▀▀▘
 * ▝▚▄▄▖▝▚▄▞▘▐▌ ▐▌▐▙▄▄▖
 *
 * Gambit CSS Framework - Core Variables
 * Foundation and design tokens
 */
:root {
  /* Font Family */
  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --font-family-heading: "ChessSansVar", "Montserrat", sans-serif;
  /* Color Primitives */
  --color-green-25: #F6FFE3;
  --color-green-50: #F3FFCF;
  --color-green-75: #EBFFBD;
  --color-green-100: #D8FA9D;
  --color-green-200: #B2E068;
  --color-green-300: #81B64C;
  --color-green-400: #5D9948;
  --color-green-500: #45753C;
  --color-green-600: #305730;
  --color-green-700: #204227;
  --color-aqua-25: #EAFFFA;
  --color-aqua-50: #DDFFF5;
  --color-aqua-75: #CCFFEC;
  --color-aqua-100: #ADFBD8;
  --color-aqua-200: #62F6CA;
  --color-aqua-300: #26C2A3;
  --color-aqua-400: #109888;
  --color-aqua-500: #10777C;
  --color-aqua-600: #09505F;
  --color-aqua-700: #073745;
  --color-blue-25: #CEF5FF;
  --color-blue-50: #B2F0FF;
  --color-blue-75: #83DEFC;
  --color-blue-100: #4DC3EA;
  --color-blue-200: #009FD9;
  --color-blue-300: #008CD1;
  --color-blue-400: #0069AB;
  --color-blue-500: #0B548C;
  --color-blue-600: #083A66;
  --color-blue-700: #072A4F;
  --color-slate-25: #FAFFFF;
  --color-slate-50: #F2FCFF;
  --color-slate-75: #E5F6FF;
  --color-slate-100: #D0E6FB;
  --color-slate-200: #AED0F0;
  --color-slate-300: #749BBF;
  --color-slate-400: #486688;
  --color-slate-500: #324660;
  --color-slate-600: #263242;
  --color-slate-700: #1E2533;
  --color-purple-25: #F6EDFF;
  --color-purple-50: #E8DBFF;
  --color-purple-75: #D5C6FF;
  --color-purple-100: #C9ACFF;
  --color-purple-200: #9881F2;
  --color-purple-300: #7A66F4;
  --color-purple-400: #5E53D9;
  --color-purple-500: #303D8A;
  --color-purple-600: #212E5D;
  --color-purple-700: #152243;
  --color-fuchsia-25: #FFD4D4;
  --color-fuchsia-50: #FFB5B9;
  --color-fuchsia-75: #FF949D;
  --color-fuchsia-100: #FF788A;
  --color-fuchsia-200: #FA466A;
  --color-fuchsia-300: #ED2456;
  --color-fuchsia-400: #C4144F;
  --color-fuchsia-500: #940C45;
  --color-fuchsia-600: #610734;
  --color-fuchsia-700: #49052D;
  --color-red-25: #FFE0CA;
  --color-red-50: #FFCBB2;
  --color-red-75: #FFB196;
  --color-red-100: #FF8A75;
  --color-red-200: #FF6352;
  --color-red-300: #FA412D;
  --color-red-400: #E02828;
  --color-red-500: #AD1F24;
  --color-red-600: #881822;
  --color-red-700: #631018;
  --color-orange-25: #FFFBDA;
  --color-orange-50: #FFF3C2;
  --color-orange-75: #FFE5A8;
  --color-orange-100: #FFD591;
  --color-orange-200: #FFA459;
  --color-orange-300: #FA742C;
  --color-orange-400: #DC501D;
  --color-orange-500: #A93616;
  --color-orange-600: #7A1A0B;
  --color-orange-700: #610808;
  --color-gold-25: #FFFFC7;
  --color-gold-50: #FFF599;
  --color-gold-75: #FCE26A;
  --color-gold-100: #FAD541;
  --color-gold-200: #F7C631;
  --color-gold-300: #E3AA24;
  --color-gold-400: #CF8D1B;
  --color-gold-500: #B27314;
  --color-gold-600: #99580E;
  --color-gold-700: #7A4414;
  --color-brown-25: #FFFEF5;
  --color-brown-50: #FBF7EC;
  --color-brown-75: #FBF3D8;
  --color-brown-100: #FBEBC1;
  --color-brown-200: #F9D983;
  --color-brown-300: #E2B664;
  --color-brown-400: #CA9350;
  --color-brown-500: #9D6C3E;
  --color-brown-600: #6A4632;
  --color-brown-700: #543426;
  --color-skin-25: #FFFCE8;
  --color-skin-50: #FFF3D4;
  --color-skin-75: #FBE7C4;
  --color-skin-100: #FADAAE;
  --color-skin-200: #E3C29C;
  --color-skin-300: #D5A47D;
  --color-skin-400: #8D694B;
  --color-skin-500: #6B4D3A;
  --color-skin-600: #543F34;
  --color-skin-700: #4A352E;
  --color-neutrals-white: #FFFFFF;
  --color-neutrals-black: #000000;
  --color-gray-75: #F8F8F8;
  --color-gray-100: #F1F1F1;
  --color-gray-200: #E7E6E5;
  --color-gray-300: #DAD8D6;
  --color-gray-400: #BEBDB9;
  --color-gray-500: #8B8987;
  --color-gray-600: #666564;
  --color-gray-700: #4B4847;
  --color-gray-800: #312E2B;
  --color-gray-900: #262421;
  --color-transparent-white-2: rgba(255, 255, 255, .02);
  --color-transparent-white-5: rgba(255, 255, 255, .05);
  --color-transparent-white-8: rgba(255, 255, 255, .08);
  --color-transparent-white-10: rgba(255, 255, 255, .1);
  --color-transparent-white-14: rgba(255, 255, 255, .14);
  --color-transparent-white-25: rgba(255, 255, 255, .25);
  --color-transparent-white-40: rgba(255, 255, 255, .4);
  --color-transparent-white-50: rgba(255, 255, 255, .5);
  --color-transparent-white-65: rgba(255, 255, 255, .65);
  --color-transparent-white-72: rgba(255, 255, 255, .72);
  --color-transparent-white-85: rgba(255, 255, 255, .85);
  --color-transparent-white-95: rgba(255, 255, 255, .95);
  --color-transparent-black-2: rgba(0, 0, 0, .02);
  --color-transparent-black-5: rgba(0, 0, 0, .05);
  --color-transparent-black-10: rgba(0, 0, 0, .1);
  --color-transparent-black-14: rgba(0, 0, 0, .14);
  --color-transparent-black-18: rgba(0, 0, 0, .18);
  --color-transparent-black-20: rgba(0, 0, 0, .2);
  --color-transparent-black-30: rgba(0, 0, 0, .3);
  --color-transparent-black-50: rgba(0, 0, 0, .5);
  --color-transparent-black-65: rgba(0, 0, 0, .65);
  --color-transparent-black-77: rgba(0, 0, 0, .77);
  /* Color Streaks */
  --color-streak-high: var(--color-red-300);
  --color-streak-medium: var(--color-orange-300);
  --color-streak-low: var(--color-orange-200);
  --color-streak-lowest: var(--color-gold-100);
  --color-streak-pause: var(--color-slate-300);
  --color-streak-learn-low: var(--color-blue-25);
  --color-streak-learn-medium: var(--color-blue-75);
  --color-streak-learn-high: var(--color-blue-200);
  --color-streak-play-low: var(--color-green-75);
  --color-streak-play-medium: var(--color-green-200);
  --color-streak-play-high: var(--color-green-300);
  --color-streak-puzzles-low: var(--color-gold-100);
  --color-streak-puzzles-medium: var(--color-orange-200);
  --color-streak-puzzles-high: var(--color-orange-300);
  /* Color Classification */
  --color-classification-brilliant: var(--color-aqua-300);
  --color-classification-great: var(--color-slate-300);
  --color-classification-best: var(--color-green-300);
  --color-classification-excellent: var(--color-green-300);
  --color-classification-good: #95B776;
  --color-classification-book: var(--color-skin-300);
  --color-classification-inaccuracy: var(--color-gold-200);
  --color-classification-mistake: var(--color-orange-200);
  --color-classification-miss: #FF7769;
  --color-classification-blunder: var(--color-red-300);
  --color-classification-forced: var(--color-green-300);
  /* Game types */
  --color-icon-bullet: var(--color-gold-300);
  --color-icon-blitz: var(--color-gold-100);
  --color-icon-rapid: var(--color-green-300);
  --color-icon-crazyhouse: var(--color-blue-300);
  --color-icon-daily: var(--color-gold-200);
  --color-icon-insights: var(--color-gold-100);
  --color-icon-live960: var(--color-orange-300);
  --color-icon-daily960: var(--color-orange-400);
  --color-icon-puzzlerush: var(--color-orange-200);
  --color-icon-premium: var(--color-blue-200);
  --color-icon-3check: var(--color-aqua-300);
  --color-icon-bughouse: var(--color-green-400);
  --color-icon-kinghill: var(--color-brown-500);
  --color-icon-vscomputer: var(--color-slate-300);
  --color-icon-puzzles: var(--color-orange-300);
  --color-icon-tournaments: var(--color-gold-200);
  --color-icon-lessons: var(--color-blue-200);
  --color-icon-votechess: var(--color-green-300);
  --color-icon-puzzlebattle: var(--color-green-300);
  --color-icon-match: var(--color-transparent-white-50);
  --color-icon-livematch: var(--color-transparent-white-50);
  --color-icon-standard: var(--color-transparent-white-85);
  --color-icon-4player: var(--color-gold-100);
  --color-icon-variants: var(--color-green-300);
  --color-icon-customposition: var(--color-slate-300);
  --color-icon-classroom: var(--color-green-300);
  /* Chess Title Badge */
  --color-bg-chesstitle: #7C2929;
  /* Leagues */
  --color-leagues-wood: var(--color-brown-400);
  --color-leagues-stone: var(--color-gray-400);
  --color-leagues-bronze: var(--color-gold-400);
  --color-leagues-silver: var(--color-slate-100);
  --color-leagues-crystal: var(--color-blue-75);
  --color-leagues-emerald: var(--color-green-300);
  --color-leagues-amethyst: var(--color-purple-200);
  --color-leagues-elite: var(--color-red-200);
  --color-leagues-champion: var(--color-gold-200);
  --color-leagues-legend: var(--color-gray-75);
  /* Tiers */
  --color-tier-wood: var(--color-brown-400);
  --color-tier-stone: var(--color-gray-400);
  --color-tier-bronze: var(--color-gold-400);
  --color-tier-silver: var(--color-slate-200);
  --color-tier-crystal: var(--color-blue-200);
  --color-tier-emerald: var(--color-green-300);
  --color-tier-amethyst: var(--color-purple-300);
  --color-tier-elite: var(--color-red-200);
  --color-tier-champion: var(--color-gold-200);
  --color-tier-legend: var(--color-gray-75);
  /* Win / Draw / Loss */
  --color-icon-win: var(--color-green-300);
  --color-text-win: var(--color-green-300);
  --color-bg-win: var(--color-green-300);
  --color-border-win: var(--color-green-300);
  --color-icon-draw: var(--color-transparent-white-50);
  --color-text-draw: var(--color-transparent-white-72);
  --color-bg-draw: var(--color-transparent-white-72);
  --color-border-draw: var(--color-transparent-white-10);
  --color-icon-loss: var(--color-red-300);
  --color-text-loss: var(--color-red-300);
  --color-bg-loss: var(--color-red-400);
  --color-border-loss: var(--color-red-300);
  /* Success / Danger / Warning / Info */
  --color-icon-success: var(--color-green-300);
  --color-text-success: var(--color-green-300);
  --color-bg-success: var(--color-green-300);
  --color-border-success: var(--color-green-300);
  --color-icon-danger: var(--color-red-300);
  --color-text-danger: var(--color-red-300);
  --color-bg-danger: var(--color-red-400);
  --color-border-danger: var(--color-red-300);
  --color-icon-warning: var(--color-gold-300);
  --color-text-warning: var(--color-gold-300);
  --color-bg-warning: var(--color-gold-300);
  --color-border-warning: var(--color-gold-300);
  --color-icon-info: var(--color-blue-300);
  --color-icon-info-hovered: var(--color-blue-200);
  --color-text-info: var(--color-blue-200);
  --color-bg-info: var(--color-blue-300);
  --color-border-info: var(--color-blue-300);
  /* Gold / Silver / Bronze Ranks */
  --color-icon-gold: var(--color-gold-200);
  --color-bg-gold: var(--color-gold-200);
  --color-icon-silver: var(--color-gray-400);
  --color-bg-silver: var(--color-gray-400);
  --color-icon-bronze: var(--color-skin-300);
  --color-bg-bronze: var(--color-skin-300);
  /* UI Background Colors */
  --color-bg-primary: var(--color-gray-800);
  --color-bg-secondary: var(--color-transparent-black-20);
  --color-bg-tertiary: var(--color-transparent-black-14);
  --color-bg-quaternary: var(--color-transparent-black-18);
  --color-bg-opaque: var(--color-gray-900);
  --color-bg-opaque-lighter: var(--color-gray-800);
  --color-bg-subtle: var(--color-transparent-white-10);
  --color-bg-subtle-hovered: var(--color-transparent-white-14);
  --color-bg-subtler: var(--color-transparent-white-8);
  --color-bg-subtlest: var(--color-transparent-white-2);
  --color-bg-input: var(--color-transparent-white-8);
  --color-bg-streaming: var(--color-purple-400);
  --color-bg-overlay: var(--color-transparent-black-77);
  --color-bg-overlay-subtle: var(--color-transparent-black-50);
  --color-bg-overlay-board: color-mix(in srgb, var(--color-gray-800) 80%, transparent);
  --color-bg-secondary-alt: var(--color-transparent-black-20);
  --color-bg-selected: var(--color-transparent-white-40);
  --color-bg-panel: color-mix(in srgb, var(--color-gray-900) 75%, transparent);
  --color-bg-container-dark: var(--color-transparent-black-20);
  --color-bg-neutral: var(--color-transparent-white-72);
  /* UI Text Colors */
  --color-text-boldest: var(--color-neutrals-white);
  --color-text-bolder: var(--color-transparent-white-85);
  --color-text-default: var(--color-transparent-white-72);
  --color-text-default-hovered: var(--color-transparent-white-85);
  --color-text-subtle: var(--color-transparent-white-50);
  --color-text-placeholder: var(--color-transparent-white-40);
  --color-text-inverse: var(--color-gray-800);
  --color-text-link: var(--color-blue-200);
  --color-text-link-hovered: var(--color-blue-100);
  --color-text-brand: var(--color-green-300);
  /* UI Icon Colors */
  --color-icon-boldest: var(--color-transparent-white-85);
  --color-icon-bolder: var(--color-transparent-white-72);
  --color-icon-default: var(--color-transparent-white-50);
  --color-icon-default-hovered: var(--color-transparent-white-72);
  --color-icon-subtle: var(--color-transparent-white-40);
  --color-icon-inverse: var(--color-gray-800);
  /* UI Border Colors */
  --color-border-bold: var(--color-transparent-white-72);
  --color-border-subtle: var(--color-transparent-white-50);
  --color-border-subtler: var(--color-transparent-white-25);
  --color-border-subtlest: var(--color-transparent-white-5);
  --color-border-opaque: var(--color-gray-700);
  --color-border-default: var(--color-transparent-white-10);
  --color-border-default-hovered: var(--color-transparent-white-25);
  --color-border-selected: var(--color-green-300);
  --color-border-active: var(--color-transparent-white-40);
  /* White / Draw / Black Evaluation */
  --color-bg-white-eval: var(--color-transparent-white-95);
  --color-bg-draw-eval: var(--color-transparent-white-25);
  --color-bg-black-eval: var(--color-transparent-white-10);
  --color-text-white-eval: var(--color-gray-800);
  --color-text-draw-eval: var(--color-neutrals-white);
  --color-text-black-eval: var(--color-gray-75);
  /* Progress Bar */
  --color-bg-progress-track: var(--color-transparent-white-10);
  --color-bg-progress-current: var(--color-transparent-white-25);
  --color-bg-progress-completed: var(--color-green-300);
  /* Border-Radius */
  --radius-s: .2rem;
  --radius-m: .3rem;
  --radius-l: .5rem;
  --radius-xl: 1rem;
  --radius-xxl: 2rem;
  --radius-circular: 50%;
  /* Spacing */
  --space-1: .1rem;
  --space-2: .2rem;
  --space-4: .4rem;
  --space-8: .8rem;
  --space-12: 1.2rem;
  --space-16: 1.6rem;
  --space-20: 2.0rem;
  --space-24: 2.4rem;
  --space-32: 3.2rem;
  --space-40: 4rem;
  --space-80: 8rem;
  /* UI Motion */
  --motion-ease-in-1: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-in-2: cubic-bezier(.8, 0, 1, 1);
  --motion-ease-in-3: cubic-bezier(.5, 0, .8, 0);
  --motion-ease-out: cubic-bezier(0, 0, .2, 1);
  --motion-ease-out-1: cubic-bezier(0, 0, .2, 1);
  --motion-ease-out-3: cubic-bezier(.2, 1, .3, 1);
  --motion-ease-out-4: cubic-bezier(0, 0, 0, 1);
  --motion-ease-in-out-1: cubic-bezier(.5, 0, .6, 1);
  --motion-ease-in-out-2: cubic-bezier(.5, 0, .6, 1);
  --motion-ease-in-out-3: cubic-bezier(.7, .2, 0, .8);
  /* Speech Colors */
  --color-bg-speech: var(--color-neutrals-white);
  --color-text-speech: var(--color-gray-800);
  /* Chart Colors */
  --color-chart-line: var(--color-blue-75);
  --color-chart-fill: rgb(131 222 252 / 10%);
  /* Icon Size */
  --icon-12: 1.2rem;
  --icon-16: 1.6rem;
  --icon-20: 2rem;
  --icon-24: 2.4rem;
  --icon-32: 3.2rem;
  --icon-40: 4rem;
  --icon-48: 4.8rem;
  --icon-56: 5.6rem;
  --icon-64: 6.4rem;
  /* Container Size */
  --container-xxxs: 20rem;
  --container-xxs: 30rem;
  --container-xs: 36rem;
  --container-s: 40rem;
  --container-m: 46rem;
  --container-l: 50rem;
  --container-xl: 60rem;
  /* Border Size */
  --border-s: .1rem;
  --border-m: .2rem;
  --border-l: .3rem;
  --border-xl: .5rem;
  /* Avatar Size */
  --avatar-24: 2.4rem;
  --avatar-32: 3.2rem;
  --avatar-40: 4rem;
  --avatar-48: 4.8rem;
  --avatar-64: 6.4rem;
  --avatar-80: 8rem;
  --avatar-96: 9.6rem;
  --avatar-160: 16rem;
  /* Elevation */
  --elevation-foreground: 0 .1rem 0 var(--color-transparent-black-20);
  --elevation-foreground-dark-only: 0 .1rem 0 var(--color-transparent-black-20);
  --elevation-modal: 0 .5rem 1.5rem var(--color-transparent-black-65);
  --elevation-popover: 0 .2rem .5rem var(--color-transparent-black-30);
  /* Motion Duration */
  --motion-duration-fast: 100ms;
  --motion-duration-moderate: 250ms;
  --motion-duration-slow: 300ms;
  /* Opacity States */
  --opacity-disabled: 0.5;
  --opacity-pressed: 0.8;
  --opacity-hover: 0.9;
  /* Transform Scales */
  --scale-pressed: 0.98;
  --scale-hover: 1.01;
  --scale-active: 0.99;
  /* Z-Index Scale */
  --z-index-base: 1;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  /* Blur Effects */
  --blur-glass: 2.5rem;
  --blur-glass-strong: 4rem;
}

/**
 * ▗▄▄▖  ▗▄▖  ▗▄▄▖▗▄▄▄▖
 * ▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌   
 * ▐▛▀▚▖▐▛▀▜▌ ▝▀▚▖▐▛▀▀▘
 * ▐▙▄▞▘▐▌ ▐▌▗▄▄▞▘▐▙▄▄▖
 *
 * Gambit CSS Framework - Base Styles
 * Reset and base element styles
 */
.gambit-framework {
  /* Headings */
  /* Paragraphs */
  /* Phrase elements */
}
.gambit-framework html {
  box-sizing: border-box;
  font-size: 62.5%;
}
.gambit-framework body {
  background-color: #312E2B;
  background-color: var(--color-bg-primary);
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
  font-family: var(--font-family-system);
  font-size: 1.4rem;
  line-height: 1.43;
  margin: 0;
  padding: 0;
  touch-action: manipulation;
}
.gambit-framework hr {
  background-color: rgba(255, 255, 255, 0.1);
  background-color: var(--color-border-default);
  border: none;
  height: 0.1rem;
  margin-top: 2rem;
}
.gambit-framework button,
.gambit-framework input,
.gambit-framework select,
.gambit-framework textarea {
  font-family: inherit;
}
.gambit-framework details summary {
  box-sizing: border-box;
  cursor: pointer;
}
.gambit-framework details summary::-webkit-details-marker {
  display: none !important;
}
.gambit-framework :global .img-responsive {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}
.gambit-framework :global .hide {
  display: none !important;
}
.gambit-framework h1,
.gambit-framework h2,
.gambit-framework h3,
.gambit-framework h4,
.gambit-framework h5,
.gambit-framework h6 {
  font-weight: 600;
  margin: 0;
  padding: 0;
}
.gambit-framework h1 {
  font-size: 2.4rem;
}
.gambit-framework h2 {
  font-size: 1.8rem;
}
.gambit-framework h3 {
  font-size: 1.5rem;
}
.gambit-framework p {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.1rem;
  margin: 0;
  padding: 0;
}
.gambit-framework b,
.gambit-framework optgroup,
.gambit-framework strong {
  font-weight: 700;
}
.gambit-framework blockquote {
  margin: 0;
}
.gambit-framework :global {
  /* Image caption */
}
.gambit-framework :global figure {
  margin: 0;
}
.gambit-framework :global .figcaption:not(:empty) {
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.4;
  margin: 1rem 0 2rem;
  text-align: center;
  word-wrap: break-word;
}
.gambit-framework :global .figcaption:not(:empty):before {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-icon-default);
  content: "H";
  display: inline-block;
  font-family: var(--font-family-icons);
  font-size: 1.6rem;
  font-style: normal;
  line-height: 1;
  margin-right: 0.8rem;
  position: relative;
  top: 0;
}

/**
 * ▗▄▄▄▖▗▖  ▗▖▗▄▄▖  ▗▄▖  ▗▄▄▖▗▄▄▖  ▗▄▖ ▗▄▄▖ ▗▖ ▗▖▗▖  ▗▖
 *   █   ▝▚▞▘ ▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌ ▝▚▞▘ 
 *   █    ▐▌  ▐▛▀▘ ▐▌ ▐▌▐▌▝▜▌▐▛▀▚▖▐▛▀▜▌▐▛▀▘ ▐▛▀▜▌  ▐▌  
 *   █    ▐▌  ▐▌   ▝▚▄▞▘▝▚▄▞▘▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌  ▐▌  
 *
 * Gambit CSS Framework - Typography Utilities
 * Font family, headings, text sizes, and paragraph styles
 */
/* ========================================================================
   TYPOGRAPHY UTILITIES
   ======================================================================== */
/* Font Family */
.font-system {
  font-family: var(--font-family-system);
}

.font-heading {
  font-family: var(--font-family-heading);
}

/* Headings */
.heading {
  font-family: var(--font-family-heading);
  font-feature-settings: "ss05" 1;
  font-weight: 700;
  text-wrap: balance;
}

.heading.size-xxxl {
  font-size: 6.4rem;
  line-height: 1.1428571429;
}

.heading.size-xxl {
  font-size: 5.6rem;
  line-height: 1.1428571429;
}

.heading.size-xl {
  font-size: 4.2rem;
  line-height: 1.1428571429;
}

.heading.size-l {
  font-size: 3.6rem;
  line-height: 1.1111111111;
}

.heading.size-m {
  font-size: 3.1rem;
  line-height: 1.1612903226;
}

.heading.size-s {
  font-size: 2.8rem;
  line-height: 1.1428571429;
}

.heading.size-xs {
  font-size: 2.2rem;
  line-height: 1.2727272727;
}

.heading.size-xxs {
  font-size: 1.7rem;
  line-height: 1.1764705882;
}

.heading.size-xxxs {
  font-size: 1.4rem;
  line-height: 1.1428571429;
}

/* Weight modifiers */
.weight-normal {
  font-weight: 400;
}

.weight-medium {
  font-weight: 500;
}

.weight-bold {
  font-weight: 600;
}

.weight-heavy {
  font-weight: 700;
}

.weight-black {
  font-weight: 800;
}

/* Specific weight for headings */
.heading.weight-bold {
  font-weight: 800;
}

.heading-label {
  font-family: var(--font-family-heading);
  font-size: 1.2rem;
  letter-spacing: 0.05rem;
  line-height: 1.1428571429;
  text-transform: uppercase;
  font-weight: 700;
}

/* Text Sizes */
.text.size-xl {
  font-size: 1.8rem;
  line-height: 1.3333333333;
}

.text.size-l {
  font-size: 1.6rem;
  line-height: 1.25;
}

.text.size-m {
  font-size: 1.4rem;
  line-height: 1.1428571429;
}

.text.size-s {
  font-size: 1.2rem;
  line-height: 1.3333333333;
}

.text.size-xs {
  font-size: 1rem;
  line-height: 1;
}

.text-label {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  line-height: 1.3333333333;
  text-transform: uppercase;
}

.text-speech {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3333333333;
}

/* Paragraph Styles */
.paragraph.size-l {
  font-size: 1.6rem;
  line-height: 1.5;
}

.paragraph.size-m {
  font-size: 1.4rem;
  line-height: 1.4285714286;
}

/* ========================================================================
   TEXT ALIGNMENT UTILITIES
   ======================================================================== */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

/* ========================================================================
   TEXT WRAPPING UTILITIES
   ======================================================================== */
.text-wrap {
  text-wrap: wrap;
}

.text-nowrap {
  text-wrap: nowrap;
  white-space: nowrap;
}

.text-wrap-balance {
  text-wrap: balance;
}

.text-wrap-pretty {
  text-wrap: pretty;
}

/* ========================================================================
   LINE CLAMPING UTILITIES
   ======================================================================== */
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.line-clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.line-clamp-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
}

.line-clamp-none {
  overflow: visible;
  display: block;
  -webkit-box-orient: horizontal;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* ========================================================================
   TEXT OVERFLOW UTILITIES
   ======================================================================== */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-overflow-clip {
  text-overflow: clip;
}

.text-overflow-ellipsis {
  text-overflow: ellipsis;
}

/* ========================================================================
   TEXT TRANSFORM UTILITIES
   ======================================================================== */
.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-normal-case {
  text-transform: none;
}

/* ========================================================================
   TEXT DECORATION UTILITIES
   ======================================================================== */
.text-underline {
  text-decoration-line: underline;
}

.text-overline {
  text-decoration-line: overline;
}

.text-line-through {
  text-decoration-line: line-through;
}

.text-no-underline {
  text-decoration-line: none;
}

/**
 *  ▗▄▄▖ ▗▄▖ ▗▖    ▗▄▖ ▗▄▄▖  ▗▄▄▖
 * ▐▌   ▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌   
 * ▐▌   ▐▌ ▐▌▐▌   ▐▌ ▐▌▐▛▀▚▖ ▝▀▚▖
 * ▝▚▄▄▖▝▚▄▞▘▐▙▄▄▖▝▚▄▞▘▐▌ ▐▌▗▄▄▞▘
 *
 * Gambit CSS Framework - Color Utilities
 * Text, background, icon, and border color utilities
 */
/* ========================================================================
   TEXT COLOR UTILITIES
   ======================================================================== */
.color-text-boldest {
  color: #FFFFFF;
  color: var(--color-text-boldest);
}

.color-text-bolder {
  color: rgba(255, 255, 255, 0.85);
  color: var(--color-text-bolder);
}

.color-text-default {
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
}

.color-text-subtle {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-subtle);
}

.color-text-placeholder {
  color: rgba(255, 255, 255, 0.4);
  color: var(--color-text-placeholder);
}

.color-text-inverse {
  color: #312E2B;
  color: var(--color-text-inverse);
}

.color-text-link {
  color: #009FD9;
  color: var(--color-text-link);
}

.color-text-win {
  color: #81B64C;
  color: var(--color-text-win);
}

.color-text-draw {
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-draw);
}

.color-text-loss {
  color: #FA412D;
  color: var(--color-text-loss);
}

.color-text-success {
  color: #81B64C;
  color: var(--color-text-success);
}

.color-text-danger {
  color: #FA412D;
  color: var(--color-text-danger);
}

.color-text-warning {
  color: #E3AA24;
  color: var(--color-text-warning);
}

.color-text-info {
  color: #009FD9;
  color: var(--color-text-info);
}

.color-text-speech {
  color: #312E2B;
  color: var(--color-text-speech);
}

/* ========================================================================
   BACKGROUND COLOR UTILITIES
   ======================================================================== */
.color-bg-primary {
  background-color: #312E2B;
  background-color: var(--color-bg-primary);
}

.color-bg-secondary {
  background-color: rgba(0, 0, 0, 0.2);
  background-color: var(--color-bg-secondary);
}

.color-bg-tertiary {
  background-color: rgba(0, 0, 0, 0.14);
  background-color: var(--color-bg-tertiary);
}

.color-bg-quaternary {
  background-color: rgba(0, 0, 0, 0.18);
  background-color: var(--color-bg-quaternary);
}

.color-bg.variant-opaque {
  background-color: #262421;
  background-color: var(--color-bg-opaque);
}

.color-bg-opaque-lighter {
  background-color: #312E2B;
  background-color: var(--color-bg-opaque-lighter);
}

.color-bg-subtle {
  background-color: rgba(255, 255, 255, 0.1);
  background-color: var(--color-bg-subtle);
}

.color-bg-subtler {
  background-color: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg-subtler);
}

.color-bg-subtlest {
  background-color: rgba(255, 255, 255, 0.02);
  background-color: var(--color-bg-subtlest);
}

.color-bg-input {
  background-color: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg-input);
}

.color-bg-streaming {
  background-color: #5E53D9;
  background-color: var(--color-bg-streaming);
}

.color-bg-overlay {
  background-color: rgba(0, 0, 0, 0.77);
  background-color: var(--color-bg-overlay);
}

.color-bg-overlay-subtle {
  background-color: rgba(0, 0, 0, 0.5);
  background-color: var(--color-bg-overlay-subtle);
}

.color-bg-secondary-alt {
  background-color: rgba(0, 0, 0, 0.2);
  background-color: var(--color-bg-secondary-alt);
}

.color-bg-selected {
  background-color: rgba(255, 255, 255, 0.4);
  background-color: var(--color-bg-selected);
}

.color-bg-win {
  background-color: #81B64C;
  background-color: var(--color-bg-win);
}

.color-bg-draw {
  background-color: rgba(255, 255, 255, 0.72);
  background-color: var(--color-bg-draw);
}

.color-bg-loss {
  background-color: #E02828;
  background-color: var(--color-bg-loss);
}

.color-bg-success {
  background-color: #81B64C;
  background-color: var(--color-bg-success);
}

.color-bg-danger {
  background-color: #E02828;
  background-color: var(--color-bg-danger);
}

.color-bg-warning {
  background-color: #E3AA24;
  background-color: var(--color-bg-warning);
}

.color-bg-info {
  background-color: #008CD1;
  background-color: var(--color-bg-info);
}

.color-bg-gold {
  background-color: #F7C631;
  background-color: var(--color-bg-gold);
}

.color-bg-silver {
  background-color: #BEBDB9;
  background-color: var(--color-bg-silver);
}

.color-bg-bronze {
  background-color: #D5A47D;
  background-color: var(--color-bg-bronze);
}

.color-bg-speech {
  background-color: #FFFFFF;
  background-color: var(--color-bg-speech);
}

.color-bg-chesstitle {
  background-color: #7C2929;
  background-color: var(--color-bg-chesstitle);
}

/* ========================================================================
   ICON COLOR UTILITIES
   ======================================================================== */
.color-icon-boldest {
  color: rgba(255, 255, 255, 0.85);
  color: var(--color-icon-boldest);
}

.color-icon-bolder {
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-icon-bolder);
}

.color-icon-default {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-icon-default);
}

.color-icon-subtle {
  color: rgba(255, 255, 255, 0.4);
  color: var(--color-icon-subtle);
}

.color-icon-inverse {
  color: #312E2B;
  color: var(--color-icon-inverse);
}

.color-icon-win {
  color: #81B64C;
  color: var(--color-icon-win);
}

.color-icon-draw {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-icon-draw);
}

.color-icon-loss {
  color: #FA412D;
  color: var(--color-icon-loss);
}

.color-icon-success {
  color: #81B64C;
  color: var(--color-icon-success);
}

.color-icon-danger {
  color: #FA412D;
  color: var(--color-icon-danger);
}

.color-icon-warning {
  color: #E3AA24;
  color: var(--color-icon-warning);
}

.color-icon-info {
  color: #008CD1;
  color: var(--color-icon-info);
}

.color-icon-gold {
  color: #F7C631;
  color: var(--color-icon-gold);
}

.color-icon-silver {
  color: #BEBDB9;
  color: var(--color-icon-silver);
}

.color-icon-bronze {
  color: #D5A47D;
  color: var(--color-icon-bronze);
}

/* ========================================================================
   GLYPH COLOR UTILITIES
   ======================================================================== */
.color-glyph-boldest {
  color: rgba(255, 255, 255, 0.85);
  color: var(--color-icon-boldest);
}

.color-glyph-bolder {
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-icon-bolder);
}

.color-glyph-default {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-icon-default);
}

.color-glyph-subtle {
  color: rgba(255, 255, 255, 0.4);
  color: var(--color-icon-subtle);
}

.color-glyph-inverse {
  color: #312E2B;
  color: var(--color-icon-inverse);
}

.color-glyph-win {
  color: #81B64C;
  color: var(--color-icon-win);
}

.color-glyph-draw {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-icon-draw);
}

.color-glyph-loss {
  color: #FA412D;
  color: var(--color-icon-loss);
}

.color-glyph-success {
  color: #81B64C;
  color: var(--color-icon-success);
}

.color-glyph-danger {
  color: #FA412D;
  color: var(--color-icon-danger);
}

.color-glyph-warning {
  color: #E3AA24;
  color: var(--color-icon-warning);
}

.color-glyph-info {
  color: #008CD1;
  color: var(--color-icon-info);
}

.color-glyph-gold {
  color: #F7C631;
  color: var(--color-icon-gold);
}

.color-glyph-silver {
  color: #BEBDB9;
  color: var(--color-icon-silver);
}

.color-glyph-bronze {
  color: #D5A47D;
  color: var(--color-icon-bronze);
}

.color-glyph-streak {
  color: #FA742C;
  color: var(--color-streak-medium);
}

/* ========================================================================
   BORDER COLOR UTILITIES
   ======================================================================== */
.color-border-bold {
  border-color: rgba(255, 255, 255, 0.72);
  border-color: var(--color-border-bold);
}

.color-border-subtle {
  border-color: rgba(255, 255, 255, 0.5);
  border-color: var(--color-border-subtle);
}

.color-border-subtler {
  border-color: rgba(255, 255, 255, 0.25);
  border-color: var(--color-border-subtler);
}

.color-border-subtlest {
  border-color: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border-subtlest);
}

.color-border.variant-opaque {
  border-color: #4B4847;
  border-color: var(--color-border-opaque);
}

.color-border-default {
  border-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-border-default);
}

.color-border-selected {
  border-color: #81B64C;
  border-color: var(--color-border-selected);
}

.color-border-active {
  border-color: rgba(255, 255, 255, 0.4);
  border-color: var(--color-border-active);
}

.color-border-win {
  border-color: #81B64C;
  border-color: var(--color-border-win);
}

.color-border-draw {
  border-color: rgba(255, 255, 255, 0.1);
  border-color: var(--color-border-draw);
}

.color-border-loss {
  border-color: #FA412D;
  border-color: var(--color-border-loss);
}

.color-border-success {
  border-color: #81B64C;
  border-color: var(--color-border-success);
}

.color-border-danger {
  border-color: #FA412D;
  border-color: var(--color-border-danger);
}

.color-border-warning {
  border-color: #E3AA24;
  border-color: var(--color-border-warning);
}

.color-border-info {
  border-color: #008CD1;
  border-color: var(--color-border-info);
}

/* ========================================================================
   ELEVATION UTILITIES
   ======================================================================== */
.elevation-foreground {
  text-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.2);
  text-shadow: var(--elevation-foreground);
}

.elevation-foreground-dark-only {
  text-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.2);
  text-shadow: var(--elevation-foreground-dark-only);
}

.elevation-modal {
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.65);
  box-shadow: var(--elevation-modal);
}

.elevation-popover {
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
  box-shadow: var(--elevation-popover);
}

/**
 *  ▗▄▖ ▗▖  ▗▖▗▄▄▄▖▗▖  ▗▖ ▗▄▖ ▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖  ▗▖ ▗▄▄▖
 * ▐▌ ▐▌▐▛▚▖▐▌  █  ▐▛▚▞▜▌▐▌ ▐▌  █    █  ▐▌ ▐▌▐▛▚▖▐▌▐▌   
 * ▐▛▀▜▌▐▌ ▝▜▌  █  ▐▌  ▐▌▐▛▀▜▌  █    █  ▐▌ ▐▌▐▌ ▝▜▌ ▝▀▚▖
 * ▐▌ ▐▌▐▌  ▐▌▗▄█▄▖▐▌  ▐▌▐▌ ▐▌  █  ▗▄█▄▖▝▚▄▞▘▐▌  ▐▌▗▄▄▞▘
 *
 * Gambit CSS Framework - Animation Utilities
 * Motion, transitions, and keyframe animations
 */
/* ========================================================================
   ANIMATION UTILITIES
   ======================================================================== */
/* Modal Animations */
.motion-modal-enter {
  animation-duration: 0.3s;
  animation-name: cc-keyframes-modal-enter;
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  animation-timing-function: var(--motion-ease-out-1);
}

.motion-modal-exit {
  animation-duration: 0.1s;
  animation-name: cc-keyframes-modal-exit;
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  animation-timing-function: var(--motion-ease-in-1);
}

.motion-modal-exit-end {
  opacity: 0;
}

@keyframes cc-keyframes-modal-enter {
  from {
    opacity: 0;
    transform: translateY(-30rem);
  }
  to {
    opacity: 1;
  }
}
@keyframes cc-keyframes-modal-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
/* Transition Utilities */
.transition-bg-hover {
  transition: background-color var(--motion-duration-slow) cubic-bezier(0.2, 1, 0.3, 1);
  transition: background-color var(--motion-duration-slow) var(--motion-ease-out-3);
}
.transition-bg-hover:hover {
  transition: background-color 150ms cubic-bezier(0.2, 1, 0.3, 1);
  transition: background-color 150ms var(--motion-ease-out-3);
}

.transition-color-hover {
  transition: color var(--motion-duration-slow) cubic-bezier(0.2, 1, 0.3, 1);
  transition: color var(--motion-duration-slow) var(--motion-ease-out-3);
}
.transition-color-hover:hover {
  transition: color 150ms cubic-bezier(0.2, 1, 0.3, 1);
  transition: color 150ms var(--motion-ease-out-3);
}

/**
 * ▗▖  ▗▖ ▗▄▖ ▗▄▄▖  ▗▄▄▖▗▄▄▄▖▗▖  ▗▖
 * ▐▛▚▞▜▌▐▌ ▐▌▐▌ ▐▌▐▌     █  ▐▛▚▖▐▌
 * ▐▌  ▐▌▐▛▀▜▌▐▛▀▚▖▐▌▝▜▌  █  ▐▌ ▝▜▌
 * ▐▌  ▐▌▐▌ ▐▌▐▌ ▐▌▝▚▄▞▘▗▄█▄▖▐▌  ▐▌
 *
 * Gambit CSS Framework - Margin Utilities
 * Comprehensive margin utilities for all sides and axes
 */
/* ========================================================================
   MARGIN UTILITIES
   ======================================================================== */
/* Margin - All Sides */
.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 0.1rem !important;
  margin: var(--space-1) !important;
}

.m-2 {
  margin: 0.2rem !important;
  margin: var(--space-2) !important;
}

.m-4 {
  margin: 0.4rem !important;
  margin: var(--space-4) !important;
}

.m-8 {
  margin: 0.8rem !important;
  margin: var(--space-8) !important;
}

.m-12 {
  margin: 1.2rem !important;
  margin: var(--space-12) !important;
}

.m-16 {
  margin: 1.6rem !important;
  margin: var(--space-16) !important;
}

.m-24 {
  margin: 2.4rem !important;
  margin: var(--space-24) !important;
}

.m-32 {
  margin: 3.2rem !important;
  margin: var(--space-32) !important;
}

.m-40 {
  margin: 4rem !important;
  margin: var(--space-40) !important;
}

.m-80 {
  margin: 8rem !important;
  margin: var(--space-80) !important;
}

.m-auto {
  margin: auto !important;
}

/* Margin - Horizontal */
.mx-0, .mh-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-1, .mh-1 {
  margin-left: 0.1rem !important;
  margin-left: var(--space-1) !important;
  margin-right: 0.1rem !important;
  margin-right: var(--space-1) !important;
}

.mx-2, .mh-2 {
  margin-left: 0.2rem !important;
  margin-left: var(--space-2) !important;
  margin-right: 0.2rem !important;
  margin-right: var(--space-2) !important;
}

.mx-4, .mh-4 {
  margin-left: 0.4rem !important;
  margin-left: var(--space-4) !important;
  margin-right: 0.4rem !important;
  margin-right: var(--space-4) !important;
}

.mx-8, .mh-8 {
  margin-left: 0.8rem !important;
  margin-left: var(--space-8) !important;
  margin-right: 0.8rem !important;
  margin-right: var(--space-8) !important;
}

.mx-12, .mh-12 {
  margin-left: 1.2rem !important;
  margin-left: var(--space-12) !important;
  margin-right: 1.2rem !important;
  margin-right: var(--space-12) !important;
}

.mx-16, .mh-16 {
  margin-left: 1.6rem !important;
  margin-left: var(--space-16) !important;
  margin-right: 1.6rem !important;
  margin-right: var(--space-16) !important;
}

.mx-24, .mh-24 {
  margin-left: 2.4rem !important;
  margin-left: var(--space-24) !important;
  margin-right: 2.4rem !important;
  margin-right: var(--space-24) !important;
}

.mx-32, .mh-32 {
  margin-left: 3.2rem !important;
  margin-left: var(--space-32) !important;
  margin-right: 3.2rem !important;
  margin-right: var(--space-32) !important;
}

.mx-40, .mh-40 {
  margin-left: 4rem !important;
  margin-left: var(--space-40) !important;
  margin-right: 4rem !important;
  margin-right: var(--space-40) !important;
}

.mx-80, .mh-80 {
  margin-left: 8rem !important;
  margin-left: var(--space-80) !important;
  margin-right: 8rem !important;
  margin-right: var(--space-80) !important;
}

.mx-auto, .mh-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Margin - Vertical */
.my-0, .mv-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1, .mv-1 {
  margin-top: 0.1rem !important;
  margin-top: var(--space-1) !important;
  margin-bottom: 0.1rem !important;
  margin-bottom: var(--space-1) !important;
}

.my-2, .mv-2 {
  margin-top: 0.2rem !important;
  margin-top: var(--space-2) !important;
  margin-bottom: 0.2rem !important;
  margin-bottom: var(--space-2) !important;
}

.my-4, .mv-4 {
  margin-top: 0.4rem !important;
  margin-top: var(--space-4) !important;
  margin-bottom: 0.4rem !important;
  margin-bottom: var(--space-4) !important;
}

.my-8, .mv-8 {
  margin-top: 0.8rem !important;
  margin-top: var(--space-8) !important;
  margin-bottom: 0.8rem !important;
  margin-bottom: var(--space-8) !important;
}

.my-12, .mv-12 {
  margin-top: 1.2rem !important;
  margin-top: var(--space-12) !important;
  margin-bottom: 1.2rem !important;
  margin-bottom: var(--space-12) !important;
}

.my-16, .mv-16 {
  margin-top: 1.6rem !important;
  margin-top: var(--space-16) !important;
  margin-bottom: 1.6rem !important;
  margin-bottom: var(--space-16) !important;
}

.my-24, .mv-24 {
  margin-top: 2.4rem !important;
  margin-top: var(--space-24) !important;
  margin-bottom: 2.4rem !important;
  margin-bottom: var(--space-24) !important;
}

.my-32, .mv-32 {
  margin-top: 3.2rem !important;
  margin-top: var(--space-32) !important;
  margin-bottom: 3.2rem !important;
  margin-bottom: var(--space-32) !important;
}

.my-40, .mv-40 {
  margin-top: 4rem !important;
  margin-top: var(--space-40) !important;
  margin-bottom: 4rem !important;
  margin-bottom: var(--space-40) !important;
}

.my-80, .mv-80 {
  margin-top: 8rem !important;
  margin-top: var(--space-80) !important;
  margin-bottom: 8rem !important;
  margin-bottom: var(--space-80) !important;
}

.my-auto, .mv-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Margin - Individual Sides */
.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 0.1rem !important;
  margin-top: var(--space-1) !important;
}

.mt-2 {
  margin-top: 0.2rem !important;
  margin-top: var(--space-2) !important;
}

.mt-4 {
  margin-top: 0.4rem !important;
  margin-top: var(--space-4) !important;
}

.mt-8 {
  margin-top: 0.8rem !important;
  margin-top: var(--space-8) !important;
}

.mt-12 {
  margin-top: 1.2rem !important;
  margin-top: var(--space-12) !important;
}

.mt-16 {
  margin-top: 1.6rem !important;
  margin-top: var(--space-16) !important;
}

.mt-24 {
  margin-top: 2.4rem !important;
  margin-top: var(--space-24) !important;
}

.mt-32 {
  margin-top: 3.2rem !important;
  margin-top: var(--space-32) !important;
}

.mt-40 {
  margin-top: 4rem !important;
  margin-top: var(--space-40) !important;
}

.mt-80 {
  margin-top: 8rem !important;
  margin-top: var(--space-80) !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-1 {
  margin-right: 0.1rem !important;
  margin-right: var(--space-1) !important;
}

.mr-2 {
  margin-right: 0.2rem !important;
  margin-right: var(--space-2) !important;
}

.mr-4 {
  margin-right: 0.4rem !important;
  margin-right: var(--space-4) !important;
}

.mr-8 {
  margin-right: 0.8rem !important;
  margin-right: var(--space-8) !important;
}

.mr-12 {
  margin-right: 1.2rem !important;
  margin-right: var(--space-12) !important;
}

.mr-16 {
  margin-right: 1.6rem !important;
  margin-right: var(--space-16) !important;
}

.mr-24 {
  margin-right: 2.4rem !important;
  margin-right: var(--space-24) !important;
}

.mr-32 {
  margin-right: 3.2rem !important;
  margin-right: var(--space-32) !important;
}

.mr-40 {
  margin-right: 4rem !important;
  margin-right: var(--space-40) !important;
}

.mr-80 {
  margin-right: 8rem !important;
  margin-right: var(--space-80) !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 0.1rem !important;
  margin-bottom: var(--space-1) !important;
}

.mb-2 {
  margin-bottom: 0.2rem !important;
  margin-bottom: var(--space-2) !important;
}

.mb-4 {
  margin-bottom: 0.4rem !important;
  margin-bottom: var(--space-4) !important;
}

.mb-8 {
  margin-bottom: 0.8rem !important;
  margin-bottom: var(--space-8) !important;
}

.mb-12 {
  margin-bottom: 1.2rem !important;
  margin-bottom: var(--space-12) !important;
}

.mb-16 {
  margin-bottom: 1.6rem !important;
  margin-bottom: var(--space-16) !important;
}

.mb-24 {
  margin-bottom: 2.4rem !important;
  margin-bottom: var(--space-24) !important;
}

.mb-32 {
  margin-bottom: 3.2rem !important;
  margin-bottom: var(--space-32) !important;
}

.mb-40 {
  margin-bottom: 4rem !important;
  margin-bottom: var(--space-40) !important;
}

.mb-80 {
  margin-bottom: 8rem !important;
  margin-bottom: var(--space-80) !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-1 {
  margin-left: 0.1rem !important;
  margin-left: var(--space-1) !important;
}

.ml-2 {
  margin-left: 0.2rem !important;
  margin-left: var(--space-2) !important;
}

.ml-4 {
  margin-left: 0.4rem !important;
  margin-left: var(--space-4) !important;
}

.ml-8 {
  margin-left: 0.8rem !important;
  margin-left: var(--space-8) !important;
}

.ml-12 {
  margin-left: 1.2rem !important;
  margin-left: var(--space-12) !important;
}

.ml-16 {
  margin-left: 1.6rem !important;
  margin-left: var(--space-16) !important;
}

.ml-24 {
  margin-left: 2.4rem !important;
  margin-left: var(--space-24) !important;
}

.ml-32 {
  margin-left: 3.2rem !important;
  margin-left: var(--space-32) !important;
}

.ml-40 {
  margin-left: 4rem !important;
  margin-left: var(--space-40) !important;
}

.ml-80 {
  margin-left: 8rem !important;
  margin-left: var(--space-80) !important;
}

.ml-auto {
  margin-left: auto !important;
}

/**
 * ▗▄▄▖  ▗▄▖ ▗▄▄▄  ▗▄▄▄  ▗▄▄▄▖▗▖  ▗▖ ▗▄▄▖
 * ▐▌ ▐▌▐▌ ▐▌▐▌  █ ▐▌  █   █  ▐▛▚▖▐▌▐▌   
 * ▐▛▀▘ ▐▛▀▜▌▐▌  █ ▐▌  █   █  ▐▌ ▝▜▌▐▌▝▜▌
 * ▐▌   ▐▌ ▐▌▐▙▄▄▀ ▐▙▄▄▀ ▗▄█▄▖▐▌  ▐▌▝▚▄▞▘
 *
 * Gambit CSS Framework - Padding Utilities
 * Comprehensive padding utilities for all sides and axes
 */
/* ========================================================================
   PADDING UTILITIES
   ======================================================================== */
/* Padding - All Sides */
.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 0.1rem !important;
  padding: var(--space-1) !important;
}

.p-2 {
  padding: 0.2rem !important;
  padding: var(--space-2) !important;
}

.p-4 {
  padding: 0.4rem !important;
  padding: var(--space-4) !important;
}

.p-8 {
  padding: 0.8rem !important;
  padding: var(--space-8) !important;
}

.p-12 {
  padding: 1.2rem !important;
  padding: var(--space-12) !important;
}

.p-16 {
  padding: 1.6rem !important;
  padding: var(--space-16) !important;
}

.p-20 {
  padding: 2rem !important;
  padding: var(--space-20) !important;
}

.p-24 {
  padding: 2.4rem !important;
  padding: var(--space-24) !important;
}

.p-32 {
  padding: 3.2rem !important;
  padding: var(--space-32) !important;
}

.p-40 {
  padding: 4rem !important;
  padding: var(--space-40) !important;
}

.p-80 {
  padding: 8rem !important;
  padding: var(--space-80) !important;
}

/* Padding - Horizontal */
.px-0, .ph-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-1, .ph-1 {
  padding-left: 0.1rem !important;
  padding-left: var(--space-1) !important;
  padding-right: 0.1rem !important;
  padding-right: var(--space-1) !important;
}

.px-2, .ph-2 {
  padding-left: 0.2rem !important;
  padding-left: var(--space-2) !important;
  padding-right: 0.2rem !important;
  padding-right: var(--space-2) !important;
}

.px-4, .ph-4 {
  padding-left: 0.4rem !important;
  padding-left: var(--space-4) !important;
  padding-right: 0.4rem !important;
  padding-right: var(--space-4) !important;
}

.px-8, .ph-8 {
  padding-left: 0.8rem !important;
  padding-left: var(--space-8) !important;
  padding-right: 0.8rem !important;
  padding-right: var(--space-8) !important;
}

.px-12, .ph-12 {
  padding-left: 1.2rem !important;
  padding-left: var(--space-12) !important;
  padding-right: 1.2rem !important;
  padding-right: var(--space-12) !important;
}

.px-16, .ph-16 {
  padding-left: 1.6rem !important;
  padding-left: var(--space-16) !important;
  padding-right: 1.6rem !important;
  padding-right: var(--space-16) !important;
}

.px-24, .ph-24 {
  padding-left: 2.4rem !important;
  padding-left: var(--space-24) !important;
  padding-right: 2.4rem !important;
  padding-right: var(--space-24) !important;
}

.px-32, .ph-32 {
  padding-left: 3.2rem !important;
  padding-left: var(--space-32) !important;
  padding-right: 3.2rem !important;
  padding-right: var(--space-32) !important;
}

.px-40, .ph-40 {
  padding-left: 4rem !important;
  padding-left: var(--space-40) !important;
  padding-right: 4rem !important;
  padding-right: var(--space-40) !important;
}

.px-80, .ph-80 {
  padding-left: 8rem !important;
  padding-left: var(--space-80) !important;
  padding-right: 8rem !important;
  padding-right: var(--space-80) !important;
}

/* Padding - Vertical */
.py-0, .pv-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1, .pv-1 {
  padding-top: 0.1rem !important;
  padding-top: var(--space-1) !important;
  padding-bottom: 0.1rem !important;
  padding-bottom: var(--space-1) !important;
}

.py-2, .pv-2 {
  padding-top: 0.2rem !important;
  padding-top: var(--space-2) !important;
  padding-bottom: 0.2rem !important;
  padding-bottom: var(--space-2) !important;
}

.py-4, .pv-4 {
  padding-top: 0.4rem !important;
  padding-top: var(--space-4) !important;
  padding-bottom: 0.4rem !important;
  padding-bottom: var(--space-4) !important;
}

.py-8, .pv-8 {
  padding-top: 0.8rem !important;
  padding-top: var(--space-8) !important;
  padding-bottom: 0.8rem !important;
  padding-bottom: var(--space-8) !important;
}

.py-12, .pv-12 {
  padding-top: 1.2rem !important;
  padding-top: var(--space-12) !important;
  padding-bottom: 1.2rem !important;
  padding-bottom: var(--space-12) !important;
}

.py-16, .pv-16 {
  padding-top: 1.6rem !important;
  padding-top: var(--space-16) !important;
  padding-bottom: 1.6rem !important;
  padding-bottom: var(--space-16) !important;
}

.py-24, .pv-24 {
  padding-top: 2.4rem !important;
  padding-top: var(--space-24) !important;
  padding-bottom: 2.4rem !important;
  padding-bottom: var(--space-24) !important;
}

.py-32, .pv-32 {
  padding-top: 3.2rem !important;
  padding-top: var(--space-32) !important;
  padding-bottom: 3.2rem !important;
  padding-bottom: var(--space-32) !important;
}

.py-40, .pv-40 {
  padding-top: 4rem !important;
  padding-top: var(--space-40) !important;
  padding-bottom: 4rem !important;
  padding-bottom: var(--space-40) !important;
}

.py-80, .pv-80 {
  padding-top: 8rem !important;
  padding-top: var(--space-80) !important;
  padding-bottom: 8rem !important;
  padding-bottom: var(--space-80) !important;
}

/* Padding - Individual Sides */
.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 0.1rem !important;
  padding-top: var(--space-1) !important;
}

.pt-2 {
  padding-top: 0.2rem !important;
  padding-top: var(--space-2) !important;
}

.pt-4 {
  padding-top: 0.4rem !important;
  padding-top: var(--space-4) !important;
}

.pt-8 {
  padding-top: 0.8rem !important;
  padding-top: var(--space-8) !important;
}

.pt-12 {
  padding-top: 1.2rem !important;
  padding-top: var(--space-12) !important;
}

.pt-16 {
  padding-top: 1.6rem !important;
  padding-top: var(--space-16) !important;
}

.pt-20 {
  padding-top: 2rem !important;
  padding-top: var(--space-24) !important;
}

.pt-24 {
  padding-top: 2.4rem !important;
  padding-top: var(--space-24) !important;
}

.pt-32 {
  padding-top: 3.2rem !important;
  padding-top: var(--space-32) !important;
}

.pt-40 {
  padding-top: 4rem !important;
  padding-top: var(--space-40) !important;
}

.pt-80 {
  padding-top: 8rem !important;
  padding-top: var(--space-80) !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: 0.1rem !important;
  padding-right: var(--space-1) !important;
}

.pr-2 {
  padding-right: 0.2rem !important;
  padding-right: var(--space-2) !important;
}

.pr-4 {
  padding-right: 0.4rem !important;
  padding-right: var(--space-4) !important;
}

.pr-8 {
  padding-right: 0.8rem !important;
  padding-right: var(--space-8) !important;
}

.pr-12 {
  padding-right: 1.2rem !important;
  padding-right: var(--space-12) !important;
}

.pr-16 {
  padding-right: 1.6rem !important;
  padding-right: var(--space-16) !important;
}

.pr-24 {
  padding-right: 2.4rem !important;
  padding-right: var(--space-24) !important;
}

.pr-32 {
  padding-right: 3.2rem !important;
  padding-right: var(--space-32) !important;
}

.pr-40 {
  padding-right: 4rem !important;
  padding-right: var(--space-40) !important;
}

.pr-80 {
  padding-right: 8rem !important;
  padding-right: var(--space-80) !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 0.1rem !important;
  padding-bottom: var(--space-1) !important;
}

.pb-2 {
  padding-bottom: 0.2rem !important;
  padding-bottom: var(--space-2) !important;
}

.pb-4 {
  padding-bottom: 0.4rem !important;
  padding-bottom: var(--space-4) !important;
}

.pb-8 {
  padding-bottom: 0.8rem !important;
  padding-bottom: var(--space-8) !important;
}

.pb-12 {
  padding-bottom: 1.2rem !important;
  padding-bottom: var(--space-12) !important;
}

.pb-16 {
  padding-bottom: 1.6rem !important;
  padding-bottom: var(--space-16) !important;
}

.pb-24 {
  padding-bottom: 2.4rem !important;
  padding-bottom: var(--space-24) !important;
}

.pb-32 {
  padding-bottom: 3.2rem !important;
  padding-bottom: var(--space-32) !important;
}

.pb-40 {
  padding-bottom: 4rem !important;
  padding-bottom: var(--space-40) !important;
}

.pb-80 {
  padding-bottom: 8rem !important;
  padding-bottom: var(--space-80) !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pl-1 {
  padding-left: 0.1rem !important;
  padding-left: var(--space-1) !important;
}

.pl-2 {
  padding-left: 0.2rem !important;
  padding-left: var(--space-2) !important;
}

.pl-4 {
  padding-left: 0.4rem !important;
  padding-left: var(--space-4) !important;
}

.pl-8 {
  padding-left: 0.8rem !important;
  padding-left: var(--space-8) !important;
}

.pl-12 {
  padding-left: 1.2rem !important;
  padding-left: var(--space-12) !important;
}

.pl-16 {
  padding-left: 1.6rem !important;
  padding-left: var(--space-16) !important;
}

.pl-24 {
  padding-left: 2.4rem !important;
  padding-left: var(--space-24) !important;
}

.pl-32 {
  padding-left: 3.2rem !important;
  padding-left: var(--space-32) !important;
}

.pl-40 {
  padding-left: 4rem !important;
  padding-left: var(--space-40) !important;
}

.pl-80 {
  padding-left: 8rem !important;
  padding-left: var(--space-80) !important;
}

/**
 *  ▗▄▄▖ ▗▄▖ ▗▄▄▖ 
 * ▐▌   ▐▌ ▐▌▐▌ ▐▌
 * ▐▌▝▜▌▐▛▀▜▌▐▛▀▘ 
 * ▝▚▄▞▘▐▌ ▐▌▐▌   
 *
 * Gambit CSS Framework - Gap Utilities
 * Flexbox and CSS Grid gap utilities
 */
/* ========================================================================
   GAP UTILITIES
   ======================================================================== */
/* Gap - All Directions */
.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.1rem !important;
  gap: var(--space-1) !important;
}

.gap-2 {
  gap: 0.2rem !important;
  gap: var(--space-2) !important;
}

.gap-4 {
  gap: 0.4rem !important;
  gap: var(--space-4) !important;
}

.gap-8 {
  gap: 0.8rem !important;
  gap: var(--space-8) !important;
}

.gap-12 {
  gap: 1.2rem !important;
  gap: var(--space-12) !important;
}

.gap-16 {
  gap: 1.6rem !important;
  gap: var(--space-16) !important;
}

.gap-20 {
  gap: 2rem !important;
  gap: var(--space-20) !important;
}

.gap-24 {
  gap: 2.4rem !important;
  gap: var(--space-24) !important;
}

.gap-32 {
  gap: 3.2rem !important;
  gap: var(--space-32) !important;
}

.gap-40 {
  gap: 4rem !important;
  gap: var(--space-40) !important;
}

.gap-80 {
  gap: 8rem !important;
  gap: var(--space-80) !important;
}

/* Column Gap (Horizontal) */
.gap-x-0 {
  column-gap: 0 !important;
}

.gap-x-1 {
  column-gap: 0.1rem !important;
  column-gap: var(--space-1) !important;
}

.gap-x-2 {
  column-gap: 0.2rem !important;
  column-gap: var(--space-2) !important;
}

.gap-x-4 {
  column-gap: 0.4rem !important;
  column-gap: var(--space-4) !important;
}

.gap-x-8 {
  column-gap: 0.8rem !important;
  column-gap: var(--space-8) !important;
}

.gap-x-12 {
  column-gap: 1.2rem !important;
  column-gap: var(--space-12) !important;
}

.gap-x-16 {
  column-gap: 1.6rem !important;
  column-gap: var(--space-16) !important;
}

.gap-x-20 {
  column-gap: 2rem !important;
  column-gap: var(--space-20) !important;
}

.gap-x-24 {
  column-gap: 2.4rem !important;
  column-gap: var(--space-24) !important;
}

.gap-x-32 {
  column-gap: 3.2rem !important;
  column-gap: var(--space-32) !important;
}

.gap-x-40 {
  column-gap: 4rem !important;
  column-gap: var(--space-40) !important;
}

.gap-x-80 {
  column-gap: 8rem !important;
  column-gap: var(--space-80) !important;
}

/* Row Gap (Vertical) */
.gap-y-0 {
  row-gap: 0 !important;
}

.gap-y-1 {
  row-gap: 0.1rem !important;
  row-gap: var(--space-1) !important;
}

.gap-y-2 {
  row-gap: 0.2rem !important;
  row-gap: var(--space-2) !important;
}

.gap-y-4 {
  row-gap: 0.4rem !important;
  row-gap: var(--space-4) !important;
}

.gap-y-8 {
  row-gap: 0.8rem !important;
  row-gap: var(--space-8) !important;
}

.gap-y-12 {
  row-gap: 1.2rem !important;
  row-gap: var(--space-12) !important;
}

.gap-y-16 {
  row-gap: 1.6rem !important;
  row-gap: var(--space-16) !important;
}

.gap-y-20 {
  row-gap: 2rem !important;
  row-gap: var(--space-20) !important;
}

.gap-y-24 {
  row-gap: 2.4rem !important;
  row-gap: var(--space-24) !important;
}

.gap-y-32 {
  row-gap: 3.2rem !important;
  row-gap: var(--space-32) !important;
}

.gap-y-40 {
  row-gap: 4rem !important;
  row-gap: var(--space-40) !important;
}

.gap-y-80 {
  row-gap: 8rem !important;
  row-gap: var(--space-80) !important;
}

/**
 * ▗▄▄▄▖▗▖   ▗▄▄▄▖▗▖ ▗▖▗▄▄▖  ▗▄▖ ▗▖ ▗▖
 * ▐▌   ▐▌   ▐▌   ▝▚▞▝ ▐▌ ▐▌▐▌ ▐▌▝▚▞▝ 
 * ▐▛▀▀▘▐▌   ▐▛▀▀▘ ▐▌  ▐▛▀▚▖▐▌ ▐▌ ▐▌  
 * ▐▌   ▐▙▄▄▖▐▙▄▄▖▗▞▚▖ ▐▙▄▞▘▝▚▄▞▘▗▞▚▖ 
 *
 * Gambit CSS Framework - Flexbox Utilities
 * Comprehensive flexbox utility classes for layout control
 */
/* ========================================================================
   FLEXBOX UTILITIES
   ======================================================================== */
/* Display */
.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

/* Direction */
.flex-row {
  flex-direction: row !important;
}

.flex-row-r {
  flex-direction: row-reverse !important;
}

.flex-col {
  flex-direction: column !important;
}

.flex-col-r {
  flex-direction: column-reverse !important;
}

/* Wrap */
.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-wrap-r {
  flex-wrap: wrap-reverse !important;
}

/* Justify Content (Main Axis) */
.justify-start {
  justify-content: flex-start !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.justify-evenly {
  justify-content: space-evenly !important;
}

/* Align Items (Cross Axis) */
.align-start {
  align-items: flex-start !important;
}

.align-end {
  align-items: flex-end !important;
}

.align-center {
  align-items: center !important;
}

.align-baseline {
  align-items: baseline !important;
}

.align-stretch {
  align-items: stretch !important;
}

/* Align Content (Multi-line) */
.content-start {
  align-content: flex-start !important;
}

.content-end {
  align-content: flex-end !important;
}

.content-center {
  align-content: center !important;
}

.content-between {
  align-content: space-between !important;
}

.content-around {
  align-content: space-around !important;
}

.content-evenly {
  align-content: space-evenly !important;
}

.content-stretch {
  align-content: stretch !important;
}

/* Align Self */
.self-auto {
  align-self: auto !important;
}

.self-start {
  align-self: flex-start !important;
}

.self-end {
  align-self: flex-end !important;
}

.self-center {
  align-self: center !important;
}

.self-baseline {
  align-self: baseline !important;
}

.self-stretch {
  align-self: stretch !important;
}

/* Flex Grow & Shrink */
.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink {
  flex-shrink: 1 !important;
}

/* Flex Shorthand */
.flex-1 {
  flex: 1 1 0% !important;
}

.flex-auto {
  flex: 1 1 auto !important;
}

.flex-initial {
  flex: 0 1 auto !important;
}

.flex-none {
  flex: none !important;
}

/* Order */
.order-first {
  order: -9999 !important;
}

.order-last {
  order: 9999 !important;
}

.order-none {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-6 {
  order: 6 !important;
}

.order-7 {
  order: 7 !important;
}

.order-8 {
  order: 8 !important;
}

.order-9 {
  order: 9 !important;
}

.order-10 {
  order: 10 !important;
}

.order-11 {
  order: 11 !important;
}

.order-12 {
  order: 12 !important;
}

/**
 * ▗▄▄▖  ▗▄▖ ▗▄▄▄  ▗▄▄▄▖▗▖ ▗▖ ▗▄▄▖
 * ▐▌ ▐▌▐▌ ▐▌▐▌  █   █  ▐▌ ▐▌▐▌   
 * ▐▛▀▚▖▐▛▀▜▌▐▌  █   █  ▐▌ ▐▌ ▝▀▚▖
 * ▐▌ ▐▌▐▌ ▐▌▐▙▄▄▀ ▗▄█▄▖▝▚▄▞▘▗▄▄▞▘
 *
 * Gambit CSS Framework - Border Radius Utilities
 * Comprehensive border radius utilities for all corners
 */
/* ========================================================================
   BORDER RADIUS UTILITIES
   ======================================================================== */
/* Border Radius - All Corners */
.radius-s {
  border-radius: 0.2rem;
  border-radius: var(--radius-s);
}

.radius-m {
  border-radius: 0.3rem;
  border-radius: var(--radius-m);
}

.radius-l {
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
}

.radius-xl {
  border-radius: 1rem;
  border-radius: var(--radius-xl);
}

.radius-xxl {
  border-radius: 2rem;
  border-radius: var(--radius-xxl);
}

.radius-circular {
  border-radius: 50%;
  border-radius: var(--radius-circular);
}

.radius-none {
  border-radius: 0;
}

/* Border Radius - Top Corners */
.radius-t-s {
  border-top-left-radius: 0.2rem;
  border-top-left-radius: var(--radius-s);
  border-top-right-radius: 0.2rem;
  border-top-right-radius: var(--radius-s);
}

.radius-t-m {
  border-top-left-radius: 0.3rem;
  border-top-left-radius: var(--radius-m);
  border-top-right-radius: 0.3rem;
  border-top-right-radius: var(--radius-m);
}

.radius-t-l {
  border-top-left-radius: 0.5rem;
  border-top-left-radius: var(--radius-l);
  border-top-right-radius: 0.5rem;
  border-top-right-radius: var(--radius-l);
}

.radius-t-xl {
  border-top-left-radius: 1rem;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: 1rem;
  border-top-right-radius: var(--radius-xl);
}

.radius-t-xxl {
  border-top-left-radius: 2rem;
  border-top-left-radius: var(--radius-xxl);
  border-top-right-radius: 2rem;
  border-top-right-radius: var(--radius-xxl);
}

.radius-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Border Radius - Bottom Corners */
.radius-bottom-s {
  border-bottom-left-radius: 0.2rem;
  border-bottom-left-radius: var(--radius-s);
  border-bottom-right-radius: 0.2rem;
  border-bottom-right-radius: var(--radius-s);
}

.radius-bottom-m {
  border-bottom-left-radius: 0.3rem;
  border-bottom-left-radius: var(--radius-m);
  border-bottom-right-radius: 0.3rem;
  border-bottom-right-radius: var(--radius-m);
}

.radius-bottom-l {
  border-bottom-left-radius: 0.5rem;
  border-bottom-left-radius: var(--radius-l);
  border-bottom-right-radius: 0.5rem;
  border-bottom-right-radius: var(--radius-l);
}

.radius-bottom-xl {
  border-bottom-left-radius: 1rem;
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: 1rem;
  border-bottom-right-radius: var(--radius-xl);
}

.radius-bottom-xxl {
  border-bottom-left-radius: 2rem;
  border-bottom-left-radius: var(--radius-xxl);
  border-bottom-right-radius: 2rem;
  border-bottom-right-radius: var(--radius-xxl);
}

.radius-bottom-none {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Border Radius - Left Corners */
.radius-l-s {
  border-top-left-radius: 0.2rem;
  border-top-left-radius: var(--radius-s);
  border-bottom-left-radius: 0.2rem;
  border-bottom-left-radius: var(--radius-s);
}

.radius-l-m {
  border-top-left-radius: 0.3rem;
  border-top-left-radius: var(--radius-m);
  border-bottom-left-radius: 0.3rem;
  border-bottom-left-radius: var(--radius-m);
}

.radius-l-l {
  border-top-left-radius: 0.5rem;
  border-top-left-radius: var(--radius-l);
  border-bottom-left-radius: 0.5rem;
  border-bottom-left-radius: var(--radius-l);
}

.radius-l-xl {
  border-top-left-radius: 1rem;
  border-top-left-radius: var(--radius-xl);
  border-bottom-left-radius: 1rem;
  border-bottom-left-radius: var(--radius-xl);
}

.radius-l-xxl {
  border-top-left-radius: 2rem;
  border-top-left-radius: var(--radius-xxl);
  border-bottom-left-radius: 2rem;
  border-bottom-left-radius: var(--radius-xxl);
}

.radius-l-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Border Radius - Right Corners */
.radius-r-s {
  border-top-right-radius: 0.2rem;
  border-top-right-radius: var(--radius-s);
  border-bottom-right-radius: 0.2rem;
  border-bottom-right-radius: var(--radius-s);
}

.radius-r-m {
  border-top-right-radius: 0.3rem;
  border-top-right-radius: var(--radius-m);
  border-bottom-right-radius: 0.3rem;
  border-bottom-right-radius: var(--radius-m);
}

.radius-r-l {
  border-top-right-radius: 0.5rem;
  border-top-right-radius: var(--radius-l);
  border-bottom-right-radius: 0.5rem;
  border-bottom-right-radius: var(--radius-l);
}

.radius-r-xl {
  border-top-right-radius: 1rem;
  border-top-right-radius: var(--radius-xl);
  border-bottom-right-radius: 1rem;
  border-bottom-right-radius: var(--radius-xl);
}

.radius-r-xxl {
  border-top-right-radius: 2rem;
  border-top-right-radius: var(--radius-xxl);
  border-bottom-right-radius: 2rem;
  border-bottom-right-radius: var(--radius-xxl);
}

.radius-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Border Radius - Individual Corners */
.radius-tl-s {
  border-top-left-radius: 0.2rem;
  border-top-left-radius: var(--radius-s);
}

.radius-tl-m {
  border-top-left-radius: 0.3rem;
  border-top-left-radius: var(--radius-m);
}

.radius-tl-l {
  border-top-left-radius: 0.5rem;
  border-top-left-radius: var(--radius-l);
}

.radius-tl-xl {
  border-top-left-radius: 1rem;
  border-top-left-radius: var(--radius-xl);
}

.radius-tl-xxl {
  border-top-left-radius: 2rem;
  border-top-left-radius: var(--radius-xxl);
}

.radius-tl-none {
  border-top-left-radius: 0;
}

.radius-tr-s {
  border-top-right-radius: 0.2rem;
  border-top-right-radius: var(--radius-s);
}

.radius-tr-m {
  border-top-right-radius: 0.3rem;
  border-top-right-radius: var(--radius-m);
}

.radius-tr-l {
  border-top-right-radius: 0.5rem;
  border-top-right-radius: var(--radius-l);
}

.radius-tr-xl {
  border-top-right-radius: 1rem;
  border-top-right-radius: var(--radius-xl);
}

.radius-tr-xxl {
  border-top-right-radius: 2rem;
  border-top-right-radius: var(--radius-xxl);
}

.radius-tr-none {
  border-top-right-radius: 0;
}

.radius-bl-s {
  border-bottom-left-radius: 0.2rem;
  border-bottom-left-radius: var(--radius-s);
}

.radius-bl-m {
  border-bottom-left-radius: 0.3rem;
  border-bottom-left-radius: var(--radius-m);
}

.radius-bl-l {
  border-bottom-left-radius: 0.5rem;
  border-bottom-left-radius: var(--radius-l);
}

.radius-bl-xl {
  border-bottom-left-radius: 1rem;
  border-bottom-left-radius: var(--radius-xl);
}

.radius-bl-xxl {
  border-bottom-left-radius: 2rem;
  border-bottom-left-radius: var(--radius-xxl);
}

.radius-bl-none {
  border-bottom-left-radius: 0;
}

.radius-br-s {
  border-bottom-right-radius: 0.2rem;
  border-bottom-right-radius: var(--radius-s);
}

.radius-br-m {
  border-bottom-right-radius: 0.3rem;
  border-bottom-right-radius: var(--radius-m);
}

.radius-br-l {
  border-bottom-right-radius: 0.5rem;
  border-bottom-right-radius: var(--radius-l);
}

.radius-br-xl {
  border-bottom-right-radius: 1rem;
  border-bottom-right-radius: var(--radius-xl);
}

.radius-br-xxl {
  border-bottom-right-radius: 2rem;
  border-bottom-right-radius: var(--radius-xxl);
}

.radius-br-none {
  border-bottom-right-radius: 0;
}

/**
 * ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖▗▖   ▗▄▄▄▖▗▄▄▄▖▗▄▄▄▖▗▄▄▄▖ ▗▄▄▖
 * ▐▌ ▐▌  █    █  ▐▌     █    █    █  ▐▌   ▐▌   
 * ▐▌ ▐▌  █    █  ▐▌     █    █    █  ▐▛▀▀▘ ▝▀▚▖
 * ▝▚▄▞▘  █  ▗▄█▄▖▐▙▄▄▖▗▄█▄▖  █  ▗▄█▄▖▐▙▄▄▖▗▄▄▞▘
 *
 * Gambit CSS Framework - Utilities
 * Additional utility classes for common patterns
 */
/* ========================================================================
   BACKGROUND UTILITIES
   ======================================================================== */
/* Blur Effects */
.bg-blur {
  backdrop-filter: blur(var(--blur-glass-strong));
  background-color: color-mix(in srgb, #262421 75%, transparent);
  background-color: var(--color-bg-panel);
}

/* ========================================================================
   BORDER UTILITIES
   ======================================================================== */
.selected-border {
  outline: var(--border-l) solid #81B64C !important;
  outline: var(--border-l) solid var(--color-border-selected) !important;
  outline-offset: 0.2rem;
  outline-offset: var(--space-2);
}

/* ========================================================================
   CONTAINER UTILITIES
   ======================================================================== */
/* Section utility has been moved to gambit-section.scss */
/* Container Sizes */
.container-xxxs {
  max-width: 20rem;
  max-width: var(--container-xxxs);
  margin-left: auto;
  margin-right: auto;
}

.container-xxs {
  max-width: 30rem;
  max-width: var(--container-xxs);
  margin-left: auto;
  margin-right: auto;
}

.container-xs {
  max-width: 36rem;
  max-width: var(--container-xs);
  margin-left: auto;
  margin-right: auto;
}

.container-s {
  max-width: 40rem;
  max-width: var(--container-s);
  margin-left: auto;
  margin-right: auto;
}

.container-m {
  max-width: 46rem;
  max-width: var(--container-m);
  margin-left: auto;
  margin-right: auto;
}

.container-l {
  max-width: 50rem;
  max-width: var(--container-l);
  margin-left: auto;
  margin-right: auto;
}

.container-xl {
  max-width: 60rem;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
}

/* Responsive width utilities */
.w-full {
  width: 100%;
  max-width: 100%;
}

.max-w-full {
  max-width: 100%;
}

/* Centered container with padding */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.6rem;
  padding-left: var(--space-16);
  padding-right: 1.6rem;
  padding-right: var(--space-16);
}

/* Margin utilities have been moved to gambit-margin.scss */
/* Popover styles have been moved to gambit-popover.scss */
/* Icon utilities have been moved to gambit-icons.scss */
/* Border radius utilities have been moved to gambit-radius.scss */
/* Flexbox utilities have been moved to gambit-flexbox.scss */
/* Text alignment utilities have been moved to gambit-typography.scss */
/**
 * ▗▄▄▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖  ▗▖
 * ▐▌ ▐▌▐▌ ▐▌  █    █  ▐▌ ▐▌▐▛▚▖▐▌
 * ▐▛▀▚▖▐▌ ▐▌  █    █  ▐▌ ▐▌▐▌ ▝▜▌
 * ▐▙▄▞▘▝▚▄▞▘  █    █  ▝▚▄▞▘▐▌  ▐▌
 *
 * Gambit CSS Framework - Button Component
 * Core button component with multiple variants and composition patterns
 */
/* ========================================================================
   BUTTON COMPONENT
   ======================================================================== */
/*
 * Button Structure:
*
* Base class: .g-button
*
* Size modifiers: .size-xxl, .size-xl, .size-l, .size-m, .size-s, .size-xs
* Variant modifiers: .variant-primary, .variant-secondary, .variant-secondary-danger,
*                   .variant-danger, .variant-ghost, .variant-ghost-link,
*                   .variant-monetization, .variant-streaming, .variant-bot-chat,
*                   .variant-white
*
* Composition modifiers:
* - .icon-only (square button with icon only)
* - Default is text with optional icon
*
* State modifiers:
* - .is-loading (shows loading spinner)
* - .is-disabled (disabled state)
* - .w-full (full width)
* - .wide (double horizontal padding)
*
* Usage Examples:
* - <button class="g-button size-m variant-primary">
*     <span class="button-text">Click me</span>
*   </button>
* - <button class="g-button size-l variant-secondary icon-only">
*     <span class="button-icon"><svg>...</svg></span>
*   </button>
* - <button class="g-button size-m variant-ghost">
*     <span class="button-icon"><svg>...</svg></span>
*     <span class="button-text">Settings</span>
*   </button>
*/
.g-button-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.g-button-group.is-full {
  width: 100%;
}
.g-button-group .g-button {
  flex: 1;
}

/* ========================================================================
	BASE BUTTON STYLES
	======================================================================== */
.g-button {
  --maxWidth: 100%;
  --textColor: var(--color-neutrals-white);
  --textColorHover: var(--color-neutrals-white);
  --textColorActive: var(--textColor);
  --iconColor: var(--textColor);
  --iconColorHover: var(--textColorHover);
  --iconColorActive: var(--textColorActive);
  --buttonTextShadow: var(--color-transparent-black-20);
  text-decoration: none;
  align-items: center;
  background: var(--cc-bg-color);
  border: 0;
  border-radius: 0.5rem;
  border-radius: var(--borderRadius, var(--radius-l));
  box-shadow: var(--cc-bg-box-shadow);
  color: var(--color-neutrals-white);
  color: var(--textColor);
  -moz-column-gap: var(--columnGap);
  column-gap: var(--columnGap);
  cursor: pointer;
  display: inline-grid;
  font-size: 1.4rem;
  font-size: var(--fontSize, 1.4rem);
  font-weight: 600;
  font-weight: var(--fontWeight, 600);
  grid-auto-flow: column;
  justify-content: center;
  line-height: 1.1428;
  max-width: 100%;
  max-width: var(--maxWidth);
  min-height: var(--buttonHeight);
  overflow: hidden;
  padding: var(--buttonPaddings);
  text-align: center;
  text-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 0.1rem 0 var(--buttonTextShadow);
  touch-action: manipulation;
  word-break: break-word;
  hyphens: auto;
  white-space: nowrap;
  /* Active (clicked) */
  /* Focus */
  /* Disabled */
}
@media (hover: hover) {
  .g-button:not([disabled]):active {
    transform: scale(var(--scale-pressed));
  }
  .g-button:not([disabled]):hover {
    background: var(--cc-bg-color-hover);
    box-shadow: var(--cc-bg-box-shadow-hover);
    color: var(--textColorHover);
  }
  .g-button:not([disabled]):hover .g-icon {
    color: var(--iconColorHover);
  }
}
.g-button:not([disabled]):active {
  background: var(--cc-bg-color-active);
  box-shadow: var(--cc-bg-box-shadow-active);
  color: var(--textColorActive);
}
.g-button:not([disabled]):active .g-icon,
.g-button:not([disabled]):active .button-icon,
.g-button:not([disabled]):active .g-glyph {
  color: var(--iconColorActive);
}
.g-button:focus-visible {
  outline: none;
  background: var(--cc-bg-color-focus);
  box-shadow: var(--cc-bg-box-shadow-focus);
  border: var(--border-s) solid var(--focusBorderColor, transparent);
  color: var(--textColorFocus, var(--textColor));
}
.g-button:focus-visible .g-icon,
.g-button:focus-visible .button-icon,
.g-button:focus-visible .g-glyph {
  color: var(--iconColorFocus, var(--iconColor));
}
.g-button:disabled, .g-button.disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.g-button .g-button-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g-button .button-icon,
.g-button .g-glyph {
  color: var(--iconColor);
  height: var(--iconSize);
  width: var(--iconSize);
}
.g-button .button-icon svg,
.g-button .g-glyph svg {
  height: 100%;
  width: 100%;
}

/* Apply fill only to monochrome icons (not color icons) */
.g-button .button-icon:not(.color-icon) svg path,
.g-button .g-glyph svg path {
  fill: currentColor;
}

/* ========================================================================
	SIZE MODIFIERS
	======================================================================== */
.g-button.size-xxl {
  --borderRadius: var(--radius-xl);
  --buttonHeight: 6.4rem;
  --buttonPaddings: 0 var(--space-16);
  --columnGap: .8rem;
  --fontSize: 2.2rem;
  --fontWeight: 800;
  font-family: var(--font-family-heading);
  --iconSize: var(--icon-32);
}

.g-button.size-xl {
  --borderRadius: var(--radius-xl);
  --buttonHeight: 5.6rem;
  --buttonPaddings: var(--space-4) var(--space-16);
  --columnGap: .8rem;
  --fontSize: 2.2rem;
  --fontWeight: 800;
  font-family: var(--font-family-heading);
  --iconSize: var(--icon-24);
}

.g-button.size-l {
  --borderRadius: var(--radius-xl);
  --buttonHeight: 4.8rem;
  --buttonPaddings: var(--space-4) var(--space-16);
  --columnGap: .8rem;
  --fontSize: 1.7rem;
  --fontWeight: 700;
  font-family: var(--font-family-heading);
  --iconSize: var(--icon-24);
}

.g-button,
.g-button.size-m {
  --borderRadius: var(--radius-l);
  --buttonHeight: 4rem;
  --buttonPaddings: var(--space-4) var(--space-16);
  --columnGap: var(--space-8);
  --fontSize: 1.4rem;
  --iconSize: var(--icon-24);
}

.g-button.size-s {
  --borderRadius: var(--radius-l);
  --buttonHeight: 3.2rem;
  --buttonPaddings: var(--space-2) var(--space-16);
  --columnGap: var(--space-8);
  --fontSize: 1.4rem;
  --iconSize: var(--icon-16);
}

.g-button.size-xs {
  --borderRadius: var(--radius-l);
  --buttonHeight: 2.4rem;
  --buttonPaddings: .2rem 1.2rem;
  --columnGap: .8rem;
  --fontSize: 1.3rem;
  --fontWeight: 500;
  --iconSize: var(--icon-16);
}

/* ========================================================================
	VARIANT MODIFIERS
	======================================================================== */
/* Primary */
.g-button.variant-primary {
  --cc-bg-color: linear-gradient(180deg, var(--color-green-300) 0%, var(--color-green-400) 100%);
  --cc-bg-color-hover:
  	linear-gradient(180deg, color-mix(in srgb, var(--color-green-200), transparent 50%) 0%, transparent 100%),
  	linear-gradient(180deg, var(--color-green-300) 0%, var(--color-green-400) 100%);
  --cc-bg-color-active: linear-gradient(180deg, var(--color-green-300) 0%, var(--color-green-500) 100%);
  --cc-bg-color-focus: var(--cc-bg-color-hover);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-green-200), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-green-500),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-green-200), transparent 50%),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-green-500), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-green-100), transparent 60%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-green-200), transparent 50%),
  	inset 0 -.1rem 0 0 var(--color-green-500),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-green-500), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-active:
  	inset 0 -.1rem 0 0 color-mix(in srgb, var(--color-green-300), transparent 60%),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-green-300), transparent 50%),
  	inset 0 -.1rem 0 0 var(--color-green-500),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-green-600), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-focus:
  	inset 0 0 0 .3rem var(--color-blue-400),
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-green-200), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-green-500),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-green-200), transparent 50%),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-green-500), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --textColorActive: var(--color-green-50);
  --iconColorActive: var(--textColorActive);
  --focusBorderColor: var(--color-neutrals-white);
}

/* Secondary */
.g-button.variant-secondary {
  --cc-button-secondary-enabled-start: var(--color-transparent-white-10);
  --cc-button-secondary-enabled-end: var(--color-transparent-white-5);
  --cc-button-secondary-hovered-start: var(--color-transparent-white-14);
  --cc-button-secondary-hovered-end: var(--color-transparent-white-5);
  --cc-bg-color: linear-gradient(180deg, var(--cc-button-secondary-enabled-start) 0%, var(--cc-button-secondary-enabled-end) 100%);
  --cc-bg-color-hover: linear-gradient(180deg, var(--cc-button-secondary-hovered-start) 0%, var(--cc-button-secondary-hovered-end) 100%), linear-gradient(180deg, var(--color-transparent-white-5) 0%, transparent 100%);
  --cc-bg-color-active: linear-gradient(180deg, var(--color-transparent-white-14) 0%, var(--color-transparent-white-2) 100%);
  --cc-bg-color-focus: var(--cc-bg-color);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 var(--color-transparent-white-8),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 var(--color-transparent-white-14),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-active:
  	inset 0 -.1rem 0 0 var(--color-transparent-white-10),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-focus:
  	inset 0 0 0 .3rem var(--color-blue-300),
  	inset 0 .1rem 0 0 var(--color-transparent-white-8),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --textColor: var(--color-transparent-white-85);
  --textColorHover: var(--color-neutrals-white);
  --textColorActive: var(--color-transparent-white-85);
  --iconColor: var(--color-transparent-white-72);
  --iconColorHover: var(--color-transparent-white-85);
  --iconColorActive: var(--color-transparent-white-72);
  --buttonTextShadow: var(--color-transparent-black-20);
  --focusBorderColor: var(--color-neutrals-white);
  backdrop-filter: blur(var(--blur-glass));
}

.g-button-xxlarge.variant-secondary {
  --buttonTextShadow: var(--color-transparent-black-30);
}

/* Secondary Danger */
/* This duplicate section was causing issues - removing it */
/* Danger */
.g-button.variant-danger {
  --cc-bg-color: linear-gradient(180deg, var(--color-red-300) 0%, var(--color-red-400) 100%);
  --cc-bg-color-hover:
  	linear-gradient(180deg, color-mix(in srgb, var(--color-red-100), transparent 50%) 0%, transparent 100%),
  	linear-gradient(180deg, var(--color-red-300) 0%, var(--color-red-500) 100%);
  --cc-bg-color-active: linear-gradient(180deg, var(--color-red-300) 0%, var(--color-red-500) 100%);
  --cc-bg-color-focus: var(--cc-bg-color-hover);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-red-75), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-red-500),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-red-600), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-red-100), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 var(--color-red-100),
  	inset 0 -.1rem 0 0 color-mix(in srgb, var(--color-red-700), transparent 50%),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-red-500), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-red-100), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-active:
  	inset 0 -.1rem 0 0 color-mix(in srgb, var(--color-red-300), transparent 60%),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-red-300), transparent 50%),
  	inset 0 -.1rem 0 0 var(--color-red-600),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-red-600), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-focus:
  	inset 0 0 0 .3rem var(--color-blue-400),
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-red-75), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-red-500),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-red-600), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-red-100), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --textColorActive: var(--color-red-50);
  --iconColorActive: var(--textColorActive);
  --focusBorderColor: var(--color-neutrals-white);
}

/* Ghost */
.g-button.variant-ghost {
  --cc-bg-color: transparent;
  --cc-bg-color-hover: transparent;
  --cc-bg-color-active: var(--color-transparent-white-10);
  --cc-bg-color-focus: transparent;
  --cc-bg-box-shadow: none;
  --cc-bg-box-shadow-hover: none;
  --cc-bg-box-shadow-active: none;
  --cc-bg-box-shadow-focus: inset 0 0 0 .3rem var(--color-blue-400);
  --textColor: var(--color-text-default);
  --textColorHover: var(--color-text-default-hovered);
  --textColorActive: var(--color-text-default);
  --iconColor: var(--color-icon-default);
  --iconColorHover: var(--color-icon-default-hovered);
  --iconColorActive: var(--color-icon-default);
  --buttonTextShadow: none;
  --focusBorderColor: transparent;
}

/* Ghost Link */
.g-button.variant-ghost-link {
  --cc-bg-color: transparent;
  --cc-bg-color-hover: transparent;
  --cc-bg-color-active: var(--color-transparent-white-5);
  --cc-bg-color-focus: transparent;
  --cc-bg-box-shadow: none;
  --cc-bg-box-shadow-hover: none;
  --cc-bg-box-shadow-active: none;
  --cc-bg-box-shadow-focus: inset 0 0 0 .3rem var(--color-blue-400);
  --textColor: var(--color-text-link);
  --textColorHover: var(--color-text-link-hovered);
  --textColorActive: var(--color-text-link);
  --iconColorActive: var(--textColorActive);
  --buttonTextShadow: none;
  --focusBorderColor: transparent;
}

/* Secondary Danger */
.g-button.variant-secondary-danger {
  --cc-button-secondary-enabled-start: var(--color-transparent-white-10);
  --cc-button-secondary-enabled-end: var(--color-transparent-white-5);
  --cc-button-secondary-hovered-start: var(--color-transparent-white-14);
  --cc-button-secondary-hovered-end: var(--color-transparent-white-5);
  --cc-bg-color: linear-gradient(180deg, var(--cc-button-secondary-enabled-start) 0%, var(--cc-button-secondary-enabled-end) 100%);
  --cc-bg-color-hover: linear-gradient(180deg, var(--cc-button-secondary-hovered-start) 0%, var(--cc-button-secondary-hovered-end) 100%), linear-gradient(180deg, var(--color-transparent-white-5) 0%, transparent 100%);
  --cc-bg-color-active: linear-gradient(180deg, var(--color-transparent-white-14) 0%, var(--color-transparent-white-2) 100%);
  --cc-bg-color-focus: var(--cc-bg-color);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 var(--color-transparent-white-8),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 var(--color-transparent-white-14),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-active:
  	inset 0 -.1rem 0 0 var(--color-transparent-white-10),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-focus:
  	inset 0 0 0 .3rem var(--color-blue-300),
  	inset 0 .1rem 0 0 var(--color-transparent-white-8),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --textColor: var(--color-red-300);
  --textColorHover: var(--color-red-300);
  --textColorActive: var(--color-red-400);
  --iconColor: var(--color-red-300);
  --iconColorHover: var(--color-red-300);
  --iconColorActive: var(--color-red-400);
  --buttonTextShadow: var(--color-transparent-black-20);
  --focusBorderColor: var(--color-neutrals-white);
  backdrop-filter: blur(var(--blur-glass));
}

/* Monetization */
.g-button.variant-monetization {
  --cc-bg-color: linear-gradient(180deg, var(--color-blue-200) 0%, var(--color-blue-300) 65%, var(--color-blue-400) 100%);
  --cc-bg-color-hover: linear-gradient(180deg, color-mix(in srgb, var(--color-blue-75), transparent 75%) 0%, color-mix(in srgb, var(--color-blue-75), transparent 100%) 100%), linear-gradient(180deg, var(--color-blue-200) 0%, var(--color-blue-300) 65%, var(--color-blue-400) 100%);
  --cc-bg-color-active: linear-gradient(180deg, var(--color-blue-300) 0%, var(--color-blue-500) 100%);
  --cc-bg-color-focus: var(--cc-bg-color-hover);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-blue-200), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-blue-500),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-blue-500), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-blue-200), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-blue-50), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-blue-600),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-blue-600), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-blue-25), transparent 75%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-active:
  	inset 0 -.1rem 0 0 color-mix(in srgb, var(--color-blue-300), transparent 60%),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-blue-300), transparent 50%),
  	inset 0 -.1rem 0 0 var(--color-blue-600),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-blue-700), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-focus:
  	inset 0 0 0 .3rem var(--color-blue-400),
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-blue-200), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-blue-500),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-blue-500), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-blue-200), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --textColorActive: var(--color-blue-50);
  --iconColorActive: var(--textColorActive);
  --focusBorderColor: var(--color-neutrals-white);
}

/* Streaming */
.g-button.variant-streaming {
  --cc-bg-color: linear-gradient(180deg, var(--color-purple-300) 0%, var(--color-purple-400) 100%);
  --cc-bg-color-hover:
  	linear-gradient(180deg, color-mix(in srgb, var(--color-purple-100), transparent 50%) 0%, transparent 100%),
  	linear-gradient(180deg, var(--color-purple-300) 0%, var(--color-purple-400) 100%);
  --cc-bg-color-active: linear-gradient(180deg, var(--color-purple-300) 0%, var(--color-purple-500) 100%);
  --cc-bg-color-focus: var(--cc-bg-color-hover);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-purple-100), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-purple-500),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-purple-500), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-purple-200), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-purple-50), transparent 50%),
  	inset 0 -.1rem 0 0 color-mix(in srgb, var(--color-purple-500), transparent 50%),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-purple-500), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-purple-100), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-active:
  	inset 0 -.1rem 0 0 color-mix(in srgb, var(--color-purple-300), transparent 60%),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-purple-300), transparent 50%),
  	inset 0 -.1rem 0 0 var(--color-purple-600),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-purple-600), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-focus:
  	inset 0 0 0 .3rem var(--color-blue-400),
  	inset 0 .1rem 0 0 color-mix(in srgb, var(--color-purple-100), transparent 60%),
  	inset 0 -.1rem 0 0 var(--color-purple-500),
  	inset 0 -.2rem .4rem 0 color-mix(in srgb, var(--color-purple-500), transparent 50%),
  	inset 0 .2rem .4rem 0 color-mix(in srgb, var(--color-purple-200), transparent 50%),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --textColorActive: var(--color-purple-50);
  --iconColorActive: var(--textColorActive);
  --focusBorderColor: var(--color-neutrals-white);
}

/* Bot Chat */
.g-button.variant-bot-chat {
  --cc-bg-color: linear-gradient(180deg, var(--color-transparent-black-5) 0%, var(--color-transparent-black-14) 100%);
  --cc-bg-color-hover: linear-gradient(180deg, var(--color-transparent-black-2) 0%, var(--color-transparent-black-10) 100%);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 var(--color-transparent-white-8),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 var(--color-transparent-white-14),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --buttonTextShadow: none;
  --iconColor: var(--color-gray-700);
  --iconColorHover: var(--color-gray-600);
  --maxWidth: max-content;
  --textColor: var(--color-text-speech);
  --textColorHover: var(--color-gray-600);
}

/* White */
.g-button.variant-white {
  --cc-bg-color: linear-gradient(180deg, var(--color-neutrals-white) 0%, var(--color-transparent-white-85) 100%);
  --cc-bg-color-hover: linear-gradient(180deg, var(--color-neutrals-white) 0%, var(--color-transparent-white-95) 100%);
  --cc-bg-color-active: linear-gradient(180deg, var(--color-transparent-white-95) 0%, var(--color-transparent-white-72) 100%);
  --cc-bg-color-focus: var(--cc-bg-color);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 var(--color-transparent-white-25),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 var(--color-neutrals-white),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-active:
  	inset 0 -.1rem 0 0 var(--color-transparent-white-40),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-focus:
  	inset 0 0 0 .3rem var(--color-blue-300),
  	inset 0 .1rem 0 0 var(--color-transparent-white-25),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --buttonTextShadow: none;
  --textColor: var(--color-gray-800);
  --textColorHover: var(--color-gray-800);
  --textColorActive: var(--color-gray-800);
  --iconColor: var(--color-gray-800);
  --iconColorHover: var(--color-gray-800);
  --iconColorActive: var(--color-gray-800);
  --focusBorderColor: var(--color-neutrals-white);
  backdrop-filter: blur(var(--blur-glass));
}

/* ========================================================================
	BUTTON STATES AND MODIFIERS
	======================================================================== */
/* Disabled Link */
a.disabled {
  pointer-events: none;
}

/* Loading State */
.g-button.is-loading:disabled,
.g-button.is-loading {
  background-color: color-mix(in srgb, var(--cc-bg-color) 75%, transparent);
  cursor: wait;
  opacity: 1;
  position: relative;
}
.g-button.is-loading:disabled > *:not(.loader),
.g-button.is-loading > *:not(.loader) {
  visibility: hidden;
}

.g-button.is-loading::after {
  animation: rotate 1s linear infinite;
  border: var(--border-m) solid var(--color-transparent-white-20); /* Note: core doesn't have -20, using closest */
  border-radius: 50%;
  border-top-color: var(--color-transparent-white-85); /* Note: core doesn't have -80, using closest -85 */
  content: "";
  height: 1.6rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.6rem;
}

.loader {
  place-self: center;
  position: absolute;
}

/* Disabled State (for explicit is-disabled class) */
.g-button.is-disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* Button full width */
.g-button.w-full {
  width: 100%;
}

/* Button wide padding - Doubles horizontal padding for more spacious appearance */
.g-button.wide {
  --buttonPaddings: var(--space-4) calc(var(--space-16) * 2);
}

.g-button.size-l.wide {
  --buttonPaddings: var(--space-4) calc(var(--space-16) * 2);
}

.g-button.size-s.wide {
  --buttonPaddings: var(--space-2) calc(var(--space-16) * 2);
}

.g-button.size-xs.wide {
  --buttonPaddings: .2rem calc(1.2rem * 2);
}

.g-button.size-xl.wide {
  --buttonPaddings: var(--space-4) calc(var(--space-16) * 2);
}

.g-button.size-xxl.wide {
  --buttonPaddings: var(--space-8) calc(var(--space-16) * 2);
}

/* Button min width */
.g-button.min-width {
  min-width: 12rem;
}

/* Icon only modifier - Makes button square with icon only */
.g-button:not(.w-full).icon-only {
  width: var(--buttonHeight);
  padding: 0;
  justify-content: center;
  align-items: center;
}
.g-button:not(.w-full).icon-only .button-icon,
.g-button:not(.w-full).icon-only .g-glyph {
  margin: 0;
}
.g-button:not(.w-full).icon-only .g-button-text {
  display: none;
}

/* ========================================================================
	ANIMATIONS
	======================================================================== */
@keyframes rotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* Icon within button */
.g-button .button-icon,
.g-button .g-glyph {
  color: var(--iconColor);
  filter: drop-shadow(0 0.1rem 0 var(--buttonTextShadow));
  text-shadow: none;
}

/* Custom image within button */
.g-button .custom-img {
  -o-object-fit: cover;
  object-fit: cover;
}

/* Column gap is defined by size only, not justification */
/* ========================================================================
	HOVER STATES
	======================================================================== */
@media (hover: hover) {
  .border:not([disabled]):hover {
    border-color: var(--borderColorHover);
  }
}
/* ========================================================================
	DISABLED STATE
	======================================================================== */
/* Disabled state is handled in base styles with nesting */
@keyframes rotate {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/**
 * ▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▄▄▄▖▗▖ ▗▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖  ▗▖
 * ▐▌   ▐▌   ▐▌ ▐▌  █  ▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌  █    █  ▐▌ ▐▌▐▛▚▖▐▌
 * ▐▛▀▀▘▐▛▀▀▘▐▛▀▜▌  █  ▐▌ ▐▌▐▛▀▚▖▐▛▀▀▘▐▛▀▚▖▐▌ ▐▌  █    █  ▐▌ ▐▌▐▌ ▝▜▌
 * ▐▌   ▐▙▄▄▖▐▌ ▐▌  █  ▝▚▄▞▘▐▌ ▐▌▐▙▄▄▖▐▙▄▞▘▝▚▄▞▘  █    █  ▝▚▄▞▘▐▌  ▐▌
 *
 * Gambit CSS Framework - Feature Button Component
 * Large buttons with icons and descriptive text
 */
/* ========================================================================
	FEATURE BUTTON COMPONENT
	======================================================================== */
/*
 * Feature Button Naming Convention:
 * .g-feature-button.size-{m|l}
 *
 * Sizes: size-m (medium), size-l (large)
 *
 * Usage Examples:
 * - .g-feature-button.size-m
 * - .g-feature-button.size-l
 *
 * Structure:
 * <button class="feature-button size-l">
 *   <span class="button-icon color-icon">
 *     <svg>...</svg>
 *   </span>
 *   <div class="button-text">
 *     <span class="button-label">Feature Title</span>
 *     <span class="button-sublabel">Play vs a person of similar skill</span>
 *   </div>
 * </button>
 *
 * Note: Add the "color-icon" modifier class when using multi-color SVG icons
 * to preserve their original colors
 */
/* ========================================================================
	BASE FEATURE BUTTON STYLES
	======================================================================== */
.g-feature-button {
  --borderRadius: 1rem; /* 10px from Figma */
  --columnGap: 1.6rem; /* 16px gap */
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  backdrop-filter: blur(var(--blur-glass));
  border: 0;
  border-radius: var(--borderRadius);
  box-shadow: 0px 0.1rem 0.2rem rgba(0, 0, 0, 0.14), 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.1), inset 0px 0.1rem 0px rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: var(--columnGap);
  padding: var(--padding);
  text-align: left;
  text-decoration: none;
  transition: all var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: all var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 100%;
}

/* Size Modifiers */
.g-feature-button.size-m {
  --padding: 1.6rem; /* 16px */
  --iconSize: 4rem; /* 32px */
  min-height: 7.2rem;
  width: 28rem; /* Slightly smaller than large */
}

.g-feature-button.size-l {
  --padding: 2.4rem; /* 24px from Figma */
  --iconSize: 4.8rem; /* 40px from Figma */
  height: 9.6rem; /* 96px from Figma */
  width: 36rem; /* 360px from Figma */
}

/* ========================================================================
	CHILD ELEMENT STYLES
	======================================================================== */
/* Icon Styling */
.g-feature-button .button-icon {
  align-items: center;
  display: flex;
  flex: none;
  height: var(--iconSize);
  justify-content: center;
  width: var(--iconSize);
}

.g-feature-button .button-icon svg {
  height: 100%;
  width: 100%;
}

/* Text Container */
.g-feature-button .button-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  justify-content: center;
  min-width: 0; /* Allow text truncation */
}

/* Label Styling */
.g-feature-button .button-label {
  color: #FFFFFF;
  color: var(--color-text-boldest);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Medium size label typography */
.g-feature-button.size-m .button-label {
  font-size: 1.8rem; /* 18px */
  font-weight: 700;
  line-height: 2.4rem; /* ~133% */
}

/* Large size label typography - from Figma */
.g-feature-button.size-l .button-label {
  font-size: 2.2rem; /* 22px from Figma */
  font-weight: 700;
  line-height: 2.8rem; /* 28px from Figma - 127% */
}

/* Sub-label Styling */
.g-feature-button .button-sublabel {
  color: rgba(255, 255, 255, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.2rem;
}

/* Medium size sub-label typography */
.g-feature-button.size-m .button-sublabel {
  font-size: 1.2rem; /* 12px */
  line-height: 1.8rem; /* 150% */
}

/* Large size sub-label typography - from Figma */
.g-feature-button.size-l .button-sublabel {
  font-size: 1.4rem; /* 14px from Figma */
  line-height: 2rem; /* 20px from Figma - 143% */
}

/* ========================================================================
	HOVER STATE
	======================================================================== */
@media (hover: hover) {
  .g-feature-button:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0px 0.1rem 0.2rem rgba(0, 0, 0, 0.16), 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.12), inset 0px 0.1rem 0px rgba(255, 255, 255, 0.1);
  }
}
/* ========================================================================
	ACTIVE STATE
	======================================================================== */
.g-feature-button:active:not(:disabled) {
  opacity: var(--opacity-pressed);
}

/* ========================================================================
	DISABLED STATE
	======================================================================== */
.g-feature-button:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/**
 * ▗▄▄▄ ▗▄▄▖  ▗▄▖ ▗▄▄▖ ▗▄▄▄  ▗▄▖ ▗▖ ▗▖▗▖  ▗▖ ▗▄▄▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖  ▗▖
 * ▐▌  █▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌  █▐▌ ▐▌▐▌ ▐▌▐▛▚▖▐▌ ▐▌ ▐▌▐▌ ▐▌  █    █  ▐▌ ▐▌▐▛▚▖▐▌
 * ▐▌  █▐▛▀▚▖▐▌ ▐▌▐▛▀▘ ▐▌  █▐▌ ▐▌▐▌ ▐▌▐▌ ▝▜▌ ▐▛▀▚▖▐▌ ▐▌  █    █  ▐▌ ▐▌▐▌ ▝▜▌
 * ▐▙▄▄▀▐▌ ▐▌▝▚▄▞▘▐▌   ▐▙▄▄▀▝▚▄▞▘▐▙█▟▌▐▌  ▐▌ ▐▙▄▞▘▝▚▄▞▘  █    █  ▝▚▄▞▘▐▌  ▐▌
 *
 * Gambit CSS Framework - Dropdown Button Component
 * Buttons with labels and chevron indicators for dropdowns
 */
/* ========================================================================
	DROPDOWN BUTTON COMPONENT
	======================================================================== */
/*
 * Dropdown Button Naming Convention:
 * .dropdown-button-{size}-{variant}
 *
 * Sizes: small, medium, large, xlarge, xxlarge
 * Variants: secondary, ghost
 *
 * Usage Examples:
 * - .dropdown-button-medium-secondary
 * - .dropdown-button-large-ghost
 *
 * Additional modifiers:
 * - .full (full width)
 * - .align-start (left-aligned text)
 * - .direction-up (upward chevron)
 */
/* ========================================================================
	BASE DROPDOWN BUTTON STYLES
	======================================================================== */
.g-dropdown-button {
  --columnGap: var(--space-16);
  --fontFamily: inherit;
  --textColor: var(--color-neutrals-white);
  --textColorHover: var(--color-neutrals-white);
  --iconColor: var(--textColor);
  --iconColorHover: var(--textColorHover);
  align-items: center;
  background: var(--cc-bg-color);
  border: 0;
  border-radius: 0.5rem;
  border-radius: var(--borderRadius, var(--radius-l));
  box-shadow: var(--cc-bg-box-shadow);
  color: #FFFFFF;
  color: var(--textColor);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-family: var(--fontFamily);
  font-size: var(--fontSize);
  font-weight: 600;
  font-weight: var(--fontWeight, 600);
  gap: var(--columnGap);
  justify-content: space-between;
  line-height: 1.1428;
  min-height: var(--buttonHeight);
  outline: none;
  padding: var(--buttonPaddings);
  position: relative;
  text-align: left;
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1), box-shadow var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out-1), box-shadow var(--motion-duration-fast) var(--motion-ease-out-1);
  width: auto;
}

/* ========================================================================
	SIZE MODIFIERS
	======================================================================== */
.g-dropdown-button.size-s {
  --buttonHeight: 3.2rem;
  --buttonPaddings: var(--space-8) var(--space-8) var(--space-8) var(--space-12);
  --columnGap: var(--space-12);
  --fontSize: 1.4rem;
  --iconSize: 1.6rem;
  --chevronSize: 1.2rem;
}

.g-dropdown-button.size-m {
  --buttonHeight: 4rem;
  --buttonPaddings: var(--space-16) var(--space-12) var(--space-16) var(--space-16);
  --columnGap: var(--space-12);
  --fontSize: 1.4rem;
  --iconSize: 2rem;
  --chevronSize: 1.2rem;
}

.g-dropdown-button.size-l {
  --buttonHeight: 4.8rem;
  --buttonPaddings: var(--space-12) var(--space-12) var(--space-12) var(--space-16);
  --fontSize: 1.7rem;
  --iconSize: 2.4rem;
  --chevronSize: 1.6rem;
}

.g-dropdown-button.size-xl {
  --buttonHeight: 5.6rem;
  --buttonPaddings: var(--space-24) var(--space-12) var(--space-24) var(--space-24);
  --fontSize: 2.2rem;
  --fontWeight: 800;
  --fontFamily: var(--font-family-heading);
  --borderRadius: var(--radius-xl);
  --iconSize: 2.4rem;
  --chevronSize: 1.6rem;
}

.g-dropdown-button.size-xxl {
  --buttonHeight: 6.4rem;
  --buttonPaddings: var(--space-24) var(--space-12) var(--space-24) var(--space-24);
  --fontSize: 2.2rem;
  --fontWeight: 800;
  --fontFamily: var(--font-family-heading);
  --borderRadius: var(--radius-xl);
  --iconSize: 3.2rem;
  --chevronSize: 1.6rem;
}

/* ========================================================================
	VARIANT STYLES
	======================================================================== */
/* Select Variant (Default) */
.g-dropdown-button.variant-select {
  --cc-button-secondary-enabled-start: var(--color-transparent-white-10);
  --cc-button-secondary-enabled-end: var(--color-transparent-white-5);
  --cc-button-secondary-hovered-start: var(--color-transparent-white-14);
  --cc-button-secondary-hovered-end: var(--color-transparent-white-5);
  --cc-bg-color: linear-gradient(180deg, var(--cc-button-secondary-enabled-start) 0%, var(--cc-button-secondary-enabled-end) 100%);
  --cc-bg-color-hover: linear-gradient(180deg, var(--cc-button-secondary-hovered-start) 0%, var(--cc-button-secondary-hovered-end) 100%), linear-gradient(180deg, var(--color-transparent-white-5) 0%, rgba(255, 255, 255, 0.00) 100%);
  --cc-bg-box-shadow:
  	inset 0 .1rem 0 0 var(--color-transparent-white-8),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --cc-bg-box-shadow-hover:
  	inset 0 .1rem 0 0 var(--color-transparent-white-14),
  	0 .1rem .2rem 0 var(--color-transparent-black-14),
  	0 .2rem .4rem 0 var(--color-transparent-black-10);
  --textColor: var(--color-text-bolder);
  --textColorHover: var(--color-text-boldest);
  --buttonTextShadow: var(--color-transparent-black-10);
}

/* Ghost Variant */
.g-dropdown-button.variant-ghost {
  --cc-bg-color: transparent;
  --cc-bg-color-hover: var(--color-bg-subtle);
  --cc-bg-box-shadow: none;
  --cc-bg-box-shadow-hover: none;
  --textColor: var(--color-text-boldest);
  --textColorHover: var(--color-text-boldest);
  --iconColor: var(--color-icon-default);
  --iconColorHover: var(--color-icon-default-hovered);
}

/* ========================================================================
	LAYOUT COMPONENTS
	======================================================================== */
/* Dropdown field wrapper */
.g-dropdown-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Field label */
.g-dropdown-field .g-dropdown-label {
  color: var(--color-text-default);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.14;
}

/* Button text */
.g-dropdown-button .button-text {
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icon */
.g-dropdown-button .button-icon,
.g-dropdown-button .g-glyph {
  color: var(--iconColor);
  display: flex;
  height: var(--iconSize);
  width: var(--iconSize);
}
.g-dropdown-button .button-icon svg,
.g-dropdown-button .g-glyph svg {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

/* Chevron - using g-glyph with specific styling */
.g-dropdown-button .g-glyph:last-child {
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex: none;
  height: var(--chevronSize);
  margin-left: auto;
  transition: transform var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: transform var(--motion-duration-fast) var(--motion-ease-out-1);
  width: var(--chevronSize);
}
.g-dropdown-button .g-glyph:last-child svg {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

/* ========================================================================
	MODIFIER CLASSES
	======================================================================== */
/* Full width */
.g-dropdown-button.full {
  width: 100%;
}

/* Alignment */
.g-dropdown-button.justify-start {
  justify-content: flex-start;
  text-align: left;
}

.g-dropdown-button.justify-center {
  justify-content: center;
  text-align: center;
}

/* Direction */
.g-dropdown-button.direction-up .g-glyph:last-child {
  transform: rotate(180deg);
}

/* ========================================================================
	HOVER STATE
	======================================================================== */
@media (hover: hover) {
  .g-dropdown-button:hover:not(:disabled) {
    background: var(--cc-bg-color-hover);
    box-shadow: var(--cc-bg-box-shadow-hover);
    color: var(--textColorHover);
  }
  .g-dropdown-button:hover:not(:disabled) .g-glyph {
    color: var(--iconColorHover);
  }
}
/* ========================================================================
	ACTIVE STATE
	======================================================================== */
.g-dropdown-button:active:not(:disabled) {
  opacity: var(--opacity-pressed);
}

/* ========================================================================
	DISABLED STATE
	======================================================================== */
.g-dropdown-button:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* ========================================================================
	EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
	======================================================================== */
/* Explicit declarations removed as we're using modular classes now */
/* Example usage: class="dropdown-button size-m variant-secondary" */
/**
 *  ▗▄▄▖▗▖    ▗▄▖  ▗▄▄▖▗▄▄▄▖▗▄▄▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖  ▗▖
 * ▐▌   ▐▌   ▐▌ ▐▌▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌  █    █  ▐▌ ▐▌▐▛▚▖▐▌
 * ▐▌   ▐▌   ▐▌ ▐▌ ▝▀▚▖▐▛▀▀▘▐▛▀▚▖▐▌ ▐▌  █    █  ▐▌ ▐▌▐▌ ▝▜▌
 * ▝▚▄▄▖▐▙▄▄▖▝▚▄▞▘▗▄▄▞▘▐▙▄▄▖▐▙▄▞▘▝▚▄▞▘  █    █  ▝▚▄▞▘▐▌  ▐▌
 *
 * Gambit CSS Framework - Close Button Component
 * Minimal icon-only buttons for closing dialogs and dismissing content
 */
/* ========================================================================
	CLOSE BUTTON COMPONENT
	======================================================================== */
/*
 * Close Button Naming Convention:
 * .g-close-button.size-{m|l}.{subtle|default|white}
 *
 * Sizes: m (medium), l (large)
 * Variants: subtle, default, white
 *
 * Usage Examples:
 * - .g-close-button.size-m.subtle
 * - .g-close-button.size-l.default
 * - .g-close-button.size-l.white
 *
 * Structure for white variant:
 * <button class="g-close-button size-l white">
 *   <span class="g-close-button-bg"></span>
 *   <svg>...</svg>
 * </button>
 */
/* ========================================================================
	BASE CLOSE BUTTON STYLES
	======================================================================== */
.g-close-button {
  --iconColor: var(--color-icon-default);
  --iconColorHover: var(--color-icon-default-hovered);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  height: var(--size);
  outline: none;
  padding: 0;
  place-items: center;
  position: relative;
  transition: color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: var(--size);
}

/* Size Modifiers */
.g-close-button.size-m {
  --size: 4rem;
  --iconSize: 1.6rem;
}

.g-close-button.size-l {
  --size: 4.8rem;
  --iconSize: 1.6rem;
}

/* ========================================================================
	VARIANT STYLES
	======================================================================== */
/* Subtle Variant */
.g-close-button.subtle {
  --iconColor: var(--color-icon-subtle);
  --iconColorHover: var(--color-icon-default);
}

/* Default Variant */
.g-close-button.default {
  --iconColor: var(--color-icon-default);
  --iconColorHover: var(--color-icon-default-hovered);
}

/* White Variant */
.g-close-button.white {
  --iconColor: var(--color-gray-500);
  --iconColorHover: var(--color-gray-600);
}

/* ========================================================================
	ICON STYLING
	======================================================================== */
.g-close-button svg {
  color: var(--iconColor);
  grid-area: 1/1;
  height: var(--iconSize);
  transition: color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: var(--iconSize);
  z-index: var(--z-index-base);
}

/* ========================================================================
	WHITE VARIANT BACKGROUND
	======================================================================== */
.g-close-button-bg {
  background: #FFFFFF;
  background: var(--color-neutrals-white);
  border-radius: 50%;
  border-radius: var(--radius-circular);
  grid-area: 1/1;
  height: 2.4rem;
  width: 2.4rem;
}

/* ========================================================================
	HOVER STATE
	======================================================================== */
@media (hover: hover) {
  .g-close-button:hover:not(:disabled) svg {
    color: var(--iconColorHover);
  }
}
/* ========================================================================
	ACTIVE STATE
	======================================================================== */
.g-close-button:active:not(:disabled) {
  opacity: var(--opacity-pressed);
}

/* ========================================================================
	DISABLED STATE
	======================================================================== */
.g-close-button:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* ========================================================================
	EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
	======================================================================== */
.g-close-button.size-m.subtle,
.g-close-button.size-m.default,
.g-close-button.size-m.white,
.g-close-button.size-l.subtle,
.g-close-button.size-l.default,
.g-close-button.size-l.white {
  /* Explicit declarations for IDE autocomplete */
} /* End .gambit-framework */
/**
 * ▗▄▄▄▖ ▗▄▖ ▗▄▄▖ ▗▖  ▗▖ ▗▄▄▖
 * ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▛▚▞▜▌▐▌   
 * ▐▛▀▀▘▐▌ ▐▌▐▛▀▚▖▐▌  ▐▌ ▝▀▚▖
 * ▐▌   ▝▚▄▞▘▐▌ ▐▌▐▌  ▐▌▗▄▄▞▘
 *
 * Gambit CSS Framework - Form Components
 * Input, textarea, select, checkbox, radio, and switch components
 */
/* ========================================================================
   INPUT COMPONENT
   ======================================================================== */
/*
 * Input Naming Convention:
 * .g-input.size-{s|m|l|xl}.variant-{primary|secondary|error}
 * 
 * Sizes: small, medium, large, xlarge
 * Variants: default, error, warning
 * 
 * Usage Examples:
 * - .g-input.size-m
 * - .g-input.size-l.error
 * - .g-input.size-s.warning
 * 
 * Additional modifiers can be chained:
 * - .g-input.size-m:disabled
 * - .g-input.size-l.error:read-only
 * - .g-input.size-s.spin-buttons (for number inputs)
 */
/* ========================================================================
   BASE INPUT STYLES
   ======================================================================== */
.g-input {
  --inputHeight: 4rem;
  --borderColor: var(--color-border-default);
  --borderFocus: var(--color-border-default-hovered);
  --borderRadius: var(--radius-l);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg-input);
  border: var(--border-s) solid rgba(255, 255, 255, 0.1);
  border: var(--border-s) solid var(--borderColor);
  border-radius: 0.5rem;
  border-radius: var(--borderRadius);
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
  font-family: var(--font-family-system);
  font-size: 1.4rem;
  font-size: var(--textSize, 1.4rem);
  height: 4rem;
  height: var(--inputHeight);
  line-height: 1;
  padding: 0.8rem 1.6rem;
  padding: var(--inputPadding, var(--space-8) var(--space-16));
  position: relative;
  width: 100%;
  /* Prevent default ":invalid" styles for Mozilla browser */
  /* Clears the 'X' from Chrome */
  /* Autofill styles for Safari and Chrome */
}
.g-input::-webkit-contacts-auto-fill-button {
  background-color: rgba(255, 255, 255, 0.85);
  background-color: var(--color-transparent-white-85);
  color: rgba(255, 255, 255, 0.85);
  color: var(--color-transparent-white-85);
}
.g-input:hover:not(:disabled), .g-input:focus:not(:disabled) {
  border-color: var(--borderFocus);
}
.g-input:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}
.g-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
  color: var(--color-text-placeholder);
  opacity: 1; /* for Mozilla browser */
}
.g-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  color: var(--color-text-placeholder);
  opacity: 1; /* for Mozilla browser */
}
.g-input:-moz-read-only {
  cursor: default;
}
.g-input:read-only {
  cursor: default;
}
.g-input:invalid {
  box-shadow: none;
}
.g-input[type=search]::-webkit-search-decoration, .g-input[type=search]::-webkit-search-cancel-button, .g-input[type=search]::-webkit-search-results-button, .g-input[type=search]::-webkit-search-results-decoration {
  display: none;
}
.g-input:-webkit-autofill, .g-input:autofill {
  -webkit-box-shadow: 0 0 0 100rem transparent inset;
  caret-color: rgba(255, 255, 255, 0.65);
  caret-color: var(--color-transparent-white-65);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.65);
  -webkit-text-fill-color: var(--color-transparent-white-65);
  -webkit-transition: background-color 50000s ease-in-out 0s;
  transition: background-color 50000s ease-in-out 0s;
}

/* ========================================================================
   SIZE MODIFIERS
   ======================================================================== */
.g-input.size-s {
  --inputHeight: 3.2rem;
  --inputPadding: var(--space-8) var(--space-12);
  --textSize: 1.4rem;
}

.g-input.size-m {
  --inputHeight: 4rem;
  --inputPadding: var(--space-8) var(--space-16);
  --textSize: 1.4rem;
}

.g-input.size-l {
  --borderRadius: var(--radius-xl);
  --inputHeight: 4.8rem;
  --inputPadding: var(--space-12) var(--space-16);
  --textSize: 1.6rem;
}

.g-input.size-xl {
  --borderRadius: var(--radius-xl);
  --inputHeight: 5.6rem;
  --inputPadding: var(--space-12) var(--space-16);
  --textSize: 1.8rem;
}

/* ========================================================================
   VARIANT MODIFIERS
   ======================================================================== */
/* Default variant (no special styling needed as base styles handle it) */
.default {
  /* Inherits all base styles */
}

/* Error variant */
.error {
  --borderColor: var(--color-border-danger) !important;
  --borderFocus: var(--color-border-danger) !important;
}

/* Warning variant */
.warning {
  --borderColor: var(--color-border-warning) !important;
  --borderFocus: var(--color-border-warning) !important;
}

/* ========================================================================
   SPECIFIC INPUT CLASSES (for explicit usage)
   ======================================================================== */
/* Small Inputs */
.g-input.size-s,
.g-input.size-s.error,
.g-input.size-s.warning,
.g-input.size-m,
.g-input.size-m.error,
.g-input.size-m.warning,
.g-input.size-l,
.g-input.size-l.error,
.g-input.size-l.warning,
.g-input.size-xl,
.g-input.size-xl.error,
.g-input.size-xl.warning {
  /* All styles are inherited from attribute selectors above */
}

/* ========================================================================
   INPUT TYPE MODIFIERS
   ======================================================================== */
/* Number input with spin buttons */
.g-input[type=number].spin-buttons {
  -moz-appearance: auto !important;
}
.g-input[type=number].spin-buttons::-webkit-outer-spin-button, .g-input[type=number].spin-buttons::-webkit-inner-spin-button {
  -webkit-appearance: auto;
  opacity: var(--opacity-disabled);
}

/* ========================================================================
   TEXTAREA COMPONENT
   ======================================================================== */
/*
 * Textarea Naming Convention:
 * .g-textarea
 * .g-textarea-{size}
 * .g-textarea-{state}
 *
 * Sizes: small, large, xlarge
 * States: error, autosize
 *
 * Usage Examples:
 * - .g-textarea (default, resizable)
 * - .g-textarea.g-textarea.size-s
 * - .g-textarea.g-textarea.size-l
 * - .g-textarea.g-textarea.error
 * - .g-textarea.g-textarea.autosize
 *
 * Modifiers can be combined:
 * - .g-textarea.g-textarea.size-l.g-textarea.error
 */
/* ========================================================================
   BASE TEXTAREA STYLES
   ======================================================================== */
.g-textarea {
  background: rgba(255, 255, 255, 0.08);
  background: var(--color-bg-input);
  border: var(--border-s) solid rgba(255, 255, 255, 0.1);
  border: var(--border-s) solid var(--color-border-default);
  border-radius: 0.3rem;
  border-radius: var(--radius-m);
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
  font-family: var(--font-family-system);
  font-size: 1.6rem;
  line-height: 1.25;
  min-height: 3.2rem;
  outline: none;
  padding: 0.5rem 0.8rem;
  resize: vertical;
  transition: border-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 100%;
}

/* Desktop font size */
@media (min-width: 640px) { /* Media queries typically stay as px */
  .g-textarea {
    font-size: 1.4rem;
  }
}
/* ========================================================================
   SIZE MODIFIERS
   ======================================================================== */
.g-textarea.size-s {
  height: 4.8rem;
  resize: none;
}

.g-textarea.size-l {
  height: 10rem;
  resize: none;
}

.g-textarea.size-xl {
  height: 20rem;
  resize: none;
}

/* ========================================================================
   PLACEHOLDER STYLING
   ======================================================================== */
.g-textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4);
  color: var(--color-text-placeholder);
  opacity: 1;
}

.g-textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
  color: var(--color-text-placeholder);
  opacity: 1;
}

/* ========================================================================
   HOVER STATE
   ======================================================================== */
.g-textarea:hover:not(:focus):not(:disabled):not(.g-textarea.error) {
  border-color: rgba(255, 255, 255, 0.25);
  border-color: var(--color-border-default-hovered);
}

/* ========================================================================
   FOCUS STATE
   ======================================================================== */
.g-textarea:focus:not(.g-textarea.error) {
  border-color: rgba(255, 255, 255, 0.25);
  border-color: var(--color-border-default-hovered);
}

/* ========================================================================
   ERROR STATE
   ======================================================================== */
.g-textarea.error {
  border-color: #FA412D !important;
  border-color: var(--color-border-danger) !important;
}

/* ========================================================================
   DISABLED STATE
   ======================================================================== */
.g-textarea:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* ========================================================================
   READONLY STATE
   ======================================================================== */
.g-textarea:-moz-read-only {
  background-color: rgba(255, 255, 255, 0.1);
  background-color: var(--color-bg-subtle);
  cursor: default;
}

.g-textarea:read-only {
  background-color: rgba(255, 255, 255, 0.1);
  background-color: var(--color-bg-subtle);
  cursor: default;
}

/* ========================================================================
   AUTOSIZE MODIFIER
   ======================================================================== */
.g-textarea.autosize {
  max-height: 16rem;
  overflow-y: auto;
  resize: none;
}

/* ========================================================================
   BROWSER-SPECIFIC FIXES
   ======================================================================== */
/* Prevent default :invalid styles in Mozilla browsers */
.g-textarea:invalid {
  box-shadow: none;
}

/* Remove default WebKit styling */
.g-textarea::-webkit-inner-spin-button,
.g-textarea::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ========================================================================
   SELECT COMPONENT
   ======================================================================== */
/*
 * Select Naming Convention:
 * .g-select-{size}
 *
 * Sizes: small, medium, large
 * States: error
 *
 * Usage Examples:
 * - .g-select.size-m (default)
 * - .g-select.size-s
 * - .g-select.size-l
 * - .g-select.size-m.g-select.error
 *
 * For multiple select:
 * - .g-select.size-m[multiple]
 */
/* ========================================================================
   BASE SELECT STYLES
   ======================================================================== */
.g-select {
  --arrowSize: 0.5rem;
  --arrowPosition: 1.2rem;
  --arrowColor: var(--color-icon-default);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg-input);
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.5) 50%), linear-gradient(135deg, rgba(255, 255, 255, 0.5) 50%, transparent 50%);
  background-image: linear-gradient(45deg, transparent 50%, var(--arrowColor) 50%), linear-gradient(135deg, var(--arrowColor) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem - 0.5rem) 50%, calc(100% - 1.2rem) 50%;
  background-position: calc(100% - var(--arrowPosition) - var(--arrowSize)) 50%, calc(100% - var(--arrowPosition)) 50%;
  background-repeat: no-repeat;
  background-size: 0.5rem 0.5rem;
  background-size: var(--arrowSize) var(--arrowSize);
  border: var(--border-s) solid rgba(255, 255, 255, 0.1);
  border: var(--border-s) solid var(--color-border-default);
  border-radius: 0.3rem;
  border-radius: var(--radius-m);
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
  cursor: pointer;
  font-family: var(--font-family-system);
  line-height: 1.2;
  outline: none;
  padding-right: 2.7rem;
  padding-right: calc(var(--arrowPosition) + var(--arrowSize) + 1rem);
  transition: border-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 100%;
}

/* ========================================================================
   SIZE MODIFIERS
   ======================================================================== */
/* Small */
.g-select.size-s {
  font-size: 1.4rem;
  height: 3.2rem;
  padding-bottom: 0.5rem;
  padding-left: 0.8rem;
  padding-top: 0.5rem;
}

/* Medium (Default) */
.g-select.size-m {
  font-size: 1.4rem;
  height: 4rem;
  padding-bottom: 0.6rem;
  padding-left: 0.8rem;
  padding-top: 0.6rem;
}

/* Large */
.g-select.size-l {
  font-size: 1.6rem;
  height: 4.8rem;
  padding-bottom: 0.8rem;
  padding-left: 1rem;
  padding-top: 0.8rem;
}

/* ========================================================================
   HOVER STATE
   ======================================================================== */
.g-select:hover:not(:disabled):not(.g-select.error) {
  border-color: rgba(255, 255, 255, 0.25);
  border-color: var(--color-border-default-hovered);
}

/* ========================================================================
   FOCUS STATE
   ======================================================================== */
.g-select:focus:not(.g-select.error) {
  border-color: rgba(255, 255, 255, 0.25);
  border-color: var(--color-border-default-hovered);
}

/* Remove Firefox focus outline */
.g-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 rgba(255, 255, 255, 0.72);
  text-shadow: 0 0 0 var(--color-text-default);
}

/* ========================================================================
   ERROR STATE
   ======================================================================== */
.g-select.g-select.error {
  border-color: #FA412D;
  border-color: var(--color-border-danger);
}

/* ========================================================================
   DISABLED STATE
   ======================================================================== */
.g-select:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* ========================================================================
   MULTIPLE SELECT STYLES
   ======================================================================== */
.g-select[multiple] {
  background-image: none;
  height: auto;
  padding: 0;
  padding-right: 0;
}

.g-select[multiple] option {
  padding: 1.2rem 0.8rem;
}

/* ========================================================================
   OPTION STYLES
   ======================================================================== */
.g-select option {
  background-color: rgba(255, 255, 255, 0.08);
  background-color: var(--color-bg-input);
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
}

/* Option styles (dark mode by default) */
.g-select option {
  background-color: rgba(0, 0, 0, 0.2);
  background-color: var(--color-bg-secondary);
}

/* Disabled options */
.g-select option:disabled {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-subtle);
}

/* ========================================================================
   BROWSER-SPECIFIC FIXES
   ======================================================================== */
/* Remove IE/Edge arrow */
.g-select::-ms-expand {
  display: none;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-select.size-s,
.g-select.size-m,
.g-select.size-l {
  /* Explicit declarations for IDE autocomplete */
}

/* ========================================================================
   CHECKBOX COMPONENT
   ======================================================================== */
/*
 * Checkbox Structure:
 * <div class="checkbox-wrapper">
 *   <input type="checkbox" class="checkbox" id="checkbox-1">
 *   <label for="checkbox-1" class="checkbox-label">Label text</label>
 * </div>
 *
 * Or without label:
 * <input type="checkbox" class="checkbox" aria-label="Description">
 */
/* ========================================================================
   CHECKBOX WRAPPER
   ======================================================================== */
.g-checkbox-wrapper {
  align-items: flex-start;
  display: inline-flex;
}

/* ========================================================================
   CHECKBOX INPUT STYLES
   ======================================================================== */
.g-checkbox {
  --checkboxSize: 1.4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  background: var(--color-bg-input);
  border: var(--border-s) solid rgba(255, 255, 255, 0.5);
  border: var(--border-s) solid var(--color-border-subtle);
  border-radius: 0.3rem;
  border-radius: var(--radius-m);
  cursor: pointer;
  flex-shrink: 0;
  height: 1.4rem;
  height: var(--checkboxSize);
  margin: 0.3rem 0 0.2rem 0;
  outline: none;
  position: relative;
  transition: background-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1), border-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out-1), border-color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 1.4rem;
  width: var(--checkboxSize);
}

/* ========================================================================
   CHECKMARK (CHECKED STATE)
   ======================================================================== */
.g-checkbox:checked {
  background: rgba(255, 255, 255, 0.5);
  background: var(--color-icon-default);
  border-color: transparent;
}

.g-checkbox:checked::after {
  border: solid 0.2rem #262421;
  border: solid 0.2rem var(--color-bg-opaque);
  border-right: 0;
  border-top: 0;
  content: "";
  height: 0.5rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
  width: 0.9rem;
  /* Adjust position slightly up to center the checkmark */
  margin-top: -0.1rem;
}

/* ========================================================================
   HOVER STATE
   ======================================================================== */
@media (hover: hover) {
  .g-checkbox:hover:not(:disabled):checked {
    background: rgba(255, 255, 255, 0.72);
    background: var(--color-icon-default-hovered);
  }
}
/* ========================================================================
   FOCUS STATE
   ======================================================================== */
/* Show focus outline only when navigating with keyboard */
.g-checkbox:focus-visible {
  outline: var(--border-m) solid -webkit-focus-ring-color;
  outline-offset: 0.1rem;
}

/* Fallback for browsers that don't support :focus-visible */
.g-checkbox:focus {
  outline: var(--border-m) solid -webkit-focus-ring-color;
  outline-offset: 0.1rem;
}

.g-checkbox:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================================================
   DISABLED STATE
   ======================================================================== */
.g-checkbox:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.g-checkbox:disabled + .g-checkbox-label {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ========================================================================
   LABEL STYLES
   ======================================================================== */
.g-checkbox-label {
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1.4285;
  min-height: 2rem;
  padding: 0.2rem 0 0.2rem 0.8rem;
  padding: 0.2rem 0 0.2rem var(--space-8);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ========================================================================
   INDETERMINATE STATE (OPTIONAL)
   ======================================================================== */
.g-checkbox:indeterminate {
  background: rgba(255, 255, 255, 0.5);
  background: var(--color-icon-default);
  border-color: transparent;
}

.g-checkbox:indeterminate::after {
  background: #262421;
  background: var(--color-bg-opaque);
  border: none;
  content: "";
  height: 0.2rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.8rem;
}

/* ========================================================================
   RADIO BUTTON COMPONENT
   ======================================================================== */
/*
 * Radio Button Structure:
 * <div class="radio-wrapper">
 *   <input type="radio" class="radio" name="group" id="radio-1">
 *   <label for="radio-1" class="radio-label">Label text</label>
 * </div>
 *
 * Or without label:
 * <input type="radio" class="radio" name="group" aria-label="Description">
 */
/* ========================================================================
   RADIO WRAPPER
   ======================================================================== */
.g-radio-wrapper {
  align-items: flex-start;
  display: inline-flex;
}

/* ========================================================================
   RADIO INPUT STYLES
   ======================================================================== */
.g-radio {
  --radioSize: 1.4rem;
  --dotSize: 0.8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  background: var(--color-bg-input);
  border: var(--border-s) solid rgba(255, 255, 255, 0.5);
  border: var(--border-s) solid var(--color-icon-default);
  border-radius: 50%;
  border-radius: var(--radius-circular);
  cursor: pointer;
  display: grid;
  flex-shrink: 0;
  height: 1.4rem;
  height: var(--radioSize);
  margin: 0.3rem 0 0.2rem 0;
  outline: none;
  place-items: center;
  position: relative;
  transition: border-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: border-color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 1.4rem;
  width: var(--radioSize);
}

/* ========================================================================
   INNER DOT (CHECKED STATE)
   ======================================================================== */
.g-radio:checked::after {
  background: rgba(255, 255, 255, 0.5);
  background: var(--color-icon-default);
  border-radius: 50%;
  border-radius: var(--radius-circular);
  content: "";
  height: var(--dotSize);
  transition: background-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: var(--dotSize);
}

/* ========================================================================
   HOVER STATE
   ======================================================================== */
@media (hover: hover) {
  .g-radio:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.72);
    border-color: var(--color-text-default);
  }
  .g-radio:hover:not(:disabled):checked::after {
    background: rgba(255, 255, 255, 0.72);
    background: var(--color-text-default);
  }
}
/* ========================================================================
   FOCUS STATE
   ======================================================================== */
/* Show focus outline only when navigating with keyboard */
.g-radio:focus-visible {
  outline: var(--border-m) solid -webkit-focus-ring-color;
  outline-offset: 0.1rem;
}

/* Fallback for browsers that don't support :focus-visible */
.g-radio:focus {
  outline: var(--border-m) solid -webkit-focus-ring-color;
  outline-offset: 0.1rem;
}

.g-radio:focus:not(:focus-visible) {
  outline: none;
}

/* Alternative: Only show focus when keyboard navigation class is present */
body:not(.keyboard-navigation-in-use) .g-radio:focus {
  outline: none;
}

/* ========================================================================
   DISABLED STATE
   ======================================================================== */
.g-radio:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.g-radio:disabled + .g-radio-label {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ========================================================================
   LABEL STYLES
   ======================================================================== */
.g-radio-label {
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-text-default);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1.1428;
  min-height: 2rem;
  padding: 0.2rem 0 0.2rem 0.8rem;
  padding: 0.2rem 0 0.2rem var(--space-8);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* ========================================================================
   GROUP SPACING (OPTIONAL)
   ======================================================================== */
/* When multiple radio buttons are stacked vertically */
.g-radio.group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  gap: var(--space-12);
}

/* When multiple radio buttons are arranged horizontally */
.g-radio.group.horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  gap: var(--space-16);
}

/* ========================================================================
   SWITCH COMPONENT
   ======================================================================== */
/*
 * Switch Naming Convention:
 * .g-switch-{size}-{variant}
 *
 * Sizes: small, medium, large
 * Variants: primary, secondary
 *
 * Usage Examples:
 * - .g-switch.size-l.variant-primary (default)
 * - .g-switch-medium-primary
 * - .g-switch.size-s.variant-secondary
 *
 * Structure:
 * <div class="switch-large-primary">
 *   <input type="checkbox" class="switch-checkbox" id="switch-1">
 *   <label for="switch-1" class="switch-label">
 *     <span class="switch-button"></span>
 *   </label>
 * </div>
 */
/* ========================================================================
   BASE SWITCH CONTAINER
   ======================================================================== */
.g-switch {
  display: inline-block;
  flex-shrink: 0;
  position: relative;
}

/* ========================================================================
   SIZE MODIFIERS
   ======================================================================== */
.g-switch.size-s,
.g-switch.size-s {
  --switchHeight: 1.2rem;
  --switchWidth: 2.4rem;
  --buttonSize: 1.2rem;
  --iconSize: 0.8rem;
}

.g-switch-medium,
.g-switch.size-m {
  --switchHeight: 1.8rem;
  --switchWidth: 3.6rem;
  --buttonSize: 1.8rem;
  --iconSize: 1.2rem;
}

.g-switch.size-l,
.g-switch.size-l {
  --switchHeight: 2.4rem;
  --switchWidth: 4.8rem;
  --buttonSize: 2.4rem;
  --iconSize: 1.8rem;
}

/* ========================================================================
   HIDDEN CHECKBOX (ACCESSIBILITY)
   ======================================================================== */
.g-switch-checkbox {
  clip: rect(0, 0, 0, 0);
  height: 0.1rem;
  overflow: hidden;
  position: absolute;
  width: 0.1rem;
}

/* ========================================================================
   SWITCH LABEL (TRACK)
   ======================================================================== */
.g-switch-label {
  background: rgba(255, 255, 255, 0.08);
  background: var(--color-bg-subtler);
  border-radius: 2rem;
  border-radius: var(--radius-xxl);
  cursor: pointer;
  display: block;
  height: var(--switchHeight);
  position: relative;
  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1);
  transition: background-color 200ms var(--motion-ease-out-1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: var(--switchWidth);
}

/* ========================================================================
   SWITCH BUTTON
   ======================================================================== */
.g-switch-button {
  background: rgba(255, 255, 255, 0.1);
  background: var(--color-bg-subtle);
  border-radius: 50%;
  border-radius: var(--radius-circular);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--buttonSize);
  margin-left: 0;
  position: absolute;
  top: 0;
  transition: margin-left 200ms cubic-bezier(0, 0, 0.2, 1);
  transition: margin-left 200ms var(--motion-ease-out-1);
  width: var(--buttonSize);
}

/* ========================================================================
   VARIANT STYLES
   ======================================================================== */
/* Primary Variant */
.g-switch.primary .g-switch-checkbox:checked + .g-switch-label,
.g-switch.variant-primary .g-switch-checkbox:checked + .g-switch-label {
  background: #5D9948;
  background: var(--color-green-400);
}

.g-switch.primary .g-switch-button,
.g-switch.variant-primary .g-switch-button {
  background: #FFFFFF;
  background: var(--color-neutrals-white);
}

/* Secondary Variant */
.g-switch.secondary .g-switch-checkbox:checked + .g-switch-label,
.g-switch.variant-secondary .g-switch-checkbox:checked + .g-switch-label {
  background: rgba(255, 255, 255, 0.08);
  background: var(--color-bg-subtler);
}

.g-switch.secondary .g-switch-button,
.g-switch.variant-secondary .g-switch-button {
  background: rgb(232, 231, 230);
}

/* ========================================================================
   CHECKED STATE
   ======================================================================== */
.g-switch-checkbox:checked + .g-switch-label .g-switch-button {
  margin-left: calc(100% - var(--buttonSize));
}

/* ========================================================================
   FOCUS STATE
   ======================================================================== */
.g-switch-checkbox:focus + .g-switch-label {
  box-shadow: 0 0 0 0.2rem rgba(0, 159, 217, 0.5);
}

/* ========================================================================
   DISABLED STATE
   ======================================================================== */
.g-switch-checkbox:disabled + .g-switch-label {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-switch.size-s.variant-primary,
.g-switch.size-s.variant-secondary,
.g-switch-medium-primary,
.g-switch-medium-secondary,
.g-switch.size-l.variant-primary,
.g-switch.size-l.variant-secondary {
  /* Explicit declarations for IDE autocomplete */
}

/**
 *  ▗▄▖ ▗▖  ▗▖ ▗▄▖ ▗▄▄▄▖ ▗▄▖ ▗▄▄▖ 
 * ▐▌ ▐▌▐▌  ▐▌▐▌ ▐▌  █  ▐▌ ▐▌▐▌ ▐▌
 * ▐▛▀▜▌▐▌  ▐▌▐▛▀▜▌  █  ▐▛▀▜▌▐▛▀▚▖
 * ▐▌ ▐▌ ▝▚▞▘ ▐▌ ▐▌  █  ▐▌ ▐▌▐▌ ▐▌
 *
 * Gambit CSS Framework - Avatar Component
 * User avatar display with optional status indicators
 */
/* ========================================================================
   AVATAR COMPONENT
   ======================================================================== */
/*
 * Avatar Structure:
 * .g-avatar + .size-{24|32|40|48|64|80|96|160} + optional status modifier
 *
 * Sizes: size-24, size-32, size-40, size-48, size-64, size-80, size-96, size-160
 * Status: status-online, status-playing, status-streaming
 *
 * Usage Examples:
 * - .g-avatar.size-40 (default size, no status)
 * - .g-avatar.size-32.status-online
 * - .g-avatar.size-64.status-playing
 * - .g-avatar.size-96.status-streaming
 *
 * Structure:
 * <div class="g-avatar size-40 online">
 *   <img class="g-avatar-img" src="..." alt="Avatar">
 *   <span class="g-avatar-status"></span>
 * </div>
 */
/* ========================================================================
   BASE AVATAR STYLES
   ======================================================================== */
.g-avatar {
  --avatarRadius: var(--radius-m);
  --statusOffset: 0;
  display: inline-block;
  height: var(--avatarSize);
  position: relative;
  width: var(--avatarSize);
}

/* ========================================================================
   SIZE MODIFIERS
   ======================================================================== */
.g-avatar.size-24 {
  --avatarSize: 2.4rem;
  --statusSize: 0.8rem;
  --statusGap: 0.2rem;
}

.g-avatar.size-32 {
  --avatarSize: 3.2rem;
  --statusSize: 1rem;
  --statusGap: 0.2rem;
}

.g-avatar.size-40 {
  --avatarSize: 4rem;
  --statusSize: 1.2rem;
  --statusGap: 0.2rem;
}

.g-avatar.size-48 {
  --avatarSize: 4.8rem;
  --statusSize: 1rem;
  --statusGap: 0.4rem;
}

.g-avatar.size-64 {
  --avatarSize: 6.4rem;
  --statusSize: 1.2rem;
  --statusGap: 0.4rem;
}

.g-avatar.size-80 {
  --avatarSize: 8rem;
  --statusSize: 1.6rem;
  --avatarRadius: var(--radius-l);
  --statusOffset: -0.2rem;
  --statusGap: 0.4rem;
}

.g-avatar.size-96 {
  --avatarSize: 9.6rem;
  --statusSize: 1.6rem;
  --avatarRadius: var(--radius-l);
  --statusOffset: -0.2rem;
  --statusGap: 0.4rem;
}

.g-avatar.size-160 {
  --avatarSize: 16rem;
  --statusSize: 3rem;
  --avatarRadius: var(--radius-l);
  --statusOffset: -0.4rem;
  --statusGap: 0.8rem;
}

/* ========================================================================
   AVATAR IMAGE
   ======================================================================== */
.g-avatar-img {
  border-radius: var(--avatarRadius);
  box-shadow: inset 0 0 0 0.1rem rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 0.1rem var(--color-border-subtlest);
  display: block;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
}

/* ========================================================================
   STATUS INDICATOR
   ======================================================================== */
.g-avatar-status {
  border-radius: 50%;
  border-radius: var(--radius-circular);
  display: none;
  height: var(--statusSize);
  width: var(--statusSize);
  position: absolute;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 0 var(--statusGap) var(--color-gray-900);
}

/* Show status when parent has status class */
.online .g-avatar-status,
.playing .g-avatar-status,
.streaming .g-avatar-status {
  display: block;
}

/* ========================================================================
   STATUS COLORS
   ======================================================================== */
.online .g-avatar-status {
  background: #81B64C;
  background: var(--color-bg-success);
}

.playing .g-avatar-status {
  background: #81B64C;
  background: var(--color-bg-success);
}

.streaming .g-avatar-status {
  background: #5E53D9;
  background: var(--color-bg-streaming);
}

/* ========================================================================
   OPTIONAL: STATUS WITH CUTOUT EFFECT (V6 STYLE)
   ======================================================================== */
/* Creates a cutout effect for the status indicator */
.g-avatar.avatar-cutout {
  /* Create white background behind status for cutout effect */
}
.g-avatar.avatar-cutout::before {
  background: #262421;
  background: var(--color-bg-opaque);
  border-radius: 50%;
  border-radius: var(--radius-circular);
  bottom: calc(var(--statusOffset) - 0.2rem);
  content: "";
  height: calc(var(--statusSize) + 0.4rem);
  position: absolute;
  right: calc(var(--statusOffset) - 0.2rem);
  width: calc(var(--statusSize) + 0.4rem);
  z-index: var(--z-index-base);
}

.g-avatar.avatar-cutout .g-avatar-status {
  z-index: calc(var(--z-index-base) + 1);
}

/* ========================================================================
   LOADING STATE (OPTIONAL)
   ======================================================================== */
.avatar-loading {
  background: rgba(255, 255, 255, 0.1);
  background: var(--color-bg-subtle);
  border-radius: var(--avatarRadius);
}

/* ========================================================================
   LINK VARIANT
   ======================================================================== */
a.g-avatar {
  cursor: pointer;
  text-decoration: none;
}

a.g-avatar:hover .g-avatar-img {
  opacity: var(--opacity-hover);
}

/**
 * ▗▖  ▗▖▗▄▄▄▖▗▖  ▗▖▗▄▄▖ ▗▄▄▄▖▗▄▄▖  ▗▄▄▖▗▖ ▗▖▗▄▄▄▖▗▄▄▖ ▗▄▄▖  ▗▄▖ ▗▄▄▄  ▗▄▄▖▗▄▄▄▖
 * ▐▛▚▞▜▌▐▌   ▐▛▚▞▜▌▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌ ▐▌  █  ▐▌ ▐▌▐▌ ▐▌▐▌  ▐▌▐▌   ▐▌   
 * ▐▌  ▐▌▐▛▀▀▘▐▌  ▐▌▐▛▀▚▖▐▛▀▀▘▐▛▀▚▖ ▝▀▚▖▐▛▀▚▖▐▌ ▐▌  █  ▐▛▀▜▌▐▌ ▐▌▐▌  ▐▌▐▌▝▜▌▐▛▀▀▘
 * ▐▌  ▐▌▐▙▄▄▖▐▌  ▐▌▐▙▄▞▘▐▙▄▄▖▐▌ ▐▌▗▄▄▞▘▐▌ ▐▌▐▙▄▄▖▐▙▄▄▖  █  ▐▌ ▐▌▐▙▄▄▀ ▙▚▄▞▘▐▙▄▄▖
 *
 * Gambit CSS Framework - Membership Badge Component
 * Displays membership tier and role badges (Diamond, Platinum, Gold, Staff, Mod).
 * Based on Figma design specifications.
 */
.g-membership-badge {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.2rem;
  padding: var(--space-2);
  border-radius: 0.3rem;
  border-radius: var(--radius-m);
}
.g-membership-badge.size-s {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-membership-badge.size-s .g-glyph {
  width: 1.2rem;
  width: var(--icon-12);
  height: 1.2rem;
  height: var(--icon-12);
}
.g-membership-badge.size-m {
  width: 2rem;
  width: var(--icon-20);
  height: 2rem;
  height: var(--icon-20);
}
.g-membership-badge.size-m .g-glyph {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-membership-badge.size-l {
  width: 2.4rem;
  width: var(--icon-24);
  height: 2.4rem;
  height: var(--icon-24);
}
.g-membership-badge.size-l .g-glyph {
  width: 2rem;
  width: var(--icon-20);
  height: 2rem;
  height: var(--icon-20);
}
.g-membership-badge .g-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  order: 0;
  flex-grow: 0;
}
.g-membership-badge .g-glyph svg {
  width: 100%;
  height: 100%;
}
.g-membership-badge.variant-diamond, .g-membership-badge.variant-premium {
  background: var(--color-blue-400);
}
.g-membership-badge.variant-diamond .g-glyph svg path, .g-membership-badge.variant-premium .g-glyph svg path {
  fill: var(--color-blue-75);
}
.g-membership-badge.variant-platinum {
  background: rgba(174, 208, 240, 0.2);
}
.g-membership-badge.variant-platinum .g-glyph svg path {
  fill: var(--color-slate-200);
}
.g-membership-badge.variant-gold {
  background: var(--color-gray-700);
}
.g-membership-badge.variant-gold .g-glyph svg path {
  fill: var(--color-gold-400);
}
.g-membership-badge.variant-staff {
  background: var(--color-green-600);
}
.g-membership-badge.variant-staff .g-glyph svg path {
  fill: var(--color-green-300);
}
.g-membership-badge.variant-mod {
  background: rgba(116, 155, 191, 0.2);
}
.g-membership-badge.variant-mod .g-glyph svg path {
  fill: var(--color-slate-300);
}
.g-membership-badge.none {
  display: none;
}

/**
 *  ▗▄▖ ▗▖ ▗▖▗▄▄▄▖▗▄▄▖ 
 * ▐▌   ▐▌ ▐▌  █  ▐▌ ▐▌
 * ▐▌   ▐▛▀▜▌  █  ▐▛▀▘ 
 * ▝▚▄▄ ▐▌ ▐▌▗▄█▄▖▐▌   
 *
 * Gambit CSS Framework - Chip Component
 * Small labeled elements with optional icons
 */
/* ========================================================================
   CHIP COMPONENT
   ======================================================================== */
/*
 * Chip Compositional Pattern:
 * .g-chip + .color-{color} + .variant-{translucent|opaque}
 *
 * Colors: color-aqua, color-blue, color-brown, color-fuchsia, color-gold, color-gray, color-green, color-orange, color-purple, color-red, color-skin, color-slate
 * Variants: variant-translucent (default), variant-opaque
 *
 * Usage Examples:
 * - .g-chip.color-gray (default translucent)
 * - .g-chip.color-blue.variant-opaque
 * - .g-chip.color-green.variant-translucent
 * - .g-chip.color-red.variant-opaque
 *
 * Structure:
 * <span class="chip color-blue variant-translucent">
 *   <span class="g-glyph"><!-- svg icon --></span>
 *   <span class="chip-label">Label</span>
 * </span>
 */
/* ========================================================================
   BASE CHIP STYLES
   ======================================================================== */
.g-chip {
  white-space: nowrap;
  border: none;
  outline: none;
  align-items: center;
  border-radius: 0.3rem;
  border-radius: var(--radius-m);
  display: inline-flex;
  gap: 0.4rem;
  gap: var(--space-4);
  min-height: 2rem;
  padding: 0.2rem 0.4rem;
  padding: var(--space-2) var(--space-4);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  /* Default color variables */
  --chip-color-bg: var(--color-gray-600);
  --chip-color-fg: var(--color-gray-300);
  --chip-transparency: 10%;
  --iconSize: var(--icon-12);
}

/* ========================================================================
   VARIANT STYLES
   ======================================================================== */
/* Translucent Variant (Default) */
.g-chip,
.g-chip.variant-translucent {
  background: color-mix(in srgb, var(--chip-color-bg) var(--chip-transparency), transparent);
  color: var(--chip-color-fg);
}

/* Opaque Variant */
.g-chip.variant-opaque {
  background: var(--chip-color-bg);
  color: #FFFFFF;
  color: var(--color-neutrals-white);
  text-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 var(--border-s) 0 var(--color-transparent-black-20);
}

/* ========================================================================
   CHILD ELEMENTS
   ======================================================================== */
/* Opaque variant icon shadow */
.g-chip.variant-opaque .g-glyph {
  color: var(--color-neutrals-white);
  filter: drop-shadow(0 0.1rem 0 rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 var(--border-s) 0 var(--color-transparent-black-20));
}

.g-chip.variant-opaque .g-chip-remove {
  color: var(--color-neutrals-white);
  filter: drop-shadow(0 0.1rem 0 rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 var(--border-s) 0 var(--color-transparent-black-20));
}

.g-chip .g-glyph {
  color: var(--chip-color-fg);
  height: var(--iconSize);
  width: var(--iconSize);
}
.g-chip .g-glyph svg {
  height: 100%;
  width: 100%;
}
.g-chip .g-glyph svg path {
  fill: currentColor;
}

/* Chip Remove Icon */
.g-chip-remove {
  color: var(--chip-color-fg);
  height: var(--iconSize);
  width: var(--iconSize);
  opacity: 0.7;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out-1);
}
.g-chip-remove svg {
  height: 100%;
  width: 100%;
}
.g-chip-remove svg path {
  fill: currentColor;
}
.g-chip-remove:hover {
  opacity: 1;
}

/* Chip Label */
.g-chip-label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3333;
  text-transform: uppercase;
}

/* Normal case variant */
.g-chip-label-normal {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2857;
  text-transform: none;
}

/* ========================================================================
   COLOR DEFINITIONS - DARK MODE COLORS (GAMBIT ONLY SUPPORTS DARK MODE)
   ======================================================================== */
/* Aqua */
.g-chip.color-aqua {
  --chip-color-bg: var(--color-aqua-200);
  --chip-color-fg: var(--color-aqua-400);
}

.g-chip.color-aqua.variant-opaque {
  --chip-color-bg: var(--color-aqua-400);
}

/* Blue */
.g-chip.color-blue {
  --chip-color-bg: var(--color-blue-200);
  --chip-color-fg: var(--color-blue-200);
}

.g-chip.color-blue.variant-opaque {
  --chip-color-bg: var(--color-blue-300);
}

/* Brown */
.g-chip.color-brown {
  --chip-color-bg: var(--color-brown-200);
  --chip-color-fg: var(--color-brown-500);
}

.g-chip.color-brown.variant-opaque {
  --chip-color-bg: var(--color-brown-300);
}

/* Fuchsia */
.g-chip.color-fuchsia {
  --chip-color-bg: var(--color-fuchsia-200);
  --chip-color-fg: var(--color-fuchsia-400);
}

.g-chip.color-fuchsia.variant-opaque {
  --chip-color-bg: var(--color-fuchsia-300);
}

/* Gold */
.g-chip.color-gold {
  --chip-color-bg: var(--color-gold-200);
  --chip-color-fg: var(--color-gold-500);
}

.g-chip.color-gold.variant-opaque {
  --chip-color-bg: var(--color-gold-300);
}

/* Gray (Default) */
.g-chip.color-gray {
  --chip-color-bg: var(--color-gray-600);
  --chip-color-fg: var(--color-gray-300);
}

.g-chip.color-gray.variant-opaque {
  --chip-color-bg: var(--color-gray-600);
}

/* Green */
.g-chip.color-green {
  --chip-color-bg: var(--color-green-400);
  --chip-color-fg: var(--color-green-300);
}

.g-chip.color-green.variant-opaque {
  --chip-color-bg: var(--color-green-300);
}

/* Orange */
.g-chip.color-orange {
  --chip-color-bg: var(--color-orange-200);
  --chip-color-fg: var(--color-orange-400);
}

.g-chip.color-orange.variant-opaque {
  --chip-color-bg: var(--color-orange-300);
}

/* Purple */
.g-chip.color-purple {
  --chip-color-bg: var(--color-purple-200);
  --chip-color-fg: var(--color-purple-100);
}

.g-chip.color-purple.variant-opaque {
  --chip-color-bg: var(--color-purple-300);
}

/* Red */
.g-chip.color-red {
  --chip-color-bg: var(--color-red-200);
  --chip-color-fg: var(--color-red-400);
}

.g-chip.color-red.variant-opaque {
  --chip-color-bg: var(--color-bg-danger);
}

/* Skin */
.g-chip.color-skin {
  --chip-color-bg: var(--color-skin-200);
  --chip-color-fg: var(--color-skin-300);
}

.g-chip.color-skin.variant-opaque {
  --chip-color-bg: var(--color-skin-400);
}

/* Slate */
.g-chip.color-slate {
  --chip-color-bg: var(--color-slate-200);
  --chip-color-fg: var(--color-slate-300);
}

.g-chip.color-slate.variant-opaque {
  --chip-color-bg: var(--color-slate-400);
}

/* ========================================================================
   REMOVABLE CHIPS
   ======================================================================== */
/* Removable chips are interactive buttons */
.g-chip.removable {
  cursor: pointer;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out-1);
}
.g-chip.removable:hover {
  opacity: var(--opacity-pressed);
}
.g-chip.removable:active {
  opacity: 0.6; /* Keep specific value for chip active state */
}

/* Convert to button element for removable chips */
button.g-chip.removable {
  background: var(--cc-bg-color);
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
}

/**
 * ▗▖    ▗▄▖  ▗▄▖ ▗▄▄▄ ▗▄▄▄▖▗▄▄▖ 
 * ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌  ▐▌▐▌   ▐▌ ▐▌
 * ▐▌   ▐▌ ▐▌▐▛▀▜▌▐▌  ▐▌▐▛▀▀▘▐▛▀▚▖
 * ▐▙▄▄▖▝▚▄▞▘▐▌ ▐▌▐▙▄▄▀ ▐▙▄▄▖▐▌ ▐▌
 *
 * Gambit CSS Framework - Loader Component
 * Loading indicators including blocks and spinners
 */
/* ========================================================================
   LOADER COMPONENT
   ======================================================================== */
/*
 * Loader Naming Convention:
 * .g-loader.{blocks|spinner}.{size-s|size-m|size-l}
 *
 * Variants: blocks, spinner-green, spinner-gray, spinner-chameleon
 * Sizes: small, medium, large
 *
 * Usage Examples:
 * - .g-loader.blocks.size-m (default)
 * - .g-loader.spinner.variant-green.size-l
 * - .g-loader.spinner.variant-gray.size-s
 * - .g-loader.spinner.variant-chameleon.size-m
 */
/* ========================================================================
   BLOCKS LOADER
   ======================================================================== */
.g-loader.blocks {
  --gridSize: 3;
  --squareColor: var(--color-icon-boldest);
  display: inline-grid;
  gap: calc(var(--squareSize) / 4);
  grid-template-columns: repeat(3, var(--squareSize));
  grid-template-columns: repeat(var(--gridSize), var(--squareSize));
  grid-template-rows: repeat(3, var(--squareSize));
  grid-template-rows: repeat(var(--gridSize), var(--squareSize));
  position: relative;
}

/* Size modifiers for blocks */
.g-loader.blocks.size-s {
  --squareSize: 0.4rem;
}

.g-loader.blocks.size-m {
  --squareSize: 0.8rem;
}

.g-loader.blocks.size-l {
  --squareSize: 1.6rem;
}

/* Block squares */
.g-loader-square {
  background: var(--squareColor);
  border-radius: calc(var(--squareSize) / 8);
  height: var(--squareSize);
  position: absolute;
  width: var(--squareSize);
}

/* Square positioning and animations */
.g-loader-square-1 {
  animation: loader-square-1 1s cubic-bezier(0.7, 0.2, 0, 0.8) infinite;
  animation: loader-square-1 1s var(--motion-ease-in-out-3) infinite;
}

.g-loader-square-2 {
  animation: loader-square-2 1s cubic-bezier(0.7, 0.2, 0, 0.8) infinite;
  animation: loader-square-2 1s var(--motion-ease-in-out-3) infinite;
}

.g-loader-square-3 {
  animation: loader-square-3 1s cubic-bezier(0.7, 0.2, 0, 0.8) infinite;
  animation: loader-square-3 1s var(--motion-ease-in-out-3) infinite;
}

.g-loader-square-4 {
  animation: loader-square-4 1s cubic-bezier(0.7, 0.2, 0, 0.8) infinite;
  animation: loader-square-4 1s var(--motion-ease-in-out-3) infinite;
}

.g-loader-square-5 {
  animation: loader-square-5 1s cubic-bezier(0.7, 0.2, 0, 0.8) infinite;
  animation: loader-square-5 1s var(--motion-ease-in-out-3) infinite;
  left: calc(var(--squareSize) * 1.25);
  top: calc(var(--squareSize) * 1.25);
}

.g-loader-square-6 {
  animation: loader-square-6 1s cubic-bezier(0.7, 0.2, 0, 0.8) infinite;
  animation: loader-square-6 1s var(--motion-ease-in-out-3) infinite;
  left: calc(var(--squareSize) * 1.25);
  top: calc(var(--squareSize) * 1.25);
}

/* Blocks keyframe animations */
@keyframes loader-square-1 {
  0%, 100% {
    left: 0;
    top: 0;
  }
  25% {
    left: calc(var(--squareSize) * 2.5);
    top: 0;
  }
  50% {
    left: calc(var(--squareSize) * 2.5);
    top: calc(var(--squareSize) * 2.5);
  }
  75% {
    left: 0;
    top: calc(var(--squareSize) * 2.5);
  }
}
@keyframes loader-square-2 {
  0%, 100% {
    left: calc(var(--squareSize) * 2.5);
    top: 0;
  }
  25% {
    left: calc(var(--squareSize) * 2.5);
    top: calc(var(--squareSize) * 2.5);
  }
  50% {
    left: 0;
    top: calc(var(--squareSize) * 2.5);
  }
  75% {
    left: 0;
    top: 0;
  }
}
@keyframes loader-square-3 {
  0%, 100% {
    left: calc(var(--squareSize) * 2.5);
    top: calc(var(--squareSize) * 2.5);
  }
  25% {
    left: 0;
    top: calc(var(--squareSize) * 2.5);
  }
  50% {
    left: 0;
    top: 0;
  }
  75% {
    left: calc(var(--squareSize) * 2.5);
    top: 0;
  }
}
@keyframes loader-square-4 {
  0%, 100% {
    left: 0;
    top: calc(var(--squareSize) * 2.5);
  }
  25% {
    left: 0;
    top: 0;
  }
  50% {
    left: calc(var(--squareSize) * 2.5);
    top: 0;
  }
  75% {
    left: calc(var(--squareSize) * 2.5);
    top: calc(var(--squareSize) * 2.5);
  }
}
@keyframes loader-square-5 {
  0%, 50% {
    opacity: 1;
    transform: scaleX(1);
  }
  25%, 75% {
    opacity: 0;
    transform: scaleX(0);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes loader-square-6 {
  0%, 50%, 100% {
    opacity: 0;
    transform: scaleX(0);
  }
  25%, 75% {
    opacity: 1;
    transform: scaleX(1);
  }
}
/* ========================================================================
   SPINNER LOADER
   ======================================================================== */
.g-loader.spinner {
  --borderWidth: 0.2rem;
  --inactiveColor: var(--color-border-default);
  animation: loader-spin 0.8s linear infinite;
  border: var(--border-m) solid rgba(255, 255, 255, 0.1);
  border: var(--borderWidth) solid var(--inactiveColor);
  border-radius: 50%;
  border-radius: var(--radius-circular);
  border-top-color: var(--activeColor);
  display: inline-block;
  height: var(--spinnerSize);
  width: var(--spinnerSize);
}

/* Size modifiers for spinner */
.g-loader.spinner.size-s {
  --spinnerSize: 1.2rem;
}

.g-loader.spinner.size-m {
  --spinnerSize: 1.6rem;
}

.g-loader.spinner.size-l {
  --spinnerSize: 2.4rem;
  --borderWidth: 0.3rem;
}

/* Spinner color variants */
.g-loader.spinner.variant-green {
  --activeColor: var(--color-border-success);
}

.g-loader.spinner.variant-gray {
  --activeColor: var(--color-border-bold);
}

.g-loader.spinner.variant-chameleon {
  --activeColor: currentColor;
  --inactiveColor: currentColor;
  opacity: 0.3;
  border-top-opacity: 1;
}

/* Spinner animation */
@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ========================================================================
   ACCESSIBILITY
   ======================================================================== */
.g-loader {
  /* Screen reader support */
  role: status;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-loader.blocks.size-s,
.g-loader.blocks.size-m,
.g-loader.blocks.size-l,
.g-loader.spinner.variant-green.size-s,
.g-loader.spinner.variant-green.size-m,
.g-loader.spinner.variant-green.size-l,
.g-loader.spinner.variant-gray.size-s,
.g-loader.spinner.variant-gray.size-m,
.g-loader.spinner.variant-gray.size-l,
.g-loader.spinner.variant-chameleon.size-s,
.g-loader.spinner.variant-chameleon.size-m,
.g-loader.spinner.variant-chameleon.size-l {
  /* Explicit declarations for IDE autocomplete */
}

/**
 *  ▗▄▄▖ ▗▄▖ ▗▄▄▖ ▗▄▄▄  
 * ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌  █ 
 * ▐▌   ▐▛▀▜▌▐▛▀▚▖▐▌  █ 
 * ▝▚▄▄▖▐▌ ▐▌▐▌ ▐▌▐▙▄▄▀ 
 * 
 * Gambit CSS Framework - Card Component
 * Flexible content containers with optional media, header, and body sections
 * Compositional pattern: .g-card + size modifiers + variant modifiers
 */
/* ========================================================================
   CARD COMPONENT
   ======================================================================== */
/*
 * Card Compositional Pattern:
 * .g-card + .size-{s|l} + .variant-{default|elevated}
 * 
 * Sizes: size-s (small), size-l (large/normal)
 * Variants: variant-default, variant-elevated
 * 
 * Usage Examples:
 * - .g-card.size-s.variant-default
 * - .g-card.size-l.variant-elevated
 * 
 * Additional modifiers can be chained:
 * - .g-card.size-l.variant-default.disabled
 * 
 * Card sub-components:
 * - .card-media (for icons/images)
 * - .card-header (for title area)
 * - .card-body (for content area)
 * - .card-custom-body (for custom content)
 */
/* ========================================================================
   BASE CARD STYLES
   ======================================================================== */
.g-card {
  align-items: center;
  background: var(--cc-bg-color, linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%));
  border: none;
  border-radius: var(--radius-xl); /* 1rem = 10px from Figma */
  box-shadow: var(--cc-bg-box-shadow, 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(var(--blur-glass));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--cc-card-gap, 1.2rem); /* 12px from Figma */
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  padding: 2.4rem;
  flex: 1;
  min-width: 15rem; /* 150px */
  user-select: none;
  /* Reset button styles */
  /* Reset button styles */
  /* Reset button styles */
  /* Reset button styles */
  /* Active */
}
.g-card.size-s, .g-card.size-l {
  max-width: var(--cc-card-max-width, 15.6rem); /* 156px from Figma */
  min-width: var(--cc-card-min-width, 13rem); /* 130px from Figma */
  width: var(--cc-card-width, 15.6rem); /* 156px from Figma */
  height: var(--cc-card-height, 16.8rem); /* 168px from Figma */
  min-height: var(--cc-card-min-height, 15.55rem); /* 155.5px from Figma */
  padding: var(--cc-card-padding, 2.4rem 1.2rem 1.2rem); /* 24px 12px 12px from Figma */
}
.g-card:focus {
  outline: none;
}
.g-card:after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--border-s) solid var(--color-gray-500); /* 0.1rem = 1px */
  border-radius: var(--radius-xl); /* 1rem = 10px from Figma */
  transition: opacity 0.25s ease;
  opacity: 0;
}
.g-card:hover {
  transform: scale(var(--scale-hover));
}
.g-card:active {
  transform: scale(var(--scale-active));
}
.g-card:hover:not(:active):after {
  transition: opacity 0s ease;
  opacity: 0.25;
}
.g-card:focus-visible {
  outline: var(--border-m) solid var(--color-accent-primary); /* 2px */
  outline-offset: 0.2rem; /* 2px */
}
@media (hover: hover) {
  .g-card:not(.disabled):hover {
    --cc-card-color-header: var(--cc-card-color-header-hover);
    background: var(--cc-bg-color-hover, linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%));
    box-shadow: var(--cc-bg-box-shadow-hover, 0px 2px 4px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12), inset 0px 1px 0px rgba(255, 255, 255, 0.1));
  }
}
.g-card:not(.disabled):active {
  opacity: var(--opacity-hover) !important;
}

/* ========================================================================
   SIZE MODIFIERS
   ======================================================================== */
/* Small card size - from Figma specs */
.g-card.size-s {
  --cc-card-color-header: var(--color-text-bolder);
  --cc-card-color-header-hover: var(--color-text-boldest);
  --cc-card-color-body: var(--color-text-subtle);
  --cc-card-max-width: 15.6rem; /* 156px from Figma */
  --cc-card-min-width: 13rem; /* 130px from Figma */
  --cc-card-width: 15.6rem; /* 156px */
  --cc-card-height: 12rem; /* 120px from Figma */
  --cc-card-min-height: 12rem;
  --cc-card-media-size: 4.8rem; /* 48px from Figma */
  --cc-card-gap: 0.4rem; /* 4px from Figma */
  --cc-card-padding: 1.2rem 0.8rem 0.8rem; /* 12px 8px 8px from Figma */
}

/* Large/normal card size */
.g-card.size-l {
  --cc-card-color-header: var(--color-text-bolder);
  --cc-card-color-header-hover: var(--color-text-boldest);
  --cc-card-color-body: var(--color-text-default);
  --cc-card-max-width: 15.6rem; /* 156px from Figma */
  --cc-card-min-width: 13rem; /* 130px from Figma */
  --cc-card-width: 15.6rem; /* 156px from Figma */
  --cc-card-height: 16.8rem; /* 168px from Figma */
  --cc-card-min-height: 15.55rem; /* 155.5px from Figma */
  --cc-card-media-size: 6.4rem; /* 64px from Figma */
  --cc-card-gap: 1.2rem; /* 12px from Figma */
  --cc-card-padding: 2.4rem 1.2rem 1.2rem; /* 24px 12px 12px from Figma */
}

/* ========================================================================
   VARIANT MODIFIERS
   ======================================================================== */
/* Default variant - matches Figma specs */
.g-card.variant-default {
  --cc-bg-color: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  --cc-bg-color-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  --cc-bg-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.08);
  --cc-bg-box-shadow-hover: 0px 2px 4px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(var(--blur-glass));
}

/* Elevated variant */
.g-card.variant-elevated {
  --cc-bg-color: var(--color-bg-secondary);
  --cc-bg-color-hover: var(--color-bg-secondary);
  --cc-bg-box-shadow: var(--elevation-popover);
  --cc-bg-box-shadow-hover: var(--elevation-modal);
}

/* Secondary variant - matches Figma secondary button style */
.g-card.variant-secondary {
  --cc-bg-color: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  --cc-bg-color-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  --cc-bg-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.08);
  --cc-bg-box-shadow-hover: 0px 2px 4px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(var(--blur-glass));
}

/* Glassmorphism variant - modern glass effect */
.g-card.variant-glass {
  --cc-bg-color: rgba(255, 255, 255, 0.08);
  --cc-bg-color-hover: rgba(255, 255, 255, 0.12);
  --cc-bg-box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.12), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
  --cc-bg-box-shadow-hover: 0px 12px 48px rgba(0, 0, 0, 0.16), inset 0px 1px 0px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(var(--blur-glass-strong));
  border: var(--border-s) solid rgba(255, 255, 255, 0.1); /* 0.1rem = 1px */
}

/* ========================================================================
   CARD STATES AND SUB-COMPONENTS
   ======================================================================== */
/* Disabled state */
.g-card.disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

.g-card .g-progress-bar {
  margin-top: var(--space-8);
}

/* Card Header */
.card-header {
  align-items: center;
  color: var(--cc-card-color-header);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: 0.4rem;
  margin-bottom: var(--space-4);
}

/* Card Body */
.card-body {
  color: var(--cc-card-color-body);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  gap: var(--space-4);
  justify-content: center;
  width: 100%;
}

/* Custom Body */
.card-custom-body:not(:empty) {
  max-width: 24rem;
  width: 100%;
}

/* Card Content - main content container */
.g-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: var(--cc-card-content-gap, 0.4rem); /* 4px default */
  width: 100%;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0;
}
.g-card-content.combo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.2rem; /* 12px */
  text-align: left;
}

/* Card Title */
.g-card-title {
  display: block;
  width: 100%;
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: 700;
  font-size: 1.7rem; /* 17px from Figma */
  line-height: 2rem; /* 20px */
  text-align: center;
  font-feature-settings: "liga" off;
  color: var(--color-text-bolder);
  /* Default: clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Single line truncation modifier */
}
.g-card-title.truncate {
  display: block;
  white-space: nowrap;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Card Subtitle */
.g-card-subtitle {
  display: block;
  width: 100%;
  min-height: 1.6rem; /* 16px min from Figma */
  font-family: var(--font-family-system);
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem; /* 12px from Figma */
  line-height: 1.6rem; /* 16px */
  text-align: center;
  color: var(--color-text-default);
  /* Default: clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Single line truncation modifier */
}
.g-card-subtitle.truncate {
  display: block;
  white-space: nowrap;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

/* Badge and notification elements - now handled by g-notification-badge component directly */
/* Streak elements */
.g-card-streak {
  line-height: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

.g-card-streak-count {
  display: inline-block;
  font-family: var(--font-family-system);
  font-style: normal;
  font-weight: 600;
  font-size: 1.2rem; /* 12px */
  color: var(--color-orange-300);
  vertical-align: middle;
}

/* Bot meta elements */
.g-card-bot-info {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.2rem; /* 2px */
  flex: none;
  flex-grow: 0;
}

.g-card-bot-name {
  font-family: var(--font-family-system);
  font-style: normal;
  font-weight: 600;
  font-size: 1.2rem; /* 12px */
  line-height: 1.6rem; /* 16px */
  text-align: center;
  color: var(--color-text-default);
  flex: none;
  flex-grow: 0;
}

.g-card-bot-rating {
  font-family: var(--font-family-system);
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem; /* 12px */
  line-height: 1.6rem; /* 16px */
  text-align: center;
  color: var(--color-text-default);
  flex: none;
  flex-grow: 0;
}

.g-card-bot-flag {
  font-size: 1.6rem; /* 16px */
  line-height: 1;
  flex: none;
  flex-grow: 0;
}

/**
 * ▗▄▄▄▖ ▗▄▖ ▗▄▄▖  ▗▄▄▖
 *   █  ▐▌ ▐▌▐▌ ▐▌▐▌   
 *   █  ▐▛▀▜▌▐▛▀▚▖ ▝▀▚▖
 *   █  ▐▌ ▐▌▐▙▄▞▘▗▄▄▞▘
 *
 * Gambit CSS Framework - Tabs Component
 * Tabbed navigation with multiple variants
 */
/* ========================================================================
   TABS COMPONENT
   ======================================================================== */
/*
 * Tabs Structure:
 * <div class="g-tabs variant-{main|aside|secondary|inline}" role="tablist">
 *   <button class="g-tab is-active" role="tab" aria-selected="true">Tab 1</button>
 *   <button class="g-tab" role="tab" aria-selected="false">Tab 2</button>
 *   <button class="g-tab" role="tab" aria-selected="false">Tab 3</button>
 * </div>
 *
 * Variants: main, aside, secondary, inline
 *
 * Tab panels:
 * <div class="g-tab-panel" role="tabpanel" hidden>Content 1</div>
 * <div class="g-tab-panel g-tab-panel-active" role="tabpanel">Content 2</div>
 */
/* ========================================================================
   BASE TAB GROUP STYLES
   ======================================================================== */
.g-tabs {
  --tab-display: flex;
  --tab-bg: transparent;
  --tab-wrap: nowrap;
  --tab-height: 5.6rem;
  --tab-color: var(--color-text-default);
  --tab-color-hover: var(--color-text-bolder);
  --tab-icon-color: var(--color-icon-default);
  --tab-icon-color-hover: var(--color-icon-default-hovered);
  --tab-active-shadow: none;
  display: flex;
}
.g-tabs.is-sticky {
  display: var(--tab-display);
  position: relative;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-gray-800);
  overflow: visible !important;
}
.g-tabs.is-sticky:after {
  opacity: 0.5;
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 25%;
  background: linear-gradient(to bottom, var(--color-gray-800) 0%, transparent 100%);
  pointer-events: none;
}

/* ========================================================================
   VARIANT STYLES
   ======================================================================== */
/* Main Variant (Default) */
.g-tabs.variant-main {
  --tab-bg: var(--color-bg-tertiary);
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
  overflow: hidden;
}

/* Aside Variant */
.g-tabs.variant-aside {
  --tab-bg: var(--color-bg-tertiary);
  --tab-wrap: wrap;
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
  flex-direction: row;
  overflow: hidden;
  min-width: 30rem;
}
.g-tabs.variant-aside .g-tab-dot,
.g-tabs.variant-aside .g-tab-badge {
  display: none;
}

/* Secondary Variant */
.g-tabs.variant-secondary {
  --tab-height: 4.8rem;
  border-bottom: var(--border-s) solid var(--color-border-default);
  border-bottom: var(--border-s) solid var(--color-border-default);
}

/* Inline Variant */
.g-tabs.variant-inline {
  --tab-display: inline-flex;
  --tab-height: auto;
  gap: 2.4rem;
  gap: var(--space-24);
  height: 5.6rem;
  padding: 0 1.2rem;
  padding: 0 var(--space-12);
}

/* ========================================================================
   TAB ITEM STYLES
   ======================================================================== */
.g-tab {
  align-items: center;
  background: var(--tab-bg);
  border: 0;
  color: var(--tab-color);
  cursor: pointer;
  display: flex;
  flex: 1 1 0;
  gap: 0.8rem;
  gap: var(--space-8);
  height: var(--tab-height);
  justify-content: center;
  min-width: 0;
  outline: none;
  padding: 0 1.6rem;
  padding: 0 var(--space-16);
  position: relative;
  text-decoration: none;
  transition: background-color var(--motion-duration-moderate) var(--motion-ease-out-1), color var(--motion-duration-moderate) var(--motion-ease-out-1);
  white-space: var(--tab-wrap);
  container-name: tab;
  container-type: size;
}

/* Main variant - rounded corners for all items */
.g-tabs.variant-main .g-tab {
  border-radius: 0.3rem 0.3rem 0 0;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
}

/* Aside variant - no radius on regular items */
.g-tabs.variant-aside .g-tab {
  border-radius: 0;
}

/* Aside variant specific */
.g-tabs.variant-aside .g-tab {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--space-12);
  gap: 0.2rem;
  gap: var(--space-2);
  width: 100%;
  height: 5.6rem;
  color: var(--color-text-default);
}

/* Aside variant - active tab gets top rounded corners */
.g-tabs.variant-aside .g-tab.is-active,
.g-tabs.variant-aside .g-tab[aria-selected=true] {
  border-radius: 0.3rem 0.3rem 0 0;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
}

/* Secondary variant specific */
.g-tabs.variant-secondary .g-tab {
  flex: 0 0 auto;
  padding: 0 1.2rem;
  padding: 0 var(--space-12);
  flex: 1;
}

.g-tabs.variant-secondary .g-tab::after {
  background: transparent;
  bottom: -0.1rem;
  content: "";
  height: 0.3rem;
  left: 0;
  position: absolute;
  transition: background-color var(--motion-duration-moderate) var(--motion-ease-out-1);
  width: 100%;
}

/* Inline variant specific */
.g-tabs.variant-inline .g-tab {
  flex: 0 0 auto;
  padding: 0;
  position: relative;
}

/* ========================================================================
   TAB ITEM TYPOGRAPHY
   ======================================================================== */
/* Main variant - Extra large bold */
.g-tabs.variant-main .g-tab {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.33;
}

/* Aside variant - Small */
.g-tabs.variant-aside .g-tab {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.33;
}

/* Secondary/Inline variants - Medium bold */
.g-tabs.variant-secondary .g-tab,
.g-tabs.variant-inline .g-tab {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.2857;
}

/* ========================================================================
   TAB ITEM ELEMENTS
   ======================================================================== */
/* Tab label */
.g-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tab icon (aside variant only) */
.g-tab svg,
.g-tab-icon,
.g-tab .g-glyph {
  color: var(--tab-icon-color);
  flex-shrink: 0;
  height: 2.4rem;
  transition: color var(--motion-duration-moderate) var(--motion-ease-out-1);
  width: 2.4rem;
}

/* Tab icon for aside variant - specific sizing and color */
.g-tabs.variant-aside .g-tab-icon {
  height: 2rem;
  width: 2rem;
  color: var(--color-icon-default);
}

/* Tab badge */
.g-tab-badge {
  background: var(--color-border-default);
  background: var(--color-bg-subtle);
  border-radius: 0.3rem;
  border-radius: var(--radius-m);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0 0.4rem;
  padding: 0 var(--space-4);
}

/* Tab notification dot */
.g-tab-dot {
  background: var(--color-red-400);
  background: var(--color-bg-danger);
  border-radius: 50%;
  border-radius: var(--radius-circular);
  height: 0.8rem;
  width: 0.8rem;
}

/* ========================================================================
   HOVER STATE
   ======================================================================== */
@media (hover: hover) {
  .g-tab:hover:not(.is-active):not(:disabled) {
    color: var(--tab-color-hover);
  }
  .g-tab:hover:not(.is-active):not(:disabled) .g-tab-icon {
    color: var(--tab-icon-color-hover);
  }
  /* Match icon colors to text color on hover */
  .g-tab:hover:not(.is-active):not(:disabled) svg,
  .g-tab:hover:not(.is-active):not(:disabled) .g-glyph {
    color: var(--tab-color-hover);
  }
  .g-tab:hover:not(.is-active):not(:disabled) .g-glyph svg {
    fill: var(--tab-color-hover);
  }
}
/* ========================================================================
   ACTIVE STATE
   ======================================================================== */
/* ========================================================================
   SELECTED/ACTIVE TAB
   ======================================================================== */
.g-tabs.active-1 .g-tab:nth-child(1),
.g-tabs.active-2 .g-tab:nth-child(2),
.g-tabs.active-3 .g-tab:nth-child(3),
.g-tabs.active-4 .g-tab:nth-child(4),
.g-tabs.active-5 .g-tab:nth-child(5),
.g-tabs.active-6 .g-tab:nth-child(6),
.g-tabs.active-7 .g-tab:nth-child(7),
.g-tabs .g-tab.is-active,
.g-tabs .g-tab[aria-selected=true] {
  background: transparent;
  box-shadow: var(--tab-active-shadow);
  color: var(--color-neutrals-white);
  color: var(--color-text-boldest);
  cursor: default;
  pointer-events: none;
}
.g-tabs.active-1 .g-tab:nth-child(1) .g-glyph,
.g-tabs.active-2 .g-tab:nth-child(2) .g-glyph,
.g-tabs.active-3 .g-tab:nth-child(3) .g-glyph,
.g-tabs.active-4 .g-tab:nth-child(4) .g-glyph,
.g-tabs.active-5 .g-tab:nth-child(5) .g-glyph,
.g-tabs.active-6 .g-tab:nth-child(6) .g-glyph,
.g-tabs.active-7 .g-tab:nth-child(7) .g-glyph,
.g-tabs .g-tab.is-active .g-glyph,
.g-tabs .g-tab[aria-selected=true] .g-glyph {
  color: var(--color-text-boldest);
}
.g-tabs.active-1 .g-tab:nth-child(1) .g-glyph path,
.g-tabs.active-2 .g-tab:nth-child(2) .g-glyph path,
.g-tabs.active-3 .g-tab:nth-child(3) .g-glyph path,
.g-tabs.active-4 .g-tab:nth-child(4) .g-glyph path,
.g-tabs.active-5 .g-tab:nth-child(5) .g-glyph path,
.g-tabs.active-6 .g-tab:nth-child(6) .g-glyph path,
.g-tabs.active-7 .g-tab:nth-child(7) .g-glyph path,
.g-tabs .g-tab.is-active .g-glyph path,
.g-tabs .g-tab[aria-selected=true] .g-glyph path {
  fill: var(--color-text-boldest);
}

/* Secondary variant active state */
.g-tabs.variant-secondary .g-tab.is-active::after,
.g-tabs.variant-secondary .g-tab[aria-selected=true]::after {
  background: var(--color-text-default);
}

/* Inline variant active state */
.g-tabs.variant-inline .g-tab.is-active,
.g-tabs.variant-inline .g-tab[aria-selected=true] {
  background: transparent;
  border-bottom: var(--border-l) solid var(--color-green-300);
  border-bottom: var(--border-l) solid var(--color-green-400);
  color: var(--color-neutrals-white);
  color: var(--color-text-boldest);
  pointer-events: auto;
}

/* ========================================================================
   DISABLED STATE
   ======================================================================== */
.g-tab:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* ========================================================================
   TAB PANEL
   ======================================================================== */
.g-tab-panel {
  display: none;
}

.g-tab-panel-active,
.g-tab-panel:not([hidden]) {
  display: block;
}

/* ========================================================================
   CONTAINER QUERIES - RESPONSIVE BEHAVIOR
   ======================================================================== */
/* Container queries for variant-main only */
.g-tabs.variant-main {
  /* When tab is narrow (80-120px), hide the icon and keep label */
  /* When tab is very narrow (<80px), show only icon */
}
@container tab (max-width: 130px) and (min-width: 71px) {
  .g-tabs.variant-main .g-glyph {
    display: none !important;
  }
}
@container tab (max-width: 70px) {
  .g-tabs.variant-main {
    /* Ensure glyph is visible in this case */
    /* Remove gap since there's no label */
    gap: 0;
  }
  .g-tabs.variant-main .g-tab-label {
    display: none;
  }
  .g-tabs.variant-main .g-glyph {
    display: block;
  }
}

/* For aside variant in game sidebar, we always want both icon and label visible */
/* Container queries removed for this variant */
/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-tabs.variant-main {
  /* Explicit declarations for IDE autocomplete */
}
.g-tabs.variant-main .g-glyph {
  height: 2.4rem;
  width: 2.4rem;
}

.g-tabs.variant-aside {
  /* Explicit declarations for IDE autocomplete */
}
.g-tabs.variant-aside .g-glyph {
  height: 2rem;
  width: 2rem;
}

.g-tabs.variant-secondary {
  /* Explicit declarations for IDE autocomplete */
}
.g-tabs.variant-secondary .g-glyph {
  height: 2rem;
  width: 2rem;
}

.g-tabs.variant-inline {
  /* Explicit declarations for IDE autocomplete */
}
.g-tabs.variant-inline .g-glyph {
  height: 1.6rem;
  width: 1.6rem;
}

/**
 * ▗▖ ▗▖ ▗▄▄▖▗▄▄▄▖▗▄▄▖ 
 * ▐▌ ▐▌▐▌   ▐▌   ▐▌ ▐▌
 * ▐▌ ▐▌ ▝▀▚▖▐▛▀▀▘▐▛▀▚▖
 * ▝▚▄▞▘▗▄▄▞▘▐▙▄▄▖▐▌ ▐▌
 *
 * Gambit CSS Framework - User Component
 * Displays username with membership badge, title, rating, and status indicators.
 * Based on Figma design specifications.
 */
.g-user-username {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 0.4rem;
  height: 2rem;
}
.g-user-username .hide {
  display: none;
}
.g-user-username.size-s {
  height: 1.6rem;
  height: var(--icon-16);
  gap: 0.4rem;
}
.g-user-username.size-s .g-membership-badge {
  width: 1.6rem !important;
  width: var(--icon-16) !important;
  height: 1.6rem !important;
  height: var(--icon-16) !important;
}
.g-user-username.size-s .g-membership-badge .g-glyph {
  width: 1.2rem !important;
  width: var(--icon-12) !important;
  height: 1.2rem !important;
  height: var(--icon-12) !important;
}
.g-user-username.size-s .g-user-title {
  height: 1.4rem;
  font-size: 1rem; /* 10px from Figma */
  line-height: 1rem;
  padding: 0.2rem 0.3rem;
}
.g-user-username.size-s .g-user-link {
  font-size: 1.4rem;
  line-height: 1.6rem;
}
.g-user-username.size-s .g-user-rating {
  font-size: 1.4rem;
  line-height: 1.6rem;
}
.g-user-username.size-s .g-user-badge {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-user-username.size-s .g-user-badge .g-glyph {
  width: 1.2rem; /* 12px */
  height: 1.2rem; /* 12px */
}
.g-user-username.size-s .g-user-flag {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-user-username.size-s .g-user-flair {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-user-username.size-m {
  height: 2rem;
  height: var(--icon-20);
  gap: 0.8rem;
}
.g-user-username.size-m .g-membership-badge {
  width: 2rem !important;
  width: var(--icon-20) !important;
  height: 2rem !important;
  height: var(--icon-20) !important;
}
.g-user-username.size-m .g-membership-badge .g-glyph {
  width: 1.6rem !important;
  width: var(--icon-16) !important;
  height: 1.6rem !important;
  height: var(--icon-16) !important;
}
.g-user-username.size-m .g-user-title {
  height: 2rem;
  font-size: 1.4rem;
  line-height: 1.6rem;
  padding: 0.2rem 0.3rem;
}
.g-user-username.size-m .g-user-link {
  font-size: 1.7rem;
  line-height: 2rem;
  font-weight: 800;
}
.g-user-username.size-m .g-user-rating {
  font-size: 1.7rem;
  line-height: 2rem;
}
.g-user-username.size-m .g-user-badge {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-user-username.size-m .g-user-badge .g-glyph {
  width: 1.2rem; /* 12px */
  height: 1.2rem; /* 12px */
}
.g-user-username.size-m .g-user-flag {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-user-username.size-m .g-user-flair {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-user-username.size-l {
  height: 2.4rem;
  height: var(--icon-24);
  gap: 0.8rem;
}
.g-user-username.size-l .g-membership-badge {
  width: 2.4rem !important;
  width: var(--icon-24) !important;
  height: 2.4rem !important;
  height: var(--icon-24) !important;
}
.g-user-username.size-l .g-membership-badge .g-glyph {
  width: 2rem !important;
  width: var(--icon-20) !important;
  height: 2rem !important;
  height: var(--icon-20) !important;
}
.g-user-username.size-l .g-user-title {
  height: 2.4rem;
  font-size: 1.7rem;
  line-height: 2rem;
  padding: 0.2rem 0.3rem;
}
.g-user-username.size-l .g-user-link {
  font-size: 2.2rem;
  line-height: 2.4rem;
  font-weight: 800;
}
.g-user-username.size-l .g-user-rating {
  font-size: 1.7rem;
  line-height: 2rem;
}
.g-user-username.size-l .g-user-badge {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}
.g-user-username.size-l .g-user-badge .g-glyph {
  width: 1.2rem; /* 12px */
  height: 1.2rem; /* 12px */
}
.g-user-username.size-l .g-user-flag {
  width: 2.4rem;
  width: var(--icon-24);
  height: 2.4rem;
  height: var(--icon-24);
}
.g-user-username.size-l .g-user-flair {
  width: 2.4rem;
  width: var(--icon-24);
  height: 2.4rem;
  height: var(--icon-24);
}

.g-user-badge {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 0.2rem;
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
  flex: none;
  flex-grow: 0;
}
.g-user-badge.variant-verified {
  background: var(--color-transparent-white-14);
  border-radius: 1.6rem;
  order: 4;
}
.g-user-badge.variant-verified .g-glyph {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-user-badge.variant-verified .g-glyph svg {
  width: 100%;
  height: 100%;
}
.g-user-badge.variant-verified .g-glyph svg path {
  fill: var(--color-transparent-white-72);
}
.g-user-badge.none {
  display: none;
}

.g-user-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.2rem 0.3rem;
  height: 1.4rem;
  border-radius: 0.3rem;
  font-family: var(--font-family-system);
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1rem;
  text-align: center;
  color: var(--color-neutrals-white);
  text-transform: uppercase;
  flex: none;
  order: 1;
  flex-grow: 0;
  background: var(--color-bg-chesstitle);
}
.g-user-title.none {
  display: none;
}

.g-user-link {
  font-family: var(--font-family-system);
  font-style: normal;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: var(--color-neutrals-white);
  text-decoration: none;
  flex: none;
  order: 2;
  flex-grow: 0;
}
.g-user-link:hover {
  opacity: var(--opacity-pressed);
}

.g-user-rating {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  font-family: var(--font-family-system);
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: var(--color-transparent-white-72);
  flex: none;
  order: 3;
  flex-grow: 0;
  font-feature-settings: "tnum" 1;
}
.g-user-rating::before {
  content: "(";
}
.g-user-rating::after {
  content: ")";
}
.g-user-rating.provisional::before {
  content: "(";
}
.g-user-rating.provisional::after {
  content: "?)";
}
.g-user-rating.hide {
  display: none;
}

.g-user-flag {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
  flex: none;
  order: 5;
  flex-grow: 0;
  border-radius: 0.2rem;
  overflow: hidden;
}
.g-user-flag img {
  width: 100%;
  height: 100%;
}
.g-user-flag.hide {
  display: none;
}

.g-user-flair {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
  flex: none;
  order: 6;
  flex-grow: 0;
}
.g-user-flair img {
  width: 100%;
  height: 100%;
  display: block;
}
.g-user-flair.hide {
  display: none;
}

/**
 * ▗▖  ▗▖ ▗▄▖ ▗▄▄▄  ▗▄▖ ▗▖   
 * ▐▛▚▞▜▌▐▌ ▐▌▐▌  ▐▌▐▌ ▐▌▐▌   
 * ▐▌  ▐▌▐▌ ▐▌▐▌  ▐▌▐▛▀▜▌▐▌   
 * ▐▌  ▐▌▝▚▄▞▘▐▙▄▄▀ ▐▌ ▐▌▐▙▄▄▖
 *
 * Gambit CSS Framework - Modal Component
 * Dialog overlay windows with various sizes
 */
/* ========================================================================
   MODAL COMPONENT
   ======================================================================== */
/*
 * Modal Structure:
 * <div class="g-modal g-modal-active" role="dialog">
 *   <div class="g-modal-backdrop"></div>
 *   <div class="g-modal-container">
 *     <div class="g-modal-dialog size-{size}">
 *       <div class="g-modal-header">
 *         <h3 class="g-modal-title">Title</h3>
 *         <button class="g-modal-close">×</button>
 *       </div>
 *       <div class="g-modal-body">
 *         Content
 *       </div>
 *       <div class="g-modal-footer">
 *         Footer content
 *       </div>
 *     </div>
 *   </div>
 * </div>
 *
 * Sizes: size-xxxs, size-xxs, size-xs, size-s, size-m, size-l, size-xl
 */
/* ========================================================================
   MODAL WRAPPER
   ======================================================================== */
.code-example .g-modal {
  position: absolute !important;
}

.g-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-index-modal);
  display: none;
}

.g-modal.g-modal-active {
  display: block;
}

/* ========================================================================
   MODAL BACKDROP
   ======================================================================== */
.g-modal .g-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg-overlay);
  animation: modal-fade-in var(--motion-duration-slow) var(--motion-ease-out-1);
}

.g-modal .g-modal-backdrop-transparent {
  background: transparent;
}

/* Closing animation */
.g-modal.g-modal-closing .g-modal-backdrop {
  animation: modal-fade-out var(--motion-duration-fast) var(--motion-ease-out-1);
}

/* ========================================================================
   MODAL CONTAINER
   ======================================================================== */
.g-modal .g-modal-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2.4rem 0;
  padding: var(--space-24) 0;
  pointer-events: none;
}

/* ========================================================================
   MODAL DIALOG
   ======================================================================== */
.g-modal .g-modal-dialog {
  --modal-width: 46rem; /* Default md size */
  background: var(--color-bg-opaque);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
  box-shadow: 0 1.6rem 3.2rem var(--color-transparent-black-20), inset 0 0 0 0.1rem var(--color-transparent-white-10);
  box-shadow: 0 var(--space-16) var(--space-32) var(--color-transparent-black-20), inset 0 0 0 var(--border-s) var(--color-border-default);
  max-height: calc(100% - 3rem);
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  pointer-events: auto;
  position: relative;
  width: 46rem;
  width: var(--modal-width);
  animation: modal-scale-in var(--motion-duration-slow) var(--motion-ease-out-1);
}

/* Closing animation */
.g-modal.g-modal-closing .g-modal-dialog {
  animation: modal-scale-out var(--motion-duration-fast) var(--motion-ease-out-1);
}

/* ========================================================================
   MODAL SIZES
   ======================================================================== */
.g-modal .g-modal-dialog.size-xxxs {
  --modal-width: 20rem;
}

.g-modal .g-modal-dialog.size-xxs {
  --modal-width: 30rem;
}

.g-modal .g-modal-dialog.size-xs {
  --modal-width: 36rem;
}

.g-modal .g-modal-dialog.size-s {
  --modal-width: 40rem;
}

.g-modal .g-modal-dialog.size-m {
  --modal-width: 46rem;
}

.g-modal .g-modal-dialog.size-l {
  --modal-width: 50rem;
}

.g-modal .g-modal-dialog.size-xl {
  --modal-width: 60rem;
}

/* ========================================================================
   MODAL HEADER
   ======================================================================== */
.g-modal .g-modal-header {
  background: var(--color-bg-tertiary);
  border-radius: 1rem 1rem 0 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 4.8rem;
  padding-left: var(--space-16);
  position: relative;
}

.g-modal .g-modal-title {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2222;
  margin: 0;
  padding-right: 1.6rem;
  padding-right: var(--space-16);
}

/* ========================================================================
   MODAL CLOSE BUTTON
   ======================================================================== */
.g-modal .g-modal-close {
  background: transparent;
  border: 0;
  color: var(--color-icon-default);
  cursor: pointer;
  font-size: 2.4rem;
  height: 3.2rem;
  line-height: 1;
  outline: none;
  padding: 0;
  position: absolute;
  right: 1.2rem;
  right: var(--space-12);
  top: 1.2rem;
  top: var(--space-12);
  transition: color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 3.2rem;
  z-index: var(--z-index-base);
}

.g-modal .g-modal-close:hover {
  color: var(--color-icon-default-hovered);
}

.g-modal .g-modal-close:active {
  opacity: var(--opacity-pressed);
}

/* ========================================================================
   MODAL BODY
   ======================================================================== */
.g-modal .g-modal-body {
  overflow-y: auto;
  padding: 1.6rem 2.4rem;
  padding: var(--space-16) var(--space-24);
  max-height: calc(100vh - 12rem);
}

.g-modal .g-modal-body p {
  text-wrap: balance;
}

/* ========================================================================
   MODAL FOOTER
   ======================================================================== */
.g-modal .g-modal-footer {
  padding: 1.6rem 2.4rem;
  padding: var(--space-16) var(--space-24);
  display: flex;
  gap: 1.2rem;
  gap: var(--space-12);
  justify-content: flex-end;
}
.g-modal .g-modal-footer .g-button {
  flex: 1;
}

/* ========================================================================
   SCROLL LOCK UTILITY
   ======================================================================== */
/* Add this class to body when modal is open */
.g-modal-open {
  overflow: hidden;
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */
@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modal-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes modal-scale-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes modal-scale-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-modal-dialog.size-xxxs,
.g-modal-dialog.size-xxs,
.g-modal-dialog.size-xs,
.g-modal-dialog.size-s,
.g-modal-dialog.size-m,
.g-modal-dialog.size-l,
.g-modal-dialog.size-xl {
  /* Explicit declarations for IDE autocomplete */
}

/**
 * ▗▄▄▄ ▗▄▄▖  ▗▄▖ ▗▄▄▖ ▗▄▄▄  ▗▄▖ ▗▖ ▗▖▗▖  ▗▖
 * ▐▌  █▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌  █▐▌ ▐▌▐▌ ▐▌▐▛▚▖▐▌
 * ▐▌  █▐▛▀▚▖▐▌ ▐▌▐▛▀▘ ▐▌  █▐▌ ▐▌▐▌ ▐▌▐▌ ▝▜▌
 * ▐▙▄▄▀▐▌ ▐▌▝▚▄▞▘▐▌   ▐▙▄▄▀▝▚▄▞▘▐▙█▟▌▐▌  ▐▌
 *
 * Gambit CSS Framework - Dropdown Component
 * Dropdown menu styling with various sizes
 */
/* ========================================================================
   DROPDOWN COMPONENT
   ======================================================================== */
/*
 * Dropdown Structure:
 * <div class="g-dropdown size-{s|m|l|xl|xxl} [padded]">
 *   <button class="g-dropdown-item">
 *     <span class="g-glyph"><!-- svg icon --></span>
 *     <span class="g-dropdown-label">Item 1</span>
 *   </button>
 *   <button class="g-dropdown-item selected">
 *     <span class="g-dropdown-label">Item 2</span>
 *     <span class="g-glyph selected"><!-- checkmark icon --></span>
 *   </button>
 *   <button class="g-dropdown-item danger">
 *     <span class="g-dropdown-label">Delete</span>
 *   </button>
 * </div>
 *
 * Sizes: xxxs, xxs, xs, sm, md, lg, xl
 * 
 * Note: This component provides the dropdown menu styling only.
 * Positioning should be handled by a parent wrapper component.
 */
/* ========================================================================
   DROPDOWN CONTAINER
   ======================================================================== */
.g-dropdown {
  --dropdown-width: 30rem; /* Default xxs size */
  background: var(--color-gray-900);
  background: var(--color-bg-opaque);
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.2), inset 0 0 0 0.1rem rgba(255, 255, 255, 0.1);
  box-shadow: 0 0.4rem 1.6rem var(--color-transparent-black-20), inset 0 0 0 var(--border-s) var(--color-border-default);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 30rem;
  width: var(--dropdown-width);
}

/* Padded variant */
.g-dropdown.padded {
  padding: 1.2rem;
  padding: var(--space-12);
}

.g-dropdown.padded .g-dropdown-item:first-child {
  border-radius: 0.3rem 0.3rem 0 0;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
}

.g-dropdown.padded .g-dropdown-item:last-child {
  border-radius: 0 0 0.3rem 0.3rem;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
}

/* ========================================================================
   DROPDOWN SIZES
   ======================================================================== */
.g-dropdown.size-s {
  --dropdown-width: 24rem;
}

.g-dropdown.size-m {
  --dropdown-width: 30rem;
}

.g-dropdown.size-l {
  --dropdown-width: 40rem;
}

.g-dropdown.size-xl {
  --dropdown-width: 50rem;
}

.g-dropdown.size-xxl {
  --dropdown-width: 60rem;
}

/* ========================================================================
   DROPDOWN ITEM
   ======================================================================== */
.g-dropdown-item {
  align-items: center;
  background: transparent;
  border: none;
  color: var(--color-text-default);
  color: var(--color-text-default);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 1.4rem;
  gap: 1.2rem;
  gap: var(--space-12);
  line-height: 1.2857;
  min-height: 4rem;
  outline: none;
  padding: 1.2rem;
  padding: var(--space-12);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out-1), color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 100%;
}

/* ========================================================================
   DROPDOWN ITEM ELEMENTS
   ======================================================================== */
/* Item label */
.g-dropdown-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Allow wrapping */
.g-dropdown-item.wrap .g-dropdown-label {
  white-space: normal;
}

/* Item icon - Using g-glyph */
.g-dropdown-item .g-glyph {
  color: var(--color-icon-default);
  color: var(--color-icon-default);
  flex-shrink: 0;
  height: 2rem;
  transition: color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 2rem;
}

/* Selected icon (checkmark) - Using g-glyph */
.g-dropdown-item .g-glyph.selected {
  animation: dropdown-selected-icon 50ms var(--motion-ease-out-1);
  color: var(--color-green-300);
  color: var(--color-icon-success);
  flex-shrink: 0;
  height: 2rem;
  width: 2rem;
}

/* Chevron indicators - Using g-glyph with modifiers */
.g-dropdown-item .g-glyph.chevron {
  color: var(--color-icon-subtle);
  color: var(--color-icon-subtle);
  flex-shrink: 0;
  height: 1.2rem;
  margin-left: auto;
  width: 1.2rem;
}

.g-dropdown-item .g-glyph.chevron-up {
  transform: rotate(-90deg);
}

.g-dropdown-item .g-glyph.chevron-down {
  transform: rotate(90deg);
}

/* ========================================================================
   DROPDOWN ITEM STATES
   ======================================================================== */
/* Hover state */
@media (hover: hover) {
  .g-dropdown-item:hover:not(.g-dropdown-item.selected):not(:disabled) {
    background: var(--color-bg-subtlest);
    background: var(--color-bg-subtlest);
    color: var(--color-text-bolder);
    color: var(--color-text-default-hovered);
  }
  .g-dropdown-item:hover:not(.g-dropdown-item.selected):not(:disabled) .g-glyph {
    color: var(--color-text-default);
    color: var(--color-icon-default-hovered);
  }
}
/* Active state */
.g-dropdown-item:active:not(:disabled) {
  opacity: var(--opacity-pressed);
}

/* Selected state */
.g-dropdown-item.selected {
  background: var(--color-bg-subtler);
  background: var(--color-bg-subtler);
  color: var(--color-text-bolder);
  color: var(--color-text-bolder);
}

.g-dropdown-item.selected .g-glyph {
  color: var(--color-text-default);
  color: var(--color-icon-default-hovered);
}

/* Danger/Destructive state */
.g-dropdown-item.danger {
  color: var(--color-red-300);
  color: var(--color-text-danger);
}

.g-dropdown-item.danger .g-glyph {
  color: var(--color-red-300);
  color: var(--color-icon-danger);
}

@media (hover: hover) {
  .g-dropdown-item.danger:hover:not(:disabled) {
    background: var(--color-red-400);
    background: var(--color-bg-danger);
    color: var(--color-gray-800);
    color: var(--color-text-inverse);
  }
  .g-dropdown-item.danger:hover:not(:disabled) .g-glyph {
    color: var(--color-gray-800);
    color: var(--color-icon-inverse);
  }
}
/* Disabled state */
.g-dropdown-item:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

/* ========================================================================
   DROPDOWN DIVIDER
   ======================================================================== */
.g-dropdown-divider {
  background: var(--color-border-subtle);
  background: var(--color-border-subtle);
  height: 0.1rem;
  height: var(--border-s);
  margin: 0.4rem 0;
  margin: var(--space-4) 0;
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */
@keyframes dropdown-selected-icon {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
/* Size classes now use modular pattern: .g-dropdown.size-{s|m|l|xl|xxl} */
/**
 * ▗▄▄▖  ▗▄▖ ▗▄▄▖  ▗▄▖ ▗▖  ▗▖▗▄▄▄▖▗▄▄▖ 
 * ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌  ▐▌▐▌   ▐▌ ▐▌
 * ▐▛▀▘ ▐▌ ▐▌▐▛▀▘ ▐▌ ▐▌▐▌  ▐▌▐▛▀▀▘▐▛▀▚▖
 * ▐▌   ▝▚▄▞▘▐▌   ▝▚▄▞▘ ▝▚▞▝ ▐▙▄▄▖▐▌ ▐▌
 *
 * Gambit CSS Framework - Popover Component
 * Styles for popover and tooltip containers
 */
/* ========================================================================
   POPOVER COMPONENT
   ======================================================================== */
.popover,
.popover-lighter {
  border: var(--border-s) solid #4B4847;
  border: var(--border-s) solid var(--color-border-opaque);
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.3);
  box-shadow: var(--elevation-popover);
  overflow: hidden;
}

.popover {
  background-color: #262421;
  background-color: var(--color-bg-opaque);
}

.popover-lighter {
  background-color: #312E2B;
  background-color: var(--color-bg-opaque-lighter);
}

/**
 *  ▗▄▖ ▗▄▖ ▗▖  ▗▖▗▄▄▄▖ ▗▄▖ ▗▄▄▄▖▗▖  ▗▖▗▄▄▄▖▗▄▄▖ 
 * ▐▌  ▐▌ ▐▌▐▛▚▖▐▌  █  ▐▌ ▐▌  █  ▐▛▚▖▐▌▐▌   ▐▌ ▐▌
 * ▐▌  ▐▌ ▐▌▐▌ ▝▜▌  █  ▐▛▀▜▌  █  ▐▌ ▝▜▌▐▛▀▀▘▐▛▀▚▖
 * ▝▚▄▄▝▚▄▞▘▐▌  ▐▌  █  ▐▌ ▐▌▗▄█▄▖▐▌  ▐▌▐▙▄▄▖▐▌ ▐▌
 *
 * Gambit CSS Framework - Container Component
 * Flexible layout component using flexbox
 */
/* ========================================================================
   CONTAINER COMPONENT
   ======================================================================== */
/*
 * Container is a flexible layout component using flexbox
 * 
 * Base usage (includes defaults: wrap, g-24, w-full):
 * <div class="g-container">Content</div>
 * 
 * With modifiers:
 * <div class="g-container direction-column g-16 p-24">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </div>
 * 
 * Default values:
 * - Direction: row
 * - Wrap: wrap
 * - Gap: g-24
 * - Width: w-full
 * - Align: center
 * - Justify: center
 * 
 * Available modifiers:
 * - Display: g-container display-inline
 * - Direction: g-container direction-row, g-container direction-column
 * - Padding: g-container p-{0|8|12|16|24|40}
 * - Gap: g-container g-{0|2|4|8|12|16|24}
 * - Align: g-container align-{start|center|end|stretch}
 * - Justify: g-container justify-{start|center|end|between|around|evenly}
 * - Wrap: g-container wrap, g-container nowrap
 * - Width: g-container w-{auto|xs|s|m|l|xl|full}
 */
/* ========================================================================
   BASE CONTAINER
   ======================================================================== */
.g-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2.4rem;
  gap: var(--space-24);
  justify-content: center;
  padding: 0;
  width: 100%;
}

/* ========================================================================
   DISPLAY MODIFIERS
   ======================================================================== */
.g-container.display-inline {
  display: inline-flex;
}

/* ========================================================================
   DIRECTION MODIFIERS
   ======================================================================== */
.g-container.direction-row {
  flex-direction: row;
}

.g-container.direction-column {
  flex-direction: column;
}

/* ========================================================================
   PADDING MODIFIERS
   ======================================================================== */
.g-container.p-0 {
  padding: 0;
}

.g-container.p-8 {
  padding: 0.8rem;
  padding: var(--space-8);
}

.g-container.p-12 {
  padding: 1.2rem;
  padding: var(--space-12);
}

.g-container.p-16 {
  padding: 1.6rem;
  padding: var(--space-16);
}

.g-container.p-24 {
  padding: 2.4rem;
  padding: var(--space-24);
}

.g-container.p-40 {
  padding: 4rem;
  padding: var(--space-40);
}

/* ========================================================================
   GAP MODIFIERS
   ======================================================================== */
.g-container.g-0 {
  gap: 0;
}

.g-container.g-2 {
  gap: 0.2rem;
  gap: var(--space-2);
}

.g-container.g-4 {
  gap: 0.4rem;
  gap: var(--space-4);
}

.g-container.g-8 {
  gap: 0.8rem;
  gap: var(--space-8);
}

.g-container.g-12 {
  gap: 1.2rem;
  gap: var(--space-12);
}

.g-container.g-16 {
  gap: 1.6rem;
  gap: var(--space-16);
}

.g-container.g-24 {
  gap: 2.4rem;
  gap: var(--space-24);
}

/* ========================================================================
   ALIGNMENT MODIFIERS
   ======================================================================== */
.g-container.align-start {
  align-items: flex-start;
}

.g-container.align-center {
  align-items: center;
}

.g-container.align-end {
  align-items: flex-end;
}

/* ========================================================================
   JUSTIFICATION MODIFIERS
   ======================================================================== */
.g-container.justify-start {
  justify-content: flex-start;
}

.g-container.justify-center {
  justify-content: center;
}

.g-container.justify-end {
  justify-content: flex-end;
}

.g-container.justify-between {
  justify-content: space-between;
}

.g-container.justify-around {
  justify-content: space-around;
}

/* ========================================================================
   WRAP MODIFIERS
   ======================================================================== */
.g-container.wrap {
  flex-wrap: wrap;
}

.g-container.nowrap {
  flex-wrap: nowrap;
}

/* ========================================================================
   WIDTH MODIFIERS (USING CONTAINER TOKENS)
   ======================================================================== */
.g-container.w-auto {
  width: auto;
}

.g-container.w-xs {
  width: 30rem;
  width: var(--container-xs);
}

.g-container.w-s {
  width: 40rem;
  width: var(--container-s);
}

.g-container.w-m {
  width: 46rem;
  width: var(--container-m);
}

.g-container.w-l {
  width: 50rem;
  width: var(--container-l);
}

.g-container.w-xl {
  width: 60rem;
  width: var(--container-xl);
}

.g-container.w-full {
  width: 100%;
}

/* ========================================================================
   COMMON PATTERNS
   ======================================================================== */
/* Centered content container */
.g-container.centered {
  margin-left: auto;
  margin-right: auto;
  max-width: 60rem;
  max-width: var(--container-xl);
  width: 100%;
}

/* Stack container (vertical with gap) */
.g-container.stack {
  flex-direction: column;
  gap: 1.6rem;
  gap: var(--space-16);
}

/* Row container (horizontal with gap) */
.g-container.row-spaced {
  gap: 1.6rem;
  gap: var(--space-16);
  justify-content: space-between;
}

/**
 *  ▗▄▄▖▗▄▄▄▖ ▗▄▄▖▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖  ▗▖
 * ▐▌   ▐▌   ▐▌     █    █  ▐▌ ▐▌▐▛▚▖▐▌
 *  ▝▀▚▖▐▛▀▀▘▐▌     █    █  ▐▌ ▐▌▐▌ ▝▜▌
 * ▗▄▄▞▘▐▙▄▄▖▝▚▄▄▖  █  ▗▄█▄▖▝▚▄▞▘▐▌  ▐▌
 *
 * Gambit CSS Framework - Section Component
 * Semantic grouping components for related content
 */
/* ========================================================================
   SECTION COMPONENT
   ======================================================================== */
/*
 * Section Structure:
 * <div class="g-section">
 *   <div class="g-section-header">
 *     <h2 class="g-section-header-title">Title</h2>
 *     <div class="g-section-header-actions">Actions</div>
 *   </div>
 *   <div class="g-section-body">
 *     Content
 *   </div>
 *   <div class="g-section-footer">
 *     Footer content
 *   </div>
 * </div>
 *
 * Variants: g-section-elevated, g-section-bordered, g-section-transparent
 * Padding: padded, padded-s, padded-l
 */
/* ========================================================================
   BASE SECTION STYLES
   ======================================================================== */
.g-section {
  background: rgba(255, 255, 255, 0.05);
  background: var(--color-bg-subtle);
  border-radius: 0.8rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  position: relative;
}

/* ========================================================================
   SECTION VARIANTS
   ======================================================================== */
/* Elevated section with shadow */
.g-section.variant-elevated {
  background: rgba(0, 0, 0, 0.3);
  background: var(--color-bg-secondary);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
  box-shadow: var(--elevation-low);
}

/* Bordered section */
.g-section.variant-bordered {
  background: transparent;
  border: var(--border-s) solid rgba(255, 255, 255, 0.1);
  border: var(--border-s) solid var(--color-border-default);
}

/* Transparent section */
.g-section.variant-transparent {
  background: transparent;
  border-radius: 0;
}

/* ========================================================================
   SECTION PADDING MODIFIERS
   ======================================================================== */
/* Padded sections for simple content without header/body/footer structure */
.g-section.padded {
  padding: 2.4rem;
  padding: var(--space-24);
}

.g-section.padded-s {
  padding: 1.6rem;
  padding: var(--space-16);
}

.g-section.padded-l {
  padding: 3.2rem;
  padding: var(--space-32);
}

/* ========================================================================
   SECTION HEADER
   ======================================================================== */
.g-section .g-section-header {
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  background: var(--color-bg-tertiary);
  border-bottom: var(--border-s) solid rgba(255, 255, 255, 0.1);
  border-bottom: var(--border-s) solid var(--color-border-default);
  display: flex;
  gap: 1.6rem;
  gap: var(--space-16);
  justify-content: space-between;
  min-height: 4.8rem;
  padding: 1.2rem 1.6rem;
  padding: var(--space-12) var(--space-16);
}

/* Header without border */
.g-section .g-section-header.borderless {
  border-bottom: none;
}

/* Header title */
.g-section .g-section-header-title {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

/* Header actions */
.g-section .g-section-header-actions {
  display: flex;
  gap: 0.8rem;
  gap: var(--space-8);
}

/* ========================================================================
   SECTION BODY
   ======================================================================== */
.g-section .g-section-body {
  padding: 1.6rem;
  padding: var(--space-16);
}

/* Body padding variations */
.g-section .g-section-body.size-s {
  padding: 1.2rem;
  padding: var(--space-12);
}

.g-section .g-section-body.size-l {
  padding: 2.4rem;
  padding: var(--space-24);
}

/* ========================================================================
   SECTION FOOTER
   ======================================================================== */
.g-section .g-section-footer {
  align-items: center;
  background: rgba(0, 0, 0, 0.1);
  background: var(--color-bg-secondary);
  border-top: var(--border-s) solid rgba(255, 255, 255, 0.1);
  border-top: var(--border-s) solid var(--color-border-default);
  display: flex;
  gap: 1.2rem;
  gap: var(--space-12);
  justify-content: space-between;
  min-height: 4rem;
  padding: 1.2rem 1.6rem;
  padding: var(--space-12) var(--space-16);
}

/* Footer alignment variations */
.g-section .g-section-footer.footer-start {
  justify-content: flex-start;
}

.g-section .g-section-footer.footer-center {
  justify-content: center;
}

.g-section .g-section-footer.footer-end {
  justify-content: flex-end;
}

/* ========================================================================
   SECTION DIVIDER
   ======================================================================== */
.g-section .g-section-divider {
  background: rgba(255, 255, 255, 0.1);
  background: var(--color-border-default);
  height: 0.1rem;
  margin: 1.6rem 0;
  margin: var(--space-16) 0;
  width: 100%;
}

/* ========================================================================
   SECTION GROUP
   ======================================================================== */
/* Container for multiple related sections */
.g-section-group {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  gap: var(--space-8);
}

/* ========================================================================
   SECTION STATES
   ======================================================================== */
/* Collapsible section */
.g-section.collapsible .g-section-header {
  cursor: pointer;
  user-select: none;
}

.g-section.collapsible .g-section-header:hover {
  background: rgba(0, 0, 0, 0.25);
  background: var(--color-bg-tertiary-hovered);
}

/* Collapsed state */
.g-section.collapsed .g-section-body,
.g-section.collapsed .g-section-footer {
  display: none;
}

/* Loading state */
.g-section.loading {
  opacity: 0.6;
  pointer-events: none;
}

.g-section.loading::after {
  animation: rotate 1s linear infinite;
  border: var(--border-m) solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top-color: rgba(255, 255, 255, 0.5);
  content: "";
  height: 2.4rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* ========================================================================
   NESTED SECTIONS
   ======================================================================== */
/* Reduce padding/margins for nested sections */
.g-section .g-section {
  margin: 0;
}

.g-section .g-section .g-section-header {
  background: rgba(0, 0, 0, 0.1);
  min-height: 4rem;
  padding: 0.8rem 1.2rem;
  padding: var(--space-8) var(--space-12);
}

.g-section .g-section .g-section-header-title {
  font-size: 1.4rem;
}

/* ========================================================================
   SIMPLE SECTION UTILITY
   ======================================================================== */
/* Simple section background utility class */
.section {
  background-color: rgba(0, 0, 0, 0.2);
  background-color: var(--color-bg-secondary);
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.variant-elevated,
.variant-bordered,
.variant-transparent,
.padded,
.padded-s,
.padded-l,
.borderless,
.size-s,
.size-l,
.footer-start,
.footer-center,
.footer-end,
.collapsible,
.collapsed,
.loading {
  /* Explicit declarations for IDE autocomplete */
}

/**
 * ▗▄▄▖  ▗▄▖ ▗▄▄▄  ▗▄▄▖▗▄▄▄▖ ▗▄▄▖
 * ▐▌ ▐▌▐▌ ▐▌▐▌  █▐▌   ▐▌   ▐▌   
 * ▐▛▀▚▖▐▛▀▜▌▐▌  █▐▌▝▜▌▐▛▀▀▘ ▝▀▚▖
 * ▐▙▄▞▘▐▌ ▐▌▐▙▄▄▀▝▚▄▞▘▐▙▄▄▖▗▄▄▞▘
 *
 * Gambit CSS Framework - Badge Components
 * Notification badges, new badges, and premium badges
 */
/* ========================================================================
   NOTIFICATION BADGE COMPONENT
   ======================================================================== */
/*
 * Notification Badge Structure:
 * <span class="g-notification-badge variant-{alert|neutral|online}">9</span>
 * <span class="g-notification-badge variant-{alert|neutral|online}">9+</span>
 *
 * Variants: alert (red), neutral (gray), online (green)
 * Modifiers: dot, size-l, positioned
 * 
 * The badge automatically hides when empty (using :empty pseudo-class)
 */
/* ========================================================================
   BASE NOTIFICATION BADGE
   ======================================================================== */
.g-notification-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 0.4rem; /* 0 4px */
  min-width: 1.6rem; /* 16px */
  height: 1.6rem; /* 16px */
  border-radius: 1rem; /* 10px */
  font-family: var(--font-family-system);
  font-family: var(--font-family-heading);
  font-style: normal;
  font-weight: 600;
  font-size: 1rem; /* 10px */
  line-height: 1rem; /* 10px */
  text-align: center;
  padding: 0 0.4rem;
  padding: 0 var(--space-4);
  user-select: none;
  vertical-align: middle;
}

/* Hide when empty */
/* ========================================================================
   VARIANT STYLES
   ======================================================================== */
/* Alert variant (red - matches Figma) */
.g-notification-badge.variant-alert {
  background: var(--color-red-300);
  color: var(--color-neutrals-white);
  text-shadow: 0 0.1rem 0 var(--color-transparent-black-30);
}

/* Neutral variant (gray - matches Figma) */
.g-notification-badge.variant-neutral {
  background: var(--color-transparent-white-10);
  color: var(--color-text-default);
}

/* Online variant (green) */
.g-notification-badge.variant-online {
  background: var(--color-green-300);
  color: var(--color-neutrals-white);
  text-shadow: 0 0.1rem 0 var(--color-transparent-black-30);
}

/* ========================================================================
   SPECIAL STYLES
   ======================================================================== */
/* Dot-only notification (no text) */
.g-notification-badge.dot {
  font-size: 0;
  height: 0.8rem;
  min-height: 0.8rem;
  min-width: 0.8rem;
  padding: 0;
  width: 0.8rem;
}

/* Large notification badge */
.g-notification-badge.size-l {
  font-size: 1.2rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0 0.8rem;
  padding: 0 var(--space-8);
}

/* ========================================================================
   POSITIONING HELPERS
   ======================================================================== */
/* When positioned on another element */
.g-notification-badge.positioned {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-notification-badge.variant-alert,
.g-notification-badge.variant-neutral,
.g-notification-badge.variant-online,
.g-notification-badge.dot,
.g-notification-badge.size-l,
.g-notification-badge.positioned {
  /* Explicit declarations for IDE autocomplete */
}

/* ========================================================================
   NEW BADGE COMPONENT
   ======================================================================== */
/*
 * New Badge Structure:
 * <span class="g-new-badge">NEW</span>
 * <span class="g-new-badge collapsed"></span>
 *
 * Modifiers: collapsed, size-s, size-l, positioned, positioned-tr, positioned-tl, positioned-br, positioned-bl, pulse
 * The collapsed variant shows only a red dot without text
 */
/* ========================================================================
   BASE NEW BADGE
   ======================================================================== */
.g-new-badge {
  align-items: center;
  background: var(--color-red-400);
  border-radius: var(--radius-m);
  color: var(--color-neutrals-white);
  display: inline-flex;
  font-family: var(--font-family-heading);
  font-size: 1rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1;
  min-height: 1.6rem;
  padding: 0 var(--space-4);
  text-shadow: 0 var(--border-s) 0 var(--color-transparent-black-20);
  text-transform: uppercase;
  user-select: none;
  vertical-align: middle;
}

/* ========================================================================
   COLLAPSED STATE
   ======================================================================== */
.g-new-badge.collapsed {
  aspect-ratio: 1;
  border-radius: 50%;
  border-radius: var(--radius-circular);
  font-size: 0;
  height: 1.2rem;
  min-height: 1.2rem;
  min-width: 1.2rem;
  padding: 0;
  width: 1.2rem;
}

/* ========================================================================
   SIZE VARIANTS
   ======================================================================== */
/* Small new badge */
.g-new-badge.size-s {
  font-size: 0.9rem;
  min-height: 1.4rem;
  padding: 0 0.2rem;
  padding: 0 var(--space-2);
}

/* Large new badge */
.g-new-badge.size-l {
  font-size: 1.2rem;
  min-height: 2rem;
  padding: 0 0.8rem;
  padding: 0 var(--space-8);
}

/* ========================================================================
   POSITIONING HELPERS
   ======================================================================== */
/* Base positioned class */
.g-new-badge.positioned,
.g-new-badge.positioned-tr,
.g-new-badge.positioned-tl,
.g-new-badge.positioned-br,
.g-new-badge.positioned-bl {
  position: absolute;
  margin: 1.2rem;
}

/* Default (top-right) */
.g-new-badge.positioned,
.g-new-badge.positioned-tr {
  top: 0rem;
  right: 0rem;
}

/* Top-left */
.g-new-badge.positioned-tl {
  top: 0rem;
  left: 0rem;
}

/* Bottom-right */
.g-new-badge.positioned-br {
  bottom: 0rem;
  right: 0rem;
}

/* Bottom-left */
.g-new-badge.positioned-bl {
  bottom: 0rem;
  left: 0rem;
}

/* ========================================================================
   ANIMATION
   ======================================================================== */
/* Pulse animation for attention */
@keyframes new-badge-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--color-red-400);
  }
  70% {
    box-shadow: 0 0 0 0.4rem transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.g-new-badge.pulse {
  animation: new-badge-pulse 2s infinite;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-new-badge,
.g-new-badge.collapsed,
.g-new-badge.size-s,
.g-new-badge.size-l,
.g-new-badge.positioned,
.g-new-badge.positioned-tr,
.g-new-badge.positioned-tl,
.g-new-badge.positioned-br,
.g-new-badge.positioned-bl,
.g-new-badge.pulse {
  /* Explicit declarations for IDE autocomplete */
}

/* ========================================================================
   PREMIUM BADGE COMPONENT
   ======================================================================== */
/*
 * Premium Badge Structure:
 * <a href="#" class="g-premium-badge variant-{diamond|platinum|gold}">
 *   <svg class="g-premium-badge-icon">...</svg>
 *   <span class="g-premium-badge-label">Diamond</span>
 * </a>
 *
 * Variants: diamond, platinum, gold
 */
/* ========================================================================
   BASE PREMIUM BADGE
   ======================================================================== */
.g-premium-badge {
  align-items: center;
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  gap: 0.4rem;
  gap: var(--space-4);
  padding: 0.4rem;
  padding: var(--space-4);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out-1);
  user-select: none;
}

/* ========================================================================
   VARIANT STYLES
   ======================================================================== */
/* Diamond variant (Dark mode by default) */
.g-premium-badge.variant-diamond {
  background: rgba(0, 159, 217, 0.1);
  background: color-mix(in srgb, var(--color-blue-100) 10%, transparent);
  color: #4DC3EA;
  color: var(--color-blue-100);
}

.g-premium-badge.variant-diamond:hover {
  background: rgba(0, 159, 217, 0.15);
  background: color-mix(in srgb, var(--color-blue-100) 15%, transparent);
}

.g-premium-badge.variant-diamond .g-premium-badge-icon,
.g-premium-badge.variant-diamond .g-glyph {
  color: #4DC3EA;
  color: var(--color-blue-100);
}

/* Platinum variant (Dark mode by default) */
.g-premium-badge.variant-platinum {
  background: rgba(174, 208, 240, 0.1);
  background: color-mix(in srgb, var(--color-slate-200) 10%, transparent);
  color: #AED0F0;
  color: var(--color-slate-200);
}

.g-premium-badge.variant-platinum:hover {
  background: rgba(174, 208, 240, 0.15);
  background: color-mix(in srgb, var(--color-slate-200) 15%, transparent);
}

.g-premium-badge.variant-platinum .g-premium-badge-icon,
.g-premium-badge.variant-platinum .g-glyph {
  color: #AED0F0;
  color: var(--color-slate-200);
}

/* Gold variant (Dark mode by default) */
.g-premium-badge.variant-gold {
  background: rgba(207, 141, 27, 0.1);
  background: color-mix(in srgb, var(--color-gold-200) 10%, transparent);
  color: #F7C631;
  color: var(--color-gold-200);
}

.g-premium-badge.variant-gold:hover {
  background: rgba(207, 141, 27, 0.15);
  background: color-mix(in srgb, var(--color-gold-200) 15%, transparent);
}

.g-premium-badge.variant-gold .g-premium-badge-icon,
.g-premium-badge.variant-gold .g-glyph {
  color: #F7C631;
  color: var(--color-gold-200);
}

/* ========================================================================
   BADGE ELEMENTS
   ======================================================================== */
/* Icon */
.g-premium-badge-icon,
.g-premium-badge .g-glyph {
  flex-shrink: 0;
  height: 1.6rem;
  width: 1.6rem;
}

.g-premium-badge-icon svg,
.g-premium-badge .g-glyph svg {
  height: 100%;
  width: 100%;
}

.g-premium-badge-icon path,
.g-premium-badge .g-glyph path {
  fill: currentColor;
}

/* Label */
.g-premium-badge-label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3333;
  text-transform: uppercase;
}

/* ========================================================================
   SIZE VARIANTS
   ======================================================================== */
/* Small premium badge */
.g-premium-badge.size-s {
  padding: 0.2rem;
  padding: var(--space-2);
}

.g-premium-badge.size-s .g-premium-badge-icon,
.g-premium-badge.size-s .g-glyph {
  height: 1.2rem;
  width: 1.2rem;
}

.g-premium-badge.size-s .g-premium-badge-label {
  font-size: 1rem;
}

/* Large premium badge */
.g-premium-badge.size-l {
  padding: 0.8rem;
  padding: var(--space-8);
}

.g-premium-badge.size-l .g-premium-badge-icon,
.g-premium-badge.size-l .g-glyph {
  height: 2rem;
  width: 2rem;
}

.g-premium-badge.size-l .g-premium-badge-label {
  font-size: 1.4rem;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-premium-badge.variant-diamond,
.g-premium-badge.variant-platinum,
.g-premium-badge.variant-gold,
.g-premium-badge.size-s,
.g-premium-badge.size-l {
  /* Explicit declarations for IDE autocomplete */
}

/**
 *  ▗▄▖ ▗▖   ▗▄▄▄▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖
 * ▐▌ ▐▌▐▌   ▐▌   ▐▌ ▐▌  █  ▐▌
 * ▐▛▀▜▌▐▌   ▐▛▀▀▘▐▛▀▚▖  █   ▝▀▚▖
 * ▐▌ ▐▌▐▙▄▄▖▐▙▄▄▖▐▌ ▐▌  █  ▗▄▄▞▘
 *
 * Gambit CSS Framework - Alert Component
 * Two types: Inline alerts (transparent) and Solid alerts (opaque)
 */
/* ========================================================================
   ALERT COMPONENT
   ======================================================================== */
/*
 * Alert Structure:
 * <div class="g-alert type-{inline|solid} variant-{success|info|warning|danger|neutral} size-{s|m|l}">
 *   <span class="g-alert-icon">
 *     <svg>...</svg>
 *   </span>
 *   <div class="g-alert-content">
 *     <span class="g-alert-message">Alert message text</span>
 *   </div>
 *   <button class="g-alert-close">
 *     <svg>...</svg>
 *   </button>
 * </div>
 *
 * Types: inline (transparent bg), solid (opaque bg)
 * Variants: success, info, warning, danger, neutral
 * Sizes: s (small), m (medium/default), l (large)
 */
/* ========================================================================
   BASE ALERT STYLES
   ======================================================================== */
.g-alert {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  min-height: 4.8rem;
  border-radius: var(--radius-l);
  position: relative;
  padding: 0 0 0 var(--radius-m);
  border-left: var(--radius-m) solid var(--alert-border);
  background: var(--alert-bg);
}
.g-alert .g-alert-icon {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-12) 0 var(--space-12) var(--space-12);
  width: 3.6rem;
  min-height: 4.8rem;
  flex: none;
  order: 0;
  align-self: stretch;
}
.g-alert .g-alert-icon .g-glyph {
  width: var(--icon-24);
  height: var(--icon-24);
  color: var(--alert-icon-color);
}
.g-alert .g-alert-icon .g-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
.g-alert .g-alert-icon .g-glyph svg path {
  fill: currentColor;
}
.g-alert .g-alert-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--space-12);
  gap: var(--space-12);
  flex: 1;
  min-height: 4.8rem;
  align-self: stretch;
}
.g-alert .g-alert-message {
  flex: 1;
  font-family: var(--font-family-system);
  font-style: normal;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2rem;
  display: flex;
  align-items: center;
  color: var(--alert-text-color);
}
.g-alert .g-alert-close {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-12);
  width: 4.8rem;
  min-height: 4.8rem;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  flex: none;
  order: 2;
}
.g-alert .g-alert-close:hover .g-glyph {
  opacity: var(--opacity-pressed);
}
.g-alert .g-alert-close .g-glyph {
  width: var(--icon-16);
  height: var(--icon-16);
  color: var(--alert-close-color);
}
.g-alert .g-alert-close .g-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
}
.g-alert .g-alert-close .g-glyph svg path {
  fill: currentColor;
}

/* ========================================================================
   TYPE: INLINE (Transparent backgrounds)
   ======================================================================== */
.g-alert.type-inline {
  padding: 0 0 0 var(--radius-m);
}
.g-alert.type-inline.variant-success {
  --alert-bg: rgba(129, 182, 76, 0.1);
  --alert-border: var(--color-border-success);
  --alert-icon-color: var(--color-icon-success);
  --alert-text-color: var(--color-text-bolder);
  --alert-close-color: var(--color-text-placeholder);
}
.g-alert.type-inline.variant-info {
  --alert-bg: rgba(0, 140, 209, 0.1);
  --alert-border: var(--color-border-info);
  --alert-icon-color: var(--color-icon-info);
  --alert-text-color: var(--color-text-bolder);
  --alert-close-color: var(--color-text-placeholder);
}
.g-alert.type-inline.variant-warning {
  --alert-bg: rgba(227, 170, 36, 0.1);
  --alert-border: var(--color-border-warning);
  --alert-icon-color: var(--color-icon-warning);
  --alert-text-color: var(--color-text-bolder);
  --alert-close-color: var(--color-text-placeholder);
}
.g-alert.type-inline.variant-danger {
  --alert-bg: rgba(224, 40, 40, 0.1);
  --alert-border: var(--color-border-danger);
  --alert-icon-color: var(--color-icon-danger);
  --alert-text-color: var(--color-text-bolder);
  --alert-close-color: var(--color-text-placeholder);
}
.g-alert.type-inline.variant-neutral {
  --alert-bg: var(--color-bg-subtler);
  --alert-border: var(--color-border-subtle);
  --alert-icon-color: var(--color-icon-default);
  --alert-text-color: var(--color-text-bolder);
  --alert-close-color: var(--color-text-placeholder);
}

/* ========================================================================
   TYPE: SOLID (Opaque backgrounds)
   ======================================================================== */
.g-alert.type-solid {
  align-self: flex-start;
  padding: 0;
  border-left: none;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  background: var(--color-gray-900);
  overflow: hidden;
}
.g-alert.type-solid .g-alert-icon {
  display: none;
}
.g-alert.type-solid .g-alert-content {
  padding: var(--space-12) 0 var(--space-12) var(--space-16);
  background: var(--alert-solid-bg);
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}
.g-alert.type-solid .g-alert-message {
  line-height: var(--space-16);
  color: var(--alert-solid-text);
}
.g-alert.type-solid .g-alert-close {
  position: relative;
  background: var(--alert-solid-bg);
}
.g-alert.type-solid .g-alert-close .g-glyph {
  color: var(--alert-solid-close);
}
.g-alert.type-solid.variant-success {
  --alert-solid-bg: var(--color-bg-success);
  --alert-solid-text: var(--color-neutrals-white);
  --alert-solid-close: var(--color-transparent-black-65);
}
.g-alert.type-solid.variant-info {
  --alert-solid-bg: var(--color-bg-info);
  --alert-solid-text: var(--color-neutrals-white);
  --alert-solid-close: var(--color-transparent-black-65);
}
.g-alert.type-solid.variant-warning {
  --alert-solid-bg: var(--color-bg-warning);
  --alert-solid-text: var(--color-gray-900);
  --alert-solid-close: var(--color-transparent-black-65);
}
.g-alert.type-solid.variant-danger {
  --alert-solid-bg: var(--color-bg-danger);
  --alert-solid-text: var(--color-neutrals-white);
  --alert-solid-close: var(--color-transparent-black-65);
}
.g-alert.type-solid.variant-neutral {
  --alert-solid-bg: var(--color-bg-subtler);
  --alert-solid-text: var(--color-neutrals-white);
  --alert-solid-close: var(--color-text-placeholder);
}

/* ========================================================================
   RESPONSIVE AND MODIFIERS
   ======================================================================== */
.g-alert.size-s {
  min-height: var(--space-40);
}
.g-alert.size-s .g-alert-icon {
  padding: 1rem 0 1rem var(--space-8);
  width: var(--space-32);
  min-height: var(--space-40);
}
.g-alert.size-s .g-alert-icon .g-glyph {
  width: var(--icon-20);
  height: var(--icon-20);
}
.g-alert.size-s .g-alert-content {
  padding: var(--space-8);
  min-height: var(--space-40);
  gap: var(--space-8);
}
.g-alert.size-s .g-alert-message {
  font-size: 1.3rem;
  line-height: 1.8rem;
}
.g-alert.size-s .g-alert-close {
  padding: var(--space-8);
  width: var(--space-40);
  min-height: var(--space-40);
}
.g-alert.size-s .g-alert-close .g-glyph {
  width: 1.4rem;
  height: 1.4rem;
}

.g-alert.size-l {
  min-height: var(--icon-56);
}
.g-alert.size-l .g-alert-icon {
  padding: var(--space-16) 0 var(--space-16) var(--space-16);
  width: 4.4rem;
  min-height: var(--icon-56);
}
.g-alert.size-l .g-alert-icon .g-glyph {
  width: 2.8rem;
  height: 2.8rem;
}
.g-alert.size-l .g-alert-content {
  padding: var(--space-16);
  min-height: var(--icon-56);
  gap: var(--space-16);
}
.g-alert.size-l .g-alert-message {
  font-size: var(--space-16);
  line-height: var(--space-24);
}
.g-alert.size-l .g-alert-close {
  padding: var(--space-16);
  width: var(--icon-56);
  min-height: var(--icon-56);
}
.g-alert.size-l .g-alert-close .g-glyph {
  width: 1.8rem;
  height: 1.8rem;
}
.g-alert.size-l.type-solid .g-alert-content {
  padding: var(--space-16) 0 var(--space-16) 2rem;
}

.g-alert:not(.dismissible) .g-alert-close {
  display: none;
}

/**
 * ▗▖ ▗▖▗▄▄▄▖▗▖  ▗▖▗▄▄▄▖
 * ▐▌ ▐▌  █  ▐▛▚▖▐▌  █  
 * ▐▛▀▜▌  █  ▐▌ ▝▜▌  █  
 * ▐▌ ▐▌▗▄█▄▖▐▌  ▐▌  █  
 *
 * Gambit CSS Framework - Hint Component
 * Contextual overlays for displaying information on hover
 */
/* ========================================================================
   HINT COMPONENT
   ======================================================================== */
/*
 * Hint Structure:
 * <span class="hint g-hint align-{top|bottom|left|right}" data-hint="Hint text">
 *   Hover me
 * </span>
 *
 * Or with wrapper:
 * <div class="g-hint-wrapper">
 *   <button>Hover me</button>
 *   <div class="hint g-hint align-{top|bottom|left|right}">Hint content</div>
 * </div>
 *
 * Position modifiers: align-top (default), align-bottom, align-left, align-right
 * Modifiers: variant-light, size-s, size-l, align-start, align-center, align-end
 */
/* ========================================================================
   BASE HINT
   ========================================================================== */
.g-hint {
  --hint-bg: rgba(0, 0, 0, .9);
  --hint-color: rgba(255, 255, 255, .85);
  background: var(--hint-bg);
  border-radius: 0.3rem;
  border-radius: var(--radius-m);
  color: var(--hint-color);
  font-size: 1.2rem;
  line-height: 1.3333;
  max-width: 30rem;
  padding: 0.8rem 1.2rem;
  padding: var(--space-8) var(--space-12);
  pointer-events: none;
  position: absolute;
  text-align: left;
  white-space: normal;
  word-wrap: break-word;
  z-index: var(--z-index-tooltip);
}

/* Data attribute hints */
[data-hint] {
  position: relative;
}

[data-hint]::before {
  content: attr(data-hint);
  opacity: 0;
  position: absolute;
  transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1);
  transition: opacity 200ms var(--motion-ease-out-1);
  visibility: hidden;
}

[data-hint]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ========================================================================
   HINT POSITIONS
   ========================================================================== */
/* Top position (default) */
.g-hint.align-top,
[data-hint]::before {
  bottom: 100%;
  left: 50%;
  margin-bottom: 0.8rem;
  margin-bottom: var(--space-8);
  transform: translateX(-50%);
}

/* Bottom position */
.g-hint.align-bottom {
  left: 50%;
  margin-top: 0.8rem;
  margin-top: var(--space-8);
  top: 100%;
  transform: translateX(-50%);
}

/* Left position */
.g-hint.align-left {
  margin-right: 0.8rem;
  margin-right: var(--space-8);
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}

/* Right position */
.g-hint.align-right {
  left: 100%;
  margin-left: 0.8rem;
  margin-left: var(--space-8);
  top: 50%;
  transform: translateY(-50%);
}

/* ========================================================================
   HINT ALIGNMENT MODIFIERS
   ======================================================================== */
/* For top/bottom positions */
.g-hint.align-top.align-start,
.g-hint.align-bottom.align-start {
  left: 0;
  transform: none;
}

.g-hint.align-top.align-end,
.g-hint.align-bottom.align-end {
  left: auto;
  right: 0;
  transform: none;
}

/* For left/right positions */
.g-hint.align-left.align-start,
.g-hint.align-right.align-start {
  top: 0;
  transform: none;
}

.g-hint.align-left.align-end,
.g-hint.align-right.align-end {
  top: auto;
  bottom: 0;
  transform: none;
}

/* ========================================================================
   HINT ARROWS
   ========================================================================== */
/* Arrow base */
.g-hint::after {
  border: var(--space-4) solid transparent;
  content: "";
  position: absolute;
}

/* Top position arrow */
.g-hint.align-top::after {
  border-bottom-width: 0;
  border-top-color: var(--hint-bg);
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

/* Top position arrow - start alignment */
.g-hint.align-top.align-start::after {
  left: 1.2rem;
  transform: none;
}

/* Top position arrow - end alignment */
.g-hint.align-top.align-end::after {
  left: auto;
  right: 1.2rem;
  transform: none;
}

/* Bottom position arrow */
.g-hint.align-bottom::after {
  border-bottom-color: var(--hint-bg);
  border-top-width: 0;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

/* Bottom position arrow - start alignment */
.g-hint.align-bottom.align-start::after {
  left: 1.2rem;
  transform: none;
}

/* Bottom position arrow - end alignment */
.g-hint.align-bottom.align-end::after {
  left: auto;
  right: 1.2rem;
  transform: none;
}

/* Left position arrow */
.g-hint.align-left::after {
  border-left-color: var(--hint-bg);
  border-right-width: 0;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

/* Left position arrow - start alignment */
.g-hint.align-left.align-start::after {
  top: 1.2rem;
  transform: none;
}

/* Left position arrow - end alignment */
.g-hint.align-left.align-end::after {
  top: auto;
  bottom: 1.2rem;
  transform: none;
}

/* Right position arrow */
.g-hint.align-right::after {
  border-left-width: 0;
  border-right-color: var(--hint-bg);
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}

/* Right position arrow - start alignment */
.g-hint.align-right.align-start::after {
  top: 1.2rem;
  transform: none;
}

/* Right position arrow - end alignment */
.g-hint.align-right.align-end::after {
  top: auto;
  bottom: 1.2rem;
  transform: none;
}

/* ========================================================================
   STYLE VARIANTS
   ========================================================================== */
/* Light hint */
.g-hint.variant-light {
  --hint-bg: var(--color-bg-opaque);
  --hint-color: var(--color-text-default);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
  box-shadow: 0 0.2rem 0.8rem var(--color-transparent-black-20);
}

/* Small hint */
.g-hint.size-s {
  font-size: 1rem;
  max-width: 20rem;
  padding: 0.4rem 0.8rem;
  padding: var(--space-4) var(--space-8);
}

/* Large hint */
.g-hint.size-l {
  font-size: 1.4rem;
  max-width: 35rem;
  padding: 1.2rem 1.6rem;
  padding: var(--space-12) var(--space-16);
}

/* ========================================================================
   HINT WRAPPER
   ========================================================================== */
.g-hint-wrapper {
  display: inline-block;
  position: relative;
}

.g-hint-wrapper .g-hint {
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0, 0, 0.2, 1);
  transition: opacity 200ms var(--motion-ease-out-1);
  visibility: hidden;
}

.g-hint-wrapper:hover .g-hint,
.g-hint.visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================================================
   ACCESSIBILITY
   ========================================================================== */
.g-hint {
  /* Screen reader support */
  role: hint;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ========================================================================== */
.g-hint.align-top,
.g-hint.align-bottom,
.g-hint.align-left,
.g-hint.align-right,
.g-hint.align-start,
.g-hint.align-center,
.g-hint.align-end,
.g-hint.variant-light,
.g-hint.size-s,
.g-hint.size-l,
.g-hint.visible {
  /* Explicit declarations for IDE autocomplete */
}

/**
 * ▗▄▄▄▖▗▖  ▗▖▗▄▄▖ ▗▄▄▄▖▗▖  ▗▖ ▗▄▄▖▗▄▄▄▖ ▗▄▖ ▗▄▄▄▖▗▄▄▄▖
 * ▐▌   ▐▛▚▞▜▌▐▌ ▐▌  █   ▝▚▞▘ ▐▌     █  ▐▌ ▐▌  █  ▐▌   
 * ▐▛▀▀▘▐▌  ▐▌▐▛▀▘   █    ▐▌   ▝▀▚▖  █  ▐▛▀▜▌  █  ▐▛▀▀▘
 * ▐▙▄▄▖▐▌  ▐▌▐▌     █    ▐▌  ▗▄▄▞▘  █  ▐▌ ▐▌  █  ▐▙▄▄▖
 *
 * Gambit CSS Framework - Empty State Component
 * Placeholder content for empty views
 */
/* ========================================================================
   EMPTY STATE COMPONENT
   ======================================================================== */
/*
 * Empty State Structure:
 * <div class="g-empty-state">
 *   <div class="g-empty-state-content">
 *     <span class="g-glyph"><!-- svg icon --></span>
 *     <div class="g-empty-state-copy">
 *       <h3 class="g-empty-state-header">No Results Found</h3>
 *       <p class="g-empty-state-subheader">Try adjusting your filters</p>
 *     </div>
 *   </div>
 *   <div class="g-empty-state-actions">
 *     <button class="g-button size-m variant-primary">
 *       <span class="g-button-text">Add Item</span>
 *     </button>
 *   </div>
 * </div>
 */
/* ========================================================================
   BASE EMPTY STATE
   ======================================================================== */
.g-empty-state {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 2.4rem; /* 24px from Figma */
  gap: var(--space-24);
  padding: 2.4rem; /* 24px from Figma */
  padding: var(--space-24);
  text-align: center;
  width: 100%;
}

/* ========================================================================
   EMPTY STATE ELEMENTS
   ======================================================================== */
/* Icon - Using g-glyph */
.g-empty-state .g-glyph {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-icon-subtle);
  height: 4rem; /* 40px from Figma */
  width: 4rem; /* 40px from Figma */
}

/* Large icon variant */
.g-empty-state .g-glyph.size-l {
  height: 6.4rem;
  width: 6.4rem;
}

/* Extra large icon variant */
.g-empty-state .g-glyph.size-xl {
  height: 8rem;
  width: 8rem;
}

/* Header */
.g-empty-state-header {
  color: rgba(255, 255, 255, 0.85);
  color: var(--color-text-bolder);
  font-family: var(--font-family-system);
  font-size: 1.6rem; /* 16px from Figma */
  font-weight: 600;
  line-height: 1.25; /* 20px/16px = 1.25 */
  margin: 0;
}

/* Subheader */
.g-empty-state-subheader {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-subtle);
  font-family: var(--font-family-system);
  font-size: 1.4rem; /* 14px from Figma */
  font-weight: 400;
  line-height: 1.428; /* 20px/14px = 1.428 */
  margin: 0;
  max-width: 40rem;
  text-wrap: balance;
}

/* Actions container */
.g-empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  gap: var(--space-12);
  justify-content: center;
}

/* ========================================================================
   SIZE VARIANTS
   ======================================================================== */
/* Compact empty state */
.g-empty-state.size-s {
  gap: 0.8rem;
  gap: var(--space-8);
  padding: 1.6rem;
  padding: var(--space-16);
}

.g-empty-state.size-s .g-glyph {
  height: 3.2rem;
  width: 3.2rem;
}

.g-empty-state.size-s .g-empty-state-header {
  font-size: 1.4rem;
}

.g-empty-state.size-s .g-empty-state-subheader {
  font-size: 1.2rem;
}

/* Large empty state */
.g-empty-state.size-l {
  gap: 1.6rem;
  gap: var(--space-16);
  padding: 4rem;
  padding: var(--space-40);
}

.g-empty-state.size-l .g-empty-state-header {
  font-size: 2.2rem;
  font-weight: 800;
}

.g-empty-state.size-l .g-empty-state-subheader {
  font-size: 1.6rem;
  max-width: 50rem;
}

/* ========================================================================
   STYLE VARIANTS
   ======================================================================== */
/* Bordered empty state */
.g-empty-state.bordered {
  background: rgba(255, 255, 255, 0.1);
  background: var(--color-bg-subtle);
  border: 0.1rem dashed rgba(255, 255, 255, 0.5);
  border: var(--border-s) dashed var(--color-border-subtle);
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
}

/* Card empty state */
.g-empty-state.card {
  background: rgba(0, 0, 0, 0.2);
  background: var(--color-bg-secondary);
  border-radius: 0.5rem;
  border-radius: var(--radius-l);
  box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.2rem 0.8rem var(--color-transparent-black-10);
}

/* ========================================================================
   CONTENT GROUPING
   ======================================================================== */
/* Text content wrapper (icon + copy) */
.g-empty-state-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* 12px from Figma */
  gap: var(--space-12);
  width: 100%;
}

/* Copy wrapper (title + subtitle) */
.g-empty-state-copy {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem; /* 4px from Figma */
  gap: var(--space-4);
  width: 100%;
}

/**
 * ▗▄▄▖ ▗▄▄▖  ▗▄▖  ▗▄▄▖▗▄▄▖ ▗▄▄▄▖ ▗▄▄▖ ▗▄▄▖
 * ▐▌ ▐▌▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌   ▐▌   ▐▌   
 * ▐▛▀▚▖▐▛▀▚▖▐▌ ▐▌▐▌▝▜▌▐▛▀▚▖▐▛▀▀▘ ▝▀▚▖ ▝▀▚▖
 * ▐▌   ▐▌ ▐▌▝▚▄▞▘▝▚▄▞▘▐▌ ▐▌▐▙▄▄▖▗▄▄▞▘▗▄▄▞▘
 *
 * Gambit CSS Framework - Progress Bar Component
 * Visual indicators of task completion
 */
/* ========================================================================
   PROGRESS BAR COMPONENT
   ======================================================================== */
/*
 * Progress Bar Structure:
 * <div class="g-progress-bar">
 *   <div class="g-progress-bar-track">
 *     <div class="g-progress-bar-fill" style="width: 60%"></div>
 *   </div>
 * </div>
 *
 * Or with steps:
 * <div class="g-progress-bar g-progress-bar-steps">
 *   <div class="g-progress-bar-track">
 *     <div class="g-progress-bar-complete" style="width: 40%"></div>
 *     <div class="g-progress-bar-current" style="width: 20%"></div>
 *   </div>
 *   <div class="g-progress-bar-remaining">3 steps remaining</div>
 * </div>
 */
/* ========================================================================
   BASE PROGRESS BAR
   ======================================================================== */
.g-progress-bar {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  gap: var(--space-8);
  width: 100%;
}

/* Progress track */
.g-progress-bar-track {
  background: var(--color-bg-progress-track);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
  height: 0.8rem;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Progress fill */
.g-progress-bar-fill {
  background: var(--color-bg-progress-completed);
  border-radius: 1rem;
  border-radius: var(--radius-xl);
  height: 100%;
  position: relative;
  transition: width var(--motion-duration-slow) cubic-bezier(0, 0, 0.2, 1);
  transition: width var(--motion-duration-slow) var(--motion-ease-out-1);
  width: 0;
  z-index: 2;
}

/* ========================================================================
   STEP-BASED PROGRESS
   ======================================================================== */
/* Completed portion */
.g-progress-bar-complete {
  background: var(--color-bg-progress-completed);
  height: 100%;
  position: absolute;
  transition: width var(--motion-duration-slow) cubic-bezier(0, 0, 0.2, 1);
  transition: width var(--motion-duration-slow) var(--motion-ease-out-1);
}

/* Current step in progress (next step indicator) */
.g-progress-bar-next-step {
  background: var(--color-bg-progress-current);
  border-radius: 0 1rem 1rem 0;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: width var(--motion-duration-slow) cubic-bezier(0, 0, 0.2, 1);
  transition: width var(--motion-duration-slow) var(--motion-ease-out-1);
  width: 0;
  z-index: 1;
}

/* Legacy naming support */
.g-progress-bar-current {
  background: var(--color-bg-progress-current);
  border-radius: 0 1rem 1rem 0;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: width var(--motion-duration-slow) cubic-bezier(0, 0, 0.2, 1);
  transition: width var(--motion-duration-slow) var(--motion-ease-out-1);
  z-index: 1;
}

/* Animated stripes */
@keyframes progress-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2rem 0;
  }
}
.g-progress-bar.animated .g-progress-bar-current {
  animation: progress-stripes 1s linear infinite;
  background-size: 2rem 2rem;
}

/* Steps mode with stripes for current step */
.g-progress-bar.steps.animated .g-progress-bar-current,
.g-progress-bar.next-step.animated .g-progress-bar-next-step {
  background: repeating-linear-gradient(-45deg, var(--color-bg-progress-current), var(--color-bg-progress-current) 1rem, var(--color-transparent-white-15) 1rem, var(--color-transparent-white-15) 2rem);
  animation: progress-stripes 1s linear infinite;
  background-size: 2rem 2rem;
}

/* ========================================================================
   NEXT STEP VARIANT
   ======================================================================== */
/* Shows completed progress plus the next step indicator */
.g-progress-bar.next-step .g-progress-bar-next-step {
  display: block;
}

/* Remaining steps text */
.g-progress-bar-remaining {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-subtle);
  font-size: 1.2rem;
  line-height: 1.3333;
  margin-top: 0.4rem;
  margin-top: var(--space-4);
  text-align: right;
}

/* ========================================================================
   SIZE VARIANTS
   ======================================================================== */
/* Small progress bar */
.g-progress-bar.size-s .g-progress-bar-track {
  height: 0.4rem;
}

/* Large progress bar */
.g-progress-bar.size-l .g-progress-bar-track {
  height: 1.2rem;
}

/* Extra large progress bar */
.g-progress-bar.size-xl .g-progress-bar-track {
  height: 1.6rem;
}

/* ========================================================================
   COLOR VARIANTS
   ======================================================================== */
/* Primary (default green handled above) */
/* Blue variant */
.g-progress-bar.color-blue .g-progress-bar-fill,
.g-progress-bar.color-blue .g-progress-bar-complete {
  background: #0069AB;
  background: var(--color-blue-400);
}

.g-progress-bar.color-blue .g-progress-bar-current {
  background: repeating-linear-gradient(-45deg, #0069AB, #0069AB 1rem, #0B548C 1rem, #0B548C 2rem);
  background: repeating-linear-gradient(-45deg, var(--color-blue-400), var(--color-blue-400) 1rem, var(--color-blue-500) 1rem, var(--color-blue-500) 2rem);
}

/* Orange variant */
.g-progress-bar.color-orange .g-progress-bar-fill,
.g-progress-bar.color-orange .g-progress-bar-complete {
  background: #DC501D;
  background: var(--color-orange-400);
}

.g-progress-bar.color-orange .g-progress-bar-current {
  background: repeating-linear-gradient(-45deg, #DC501D, #DC501D 1rem, #A93616 1rem, #A93616 2rem);
  background: repeating-linear-gradient(-45deg, var(--color-orange-400), var(--color-orange-400) 1rem, var(--color-orange-500) 1rem, var(--color-orange-500) 2rem);
}

/* Purple variant */
.g-progress-bar.color-purple .g-progress-bar-fill,
.g-progress-bar.color-purple .g-progress-bar-complete {
  background: #5E53D9;
  background: var(--color-purple-400);
}

.g-progress-bar.color-purple .g-progress-bar-current {
  background: repeating-linear-gradient(-45deg, #5E53D9, #5E53D9 1rem, #303D8A 1rem, #303D8A 2rem);
  background: repeating-linear-gradient(-45deg, var(--color-purple-400), var(--color-purple-400) 1rem, var(--color-purple-500) 1rem, var(--color-purple-500) 2rem);
}

/* Green variant (explicit) */
.g-progress-bar.color-green .g-progress-bar-fill,
.g-progress-bar.color-green .g-progress-bar-complete,
.g-progress-bar.color-green .g-progress-bar-segment.filled {
  background: var(--color-bg-progress-completed);
}

/* ========================================================================
   SPECIAL STYLES
   ======================================================================== */
/* With label inside */
.g-progress-bar.labeled .g-progress-bar-track {
  align-items: center;
  display: flex;
  font-size: 1rem;
  font-weight: 700;
  height: 2rem;
  position: relative;
}

/* With external label */
.g-progress-bar.with-label {
  gap: 0.8rem;
  gap: var(--space-8);
}

.g-progress-bar-label {
  color: #312E2B;
  color: var(--color-text-inverse);
  position: relative;
  z-index: var(--z-index-base);
}

/* External label structure */
.g-progress-bar.with-label .g-progress-bar-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-heading);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.176;
}

.g-progress-label {
  display: flex;
  gap: 0.4rem;
  gap: var(--space-4);
}

.g-progress-label-text {
  font-feature-settings: "tnum" on, "lnum" on;
}

.g-progress-label-number {
  font-feature-settings: "tnum" on, "lnum" on;
}

/* Total indicator inside track */
.g-progress-bar-total {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-subtle);
  font-family: var(--font-family-system);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  right: 0.8rem;
  right: var(--space-8);
  top: 50%;
  transform: translateY(-50%);
}

/* Segmented progress bar */
.g-progress-bar.segmented .g-progress-bar-track {
  background: transparent;
  display: flex;
  gap: 0.2rem;
  gap: var(--space-2);
}

.g-progress-bar-segment {
  background: var(--color-bg-progress-track);
  flex: 1;
  height: 100%;
  position: relative;
  transition: background var(--motion-duration-fast) ease;
}

.g-progress-bar-segment.filled {
  background: var(--color-bg-progress-completed);
}

.g-progress-bar-segment.current {
  background: var(--color-bg-progress-current);
}

/* Legacy class support */
.g-progress-bar-segment-complete {
  background: var(--color-bg-progress-completed);
}

.g-progress-bar-segment:first-child {
  border-radius: 1rem 0 0 1rem;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

.g-progress-bar-segment:last-child {
  border-radius: 0 1rem 1rem 0;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-progress-bar,
.g-progress-bar.size-s,
.g-progress-bar.size-l,
.g-progress-bar.size-xl,
.g-progress-bar.color-blue,
.g-progress-bar.color-orange,
.g-progress-bar.color-purple,
.g-progress-bar.color-green,
.g-progress-bar.steps,
.g-progress-bar.next-step,
.g-progress-bar.animated,
.g-progress-bar.labeled,
.g-progress-bar.with-label,
.g-progress-bar.segmented {
  /* Explicit declarations for IDE autocomplete */
}

/**
 * ▗▄▄▄▖ ▗▄▖ ▗▄▄▖ ▗▖   ▗▄▄▄▖
 * ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌   ▐▌   
 * ▐▛▀▀▘▐▛▀▜▌▐▛▀▚▖▐▌   ▐▛▀▀▘
 * ▐▙▄▄▖▐▌ ▐▌▐▙▄▞▘▐▙▄▄▖▐▙▄▄▖
 *
 * Gambit CSS Framework - Table Component
 * Data display in tabular format with consistent styling
 */
/* ========================================================================
   TABLE COMPONENT
   ======================================================================== */
/*
 * Table Structure:
 * <div class="g-table">
 *   <table class="g-table-element">
 *     <thead>
 *       <tr>
 *         <th>Header</th>
 *       </tr>
 *     </thead>
 *     <tbody>
 *       <tr>
 *         <td>Cell</td>
 *       </tr>
 *     </tbody>
 *   </table>
 * </div>
 *
 * Supports striped, bordered, hover, and density variants
 */
/* ========================================================================
   BASE TABLE
   ======================================================================== */
.g-table {
  border-radius: var(--radius-8);
  overflow: hidden;
  width: 100%;
}

.g-table-element {
  border-collapse: collapse;
  width: 100%;
  font-feature-settings: "tnum" 1;
}

/* ========================================================================
   TABLE HEADERS
   ======================================================================== */
.g-table-element thead th {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: var(--space-12) var(--space-4);
  text-transform: uppercase;
  font-size: 1.1rem;
}

/* Text alignment handled by utility classes: .text-center, .text-right */
/* ========================================================================
   TABLE CELLS
   ======================================================================== */
.g-table-element td, .g-table-element th {
  background-clip: padding-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  padding: var(--space-12) var(--space-4);
}
.g-table-element td:first-child, .g-table-element th:first-child {
  padding-left: var(--space-8);
}
.g-table-element td:last-child, .g-table-element th:last-child {
  padding-right: var(--space-16);
}

.g-table-element tbody td {
  color: var(--color-text-primary);
  vertical-align: middle;
  font-size: 1.3rem;
}

/* Text alignment handled by utility classes: .text-center, .text-right */
/* Remove border from last row */
.g-table-element tbody tr:last-child td {
  border-bottom: none;
}

/* ========================================================================
   TABLE CONTENT COMPONENTS
   ======================================================================== */
/* Game info cell */
.g-table-game-info {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  flex-direction: column;
}

.g-table-time-control {
  color: var(--color-text-subtle);
  font-weight: 500;
  font-size: 1.1rem;
  white-space: nowrap;
}

/* Users cell */
.g-table-users {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.g-table-user-row {
  align-items: center;
  display: flex;
  gap: var(--space-8);
}

.g-table-piece-icon {
  display: flex;
  flex-shrink: 0;
}

.g-table-piece-icon svg {
  height: 1.6rem;
  width: 1.6rem;
}

.g-table-users .g-user-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* Result cell */
.g-table-result {
  align-items: center;
  display: inline-block;
}

.g-table-score {
  display: inline-flex;
  flex-direction: column;
  font-weight: 500;
  gap: var(--space-2);
  color: var(--color-gray-500);
  vertical-align: middle;
  margin-right: 0.4rem;
}

.g-table-result .result-won {
  fill: var(--color-green);
}

.g-table-result .result-lost {
  fill: var(--color-red);
}

.g-table-result .result-draw {
  fill: var(--color-gray-500);
}

/* Accuracy cell */
.g-table-accuracy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.g-table-accuracy-white {
  color: var(--color-text-primary);
}

.g-table-accuracy-black {
  color: var(--color-text-secondary);
}

/* ========================================================================
   TABLE VARIANTS
   ======================================================================== */
/* Striped rows */
.g-table.striped .g-table-element tbody tr:nth-child(odd) {
  background: var(--color-bg-subtlest);
}

/* Hover effect */
.g-table.hover .g-table-element tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

/* ========================================================================
   DENSITY VARIANTS
   ======================================================================== */
/* Compact density */
.g-table.compact .g-table-element td, .g-table.compact .g-table-element th {
  padding: var(--space-8) var(--space-2);
}
.g-table.compact .g-table-element td:first-child, .g-table.compact .g-table-element th:first-child {
  padding-left: var(--space-8);
}
.g-table.compact .g-table-element td:last-child, .g-table.compact .g-table-element th:last-child {
  padding-right: var(--space-12);
}

.g-table.compact .g-table-users {
  gap: var(--space-2);
}

.g-table.compact .g-table-game-info {
  gap: var(--space-2);
}

/* Spacious density */
.g-table.spacious .g-table-element td, .g-table.spacious .g-table-element th {
  padding: var(--space-16) var(--space-12);
}
.g-table.spacious .g-table-element td:first-child, .g-table.spacious .g-table-element th:first-child {
  padding-left: var(--space-16);
}
.g-table.spacious .g-table-element td:last-child, .g-table.spacious .g-table-element th:last-child {
  padding-right: var(--space-20);
}

.g-table.spacious .g-table-users {
  gap: var(--space-8);
}

.g-table.spacious .g-table-game-info {
  gap: var(--space-8);
}

/* ========================================================================
   RESPONSIVE BEHAVIOR
   ======================================================================== */
@media (max-width: 768px) {
  .g-table {
    overflow-x: auto;
  }
  .g-table-element {
    min-width: 600px;
  }
  .g-table-element th,
  .g-table-element td {
    padding: var(--space-8) var(--space-12);
  }
  .g-table-users .g-user-info {
    min-width: 120px;
  }
}
/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-table,
.g-table-element,
.g-table-game-info,
.g-table-time-control,
.g-table-users,
.g-table-result,
.g-table-score {
  /* Explicit declarations for IDE autocomplete */
}

/**
 * ▗▄▄▖  ▗▄▖  ▗▄▄▖▗▄▄▄▖▗▖  ▗▖ ▗▄▖ ▗▄▄▄▖▗▄▄▄▖ ▗▄▖ ▗▖  ▗▖
 * ▐▌ ▐▌▐▌ ▐▌▐▌     █  ▐▛▚▖▐▌▐▌ ▐▌  █    █  ▐▌ ▐▌▐▛▚▖▐▌
 * ▐▛▀▘ ▐▛▀▜▌▐▌▝▜▌  █  ▐▌ ▝▜▌▐▛▀▜▌  █    █  ▐▌ ▐▌▐▌ ▝▜▌
 * ▐▌   ▐▌ ▐▌▝▚▄▞▘▗▄█▄▖▐▌  ▐▌▐▌ ▐▌  █  ▗▄█▄▖▝▚▄▞▘▐▌  ▐▌
 *
 * Gambit CSS Framework - Pagination Component
 * Navigation controls for multi-page content
 */
/* ========================================================================
   PAGINATION COMPONENT
   ======================================================================== */
/*
 * Pagination Structure:
 * <nav class="pagination" role="navigation" aria-label="Pagination">
 *   <button class="pagination-top">Top</button>
 *   <div class="pagination-nav">
 *     <button class="pagination-first" disabled>First</button>
 *     <button class="pagination-prev" disabled>
 *       <svg>...</svg>
 *     </button>
 *     <button class="pagination-page" aria-selected="true">1</button>
 *     <button class="pagination-page">2</button>
 *     <button class="pagination-page">3</button>
 *     <span class="pagination-ellipsis">...</span>
 *     <button class="pagination-page">10</button>
 *     <button class="pagination-next">
 *       <svg>...</svg>
 *     </button>
 *     <button class="pagination-last">Last</button>
 *   </div>
 * </nav>
 *
 * Compact mode shows only arrow navigation
 */
/* ========================================================================
   BASE PAGINATION
   ======================================================================== */
.g-pagination {
  display: flex;
  gap: 0.4rem;
  gap: var(--space-4);
  justify-content: space-between;
}

/* Navigation container */
.g-pagination-nav {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  gap: var(--space-4);
  margin-left: auto;
}

/* ========================================================================
   PAGINATION BUTTONS
   ======================================================================== */
/* Override button component styles for pagination context */
.g-pagination .g-button.size-xs {
  min-height: 2.8rem;
  min-width: 2.8rem;
}

/* Hide glyphs in default first/last buttons (text only) */
.g-pagination:not(.g-pagination-compact) .g-pagination-first .g-glyph,
.g-pagination:not(.g-pagination-compact) .g-pagination-last .g-glyph {
  display: none;
}

/* Page number specific styles */
.g-pagination .g-button.g-pagination-page {
  padding: var(--space-2) var(--space-6);
}

/* Icon-only button adjustments */
.g-pagination .g-button.icon-only {
  padding: var(--space-2);
}

.g-pagination .g-button.icon-only .g-glyph svg {
  height: 1.6rem;
  width: 1.6rem;
}

/* Top button */
.g-pagination-top {
  display: none;
}

@media (min-width: 640px) { /* Media queries typically stay as px */
  .g-pagination-top {
    display: inline-flex;
  }
}
/* ========================================================================
   STATES
   ======================================================================== */
/* Hover state - inherits from button component */
/* Active/Selected state */
/* .g-pagination .g-button.g-pagination-page[aria-selected="true"] {
  --cc-bg-color: var(--color-bg-selected);
  --textColor: var(--color-text-inverse);
  background: var(--color-bg-selected);
  color: var(--color-text-inverse);
  cursor: default;
  pointer-events: none;
} */
/* Active/Selected state - white text, transparent background */
.g-pagination .g-button.g-pagination-page[aria-selected=true] {
  --cc-bg-color: transparent;
  --textColor: var(--color-white);
  background: rgba(0, 0, 0, 0.1);
  box-shadow: none;
  border: none;
  font-weight: 700;
  color: var(--color-gray-500);
  cursor: default;
  pointer-events: none;
}

/* Ensure selected state overrides hover */
.g-pagination .g-button.g-pagination-page[aria-selected=true]:hover {
  --cc-bg-color-hover: transparent;
  background: transparent;
  color: var(--color-white);
}

/* Disabled state - inherits from button component */
/* ========================================================================
   ELLIPSIS
   ======================================================================== */
.g-pagination-ellipsis {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-subtle);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0.4rem;
  padding: 0 var(--space-4);
  user-select: none;
}

/* ========================================================================
   VARIANT: COMPACT (4 icon buttons only)
   ======================================================================== */
.g-pagination-compact .g-pagination-page,
.g-pagination-compact .g-pagination-ellipsis,
.g-pagination-compact .g-pagination-top {
  display: none;
}

/* Ensure first/last buttons are icon-only in compact mode */
.g-pagination-compact .g-pagination-first,
.g-pagination-compact .g-pagination-last {
  padding: var(--space-2);
}

.g-pagination-compact .g-pagination-first .g-button-text,
.g-pagination-compact .g-pagination-last .g-button-text {
  display: none;
}

.g-pagination-compact .g-pagination-first .g-glyph,
.g-pagination-compact .g-pagination-last .g-glyph {
  display: flex;
}

/* ========================================================================
   CENTERED PAGINATION
   ======================================================================== */
.g-pagination-center {
  justify-content: center;
}

.g-pagination-center .g-pagination-nav {
  margin-left: 0;
}

/* ========================================================================
   PAGINATION WITH LABEL
   ======================================================================== */
.g-pagination-label {
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-subtle);
  display: flex;
  font-size: 1.4rem;
  margin-right: 1.2rem;
  margin-right: var(--space-12);
}

/* ========================================================================
   LARGE PAGINATION VARIANT
   ======================================================================== */
.g-pagination-large .g-pagination-page,
.g-pagination-large .g-pagination-prev,
.g-pagination-large .g-pagination-next,
.g-pagination-large .g-pagination-first,
.g-pagination-large .g-pagination-last,
.g-pagination-large .g-pagination-top {
  font-size: 1.6rem;
  min-height: 4rem;
  padding: 0.4rem 0.8rem;
  padding: var(--space-4) var(--space-8);
}

.g-pagination-large .g-pagination-page {
  min-width: 4rem;
}

.g-pagination-large .g-pagination-prev svg,
.g-pagination-large .g-pagination-next svg {
  height: 2rem;
  width: 2rem;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-pagination,
.g-pagination-compact,
.g-pagination-center,
.g-pagination-large {
  /* Explicit declarations for IDE autocomplete */
}

/**
 * ▗▖ ▗▖▗▄▄▄▖ ▗▄▖ ▗▄▄▄ ▗▄▄▄▖▗▄▄▖  ▗▄▄▖
 * ▐▌ ▐▌▐▌   ▐▌ ▐▌▐▌  █▐▌   ▐▌ ▐▌▐▌   
 * ▐▛▀▜▌▐▛▀▀▘▐▛▀▜▌▐▌  █▐▛▀▀▘▐▛▀▚▖ ▝▀▚▖
 * ▐▌ ▐▌▐▙▄▄▖▐▌ ▐▌▐▙▄▄▀▐▙▄▄▖▐▌ ▐▌▗▄▄▞▘
 *
 * Gambit CSS Framework - Header Components
 * Page Header, Aside Header, and Sidebar Header components
 */
/* ========================================================================
   PAGE HEADER COMPONENT
   ======================================================================== */
/*
 * Page Header Structure (matching Chess.com live site):
 * <a href="#" class="g-page-header g-page-header-large">
 *   <img aria-hidden="true" alt="Library" class="g-icon-img" height="40" src="/icons/svg/library.svg" width="40">
 *   <h1 class="g-page-header-title g-heading-small">Library</h1>
 * </a>
 *
 * Or medium size:
 * <a href="#" class="g-page-header g-page-header-medium">
 *   <img aria-hidden="true" alt="Library" class="g-icon-img" height="24" src="/icons/svg/library.svg" width="24">
 *   <h1 class="g-page-header-title g-heading-x-small">Library</h1>
 * </a>
 *
 * Sizes: g-page-header-medium, g-page-header-large
 */
/* ========================================================================
   PAGE HEADER
   ========================================================================== */
.g-page-header {
  align-items: center;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  outline: none;
  padding: 0;
  text-decoration: none;
  transition: opacity var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out-1);
}

/* Link/Button states */
a.g-page-header:hover,
button.g-page-header:hover {
  opacity: var(--opacity-pressed);
}

a.g-page-header:active,
button.g-page-header:active {
  opacity: 0.6;
}

/* Non-interactive state */
div.g-page-header {
  cursor: default;
}

/* ========================================================================
   PAGE HEADER SIZES
   ========================================================================== */
/* Medium size */
.g-page-header.size-m {
  gap: 1.2rem;
  gap: var(--space-12);
}

.g-page-header.size-m .g-icon {
  height: 2.4rem;
  width: 2.4rem;
}

.g-page-header.size-m .g-page-header-title {
  font-family: var(--font-family-heading);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2727; /* 28px/22px */
}

/* Large size */
.g-page-header.size-l {
  gap: 1.6rem;
  gap: var(--space-16);
}

.g-page-header.size-l .g-icon {
  height: 4rem;
  width: 4rem;
}

.g-page-header.size-l .g-page-header-title {
  font-family: var(--font-family-heading);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.1429; /* 32px/28px */
}

/* ========================================================================
   PAGE HEADER ELEMENTS
   ========================================================================== */
/* Icon container */
.g-page-header .g-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g-page-header .g-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Title */
.g-page-header-title {
  color: #FFFFFF;
  color: var(--color-text-boldest);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) { /* Media queries typically stay as px */
  .g-page-header.size-m .g-page-header-title {
    font-size: 2rem;
  }
  .g-page-header.size-l .g-page-header-title {
    font-size: 2.4rem;
  }
}
/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ========================================================================== */
.g-page-header.size-m,
.g-page-header.size-l {
  /* Explicit declarations for IDE autocomplete */
}

/* ========================================================================
   ASIDE HEADER COMPONENT
   ======================================================================== */
/*
 * Aside Header Structure:
 * <div class="g-aside-header {narrow|wide} {underline-default|underline-full|underline-none}">
 *   <div class="g-aside-header-name">
 *     <span class="g-aside-header-title">Section Title</span>
 *     <span class="g-aside-header-subtext">(10)</span>
 *   </div>
 *   <svg class="g-aside-header-icon">...</svg>
 * </div>
 *
 * Or as a link:
 * <a href="#" class="g-aside-header narrow">
 *   <div class="g-aside-header-name">
 *     <span class="g-aside-header-title">Navigate to Section</span>
 *   </div>
 *   <svg class="g-aside-header-icon">...</svg>
 * </a>
 *
 * Padding: narrow (default), wide
 * Underline: default, full, none
 */
/* ========================================================================
   BASE ASIDE HEADER
   ========================================================================== */
.g-aside-header {
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--padding-y) var(--padding-x);
  position: relative;
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out-1);
}

/* Default padding values */
.g-aside-header {
  --padding-x: var(--space-12);
  --padding-y: var(--space-8);
}

/* ========================================================================
   PADDING MODIFIERS
   ========================================================================== */
.g-aside-header.narrow {
  --padding-x: var(--space-12);
  --padding-y: var(--space-8);
}

.g-aside-header.wide {
  --padding-x: var(--space-16);
  --padding-y: var(--space-12);
}

/* ========================================================================
   UNDERLINE STYLES
   ========================================================================== */
/* Default underline (with padding) */
.g-aside-header.underline-default::after {
  background: rgba(255, 255, 255, 0.1);
  background: var(--color-border-default);
  bottom: 0;
  content: "";
  height: 0.1rem;
  height: var(--border-s);
  left: var(--padding-x);
  position: absolute;
  right: var(--padding-x);
}

/* Full width underline */
.g-aside-header.underline-full::after {
  background: rgba(255, 255, 255, 0.1);
  background: var(--color-border-default);
  bottom: 0;
  content: "";
  height: 0.1rem;
  height: var(--border-s);
  left: 0;
  position: absolute;
  right: 0;
}

/* No underline */
.g-aside-header.underline-none::after {
  display: none;
}

/* ========================================================================
   ASIDE HEADER ELEMENTS
   ========================================================================== */
/* Name container */
.g-aside-header-name {
  align-items: baseline;
  display: flex;
  flex: 1;
  gap: 0.4rem;
  gap: var(--space-4);
  min-width: 0;
}

/* Title text */
.g-aside-header-title {
  color: #FFFFFF;
  color: var(--color-text-boldest);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.0588;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alternative: Bold title for some contexts */
.g-aside-header-title.bold {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.125;
}

/* Subtext (e.g., count) */
.g-aside-header-subtext {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-text-subtle);
  flex-shrink: 0;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.0588;
}

/* Alternative: Bold subtext */
.g-aside-header-subtext.bold {
  font-size: 1.6rem;
  line-height: 1.125;
}

/* Icon (chevron) */
.g-aside-header-icon {
  color: rgba(255, 255, 255, 0.5);
  color: var(--color-icon-default);
  flex-shrink: 0;
  height: 1.6rem;
  margin-left: 0.8rem;
  margin-left: var(--space-8);
  transition: color var(--motion-duration-fast) cubic-bezier(0, 0, 0.2, 1);
  transition: color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 1.6rem;
}

/* ========================================================================
   LINK STATES
   ========================================================================== */
a.g-aside-header {
  cursor: pointer;
}

@media (hover: hover) {
  a.g-aside-header:hover {
    background: rgba(255, 255, 255, 0.1);
    background: var(--color-bg-subtle);
  }
  a.g-aside-header:hover .g-aside-header-icon {
    color: rgba(255, 255, 255, 0.72);
    color: var(--color-icon-default-hovered);
  }
}
a.g-aside-header:active {
  opacity: var(--opacity-pressed);
}

/* ========================================================================
   SLOT CONTENT
   ========================================================================== */
/* Custom content area */
.g-aside-header-content {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  gap: var(--space-8);
  margin-left: auto;
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ========================================================================== */
.g-aside-header.narrow,
.g-aside-header.wide,
.g-aside-header.underline-default,
.g-aside-header.underline-full,
.g-aside-header.underline-none {
  /* Explicit declarations for IDE autocomplete */
}

/* ========================================================================
   SIDEBAR HEADER COMPONENT
   ======================================================================== */
/*
 * Sidebar Header Structure:
 * <div class="g-sidebar-header variant-{primary|secondary|secondary-flat|tertiary}">
 *   <div class="g-sidebar-header-start">
 *     <button class="g-button size-m variant-ghost icon-only">
 *       <span class="button-icon">
 *         <svg>...</svg>
 *       </span>
 *     </button>
 *   </div>
 *   <div class="g-sidebar-header-center">
 *     <span class="g-sidebar-header-feature-icon">
 *       <svg>...</svg>
 *     </span>
 *     <h1 class="g-sidebar-header-title">Feature Title</h1>
 *   </div>
 *   <div class="g-sidebar-header-end">
 *     <button class="g-button size-m variant-ghost icon-only">
 *       <span class="button-icon">
 *         <svg>...</svg>
 *       </span>
 *     </button>
 *   </div>
 * </div>
 *
 * Variants: primary, secondary, secondary-flat, tertiary
 * Modifiers: transparent
 */
/* ========================================================================
   BASE SIDEBAR HEADER
   ========================================================================== */
.g-sidebar-header,
header.g-sidebar-header {
  align-items: center;
  background: rgba(0, 0, 0, 0.14);
  background: var(--color-bg-tertiary);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: var(--header-height);
  padding: 0 0.8rem;
  padding: 0 var(--space-8);
  position: relative;
}

/* Transparent modifier */
.g-sidebar-header.transparent {
  background: transparent;
}

/* ========================================================================
   VARIANT STYLES
   ========================================================================== */
/* Primary variant */
.g-sidebar-header.variant-primary {
  --header-height: 7.2rem;
  --icon-size: 2rem; /* 20px for buttons */
  --feature-icon-size: 4rem; /* 40px for color icon */
}

/* Secondary variants */
.g-sidebar-header.variant-secondary {
  --header-height: 4.8rem;
  --icon-size: 2rem; /* 20px for buttons */
  --feature-icon-size: 2.4rem; /* 24px for color icon */
}

.g-sidebar-header.variant-secondary-flat {
  --header-height: 4.8rem;
  --icon-size: 2rem; /* 20px for buttons */
  --feature-icon-size: 2.4rem; /* 24px for glyph icon */
}

/* Tertiary variant */
.g-sidebar-header.variant-tertiary {
  --header-height: 4.8rem;
  --icon-size: 2rem; /* 20px for buttons */
  --feature-icon-size: 2.4rem; /* 24px for glyph icon */
}

/* ========================================================================
   LAYOUT SECTIONS
   ========================================================================== */
/* Start section (left icons) */
.g-sidebar-header-start {
  display: flex;
  gap: 0.4rem;
  gap: var(--space-4);
  justify-self: start;
}

/* Center section (feature icon + title) */
.g-sidebar-header-center {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  gap: var(--space-8);
  justify-self: center;
  max-width: 100%;
  text-align: center;
}

/* End section (right icons) */
.g-sidebar-header-end {
  display: flex;
  gap: 0.4rem;
  gap: var(--space-4);
  justify-self: end;
}

/* ========================================================================
   FEATURE ICON / GLYPH
   ========================================================================== */
/* For color icon variants (primary, secondary) */
.g-sidebar-header-center .g-icon {
  flex-shrink: 0;
  height: var(--feature-icon-size);
  width: var(--feature-icon-size);
}

.g-sidebar-header .g-icon img {
  width: 100%;
  height: 100%;
}

/* For glyph variants (secondary-flat, tertiary) */
.g-sidebar-header-center .g-glyph {
  flex-shrink: 0;
  height: var(--feature-icon-size);
  width: var(--feature-icon-size);
}

/* Glyph color matches text color for secondary-flat */
.g-sidebar-header.variant-secondary-flat .g-sidebar-header-center .g-glyph {
  color: rgb(255, 255, 255);
  color: var(--color-icon-boldest);
}

/* Glyph color matches text color for tertiary */
.g-sidebar-header.variant-tertiary .g-sidebar-header-center .g-glyph {
  color: rgba(255, 255, 255, 0.72);
  color: var(--color-icon-bolder);
}

/* ========================================================================
   TITLE
   ========================================================================== */
/* Primary variant title */
.g-sidebar-header.variant-primary .g-sidebar-header-title {
  color: #FFFFFF;
  color: var(--color-text-boldest);
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1.0322;
  margin: 0;
}

/* Secondary variant title */
.g-sidebar-header.variant-secondary .g-sidebar-header-title,
.g-sidebar-header.variant-secondary-flat .g-sidebar-header-title {
  color: #FFFFFF;
  color: var(--color-text-boldest);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.0588;
  margin: 0;
}

/* Tertiary variant title */
.g-sidebar-header.variant-tertiary .g-sidebar-header-title {
  color: rgba(255, 255, 255, 0.85);
  color: var(--color-text-bolder);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2857;
  margin: 0;
}

/* Title overflow handling */
.g-sidebar-header-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) { /* Media queries typically stay as px */
  .g-sidebar-header {
    padding: 0 0.4rem;
    padding: 0 var(--space-4);
  }
  .g-sidebar-header.variant-primary .g-sidebar-header-title {
    font-size: 2.4rem;
  }
}
/**
 *  ▗▄▖  ▗▄▄▖▗▄▄▄▖▗▄▄▄ ▗▄▄▄▖▗▄▄▄▖▗▄▄▄▖▗▄▄▄▖▗▖  ▗▖
 * ▐▌ ▐▌▐▌     █  ▐▌  █▐▌     █    █  ▐▌   ▐▛▚▞▜▌
 * ▐▛▀▜▌ ▝▀▚▖  █  ▐▌  █▐▛▀▀▘  █    █  ▐▛▀▀▘▐▌  ▐▌
 * ▐▌ ▐▌▗▄▄▞▘▗▄█▄▖▐▙▄▄▀▐▙▄▄▖▗▄█▄▖  █  ▐▙▄▄▖▐▌  ▐▌
 *
 * Gambit CSS Framework - Aside Item Component
 * Navigation menu items for sidebar/aside navigation
 */
/* ========================================================================
   ASIDE ITEM COMPONENT
   ======================================================================== */
/*
 * Aside Item Structure:
 * <a href="#" class="g-aside-item">
 *   <span class="g-aside-item-select"><!-- selection indicator --></span>
 *   <span class="g-aside-item-icon"><!-- icon --></span>
 *   <span class="g-aside-item-label">Item Label</span>
 *   <span class="g-aside-item-secondary">
 *     <span class="g-glyph size-16"><!-- icon --></span>
 *     <span class="g-aside-item-count">1234</span>
 *   </span>
 *   <span class="g-aside-item-chevron"><!-- chevron icon --></span>
 * </a>
 *
 * States: enabled (default), disabled
 * Variants: danger
 * Type: navigational (default), selectable
 * Elements: with-icon, with-secondary
 * Selected State: unselected (default), selected
 */
/* ========================================================================
   BASE ASIDE ITEM
   ======================================================================== */
.g-aside-item {
  align-items: center;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 1.6rem; /* 16px */
  gap: var(--space-16);
  min-height: 4.8rem; /* 48px */
  padding: 1.2rem 1.2rem 1.2rem 1.6rem; /* 12px 12px 12px 16px */
  position: relative;
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out-1);
  width: 100%;
}

/* Stack layout for demo */
.aside-item-stack .g-aside-item + .g-aside-item {
  border-top: var(--border-s) solid var(--color-bg-subtler); /* 1px */
}

/* Hover state */
.g-aside-item:hover {
  background: var(--color-bg-subtlest);
}

/* Active state */
.g-aside-item.active {
  background: var(--color-bg-subtler);
}

/* Disabled state */
.g-aside-item.disabled,
.g-aside-item:disabled {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ========================================================================
   ASIDE ITEM ELEMENTS
   ======================================================================== */
/* Icon element */
.g-aside-item-icon {
  flex-shrink: 0;
  order: 1; /* Default: leading position */
}

.g-aside-item-icon .g-glyph {
  color: var(--color-icon-default);
  height: 2.4rem; /* 24px */
  width: 2.4rem; /* 24px */
}

/* Icon check variant */
.g-aside-item.icon-check .g-aside-item-icon .g-glyph {
  color: var(--color-green-300);
  height: 1.6rem;
  width: 1.6rem;
}

.g-aside-item:hover .g-aside-item-icon .g-glyph {
  color: var(--color-icon-default-hovered);
}

/* Icon position - trailing */
.g-aside-item.icon-trailing .g-aside-item-icon {
  order: 4; /* After label and secondary, before chevron */
}

/* Label */
.g-aside-item-label {
  color: var(--color-text-default);
  flex: 1;
  font-family: var(--font-family-system);
  font-size: 1.4rem; /* 14px */
  font-weight: 600;
  line-height: 1.428; /* 20px/14px */
  order: 2;
  text-align: left;
}

.g-aside-item:hover .g-aside-item-label,
.g-aside-item.active .g-aside-item-label {
  color: var(--color-text-bolder);
}

/* Secondary info container */
.g-aside-item-secondary {
  align-items: center;
  display: none;
  flex-direction: row;
  gap: 0.2rem; /* 2px */
  gap: var(--space-2);
  order: 3;
}

.g-aside-item-secondary .g-glyph {
  color: var(--color-icon-default);
  height: 1.6rem;
  width: 1.6rem;
}

/* Count */
.g-aside-item-count {
  color: var(--color-text-default);
  font-family: var(--font-family-system);
  font-size: 1.4rem; /* 14px */
  font-weight: 600;
  line-height: 1.142; /* 16px/14px */
  text-align: right;
}

/* Value (for display composition) */
.g-aside-item-value {
  color: var(--color-text-default);
  font-family: var(--font-family-system);
  font-size: 1.4rem; /* 14px */
  font-weight: 600;
  line-height: 1.142; /* 16px/14px */
  text-align: right;
}

.g-aside-item:hover .g-aside-item-count,
.g-aside-item.active .g-aside-item-count {
  color: var(--color-text-bolder);
}

/* Chevron icon - always last */
.g-aside-item-chevron {
  flex-shrink: 0;
  order: 5;
}

.g-aside-item-chevron .g-glyph {
  color: var(--color-icon-default);
  height: 1.6rem; /* 16px */
  width: 1.6rem; /* 16px */
}

.g-aside-item:hover .g-aside-item-chevron .g-glyph {
  color: var(--color-icon-default-hovered);
}

/* ========================================================================
   DANGER VARIANT
   ======================================================================== */
.g-aside-item.danger .g-aside-item-icon .g-glyph,
.g-aside-item.danger .g-aside-item-label {
  color: var(--color-red-300);
}

.g-aside-item.danger:hover .g-aside-item-icon .g-glyph,
.g-aside-item.danger:hover .g-aside-item-label,
.g-aside-item.danger.active .g-aside-item-icon .g-glyph,
.g-aside-item.danger.active .g-aside-item-label {
  color: var(--color-red-300);
}

.g-aside-item.danger.disabled .g-aside-item-icon .g-glyph,
.g-aside-item.danger.disabled .g-aside-item-label,
.g-aside-item.danger:disabled .g-aside-item-icon .g-glyph,
.g-aside-item.danger:disabled .g-aside-item-label {
  color: var(--color-red-300);
}

/* ========================================================================
   ELEMENT VISIBILITY MODIFIERS
   ======================================================================== */
/* Icon - hidden by default, show when needed */
.g-aside-item-icon {
  display: none;
}

.g-aside-item.with-icon .g-aside-item-icon {
  display: block;
}

/* Secondary info - hidden by default */
.g-aside-item-secondary {
  display: none;
}

.g-aside-item.with-secondary .g-aside-item-secondary {
  display: flex;
}

/* Chevron - hidden by default, show when needed */
.g-aside-item-chevron {
  display: none;
}

.g-aside-item.with-chevron .g-aside-item-chevron {
  display: block;
}

/* ========================================================================
   TYPE MODIFIERS
   ======================================================================== */
/* Navigational - Default (links with chevron) */
.g-aside-item.navigational .g-aside-item-chevron {
  display: block;
}

/* Selectable - With selection indicator */
.g-aside-item-select {
  display: none;
  flex-shrink: 0;
  order: 0; /* Always first */
}

.g-aside-item.selectable .g-aside-item-select {
  display: block;
}

.g-aside-item-select .g-glyph {
  color: var(--color-icon-default);
  height: 1.6rem;
  width: 1.6rem;
}

.g-aside-item.selected .g-aside-item-select .g-glyph {
  color: var(--color-green-300);
}

/* ========================================================================
   EXPLICIT CLASS DECLARATIONS FOR IDE AUTOCOMPLETE
   ======================================================================== */
.g-aside-item,
.g-aside-item.navigational,
.g-aside-item.selectable,
.g-aside-item.selected,
.g-aside-item.disabled,
.g-aside-item.danger,
.g-aside-item.with-icon,
.g-aside-item.with-secondary,
.g-aside-item-select,
.g-aside-item-icon,
.g-aside-item-label,
.g-aside-item-secondary,
.g-aside-item-count,
.g-aside-item-chevron {
  /* Explicit declarations for IDE autocomplete */
}

/**
 * ▗▄▄▄▖ ▗▄▄▖ ▗▄▖ ▗▖  ▗▖ ▗▄▄▖
 *   █  ▐▌   ▐▌ ▐▌▐▛▚▖▐▌▐▌   
 *   █  ▐▌   ▐▌ ▐▌▐▌ ▝▜▌ ▝▀▚▖
 * ▗▄█▄▖▝▚▄▄▖▝▚▄▞▘▐▌  ▐▌▗▄▄▞▘
 *
 * Gambit CSS Framework - Icon Utilities
 * Utilities for g-glyph (SVG icons) and g-icon (image icons)
 */
/* ========================================================================
   GLYPH UTILITIES (SVG Icons)
   ======================================================================== */
/*
 * g-glyph is used for inline SVG icons
 * The SVG should be placed directly inside the span
 * Path elements will inherit the current text color
 */
.g-glyph {
  display: inline-block;
  vertical-align: middle;
}
.g-glyph svg {
  display: block;
  height: 100%;
  width: 100%;
}
.g-glyph path {
  fill: currentColor;
}

/* Glyph Sizes */
.g-glyph.size-12 {
  width: 1.2rem;
  width: var(--icon-12);
  height: 1.2rem;
  height: var(--icon-12);
}

.g-glyph.size-16 {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}

.g-glyph.size-20 {
  width: 2rem;
  width: var(--icon-20);
  height: 2rem;
  height: var(--icon-20);
}

.g-glyph.size-24 {
  width: 2.4rem;
  width: var(--icon-24);
  height: 2.4rem;
  height: var(--icon-24);
}

.g-glyph.size-32 {
  width: 3.2rem;
  width: var(--icon-32);
  height: 3.2rem;
  height: var(--icon-32);
}

.g-glyph.size-40 {
  width: 4rem;
  width: var(--icon-40);
  height: 4rem;
  height: var(--icon-40);
}

.g-glyph.size-48 {
  width: 4.8rem;
  width: var(--icon-48);
  height: 4.8rem;
  height: var(--icon-48);
}

.g-glyph.size-56 {
  width: 5.6rem;
  width: var(--icon-56);
  height: 5.6rem;
  height: var(--icon-56);
}

.g-glyph.size-64 {
  width: 6.4rem;
  width: var(--icon-64);
  height: 6.4rem;
  height: var(--icon-64);
}

.g-glyph.size-80 {
  width: 8rem;
  width: var(--icon-80);
  height: 8rem;
  height: var(--icon-80);
}

.g-glyph.size-96 {
  width: 9.6rem;
  width: var(--icon-96);
  height: 9.6rem;
  height: var(--icon-96);
}

.g-glyph.size-128 {
  width: 12.8rem;
  width: var(--icon-128);
  height: 12.8rem;
  height: var(--icon-128);
}

/* ========================================================================
   ICON UTILITIES (Image Icons)
   ======================================================================== */
/*
 * g-icon is used for image-based icons (PNG, JPG, etc.)
 * The image should be placed inside the span
 */
.g-icon {
  display: inline-block;
  vertical-align: middle;
}
.g-icon svg,
.g-icon img {
  display: block;
  height: 100%;
  width: 100%;
}

/* Icon Sizes */
.g-icon.size-12 {
  width: 1.2rem;
  width: var(--icon-12);
  height: 1.2rem;
  height: var(--icon-12);
}

.g-icon.size-16 {
  width: 1.6rem;
  width: var(--icon-16);
  height: 1.6rem;
  height: var(--icon-16);
}

.g-icon.size-20 {
  width: 2rem;
  width: var(--icon-20);
  height: 2rem;
  height: var(--icon-20);
}

.g-icon.size-24 {
  width: 2.4rem;
  width: var(--icon-24);
  height: 2.4rem;
  height: var(--icon-24);
}

.g-icon.size-32 {
  width: 3.2rem;
  width: var(--icon-32);
  height: 3.2rem;
  height: var(--icon-32);
}

.g-icon.size-40 {
  width: 4rem;
  width: var(--icon-40);
  height: 4rem;
  height: var(--icon-40);
}

.g-icon.size-48 {
  width: 4.8rem;
  width: var(--icon-48);
  height: 4.8rem;
  height: var(--icon-48);
}

.g-icon.size-56 {
  width: 5.6rem;
  width: var(--icon-56);
  height: 5.6rem;
  height: var(--icon-56);
}

.g-icon.size-64 {
  width: 6.4rem;
  width: var(--icon-64);
  height: 6.4rem;
  height: var(--icon-64);
}

.g-icon.size-80 {
  width: 8rem;
  width: var(--icon-80);
  height: 8rem;
  height: var(--icon-80);
}

.g-icon.size-96 {
  width: 9.6rem;
  width: var(--icon-96);
  height: 9.6rem;
  height: var(--icon-96);
}

.g-icon.size-128 {
  width: 12.8rem;
  width: var(--icon-128);
  height: 12.8rem;
  height: var(--icon-128);
}

/* ========================================================================
   GAME TYPE COLOR UTILITIES
   ======================================================================== */
/*
 * Color utilities for game type glyphs
 * These classes apply the appropriate color to game type icons
 */
/* Time Controls */
.g-glyph.color-bullet {
  color: var(--color-icon-bullet);
}

.g-glyph.color-blitz {
  color: var(--color-icon-blitz);
}

.g-glyph.color-rapid {
  color: var(--color-icon-rapid);
}

.g-glyph.color-daily {
  color: var(--color-icon-daily);
}

.g-glyph.color-classic {
  color: var(--color-icon-classic);
}

/* Game Variants */
.g-glyph.color-960 {
  color: var(--color-icon-live960);
}

.g-glyph.color-daily960 {
  color: var(--color-icon-daily960);
}

.g-glyph.color-crazyhouse {
  color: var(--color-icon-crazyhouse);
}

.g-glyph.color-3check {
  color: var(--color-icon-3check);
}

.g-glyph.color-bughouse {
  color: var(--color-icon-bughouse);
}

.g-glyph.color-kinghill {
  color: var(--color-icon-kinghill);
}

.g-glyph.color-4player {
  color: var(--color-icon-4player);
}

.g-glyph.color-variants {
  color: var(--color-icon-variants);
}

/* Other Game Types */
.g-glyph.color-puzzles {
  color: var(--color-icon-puzzles);
}

.g-glyph.color-puzzlerush {
  color: var(--color-icon-puzzlerush);
}

.g-glyph.color-puzzlebattle {
  color: var(--color-icon-puzzlebattle);
}

.g-glyph.color-computer {
  color: var(--color-icon-vscomputer);
}

.g-glyph.color-lessons {
  color: var(--color-icon-lessons);
}

.g-glyph.color-tournaments {
  color: var(--color-icon-tournaments);
}

.g-glyph.color-votechess {
  color: var(--color-icon-votechess);
}

.g-glyph.color-classroom {
  color: var(--color-icon-classroom);
}

.g-glyph.color-standard {
  color: var(--color-icon-standard);
}

.g-glyph.color-customposition {
  color: var(--color-icon-customposition);
}

.version-overview {
  display: grid;
  gap: 2rem; /* 20px */
  padding: 2rem 0; /* 20px */
}
.version-overview .framework-version-card {
  display: flex;
  align-items: center;
  gap: 2rem; /* 20px */
  padding: 2rem; /* 20px */
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
  border-radius: 1rem; /* 10px */
  border: var(--border-s) solid rgba(139, 92, 246, 0.2); /* 1px */
}
.version-overview .framework-version-card .version-icon {
  font-size: 3rem; /* 30px */
  line-height: 1;
}
.version-overview .framework-version-card .version-details h3 {
  margin: 0 0 0.5rem; /* 5px */
  font-size: 1.5rem; /* 15px */
  color: var(--color-text-primary);
}
.version-overview .framework-version-card .version-details .version-number {
  font-size: 2rem; /* 20px */
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.25rem; /* 2.5px */
}
.version-overview .framework-version-card .version-details .version-codename {
  font-style: italic;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
}
.version-overview .framework-version-card .version-details .version-date {
  font-size: 0.875rem; /* 8.75px */
  color: rgba(255, 255, 255, 0.6);
}
.version-overview .version-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); /* 150px */
  gap: 1rem; /* 10px */
}
.version-overview .version-stats .stat-item {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  border: var(--border-s) solid rgba(255, 255, 255, 0.1); /* 1px */
}
.version-overview .version-stats .stat-item .stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.version-overview .version-stats .stat-item .stat-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
}
.version-overview .recent-updates {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.version-overview .recent-updates h4 {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  color: var(--color-text-primary);
}
.version-overview .recent-updates .update-list {
  margin: 0;
  padding-left: 1.5rem;
}
.version-overview .recent-updates .update-list li {
  margin: 0.5rem 0;
  color: rgba(255, 255, 255, 0.8);
}
.version-overview .recent-updates .update-list li strong {
  color: var(--color-primary);
}
.version-overview .version-actions {
  display: flex;
  gap: 1rem; /* 10px */
  flex-wrap: wrap;
}

.version-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 5px */
  margin-left: auto;
  padding: 0.25rem 0.75rem; /* 2.5px 7.5px */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1rem; /* 10px */
  font-size: 0.75rem; /* 7.5px */
  cursor: pointer;
  transition: all 0.2s ease;
}
.version-badge:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-0.1rem); /* -1px */
}
.version-badge .version-number {
  font-weight: 600;
  color: var(--color-primary);
}
.version-badge .stability-indicator {
  padding: 0.125rem 0.5rem; /* 1.25px 5px */
  border-radius: 0.75rem; /* 7.5px */
  font-size: 0.625rem; /* 6.25px */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.version-badge .stability-indicator.stable {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}
.version-badge .stability-indicator.beta {
  background: rgba(255, 152, 0, 0.2);
  color: #FF9800;
}
.version-badge .stability-indicator.experimental {
  background: rgba(244, 67, 54, 0.2);
  color: #F44336;
}
.version-badge .stability-indicator.deprecated {
  background: rgba(158, 158, 158, 0.2);
  color: #9E9E9E;
  text-decoration: line-through;
}

.framework-version {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 5px */
  margin-top: 1rem; /* 10px */
  padding: 0.5rem 1rem; /* 5px 10px */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem; /* 5px */
  font-size: 0.875rem; /* 8.75px */
}
.framework-version .version-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.framework-version .version-number {
  font-weight: 700;
  color: var(--color-primary);
}
.framework-version .version-codename {
  font-style: italic;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem; /* 7.5px */
}
.framework-version .version-codename::before {
  content: '"';
}
.framework-version .version-codename::after {
  content: '"';
}

.version-details {
  padding: 1.5rem; /* 15px */
}
.version-details h3 {
  margin: 0 0 1rem; /* 10px */
  font-size: 1.25rem; /* 12.5px */
  color: var(--color-text-primary);
}
.version-details h4 {
  margin: 1rem 0 0.5rem; /* 10px 0 5px */
  font-size: 1rem; /* 10px */
  color: var(--color-text-secondary);
}
.version-details .version-info p {
  margin: 0.5rem 0; /* 5px */
}
.version-details .version-info p strong {
  display: inline-block;
  min-width: 12rem; /* 120px */
  font-weight: 600;
}
.version-details .version-info .stability-stable {
  color: #4CAF50;
}
.version-details .version-info .stability-beta {
  color: #FF9800;
}
.version-details .version-info .stability-experimental {
  color: #F44336;
}
.version-details .change-list {
  margin: 0.5rem 0; /* 5px */
  padding-left: 1.5rem; /* 15px */
}
.version-details .change-list li {
  margin: 0.25rem 0; /* 2.5px */
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .component-section .section-title-wrap { /* Media queries typically stay as px */ }
  .component-section .section-title-wrap > span {
    display: block;
  }
}

.dark-theme .version-badge {
  background: rgba(0, 0, 0, 0.3);
}
.dark-theme .version-badge:hover {
  background: rgba(0, 0, 0, 0.4);
}
.dark-theme .framework-version {
  background: rgba(0, 0, 0, 0.3);
}

.changelog-button {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 5px */
  padding: 0.5rem 1rem; /* 5px 10px */
  background: transparent;
  border: var(--border-s) solid rgba(255, 255, 255, 0.2); /* 1px */
  border-radius: 0.5rem; /* 5px */
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem; /* 8.75px */
  cursor: pointer;
  transition: all 0.2s ease;
}
.changelog-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
.changelog-button .changelog-icon {
  font-size: 1rem; /* 10px */
}

.changelog-panel {
  position: fixed;
  top: 0;
  right: -40rem; /* -400px */
  width: 40rem; /* 400px */
  height: 100vh;
  background: var(--color-background);
  box-shadow: -0.2rem 0 1rem rgba(0, 0, 0, 0.1); /* -2px 0 10px */
  z-index: var(--z-index-dropdown);
  transition: right 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.changelog-panel.is-open {
  right: 0;
}
.changelog-panel .changelog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem; /* 15px */
  border-bottom: var(--border-s) solid rgba(0, 0, 0, 0.1); /* 1px */
}
.changelog-panel .changelog-header h2 {
  margin: 0;
  font-size: 1.25rem; /* 12.5px */
}
.changelog-panel .changelog-header .changelog-close {
  background: none;
  border: none;
  font-size: 1.5rem; /* 15px */
  cursor: pointer;
  color: rgba(0, 0, 0, 0.5);
  padding: 0;
  width: 3.2rem; /* 32px */
  height: 3.2rem; /* 32px */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem; /* 4px */
  transition: all 0.2s ease;
}
.changelog-panel .changelog-header .changelog-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}
.changelog-panel .changelog-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem; /* 15px */
}
.changelog-panel .changelog-release {
  margin-bottom: 2rem; /* 20px */
  padding-bottom: 2rem; /* 20px */
  border-bottom: var(--border-s) solid rgba(0, 0, 0, 0.1); /* 1px */
}
.changelog-panel .changelog-release:last-child {
  border-bottom: none;
}
.changelog-panel .changelog-release .release-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem; /* 10px */
}
.changelog-panel .changelog-release .release-header .release-version {
  margin: 0;
  font-size: 1.125rem; /* 11.25px */
  color: var(--color-primary);
}
.changelog-panel .changelog-release .release-header .release-date {
  font-size: 0.875rem; /* 8.75px */
  color: rgba(0, 0, 0, 0.5);
}
.changelog-panel .changelog-release .release-changes {
  margin: 0;
  padding-left: 1.5rem; /* 15px */
}
.changelog-panel .changelog-release .release-changes li {
  margin: 0.5rem 0; /* 5px */
  color: rgba(0, 0, 0, 0.8);
  line-height: 1.5;
}

@media (max-width: 768px) { /* Media queries typically stay as px */
  .version-badge {
    font-size: 0.625rem; /* 6.25px */
    padding: 0.125rem 0.5rem; /* 1.25px 5px */
  }
  .version-badge .stability-indicator {
    font-size: 0.5rem; /* 5px */
    padding: 0.0625rem 0.375rem; /* 0.625px 3.75px */
  }
  .framework-version {
    font-size: 0.75rem; /* 7.5px */
    padding: 0.375rem 0.75rem; /* 3.75px 7.5px */
  }
  .changelog-panel {
    width: 100%;
    right: -100%;
  }
}
/**
 * ▗▄▖  ▗▄▄▖ ▗▄▄▖ ▗▄▖ ▗▄▄▖ ▗▄▄▄▖ ▗▄▄▄▖ ▗▄▖ ▗▖  ▗▖
 *▐▌ ▐▌▐▌   ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌  ▐▌  ▐▌ ▐▌ ▐▌ ▐▛▚▖▐▌
 *▐▛▀▜▌▐▌   ▐▌   ▐▌ ▐▌▐▛▀▚▖▐▌  ▐▌  ▐▌ ▐▌ ▐▌ ▐▌ ▝▜▌
 *▐▌ ▐▌▝▚▄▄▖▝▚▄▄▖▝▚▄▞▘▐▌ ▐▌▐▙▄▄▀ ▗▄▄▄▖▝▚▄▞▘ ▐▌  ▐▌
 *
 * Gambit CSS Framework - Accordion Component
 * Interactive accordion/collapsible content component
 */
/* ========================================================================
   ACCORDION COMPONENT
   ======================================================================== */
/**
 * Compositional pattern: .g-accordion + .g-accordion-item + .g-accordion-trigger + .g-accordion-content
 * 
 * Example:
 * <div class="g-accordion">
 *   <div class="g-accordion-item">
 *     <button class="g-accordion-trigger">
 *       Question text
 *       <span class="g-accordion-icon"><!-- icon --></span>
 *     </button>
 *     <div class="g-accordion-content">
 *       <div class="g-accordion-inner">
 *         Answer content
 *       </div>
 *     </div>
 *   </div>
 * </div>
 */
.g-accordion {
  /* Accordion CSS Custom Properties */
  --accordion-gap: var(--space-12);
  --accordion-item-radius: var(--radius-l);
  --accordion-trigger-padding: var(--space-16) var(--space-12) var(--space-16) var(--space-16); /* Default matches medium dropdown */
  --accordion-trigger-gap: var(--space-16);
  --accordion-trigger-font-size: 1.4rem; /* Default matches medium */
  --accordion-trigger-line-height: 1.1428571429;
  --accordion-trigger-font-weight: 600;
  --accordion-content-font-size: 1.4rem;
  --accordion-content-line-height: 1.4285714286;
  --accordion-icon-size: var(--icon-20); /* Default icon size for medium */
  display: flex;
  flex-direction: column;
  gap: var(--accordion-gap);
  counter-reset: accordion-counter;
  width: 100%;
}

/* Accordion Item wrapper */
.g-accordion-item {
  background: rgba(0, 0, 0, 0.05); /* Subtle background for the wrapper */
  border: none;
  border-radius: var(--accordion-item-radius);
  counter-increment: accordion-counter;
}
.g-accordion-item.is-open .g-accordion-trigger .g-glyph:last-child {
  transform: rotate(180deg);
}

/* Accordion Trigger - matching dropdown button secondary styling */
.g-accordion-trigger {
  --accordion-bg-color: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  --accordion-bg-color-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
  --accordion-bg-color-active: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 100%);
  --accordion-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 1px 0px rgba(255, 255, 255, 0.08);
  --accordion-box-shadow-hover: 0px 2px 4px rgba(0, 0, 0, 0.16), 0px 4px 8px rgba(0, 0, 0, 0.12), inset 0px 1px 0px rgba(255, 255, 255, 0.1);
  --accordion-box-shadow-active: inset 0px -1px 0px rgba(255, 255, 255, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.14);
  user-select: none;
  width: 100%;
  padding: var(--accordion-trigger-padding);
  background: var(--accordion-bg-color);
  border: none;
  border-radius: var(--accordion-item-radius);
  box-shadow: var(--accordion-box-shadow);
  backdrop-filter: blur(var(--blur-glass));
  color: var(--color-text-boldest);
  font-family: inherit;
  font-weight: var(--accordion-trigger-font-weight);
  font-size: var(--accordion-trigger-font-size);
  line-height: var(--accordion-trigger-line-height);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--accordion-trigger-gap);
  position: relative;
  transition: background 0.15s var(--motion-ease-out), box-shadow 0.15s var(--motion-ease-out), transform 0.15s var(--motion-ease-out);
}
.g-accordion-trigger:hover {
  background: var(--accordion-bg-color-hover);
  box-shadow: var(--accordion-box-shadow-hover);
  transform: scale(var(--scale-hover));
}
.g-accordion-trigger:active {
  background: var(--accordion-bg-color-active);
  box-shadow: var(--accordion-box-shadow-active);
  transform: scale(var(--scale-active));
}
.g-accordion-trigger:focus {
  outline: none;
}
.g-accordion-trigger:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

/* Accordion trigger styling */
.g-accordion-trigger .g-accordion-text {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  flex: 1;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* Tighter gap for compact appearance */
}
.g-accordion-trigger .g-accordion-subline {
  font-size: 0.875em; /* Slightly smaller than main text */
  line-height: 1.2; /* Tighter line height */
  font-weight: normal;
  color: var(--color-text-subtle);
  margin: 0;
  display: block;
}
.g-accordion-trigger .g-glyph {
  transition: transform 0.15s var(--motion-ease-out);
  color: var(--color-icon-subtle);
  flex-shrink: 0;
  height: var(--accordion-icon-size);
  width: var(--accordion-icon-size);
}
.g-accordion-trigger .g-glyph svg {
  height: 100%;
  width: 100%;
}
.g-accordion-trigger .g-glyph svg path {
  fill: currentColor;
}

/* Accordion Content */
.g-accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.15s var(--motion-ease-out);
}

.g-accordion-inner {
  padding: var(--accordion-trigger-padding);
  color: var(--color-text-default);
}
.g-accordion-inner p, .g-accordion-inner ul, .g-accordion-inner ol, .g-accordion-inner li {
  text-wrap: balance;
  font-size: var(--accordion-content-font-size);
  line-height: var(--accordion-content-line-height);
}
.g-accordion-inner p {
  margin: 0 0 var(--space-16) 0; /* 1rem */
}
.g-accordion-inner p:last-child {
  margin-bottom: 0;
}
.g-accordion-inner ul, .g-accordion-inner ol {
  margin: 0 0 var(--space-16) 0; /* 1rem */
  padding-left: 0; /* Align with left edge */
  list-style-position: inside; /* Bring bullets/numbers inside */
}
.g-accordion-inner ul:last-child, .g-accordion-inner ol:last-child {
  margin-bottom: 0;
}
.g-accordion-inner li {
  margin-bottom: var(--space-8); /* 0.5rem */
}
.g-accordion-inner li:last-child {
  margin-bottom: 0;
}
.g-accordion-inner strong {
  font-weight: 600;
  color: var(--color-text-bolder);
}
.g-accordion-inner a {
  color: var(--color-text-link);
  text-decoration: none;
}
.g-accordion-inner a:hover {
  text-decoration: underline;
}

/* ========================================================================
   ACCORDION SIZE VARIANTS
   ======================================================================== */
/* Size variants - accordion text sizing only */
.g-accordion.size-l {
  --accordion-item-radius: var(--radius-xl); /* Larger radius for large size */
  --accordion-trigger-font-size: 1.7rem; /* Following button pattern */
  --accordion-trigger-line-height: 1.2352941176;
  --accordion-trigger-font-weight: 700;
  --accordion-trigger-padding: var(--space-20) var(--space-16) var(--space-20) var(--space-20); /* Increased padding for better size differentiation */
  --accordion-content-font-size: 1.6rem;
  --accordion-content-line-height: 1.5;
  --accordion-icon-size: var(--icon-24);
}

.g-accordion.size-m {
  /* Explicitly define medium size for clarity */
  --accordion-trigger-font-size: 1.4rem; /* Same as size-s, following button pattern */
  --accordion-trigger-line-height: 1.1428571429;
  --accordion-trigger-font-weight: 600;
  --accordion-trigger-padding: var(--space-12) var(--space-16) var(--space-12) var(--space-16); /* Better optical balance */
  --accordion-content-font-size: 1.4rem;
  --accordion-content-line-height: 1.4285714286;
  --accordion-icon-size: var(--icon-20);
}

.g-accordion.size-s {
  --accordion-trigger-font-size: 1.4rem;
  --accordion-trigger-line-height: 1.1428571429;
  --accordion-trigger-font-weight: 500;
  --accordion-trigger-padding: var(--space-12) var(--space-16) var(--space-12) var(--space-16); /* Better optical balance */
  --accordion-trigger-gap: var(--space-12); /* Reduce gap to match padding */
  --accordion-content-font-size: 1.2rem;
  --accordion-content-line-height: 1.3333333333;
  --accordion-icon-size: var(--icon-16);
}

.g-accordion.size-xl {
  --accordion-item-radius: var(--radius-xl);
  --accordion-trigger-font-size: 2.2rem;
  --accordion-trigger-line-height: 1.2727272727;
  --accordion-trigger-font-weight: 700;
  --accordion-trigger-padding: var(--space-20) var(--space-16) var(--space-20) var(--space-24); /* Better optical balance */
  --accordion-content-font-size: 1.6rem;
  --accordion-content-line-height: 1.5;
  --accordion-icon-size: var(--icon-32);
}
.g-accordion.size-xl .g-accordion-trigger {
  font-family: var(--font-family-heading);
}

.g-accordion.size-xxl {
  --accordion-item-radius: var(--radius-xl);
  --accordion-trigger-font-size: 2.2rem;
  --accordion-trigger-line-height: 1.2727272727;
  --accordion-trigger-font-weight: 700;
  --accordion-trigger-padding: var(--space-24) var(--space-20) var(--space-24) var(--space-24); /* Better optical balance */
  --accordion-content-font-size: 1.6rem;
  --accordion-content-line-height: 1.5;
  --accordion-icon-size: var(--icon-32);
}
.g-accordion.size-xxl .g-accordion-trigger {
  font-family: var(--font-family-heading);
}

/* ========================================================================
   ACCORDION VARIANTS - PREFIX & STYLE
   ======================================================================== */
/**
 * Prefix variants (mutually exclusive):
 * - none (default)
 * - numbered
 * - icon
 */
/* Numbered prefix variant */
.g-accordion.variant-numbered .g-accordion-trigger::before {
  content: counter(accordion-counter);
  font-weight: inherit;
  font-size: inherit;
  color: var(--color-text-subtle);
  flex-shrink: 0;
  margin-bottom: auto;
}

/* Icon prefix variant */
.g-accordion.variant-icon .g-accordion-icon {
  color: var(--color-icon-subtle);
  flex-shrink: 0;
  height: var(--accordion-icon-size);
  width: var(--accordion-icon-size);
}
.g-accordion.variant-icon .g-accordion-icon svg {
  height: 100%;
  width: 100%;
}
.g-accordion.variant-icon .g-accordion-icon svg path {
  fill: currentColor;
}

/**
 * Style variants (can be combined with any prefix):
 * - default (with backgrounds and shadows)
 * - ghost (minimal styling, transparent backgrounds)
 */
/* Ghost style variant (minimal styling) */
.g-accordion.variant-ghost {
  gap: 0 !important; /* No gap between items in ghost variant - use !important to override size variants */
}
.g-accordion.variant-ghost .g-accordion-item {
  background: transparent;
  border-bottom: 1px solid var(--color-border-subtlest);
}
.g-accordion.variant-ghost .g-accordion-item:last-child {
  border-bottom: none;
}
.g-accordion.variant-ghost .g-accordion-trigger {
  --accordion-bg-color: transparent;
  --accordion-bg-color-hover: rgba(255, 255, 255, 0.02);
  --accordion-bg-color-active: rgba(255, 255, 255, 0.01);
  --accordion-box-shadow: none;
  --accordion-box-shadow-hover: none;
  --accordion-box-shadow-active: none;
  backdrop-filter: none;
}
.g-accordion.variant-ghost .g-accordion-trigger:hover {
  transform: none;
}
.g-accordion.variant-ghost .g-accordion-trigger:active {
  transform: none;
}

/* ========================================================================
   ACCORDION MODIFIERS
   ======================================================================== */
/**
 * Modifiers (additional classes that modify behavior):
 * - flush: removes horizontal padding (only available with ghost style)
 */
/* Flush modifier - removes horizontal padding */
.g-accordion.flush .g-accordion-trigger {
  padding-left: 0;
  padding-right: 0;
}
.g-accordion.flush .g-accordion-inner {
  padding-left: 0;
  padding-right: 0;
}

/* ========================================================================
   ACCORDION STATES
   ======================================================================== */
/* Light theme adjustments */
.g-theme-light .g-accordion-trigger {
  --accordion-bg-color: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
  --accordion-bg-color-hover: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
  --accordion-bg-color-active: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
  --accordion-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.04), inset 0px 1px 0px rgba(0, 0, 0, 0.04);
  --accordion-box-shadow-hover: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.06), inset 0px 1px 0px rgba(0, 0, 0, 0.06);
  --accordion-box-shadow-active: inset 0px -1px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px rgba(0, 0, 0, 0.08);
}
.g-theme-light.variant-ghost .g-accordion-trigger:hover {
  --accordion-bg-color-hover: rgba(0, 0, 0, 0.02);
}

/* ========================================================================
   RESPONSIVE ADJUSTMENTS
   ======================================================================== */
@media (max-width: 768px) {
  .g-accordion {
    --accordion-trigger-padding: var(--space-12) var(--space-8) var(--space-12) var(--space-12); /* Reduced for mobile */
    --accordion-trigger-gap: var(--space-12);
    --accordion-trigger-font-size: 1.4rem;
    --accordion-trigger-line-height: 1.1428571429;
    --accordion-content-font-size: 1.2rem;
    --accordion-content-line-height: 1.3333333333;
  }
  /* Ensure subline remains readable on mobile */
  .g-accordion-subline {
    font-size: 0.875em; /* Maintains relative size */
    line-height: 1.3; /* Slightly tighter for mobile */
  }
}
/**
 *  ▗▄▄▖ ▗▄▖ ▗▄▄▖ ▗▄▄▄  
 * ▐▌   ▐▌ ▐▌▐▌ ▐▌▐▌  █ 
 * ▐▌   ▐▛▀▜▌▐▛▀▚▖▐▌  █ 
 * ▝▚▄▄▖▐▌ ▐▌▐▌ ▐▌▐▙▄▄▀ 
 * 
 * Gambit CSS Framework - Bento Grid Layout Component
 * Flexible grid system for creating visually appealing content layouts
 * Compositional pattern: .g-bento-grid + .g-bento-card + size/variant modifiers
 */
/* ========================================================================
   BENTO GRID COMPONENT
   ======================================================================== */
/* Section wrapper for bento grids with headers */
.voice-bento,
.section-more {
  /* Guide links within bento cards */
}
.voice-bento .hidden.menu-icon,
.section-more .hidden.menu-icon {
  display: none;
}
.voice-bento .guide-links,
.section-more .guide-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}
.voice-bento .guide-links .guide-link,
.section-more .guide-links .guide-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-link);
  text-decoration: none;
}
.voice-bento .guide-links .guide-link:hover,
.section-more .guide-links .guide-link:hover {
  text-decoration: underline;
}
.voice-bento .guide-links .guide-link svg,
.section-more .guide-links .guide-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.g-bento-grid {
  --bento-gap: 1.6rem;
  --bento-border-radius: var(--radius-xl);
  --bento-padding: 2.4rem;
  --bento-icon-size-default: 9rem;
  --bento-icon-size-wide: 8rem;
  --bento-icon-size-tall: 7rem;
  --bento-icon-size-large: 19rem;
  --bento-title-size: 1.4rem;
  --bento-content-size: 2rem;
  --bento-content-line-height: 1.5;
  display: grid;
  gap: var(--bento-gap);
  width: 100%;
  /* 5 column grid layout */
  grid-template-columns: repeat(5, 1fr);
  /* Responsive adjustments - keep cell width stable */
  /* Responsive adjustments - keep cell width stable */
}
@media (max-width: 500px) {
  .g-bento-grid {
    grid-template-columns: repeat(2, 1fr); /* 3 columns on small mobile */
  }
}
@media (min-width: 501px) and (max-width: 1100px) {
  .g-bento-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on small mobile */
  }
}
@media (min-width: 1101px) and (max-width: 1400px) {
  .g-bento-grid {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on tablet/small desktop */
  }
}

/* ========================================================================
   INDIVIDUAL BENTO CARD STYLES
   ======================================================================== */
.g-bento-card {
  position: relative;
  background: var(--color-gray-900);
  border: var(--border-s) solid var(--color-gray-800);
  border-radius: var(--bento-border-radius);
  padding: var(--bento-padding);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  /* Enable container queries */
  container-type: inline-size;
  /* Square aspect ratio for all cards */
  aspect-ratio: 1;
  gap: 2rem;
  /* Align items to flex-start like existing bentos */
  align-items: flex-start;
  justify-content: space-between;
  /* Button within bento cards */
}
.g-bento-card p {
  margin: 0;
}
.g-bento-card p + a {
  margin-top: 1.6rem;
}
.g-bento-card .g-button {
  margin-top: auto; /* Push button to bottom */
}

/* ========================================================================
   SIZE MODIFIERS FOR GRID SPANNING
   ======================================================================== */
/* Horizontal 2:1 - spans 2 columns */
.g-bento-card.size-wide {
  grid-column: span 2;
  aspect-ratio: unset; /* Accounts for gap: (2 * cell_width + 1 * gap) / cell_height */
}
.g-bento-card.size-wide .g-bento-icon img,
.g-bento-card.size-wide .g-bento-icon svg {
  width: var(--bento-icon-size-wide);
  height: var(--bento-icon-size-wide);
}

/* Vertical 1:2 - spans 2 rows */
.g-bento-card.size-tall {
  grid-row: span 2;
  aspect-ratio: unset;
}
.g-bento-card.size-tall .g-bento-icon img,
.g-bento-card.size-tall .g-bento-icon svg {
  width: var(--bento-icon-size-tall);
  height: var(--bento-icon-size-tall);
}

/* Large 2:2 - spans 2 columns and 2 rows (square) */
.g-bento-card.size-large {
  grid-column: span 2;
  grid-row: span 2;
}
.g-bento-card.size-large .g-bento-icon img,
.g-bento-card.size-large .g-bento-icon svg {
  width: var(--bento-icon-size-large);
  height: var(--bento-icon-size-large);
}

/* Wide-Tall 2:2 - spans 2 columns and 2 rows (wide aspect) */
.g-bento-card.size-wide-tall {
  grid-column: span 2;
  grid-row: span 2;
}
.g-bento-card.size-wide-tall .g-bento-icon img,
.g-bento-card.size-wide-tall .g-bento-icon svg {
  width: var(--bento-icon-size-large);
  height: var(--bento-icon-size-large);
}

/* ========================================================================
   BENTO CARD CONTENT TYPE MODIFIERS
   ======================================================================== */
/* Icon-only cards - center stage icon */
.g-bento-card:not(:has(.g-bento-content)) .g-bento-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1.2rem;
}
.g-bento-card:not(:has(.g-bento-content)) .g-bento-icon img, .g-bento-card:not(:has(.g-bento-content)) .g-bento-icon svg {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
}

.g-bento-card:has(.g-button) .g-bento-title {
  order: -1;
}

.g-bento-card:not(:has(.g-bento-icon)):not(:has(.g-button)) {
  /* Wide cards get smaller font size since they have more width */
  /* Tall cards can use height-based sizing */
  /* Wide-tall cards get even more space for text */
}
.g-bento-card:not(:has(.g-bento-icon)):not(:has(.g-button)) .g-bento-content {
  flex: 1;
  align-items: center;
  justify-content: center;
}
.g-bento-card:not(:has(.g-bento-icon)):not(:has(.g-button)) .g-bento-content p {
  margin: 0;
  font-size: 22cqw; /* Default for square cards - 22% of container width */
  line-height: 1.1;
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
  /* Fallback for browsers without container query support */
}
@supports not (font-size: 1cqw) {
  .g-bento-card:not(:has(.g-bento-icon)):not(:has(.g-button)) .g-bento-content p {
    font-size: calc(var(--bento-content-size) * 4);
  }
}
.g-bento-card:not(:has(.g-bento-icon)):not(:has(.g-button)).size-wide .g-bento-content p {
  font-size: 8cqw; /* Smaller for wide cards */
}
.g-bento-card:not(:has(.g-bento-icon)):not(:has(.g-button)).size-tall .g-bento-content {
  justify-content: flex-end;
}
.g-bento-card:not(:has(.g-bento-icon)):not(:has(.g-button)).size-tall .g-bento-content p {
  align-self: start;
  text-align: left;
  font-weight: 600;
  font-size: 15cqw; /* Height-based for tall cards */
}
.g-bento-card:not(:has(.g-bento-icon)):not(:has(.g-button)).size-wide-tall .g-bento-content p {
  font-size: 8cqw; /* Smaller for wide cards */
  max-width: 80%;
}

/* Icon + text cards - balanced sizing */
.g-bento-card:has(.g-bento-icon):has(.g-bento-content) .g-bento-icon img,
.g-bento-card:has(.g-bento-icon):has(.g-bento-content) .g-bento-icon svg {
  width: var(--bento-icon-size-default);
  height: var(--bento-icon-size-default);
}
.g-bento-card:has(.g-bento-icon):has(.g-bento-content) .g-bento-content p {
  text-wrap: balance;
  font-size: calc(var(--bento-content-size) * 0.9);
}

/* No variant modifiers - keeping it simple like existing bentos */
/* ========================================================================
   BENTO CARD SUB-COMPONENTS
   ======================================================================== */
/* Bento card icon */
.g-bento-icon {
  flex-shrink: 0;
}
.g-bento-icon img, .g-bento-icon svg {
  width: var(--bento-icon-size-default);
  height: var(--bento-icon-size-default);
  display: block;
}

/* Bento card title - positioned at bottom like existing bentos */
.g-bento-title {
  line-height: 0.8;
  order: 4;
  font-family: var(--font-family-heading);
  font-size: var(--bento-title-size);
  font-weight: 600;
  color: var(--color-gray-400);
  text-transform: uppercase;
  width: 100%;
  box-sizing: border-box;
}

/* Bento card content - center area */
.g-bento-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--bento-content-size);
  line-height: var(--bento-content-line-height);
  color: var(--color-gray-400);
  text-align: center;
  justify-content: flex-end;
  /* For content that should fill the center space */
  width: 100%;
  /* Special content like rotating text */
}
.g-bento-content p {
  text-align: left;
  hyphens: auto;
}
.g-bento-content .g-bento-rotating {
  width: 100%;
}

/* ========================================================================
   SPECIAL CONTENT LAYOUTS WITHIN BENTO CARDS
   ======================================================================== */
/* Bento list layout */
.g-bento-list {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 10px */
}
.g-bento-list .g-bento-item {
  display: flex;
  align-items: flex-start;
  gap: 2rem; /* 10px */
}
.g-bento-list .g-bento-item img {
  width: 2rem; /* 20px */
  height: 2rem; /* 20px */
  flex-shrink: 0;
}
.g-bento-list .g-bento-item strong {
  display: block;
  font-weight: 600;
  color: var(--color-text-bolder);
  margin-bottom: 0.3rem; /* 3px */
  font-size: 1.2rem; /* 12px */
}
.g-bento-list .g-bento-item span {
  color: var(--color-text-default);
  font-size: 1.1rem; /* 11px */
}

/* Checklist variant for bento cards */
.g-bento-checklist {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
}
.g-bento-checklist li {
  position: relative;
  padding-left: 2.4rem;
  color: var(--color-gray-400);
  font-size: 1.6rem;
  line-height: 1.4;
  list-style: none;
}

/* Large checklist variant - no icon, larger text */
.g-bento-checklist-large {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  margin: 0;
  padding: 0;
}
.g-bento-checklist-large li {
  text-wrap: balance;
  position: relative;
  padding-left: 3.2rem;
  color: var(--color-gray-200);
  font-size: 6cqw; /* Container-based sizing */
  line-height: 1.5;
  font-weight: 600;
  list-style: none;
}
.g-bento-checklist-large li:last-child {
  flex: 1;
}

/* Size-specific adjustments for checklist */
.g-bento-card.size-tall .g-bento-checklist-large li {
  font-size: 8cqw; /* Larger for tall cards */
}

/* Variant for checklist cards - better spacing without icon */
.g-bento-card.variant-checklist {
  background: transparent;
  padding: 0;
}
.g-bento-card.variant-checklist ul {
  gap: 1px; /* 10px */
}
.g-bento-card.variant-checklist li {
  padding: var(--bento-padding);
  background: var(--color-gray-900);
}
.g-bento-card.variant-checklist .g-bento-title {
  margin-bottom: 2.4rem;
}
.g-bento-card.variant-checklist .g-bento-checklist-large {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ========================================================================
   VOICE PAGE SPECIFIC STYLES
   ======================================================================== */
.voice-bento {
  /* Personality traits grid */
  /* Tone examples */
  /* Style rules */
  /* Voice examples */
  /* Guide links */
  /* Rotating text animation */
}
.voice-bento .g-bento-grid {
  width: 100%; /* Ensure 100% width within section */
}
.voice-bento .personality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem; /* 8px */
  width: 100%;
}
.voice-bento .personality-grid .g-trait {
  display: flex;
  align-items: center;
  gap: 0.4rem; /* 4px */
  font-weight: 500;
  font-size: 1rem; /* 10px */
  color: var(--color-gray-400);
}
.voice-bento .personality-grid .g-trait img, .voice-bento .personality-grid .g-trait svg {
  width: 1.2rem; /* 12px */
  height: 1.2rem; /* 12px */
  flex-shrink: 0;
}
.voice-bento .tone-examples {
  display: flex;
  flex-direction: column;
  gap: 1.2rem; /* 12px */
}
.voice-bento .tone-examples .g-tone {
  padding: 1rem; /* 10px */
  background: color-mix(in srgb, var(--color-gray-800) 50%, transparent);
  border-radius: var(--radius-m);
}
.voice-bento .tone-examples .g-tone strong {
  color: var(--color-text-bolder);
  display: block;
  margin-bottom: 0.3rem; /* 3px */
  font-size: 1.1rem; /* 11px */
}
.voice-bento .tone-examples .g-tone p {
  font-size: 1rem; /* 10px */
  color: var(--color-text-subtle);
  font-style: italic;
  margin: 0;
}
.voice-bento .style-rules {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* 15px */
}
.voice-bento .style-rules .g-rule {
  padding: 1rem; /* 10px */
  background: color-mix(in srgb, var(--color-gray-800) 50%, transparent);
  border-radius: var(--radius-m);
}
.voice-bento .voice-examples {
  display: grid;
  gap: 1.5rem; /* 15px */
}
.voice-bento .voice-examples .g-example:not(:last-child) {
  padding-bottom: 1.2rem; /* 12px */
  border-bottom: var(--border-s) solid color-mix(in srgb, var(--color-gray-700) 50%, transparent);
}
.voice-bento .voice-examples .g-example p {
  font-style: italic;
  background: color-mix(in srgb, var(--color-gray-800) 50%, transparent);
  padding: 1rem; /* 10px */
  border-radius: var(--radius-m);
  border-left: 0.3rem solid var(--color-accent-primary); /* 3px */
  margin: 0;
  font-size: 1.1rem; /* 11px */
}
.voice-bento .guide-links {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 10px */
  margin-top: 1.2rem; /* 12px */
}
.voice-bento .guide-links .guide-link {
  display: flex;
  align-items: center;
  gap: 0.6rem; /* 6px */
  padding: 1rem 1.2rem; /* 10px 12px */
  background: color-mix(in srgb, var(--color-gray-800) 50%, transparent);
  border-radius: var(--radius-m);
  text-decoration: none;
  color: var(--color-text-default);
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 1.2rem; /* 12px */
}
.voice-bento .guide-links .guide-link:hover {
  background: color-mix(in srgb, var(--color-gray-700) 50%, transparent);
  transform: translateX(0.3rem); /* 3px */
  color: var(--color-text-bolder);
}
.voice-bento .guide-links .guide-link img, .voice-bento .guide-links .guide-link svg {
  width: 1.6rem; /* 16px */
  height: 1.6rem; /* 16px */
  flex-shrink: 0;
}
.voice-bento .g-bento-rotating {
  position: relative;
  height: 1.2em;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.voice-bento .g-bento-rotating span {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(2rem); /* Center horizontally and offset vertically */
  opacity: 0;
  transition: all 0.3s ease;
  width: 100%;
}
.voice-bento .g-bento-rotating span.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/**
 * Gambit CSS Framework - Sidebar Component
 * Game sidebar with tabs, move lists, and controls
 */
/* ========================================================================
   SIDEBAR CONTAINER
   ======================================================================== */
.g-sidebar {
  --sidebar-width: 320px;
  --sidebar-bg: var(--color-gray-900);
  --sidebar-border: var(--color-gray-800);
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100%;
  background: var(--sidebar-bg);
  border-radius: var(--radius-xl);
  overflow: hidden;
  font-size: 1.3rem;
}
.g-sidebar.g-sidebar-game {
  /* Game-specific sidebar styles */
}

/* ========================================================================
   SIDEBAR TAB CUSTOMIZATIONS
   ======================================================================== */
/* Customize tabs appearance within sidebar context */
.g-sidebar {
  /* Tab close button (custom to sidebar) */
}
.g-sidebar .g-tabs {
  background: var(--color-gray-850);
  border-radius: 0; /* Override default radius */
}
.g-sidebar .g-tab-close {
  margin-left: auto;
  padding: var(--space-4);
  color: var(--color-gray-500);
  cursor: pointer;
  border-radius: var(--radius-s);
  display: inline-flex;
  align-items: center;
}
.g-sidebar .g-tab-close:hover {
  background: var(--color-gray-700);
  color: var(--color-gray-100);
}

/* ========================================================================
   INFO BAR
   ======================================================================== */
.g-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--space-12);
  min-height: 4rem;
  background: var(--color-gray-850);
  border-bottom: 1px solid var(--sidebar-border);
}
.g-info-bar.g-info-bar-opening {
  /* Opening-specific styles */
}

.g-info-bar-text {
  font-size: var(--font-size-sm);
  color: var(--color-gray-200);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================================================
   SIDEBAR CONTENT
   ======================================================================== */
.g-sidebar-content {
  flex: 1;
  overflow-y: auto;
}
.g-sidebar-content.g-sidebar-scrollable {
  /* Custom scrollbar styles */
}
.g-sidebar-content.g-sidebar-scrollable::-webkit-scrollbar {
  width: 8px;
}
.g-sidebar-content.g-sidebar-scrollable::-webkit-scrollbar-track {
  background: var(--color-gray-850);
}
.g-sidebar-content.g-sidebar-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-gray-700);
  border-radius: var(--radius-s);
}
.g-sidebar-content.g-sidebar-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-600);
}

/* ========================================================================
   MOVE LIST
   ======================================================================== */
.g-move-list {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1px;
}

.g-move-row td {
  min-height: 3rem;
  padding: var(--space-2) var(--space-4);
}
.g-move-row td:first-child {
  padding-left: var(--space-12);
}
.g-move-row td:last-child {
  padding-right: var(--space-12);
}
.g-move-row.g-move-row-light {
  background: var(--color-gray-850);
}
.g-move-row.g-move-row-dark {
  background: var(--color-gray-800);
}
.g-move-row.g-move-row-active {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}

.g-move-number {
  width: 30px;
  font-size: 1rem;
  color: var(--color-gray-500);
  font-weight: 500;
  width: 0;
  white-space: nowrap;
  font-feature-settings: "tnum" 1;
}

.g-move {
  padding: 0;
  width: 0;
  white-space: nowrap;
}

.g-move-black {
  width: 100%;
}

.g-move-button {
  padding: var(--space-4) var(--space-8);
  border: none;
  background: transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: inherit;
  transition: background 0.2s ease;
}
.g-move-button:hover {
  background: var(--color-gray-700);
}
.g-move-button.g-move-selected {
  background: var(--color-primary);
  color: white;
}

.g-piece-icon {
  margin-right: 0.1rem;
  display: inline-block;
  font-size: 2rem;
  line-height: 0.7;
  font-style: normal;
  color: var(--color-gray-100); /* All pieces render in light color */
  font-weight: 400;
}

.g-move-time {
  font-size: 10px;
  line-height: 1;
  color: var(--color-gray-500);
  text-align: right;
  width: 0;
  white-space: nowrap;
}
.g-move-time .g-move-time-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.g-move-time .g-move-time-white,
.g-move-time .g-move-time-black {
  display: block;
  text-align: left;
}

/* Game result row */
.g-move-row-result {
  background: transparent;
}
.g-move-row-result .g-game-result {
  text-align: center;
  padding: var(--space-16) var(--space-12);
}
.g-move-row-result .g-game-result .g-result-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-200);
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================
   POST-GAME ANALYSIS
   ======================================================================== */
.g-quick-analysis {
  padding: var(--space-16) 0 0 0;
}

.g-quick-analysis-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.g-quick-analysis-stats {
  display: flex;
  gap: var(--space-16);
  justify-content: space-around;
}

.g-analysis-stat {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 1.3rem;
  color: var(--color-gray-200);
}

.g-analysis-icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--color-gray-400);
}

.g-analysis-count {
  font-weight: 600;
}

.g-analysis-label {
  font-weight: 400;
  color: var(--color-gray-300);
}

/* Evaluation scores in move list */
.g-move-eval {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-align: right;
  padding-right: var(--space-12);
  white-space: nowrap;
}

.g-eval-score {
  color: var(--color-gray-300);
}
.g-eval-score[data-eval=positive] {
  color: var(--color-green-400);
}
.g-eval-score[data-eval=negative] {
  color: var(--color-red-400);
}

/* ========================================================================
   POST-GAME SPECIFIC STYLES
   ======================================================================== */
.g-sidebar-game.variant-postgame {
  /* Quick analysis provides the visual separation between content and actions */
}

/* ========================================================================
   SIDEBAR ACTIONS
   ======================================================================== */
.g-sidebar-actions {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  background: var(--color-bg-tertiary);
  /* Main action buttons (Full Analysis, Review, Rematch) - postgame only */
  /* Move navigation controls */
  /* Utility actions (share, download, etc.) */
}
.g-sidebar-actions > * {
  display: flex;
  align-items: stretch;
  flex: 1;
  justify-content: center;
  gap: var(--space-4);
}
.g-sidebar-actions .g-sidebar-actions-main {
  padding: var(--space-16);
  padding-bottom: 0;
  flex-direction: column;
  gap: var(--space-12);
}
.g-sidebar-actions .g-sidebar-actions-main .g-button.full-width {
  width: 100%;
}
.g-sidebar-actions .g-sidebar-actions-main .g-button-group {
  display: flex;
  gap: var(--space-8);
}
.g-sidebar-actions .g-sidebar-actions-main .g-button-group .g-button {
  flex: 1;
}
.g-sidebar-actions .g-sidebar-actions-controls {
  padding: var(--space-16);
  padding-bottom: 0;
}
.g-sidebar-actions .g-sidebar-actions-controls.g-button-group {
  gap: var(--space-8);
}
.g-sidebar-actions .g-sidebar-actions-utility {
  padding: 4px 8px 8px 8px;
  justify-content: space-between;
  flex: 0; /* Don't stretch vertically */
}
.g-sidebar-actions .g-sidebar-actions-utility .g-button-group {
  display: flex;
  gap: var(--space-8);
  /* Text buttons shouldn't be constrained */
}
.g-sidebar-actions .g-sidebar-actions-utility .g-button-group .g-button.text-with-icon {
  flex: 0 0 auto; /* Don't grow or shrink, use natural width */
}
.g-sidebar-actions .g-sidebar-actions-utility .g-button-group .g-button.text-with-icon .g-button-text {
  white-space: nowrap; /* Ensure text doesn't wrap */
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 768px) {
  .g-sidebar {
    --sidebar-width: 100%;
    border-left: none;
  }
  .g-tabs {
    overflow-x: auto;
  }
  .g-tabs::-webkit-scrollbar {
    display: none;
  }
  .g-move-row td {
    padding: var(--space-4) var(--space-8);
  }
  .g-move-row .g-move-time {
    display: none;
  }
}