@layer aurea{
/* Aurea tokens — generated from aurea.tokens.json (DTCG 2025.10). Do not edit. */
:root{
  --brand-yellow:oklch(0.795 0.184 86.047);
  --brand-yellow-foreground:oklch(0.421 0.095 57.708);
  --brand-yellow-text:oklch(0.516 0.105 86.047);
  --brand-yellow-ink:#18181b;
  --brand-blue:#0246f1;
  --white:oklch(1 0 0);
  --black:oklch(0 0 0);
  --font-ui:Inter,"Segoe UI",sans-serif;
  --font-heading:Sora,Inter,"Segoe UI",sans-serif;
  --font-editorial:Inter,"Segoe UI",sans-serif;
  --font-code:"IBM Plex Mono",SFMono-Regular,Consolas,monospace;
  --text-xs:0.75rem;
  --text-sm:0.875rem;
  --text-md:var(--text-sm);
  --text-base:1rem;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --text-2xl:1.5rem;
  --text-3xl:1.875rem;
  --text-4xl:2.25rem;
  --text-5xl:3rem;
  --text-6xl:3.75rem;
  --text-7xl:4.5rem;
  --leading-tight:1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.7;
  --text-4xl-leading:1.111111;
  --text-3xl-leading:1.2;
  --text-2xl-leading:1.333333;
  --text-xl-leading:1.4;
  --text-lg-leading:1.555556;
  --space-0:0;
  --space-05:0.125rem;
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-7:1.75rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-card:22px;
  --radius-sheet:32px;
  --radius-control:999px;
  --radius-full:var(--radius-control);
  --border-width:1px;
  --accent-width:4px;
  --focus-width:2px;
  --focus-offset:2px;
  --opacity-disabled:0.5;
  --shadow-sm:0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.06);
  --shadow-md:0 16px 42px rgba(0,0,0,0.28);
  --shadow-lg:0 28px 80px rgba(0,0,0,0.42);
  --duration-fast:120ms;
  --duration-base:180ms;
  --duration-slow:280ms;
  --ease-standard:cubic-bezier(0.2,0,0,1);
  --ease-emphasized:cubic-bezier(0.2,0.8,0.2,1);
  --z-base:0;
  --z-sticky:20;
  --z-dropdown:40;
  --z-drawer:60;
  --z-modal:80;
  --z-toast:100;
  --sidebar-width:16.5rem;
  --sidebar-rail:4.25rem;
  --docs-width:87.5rem;
  --docs-sidebar-width:13.75rem;
  --docs-aside-width:16.75rem;
  --docs-toc-width:15rem;
  --docs-text-width:56.25rem;
  --topbar-height:4rem;
  --content-max:102.5rem;
  --breakpoint-2xs:360px;
  --breakpoint-xs:480px;
  --breakpoint-sm:640px;
  --breakpoint-md:768px;
  --breakpoint-lg:1024px;
  --breakpoint-xl:1280px;
  --breakpoint-2xl:1536px;
  --control-h-xs:1.625rem;
  --control-h-sm:2rem;
  --control-h-md:2.25rem;
  --control-h-lg:2.5rem;
  --control-h-xl:3.125rem;
  --row-h:3rem;
  --card-pad:1rem;
  --section-gap:1.5rem;
  --media-canvas:oklch(0.085 0 0);
  --media-foreground:oklch(0.985 0 0);
  --media-muted:oklch(0.74 0 0);
  --media-scrim:oklch(0 0 0 / 0.82);
  --media-track:oklch(1 0 0 / 0.18);
  --media-buffered:oklch(1 0 0 / 0.42);
  --media-caption-bg:oklch(0 0 0 / 0.82);
  --media-control-bg:oklch(0 0 0 / 0.52);
  --media-control-hover:oklch(1 0 0 / 0.14);
  --text-muted:var(--muted-foreground);
  --success-400:#42d392;
  --success-500:#22c875;
  --success-700:#147a4d;
  --warning-400:oklch(0.72 0.175 60);
  --warning-500:oklch(0.727 0.149 60);
  --warning-800:oklch(0.443 0.092 61);
  --danger-400:#ff7180;
  --danger-500:#e94b58;
  --danger-800:#7f2029;
  --info-400:#8ec5ff;
  --info-500:#2b7fff;
  --info-800:#1447e6;
  --oracle-50:oklch(0.96 0.025 251.813);
  --oracle-100:oklch(0.9 0.06 251.813);
  --oracle-200:oklch(0.85 0.09 251.813);
  --oracle-300:var(--chart-1);
  --oracle-400:var(--chart-2);
  --oracle-500:var(--chart-3);
  --oracle-600:var(--chart-4);
  --oracle-700:var(--chart-5);
  --oracle-800:oklch(0.38 0.2 265.638);
  --oracle-900:oklch(0.31 0.16 265.638);
  --oracle-950:oklch(0.23 0.11 265.638);
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;
  --icon-sm:1rem;
  --icon-md:1.25rem;
  --icon-lg:1.5rem;
  --icon-xl:2rem;
  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --leading-none:1;
  --target-min:2.75rem;
  --tracking-wide:0.04em;
  --tracking-wider:0.06em;
  --tracking-widest:0.12em;
}
[data-theme="dark"]{
  --background:#09090b;
  --foreground:#fafafa;
  --card:#18181b;
  --card-foreground:#fafafa;
  --popover:#18181b;
  --popover-foreground:#fafafa;
  --primary:var(--brand-yellow);
  --primary-foreground:var(--brand-yellow-ink);
  --link:var(--brand-yellow);
  --link-hover:var(--brand-yellow);
  --secondary:#27272a;
  --secondary-foreground:#fafafa;
  --muted:var(--secondary);
  --muted-foreground:#a1a1aa;
  --accent:var(--secondary);
  --accent-foreground:#fafafa;
  --destructive:#c50f1f;
  --destructive-foreground:#ffffff;
  --border:#2f2f35;
  --input:#3f3f46;
  --ring:#71717a;
  --chart-1:#bbdbff;
  --chart-2:#97bfff;
  --chart-3:#76a4ff;
  --chart-4:#5789ff;
  --chart-5:#4371f2;
  --sidebar:#18181b;
  --sidebar-foreground:#fafafa;
  --sidebar-primary:var(--brand-yellow);
  --sidebar-primary-foreground:var(--brand-yellow-ink);
  --sidebar-accent:var(--secondary);
  --sidebar-accent-foreground:#fafafa;
  --sidebar-border:#2f2f35;
  --sidebar-ring:#71717a;
  --surface-1:var(--card);
  --surface-2:var(--secondary);
  --surface-3:var(--muted);
  --surface-inset:#050506;
  --surface-hover:#27272a;
  --foreground-strong:var(--foreground);
  --subtle-foreground:#a1a1aa;
  --border-strong:#a1a1aa;
  --field-bg:var(--muted);
  --overlay:oklch(0 0 0 / 0.5);
  --primary-hover:oklch(0.835 0.19 89);
  --primary-active:oklch(0.74 0.17 84);
  --secondary-hover:#303036;
  --segment:#3f3f46;
  --focus:var(--primary);
  --focus-strong:var(--primary);
  --primary-emphasis:var(--primary);
  --primary-outline:var(--primary);
  --control-selected:var(--primary);
  --control-selected-foreground:#ffffff;
  --control-selected-dot:oklch(0.985 0 0);
  --primary-mark:var(--brand-yellow-ink);
  --selection:oklch(0.795 0.184 86.047 / 0.22);
  --success-bg:#052505;
  --warning-bg:#4a1e04;
  --danger-bg:#3b0509;
  --info-bg:#002440;
  --category-red:oklch(0.85 0.08 25);
  --category-red-bg:oklch(0.28 0.07 25 / 0.62);
  --category-orange:oklch(0.76 0.13 55);
  --category-orange-bg:oklch(0.36 0.089 55 / 0.62);
  --category-green:oklch(0.85 0.13 150);
  --category-green-bg:oklch(0.28 0.07 150 / 0.62);
  --category-teal:oklch(0.76 0.13 180);
  --category-teal-bg:oklch(0.36 0.065 180 / 0.62);
  --category-cyan:oklch(0.85 0.098 225);
  --category-cyan-bg:oklch(0.28 0.053 225 / 0.62);
  --category-blue:oklch(0.76 0.121 260);
  --category-blue-bg:oklch(0.36 0.09 260 / 0.62);
  --category-violet:oklch(0.85 0.086 300);
  --category-violet-bg:oklch(0.28 0.07 300 / 0.62);
  --category-pink:oklch(0.76 0.13 350);
  --category-pink-bg:oklch(0.36 0.09 350 / 0.62);
  --warning-400:#faa06b;
  --success-400:#54b054;
  --danger-400:#eeacb2;
  --info-400:#5caae5;
  --success:#107c10;
  --success-foreground:#ffffff;
  --success-hover:#0e700e;
  --info:#0078d4;
  --info-foreground:#ffffff;
  --info-hover:#006cbf;
  --warning:#f7630c;
  --warning-foreground:var(--brand-yellow-ink);
  --warning-hover:#de590b;
  --input-strong:#646467;
  --control-thumb:#ffffff;
  --link-mark:rgba(0,0,0,0);
  --link-underline:var(--primary);
}
[data-theme="light"]{
  --background:#f5f5f5;
  --foreground:#09090b;
  --card:#ffffff;
  --card-foreground:#09090b;
  --popover:#ffffff;
  --popover-foreground:#09090b;
  --primary:var(--brand-yellow);
  --primary-foreground:var(--brand-yellow-ink);
  --link:var(--foreground);
  --link-hover:var(--foreground);
  --secondary:#ebebed;
  --secondary-foreground:#09090b;
  --muted:var(--secondary);
  --muted-foreground:#5e5e65;
  --accent:var(--secondary);
  --accent-foreground:#09090b;
  --destructive:#c50f1f;
  --destructive-foreground:#ffffff;
  --border:#e4e4e7;
  --input:#d4d4d8;
  --ring:#8a8a93;
  --chart-1:#4589d2;
  --chart-2:#246cdf;
  --chart-3:#114fda;
  --chart-4:#0c37c4;
  --chart-5:#0c24a3;
  --sidebar:var(--card);
  --sidebar-foreground:#09090b;
  --sidebar-primary:var(--primary-emphasis);
  --sidebar-primary-foreground:var(--brand-yellow-ink);
  --sidebar-accent:var(--secondary);
  --sidebar-accent-foreground:#09090b;
  --sidebar-border:#e4e4e7;
  --sidebar-ring:#8a8a93;
  --surface-1:var(--card);
  --surface-2:var(--secondary);
  --surface-3:var(--muted);
  --surface-inset:#efeff1;
  --surface-hover:#f4f4f5;
  --foreground-strong:var(--foreground);
  --subtle-foreground:#5e5e65;
  --border-strong:#5e5e65;
  --field-bg:var(--muted);
  --overlay:oklch(0 0 0 / 0.4);
  --primary-hover:oklch(0.835 0.19 89);
  --primary-active:oklch(0.74 0.17 84);
  --secondary-hover:#e4e4e7;
  --segment:oklch(1 0 0);
  --focus:#bd7000;
  --focus-strong:var(--foreground);
  --primary-emphasis:var(--foreground);
  --primary-outline:rgba(240,177,0,0.35);
  --control-selected:var(--brand-yellow);
  --control-selected-foreground:#ffffff;
  --control-selected-dot:oklch(0.985 0 0);
  --primary-mark:var(--brand-yellow-ink);
  --success-400:#0e700e;
  --warning-400:#8a3707;
  --danger-400:#b10e1c;
  --info-400:#006cbf;
  --oracle-300:var(--chart-4);
  --oracle-400:var(--chart-4);
  --selection:oklch(0.795 0.184 86.047 / 0.18);
  --success-bg:#f1faf1;
  --warning-bg:#fff9f5;
  --danger-bg:#fdf3f4;
  --info-bg:#f3f9fd;
  --category-red:oklch(0.52 0.15 25);
  --category-red-bg:oklch(0.96 0.019 25);
  --category-orange:oklch(0.47 0.115 55);
  --category-orange-bg:oklch(0.925 0.044 55);
  --category-green:oklch(0.52 0.141 150);
  --category-green-bg:oklch(0.96 0.035 150);
  --category-teal:oklch(0.47 0.084 180);
  --category-teal-bg:oklch(0.925 0.055 180);
  --category-cyan:oklch(0.52 0.097 225);
  --category-cyan-bg:oklch(0.96 0.025 225);
  --category-blue:oklch(0.47 0.15 260);
  --category-blue-bg:oklch(0.925 0.035 260);
  --category-violet:oklch(0.52 0.15 300);
  --category-violet-bg:oklch(0.96 0.022 300);
  --category-pink:oklch(0.47 0.15 350);
  --category-pink-bg:oklch(0.925 0.044 350);
  --success:#107c10;
  --success-foreground:#ffffff;
  --success-hover:#0e700e;
  --info:#0078d4;
  --info-foreground:#ffffff;
  --info-hover:#006cbf;
  --warning:#f7630c;
  --warning-foreground:var(--brand-yellow-ink);
  --warning-hover:#de590b;
  --input-strong:#8d8d91;
  --link-mark:rgba(240,177,0,0.45);
  --link-underline:var(--primary);
  --control-thumb:#ffffff;
  --warning-500:#d07612;
}
[data-brand="lory"][data-theme="dark"],[data-brand="lory"] [data-theme="dark"]{
  --background:oklch(0.16 0.018 250);
  --foreground:oklch(0.96 0.006 250);
  --foreground-strong:oklch(1 0 0);
  --card:oklch(0.21 0.02 250);
  --card-foreground:oklch(0.96 0.006 250);
  --popover:oklch(0.21 0.02 250);
  --popover-foreground:oklch(0.96 0.006 250);
  --surface-1:oklch(0.21 0.02 250);
  --surface-2:oklch(0.245 0.02 250);
  --surface-3:oklch(0.19 0.02 250);
  --surface-inset:oklch(0.19 0.02 250);
  --surface-hover:oklch(0.245 0.02 250);
  --primary:oklch(0.72 0.19 48);
  --primary-foreground:oklch(0.16 0.02 250);
  --primary-hover:oklch(0.78 0.17 50);
  --primary-active:oklch(0.66 0.19 46);
  --primary-emphasis:oklch(0.85 0.14 60);
  --primary-outline:oklch(0.72 0.19 48 / 0.4);
  --secondary:oklch(0.245 0.02 250);
  --secondary-foreground:oklch(0.96 0.006 250);
  --secondary-hover:oklch(0.28 0.02 250);
  --segment:oklch(0.312 0.02 250);
  --muted:oklch(0.19 0.02 250);
  --muted-foreground:oklch(0.72 0.015 250);
  --subtle-foreground:oklch(0.72 0.015 250);
  --accent:oklch(0.32 0.08 50);
  --accent-foreground:oklch(0.85 0.14 60);
  --destructive:oklch(0.7 0.19 25);
  --destructive-foreground:oklch(0.16 0.02 250);
  --border:oklch(1 0 0 / 0.1);
  --border-strong:oklch(1 0 0 / 0.18);
  --input:oklch(1 0 0 / 0.1);
  --field-bg:oklch(0.19 0.02 250);
  --ring:oklch(0.72 0.19 48);
  --focus:oklch(0.72 0.19 48);
  --focus-strong:oklch(0.85 0.14 60);
  --selection:oklch(0.32 0.08 50);
  --control-selected:oklch(0.72 0.19 48);
  --control-selected-foreground:oklch(0.16 0.02 250);
  --control-selected-dot:oklch(0.16 0.02 250);
  --primary-mark:oklch(0.16 0.02 250);
  --overlay:oklch(0 0 0 / 0.6);
  --chart-1:oklch(0.74 0.18 50);
  --chart-2:oklch(0.84 0.14 88);
  --chart-3:oklch(0.72 0.15 158);
  --chart-4:oklch(0.7 0.13 235);
  --chart-5:oklch(0.68 0.16 320);
  --sidebar:oklch(0.21 0.02 250);
  --sidebar-foreground:oklch(0.96 0.006 250);
  --sidebar-primary:oklch(0.72 0.19 48);
  --sidebar-primary-foreground:oklch(0.16 0.02 250);
  --sidebar-accent:oklch(0.245 0.02 250);
  --sidebar-accent-foreground:oklch(0.96 0.006 250);
  --sidebar-border:oklch(1 0 0 / 0.1);
  --sidebar-ring:oklch(0.72 0.19 48);
  --success-400:oklch(0.72 0.15 158);
  --warning-400:oklch(0.78 0.14 78);
  --danger-400:oklch(0.722 0.1717 25);
  --info-400:oklch(0.7 0.13 235);
  --success-bg:oklch(0.32 0.07 158);
  --warning-bg:oklch(0.34 0.07 80);
  --danger-bg:oklch(0.34 0.09 25);
  --info-bg:oklch(0.32 0.06 235);
  --brand-yellow-ink:#242424;
  --warning-foreground:#242424;
  --control-thumb:var(--primary-mark);
}
[data-brand="lory"][data-theme="light"],[data-brand="lory"] [data-theme="light"]{
  --background:oklch(0.984 0.004 70);
  --foreground:oklch(0.24 0.022 250);
  --foreground-strong:oklch(0.16 0.02 250);
  --card:oklch(1 0 0);
  --card-foreground:oklch(0.24 0.022 250);
  --popover:oklch(1 0 0);
  --popover-foreground:oklch(0.24 0.022 250);
  --surface-1:oklch(1 0 0);
  --surface-2:oklch(0.975 0.004 70);
  --surface-3:oklch(0.965 0.006 70);
  --surface-inset:oklch(0.965 0.006 70);
  --surface-hover:oklch(0.965 0.006 70);
  --primary:oklch(0.682 0.197 44.5);
  --primary-foreground:oklch(1 0 0);
  --primary-hover:oklch(0.63 0.197 44.5);
  --primary-active:oklch(0.58 0.19 44.5);
  --primary-emphasis:oklch(0.52 0.17 45);
  --primary-outline:oklch(0.682 0.197 44.5 / 0.35);
  --secondary:oklch(0.965 0.006 70);
  --secondary-foreground:oklch(0.24 0.022 250);
  --secondary-hover:oklch(0.94 0.006 70);
  --muted:oklch(0.965 0.006 70);
  --muted-foreground:oklch(0.49 0.018 255);
  --subtle-foreground:oklch(0.49 0.018 255);
  --accent:oklch(0.96 0.04 60);
  --accent-foreground:oklch(0.52 0.17 45);
  --destructive:oklch(0.62 0.21 26);
  --destructive-foreground:oklch(1 0 0);
  --border:oklch(0.915 0.006 255);
  --border-strong:oklch(0.86 0.008 255);
  --input:oklch(0.915 0.006 255);
  --field-bg:oklch(1 0 0);
  --ring:oklch(0.682 0.197 44.5);
  --focus:oklch(0.682 0.197 44.5);
  --focus-strong:oklch(0.52 0.17 45);
  --selection:oklch(0.96 0.04 60);
  --control-selected:oklch(0.682 0.197 44.5);
  --control-selected-foreground:oklch(1 0 0);
  --control-selected-dot:oklch(1 0 0);
  --primary-mark:oklch(1 0 0);
  --overlay:oklch(0.16 0.018 250 / 0.45);
  --chart-1:oklch(0.682 0.197 44.5);
  --chart-2:oklch(0.82 0.15 88);
  --chart-3:oklch(0.66 0.15 155);
  --chart-4:oklch(0.62 0.13 235);
  --chart-5:oklch(0.6 0.16 320);
  --sidebar:oklch(1 0 0);
  --sidebar-foreground:oklch(0.24 0.022 250);
  --sidebar-primary:oklch(0.52 0.17 45);
  --sidebar-primary-foreground:oklch(1 0 0);
  --sidebar-accent:oklch(0.975 0.004 70);
  --sidebar-accent-foreground:oklch(0.24 0.022 250);
  --sidebar-border:oklch(0.915 0.006 255);
  --sidebar-ring:oklch(0.682 0.197 44.5);
  --success-400:oklch(0.52 0.1276 155);
  --warning-400:oklch(0.532 0.1129 75);
  --danger-400:oklch(0.542 0.21 26);
  --info-400:oklch(0.526 0.1106 235);
  --success-bg:oklch(0.95 0.05 155);
  --warning-bg:oklch(0.95 0.06 80);
  --danger-bg:oklch(0.95 0.05 25);
  --info-bg:oklch(0.95 0.04 235);
  --link:oklch(0.52 0.106 86.047);
  --link-hover:oklch(0.44 0.106 86.047);
  --brand-yellow-ink:#242424;
  --warning-foreground:#242424;
  --control-thumb:var(--primary-mark);
  --warning-500:oklch(0.727 0.149 60);
}
[data-density="compact"]{
  --control-h-xs:1.5rem;
  --control-h-sm:1.75rem;
  --control-h-md:2rem;
  --control-h-lg:2.25rem;
  --control-h-xl:2.75rem;
  --touch-control-h-sm:2.25rem;
  --touch-control-h-md:2.75rem;
  --touch-control-h-lg:3.25rem;
  --row-h:2.625rem;
  --card-pad:0.75rem;
  --section-gap:1.125rem;
}
[data-density="comfortable"]{
  --control-h-xs:1.625rem;
  --control-h-sm:2rem;
  --control-h-md:2.25rem;
  --control-h-lg:2.5rem;
  --control-h-xl:3.125rem;
  --touch-control-h-sm:2.5rem;
  --touch-control-h-md:3rem;
  --touch-control-h-lg:3.5rem;
  --row-h:3rem;
  --card-pad:1rem;
  --section-gap:1.5rem;
}
[data-density="spacious"]{
  --control-h-xs:1.75rem;
  --control-h-sm:2.25rem;
  --control-h-md:2.5rem;
  --control-h-lg:2.75rem;
  --control-h-xl:3.5rem;
  --touch-control-h-sm:2.75rem;
  --touch-control-h-md:3.25rem;
  --touch-control-h-lg:3.75rem;
  --row-h:3.375rem;
  --card-pad:1.25rem;
  --section-gap:2rem;
}
/* Aurea core — component styles. Built with @aurea-uds/tokens into dist/aurea.css. Load @aurea-uds/fonts/css for Inter, Sora and IBM Plex Mono (ADR-0077). */
/* ========================================================================== */
/* 02. RESET, ACESSIBILIDADE E BASE                                            */
/* ========================================================================== */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--background); color:var(--foreground); font-family:var(--font-ui); font-size:var(--text-sm); line-height:var(--leading-normal); }
::selection { background:var(--selection); }
button,input,textarea,select { font:inherit; }
/* ADR-0077 (22/10/2026): todo título, do h1 ao h6, na fonte de título (a Sora), por uma regra geral de força zero,
   como no sistema que serviu de modelo: quem fixa outra fonte NO PRÓPRIO título ganha dela; a fonte que o título só
   herda do pai (`body{font-family:…}`) perde. O modelo deixa o h6 na fonte do texto; aqui ele vai junto (decisão do
   Victor, 22/10/2026): a referência trata o h6 como os outros títulos, e o `Heading` de nível 6 já era Sora. */
:where(h1,h2,h3,h4,h5,h6) { font-family:var(--font-heading); }
button,a,[role="button"],input,textarea,select { outline:none; }
:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); box-shadow:none; }
/* UMA LINHA SÓ (ADR-0059, 08/10/2026). O anel afastado, sozinho, é uma linha — mas na peça que tem
   BORDA PRÓPRIA ele desenhava borda + vão + anel: duas linhas, em 39 peças medidas no catálogo. E a
   regra de cima pintava TODA borda de amarelo com `!important`, o que dava uma segunda linha até no
   botão de borda transparente, depois da transição. Agora só a peça com borda muda a borda: ela
   passa para a cor do foco e o anel ENCOSTA nela, sem vão — uma faixa só, de borda + anel, como o
   anel colado do campo da referência principal. A peça sem borda (o botão cheio, a aba) continua com
   o vão: colado, o anel amarelo sumiria no botão amarelo.
   Quem cobra que nenhuma peça ficou de fora é o catálogo inteiro, no navegador:
   `tests/visual/foco-uma-linha.spec.ts`. */
:is(.input,.textarea,.select,.btn-outline,.btn-primary-outline,.btn-danger-outline,.media-control,.card,.code-block,.graph-node-body,.pagination-link):focus-visible { outline-offset:0; border-color:transparent; }
/* A amostra ESCOLHIDA do `ColorSwatch options` (0.32.0) tem borda — a da cor dela — e o foco mora no botão de
   opção invisível de dentro, por isso o `:has`. A referência mostra a borda da cor + vão + anel; a ADR-0059 é a
   escolha A do Victor, nenhuma peça com duas linhas (a varredura do catálogo pegou, 14/10/2026). */
.color-swatch-option:has(:checked:focus-visible) { outline-offset:0; border-color:transparent; }
button { color:inherit; }
/* O link NÃO é `--primary`. Medido em 22/08/2026 com o axe e depois à mão: o amarelo da
   marca sobre o fundo do tema CLARO dá 1,73:1, e o AA de texto (WCAG 1.4.3) pede 4,5:1 —
   todo link em prosa reprovava, e ninguém via porque o projeto se desenvolve no escuro e o
   catálogo repinta os próprios links. No escuro o link segue sendo o amarelo (10,34:1), então
   `--link` referencia `{brand-yellow}` lá: a identidade não é copiada, é apontada.
   No claro, mesma MATIZ (86.047) com croma e luminosidade escolhidos por medição — o maior
   croma que cabe no gamut sRGB E passa 4,5:1 nas três superfícies claras (5,02 / 5,55 / 4,66).
   É a ADR-0016 outra vez: `--primary` é invariável entre temas por ser IDENTIDADE, e por isso
   não pode ser também o papel semântico de link, que precisa mudar com o tema. */
a { color:var(--link); text-underline-offset:3px; }
a:hover { color:var(--link-hover); }
img,svg { display:block; }
/* O `display:none` que o browser dá pro atributo `hidden` vem da folha do UA e PERDE de
   qualquer `display:` de classe nossa — o painel some do fluxo de acessibilidade mas
   continua na tela. Já mordeu o popover do MediaPlayer e as abas do catálogo. Aqui a
   regra fecha a classe inteira do bug, em vez de um remendo por componente.
   `until-found` fica de fora: ali o `hidden` é revelável e o browser cuida. */
[hidden]:not([hidden="until-found"]) { display:none!important; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
/* A família de GLIFO tem escala PRÓPRIA — `--icon-*`, que não varia com densidade, ao contrário
   de `--control-h-*`. Medido antes de generalizar: o ícone aparece dentro de um botão em 323 das
   327 páginas do catálogo, então herdar o passo do botão o faria mudar de tamanho sozinho. Daí
   `--step-icon` e não `--step-h`, e daí o `@property` que corta a herança na camada gerada. */
.icon { width:var(--step-icon,var(--icon-md)); height:var(--step-icon,var(--icon-md)); fill:currentColor; flex:none; }
.icon-sm { --step-icon:var(--icon-sm); } .icon-lg { --step-icon:var(--icon-lg); } .icon-xl { --step-icon:var(--icon-xl); }
.muted { color:var(--muted-foreground); }
.stack { display:flex; flex-direction:column; gap:var(--space-4); }
.cluster { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
/* SEPARATOR. `background` num box de 1px e NÃO `border`: assim a espessura não depende de qual
   lado do border está escrito, e a mesma classe serve nas duas orientações. `<hr>` chega com
   margem e borda do navegador — as duas são zeradas aqui, senão a régua vem com folga que ninguém
   pediu. O vertical precisa de `align-self:stretch` para acompanhar a altura do irmão mais alto, e
   de um piso: sem `min-height` ele mede ZERO num pai que não define altura, e desaparece. */
.separator { flex:none; width:100%; height:1px; margin:0; border:0; background:var(--border); }
.separator-vertical { align-self:stretch; width:1px; height:auto; min-height:var(--space-2); }
/* spacing (C-04): os três degraus da ADR-0051. Na vertical a folga vai para os lados. */
.separator-space-tight { margin-block:var(--space-2); } .separator-space-normal { margin-block:var(--space-4); } .separator-space-loose { margin-block:var(--space-6); }
.separator-vertical.separator-space-tight { margin-block:0; margin-inline:var(--space-2); }
.separator-vertical.separator-space-normal { margin-block:0; margin-inline:var(--space-4); }
.separator-vertical.separator-space-loose { margin-block:0; margin-inline:var(--space-6); }
/* Grid: o terceiro primitivo de layout, com o mesmo gap do .stack. A pele nasceu na Fase 11
   (achado A13): o componente existia desde sempre e saía `display:block` — empilhava. Ninguém
   via porque o chrome do catálogo REDEFINIA .grid, então ele parecia pronto na nossa
   documentação e chegava sem nada no consumidor. `min(...,100%)` porque `minmax(15rem,1fr)`
   estoura o contêiner quando o texto vai a 200% e a coluna fica maior que a caixa (lição do
   M12); --grid-min é o botão de ajuste, no idioma de --qr-module e --demo-height. */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(var(--grid-min,15rem),100%),1fr)); gap:var(--space-4); }
/* B-01 (24/09/2026): as props de layout. `gap` tem três degraus — ADR-0051. Os nomes de alinhamento
   são os mesmos do `Cluster` nativo (R-09). Sem prop, nenhuma destas classes sai. */
.stack-gap-tight,.cluster-gap-tight,.grid-gap-tight { gap:var(--space-2); }
.stack-gap-loose,.cluster-gap-loose,.grid-gap-loose { gap:var(--space-6); }
.stack-align-start { align-items:flex-start; } .stack-align-center { align-items:center; } .stack-align-end { align-items:flex-end; }
.cluster-align-start { align-items:flex-start; } .cluster-align-end { align-items:flex-end; } .cluster-align-baseline { align-items:baseline; }
.cluster-justify-center { justify-content:center; } .cluster-justify-end { justify-content:flex-end; } .cluster-justify-between { justify-content:space-between; }
.cluster-nowrap { flex-wrap:nowrap; }
.grid-fixed { grid-template-columns:repeat(var(--grid-cols,1),minmax(0,1fr)); }
/* AN-08 (03/10/2026): a largura mínima da coluna, por nome — a trava de um consumidor reprova medida
   escrita, e `min="sm"` virava UMA coluna sem aviso (o `--grid-min` inválido derruba a regra inteira).
   A referência não tem `Grid`; nenhum número é novo, cada um já mede uma grade ou uma caixa daqui:
     xs  8rem — a miniatura da `.gallery` (`--gallery-min`)
     sm 12rem — a célula da `.health-matrix`
     md 15rem — o padrão do `.grid`, logo acima (sem classe)
     lg 20rem — o `.dialog-xs`, a menor largura de diálogo da referência */
.grid-min-xs { --grid-min:8rem; } .grid-min-sm { --grid-min:12rem; } .grid-min-lg { --grid-min:20rem; }
/* GAR-03 (06/10/2026): `Grid.Item span` — o item ocupa N colunas da grade, o "7 de 12" de página
   de site (`<Grid columns={12}>`). Estas são as regras do valor SIMPLES; o valor por tela
   (`vp-md:grid-span-7`) e por contêiner (`ct-sm:grid-span-6`) é gerado na camada responsiva, no
   fim deste arquivo, e o gerador confere que os corpos são idênticos aos daqui. */
.grid-span-1 { grid-column:span 1 / span 1; } .grid-span-2 { grid-column:span 2 / span 2; } .grid-span-3 { grid-column:span 3 / span 3; }
.grid-span-4 { grid-column:span 4 / span 4; } .grid-span-5 { grid-column:span 5 / span 5; } .grid-span-6 { grid-column:span 6 / span 6; }
.grid-span-7 { grid-column:span 7 / span 7; } .grid-span-8 { grid-column:span 8 / span 8; } .grid-span-9 { grid-column:span 9 / span 9; }
.grid-span-10 { grid-column:span 10 / span 10; } .grid-span-11 { grid-column:span 11 / span 11; } .grid-span-12 { grid-column:span 12 / span 12; }
.grid-item { min-width:0; }
/* GAR-02 (06/10/2026): `Container` — a largura de leitura de uma página de SITE, centrada, com o
   respiro dos lados que cresce com a tela. A referência principal não tem; na fila de referências,
   a primeira que tem usa um contêiner de 1280px (na folha de tema dela) e o respiro de 16
   que vira 32 na tela média (o cabeçalho dela). Nenhum número é novo: 1280 é
   o `--breakpoint-xl`, 16 e 32 são `--space-4` e `--space-8`, e o ponto da troca é o
   `--breakpoint-md` (768 — `@media` não lê `var()`, daí o literal, como na camada responsiva).
   `size` usa os mesmos nomes da escala de pontos; `full` tira o teto. */
.container { box-sizing:border-box; inline-size:100%; max-inline-size:var(--breakpoint-xl); margin-inline:auto; padding-inline:var(--space-4); }
.container-sm { max-inline-size:var(--breakpoint-sm); } .container-md { max-inline-size:var(--breakpoint-md); }
.container-lg { max-inline-size:var(--breakpoint-lg); } .container-2xl { max-inline-size:var(--breakpoint-2xl); }
.container-full { max-inline-size:none; }
/* `docs` (lote T, 17/10/2026): o bloco da documentação, `--docs-width` (1400) — o da referência; a escala de pontos não
   tem esse número. */
.container-docs { max-inline-size:var(--docs-width); }
@media (min-width:768px) { .container { padding-inline:var(--space-8); } }
/* E o recheio dela é o da barra da referência: 16 no celular (o de todo `Container`) e 24 de 768 para cima, e não 32 — a
   768, com 32, a busca e as ações não cabiam na linha da marca e desciam (a bancada do lote T pegou). */
@media (min-width:768px) { .container-docs { padding-inline:var(--space-6); } }
/* GAR-04 e GAR-05 (06/10/2026): `Section` — a faixa de ponta a ponta de uma página de site, com
   fundo próprio e respiro vertical de site. Nenhuma referência aberta tem a peça (as seções de uma
   delas são pagas, não lidas), então o respiro é escolha da Aurea, com tokens que já existem: `--space-16`
   (64) e `--space-24` (96) a partir do `md`; `sm` é a metade, `--space-8` e `--space-12`. O fundo e a letra
   saem dos tokens do PRÓPRIO elemento: com `theme="dark"` a seção vira uma faixa escura dentro da
   página clara, e as regras de tema claro não vazam para dentro dela (a guarda do GAR-05). */
.section { box-sizing:border-box; inline-size:100%; padding-block:var(--space-16); background:var(--background); color:var(--foreground); }
.section-card { background:var(--card); color:var(--card-foreground); }
.section-inset { background:var(--surface-inset); }
.section-spacing-sm { padding-block:var(--space-8); }
@media (min-width:768px) { .section { padding-block:var(--space-24); } .section-spacing-sm { padding-block:var(--space-12); } }
/* GAR-21 e GAR-22 (lote U, 19/10/2026): a `Section` variant="hero" — a abertura de página. Os vãos são os do início da
   referência (medidos em 15/10/2026): a sobrelinha a 8 do título (16 a partir de 1024), o texto colado no título, os
   botões a 16, o que vier depois a 8 (16 a partir de 1024); o texto 16/24, e 18/28 a partir de 768, em 672 de largura (o
   640 da escala mais o --space-8). O título 36, 60 a partir de 768 e 72 a partir de 1024 (os três tamanhos são decisão
   do Victor; as larguras, desta peça). Com imagem e align="start", o texto e a imagem lado a lado a partir de 1024;
   abaixo disso, a imagem desce.
   As larguras são da FAIXA, e não da janela (`@container`, como o `.media-player`): de ponta a ponta, a faixa tem a
   largura da janela e dá o mesmo; numa coluna mais estreita (a prévia do catálogo), o título não passa dela. O 72 entra
   em 1024, e não em 1280: numa janela de 1280 a barra de rolagem deixa a faixa com menos de 1280, e o 72 não apareceria
   na tela larga mais comum. */
.section-hero { container:aurea-hero / inline-size; }
.section-hero-content { display:grid; justify-items:start; min-inline-size:0; }
.section-hero-center .section-hero-content { justify-items:center; text-align:center; }
.section-hero-text { display:grid; justify-items:inherit; }
/* A sobrelinha em flex: com um selo ou link dentro de um bloco comum, a linha de texto do bloco somava 2 à altura dele. */
.section-hero-eyebrow { display:flex; align-items:center; }
.section-hero-content > * + * { margin-block-start:var(--space-2); }
.section-hero-content > * + .section-hero-actions { margin-block-start:var(--space-4); }
.section-hero-title { margin:0; color:var(--foreground); font-family:var(--font-heading); font-size:var(--text-4xl); line-height:var(--text-4xl-leading); font-weight:var(--weight-bold); letter-spacing:var(--tracking-tight); text-wrap:balance; }
.section-hero-description { max-inline-size:calc(var(--breakpoint-sm) + var(--space-8)); margin:0; color:var(--muted-foreground); font-size:var(--text-base); line-height:var(--leading-normal); text-wrap:pretty; }
.section-hero-center .section-hero-description { text-wrap:balance; }
.section-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.section-hero-center .section-hero-actions { justify-content:center; }
/* O campo de e-mail no lugar dos botões: o formulário cresce até 480 (o --breakpoint-xs), e não fica do tamanho do texto
   de exemplo. */
.section-hero-actions > form { flex:1 1 auto; max-inline-size:var(--breakpoint-xs); }
.section-hero-media { min-inline-size:0; margin-block-start:var(--space-12); }
@container aurea-hero (min-width:768px) {
  .section-hero-title { font-size:var(--text-6xl); line-height:var(--leading-none); }
  .section-hero-description { font-size:var(--text-lg); line-height:var(--text-lg-leading); }
}
@container aurea-hero (min-width:1024px) {
  .section-hero-content > * + :not(.section-hero-actions) { margin-block-start:var(--space-4); }
  .section-hero-split .section-hero-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--space-12); }
  .section-hero-split .section-hero-media { margin-block-start:0; }
  .section-hero-title { font-size:var(--text-7xl); }
}
/* GAR-06 (07/10/2026): a `Section` variant="footer" — o rodapé de site, uma faixa como as outras
   (fundo, respiro e tema vêm dela). No celular tudo empilha numa coluna; a partir de 768 a marca
   fica à esquerda e as colunas de links se repartem à direita, cada uma com pelo menos 8rem (a
   mesma medida do `.grid-min-xs`). A linha legal fecha embaixo, separada por um fio. */
.section-footer-top { display:flex; flex-direction:column; gap:var(--space-8); }
.section-footer-nav { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
.section-footer-group { min-inline-size:0; }
.section-footer-title { margin:0 0 var(--space-3); font-size:var(--text-sm); font-weight:var(--weight-semibold); line-height:var(--leading-tight); color:var(--foreground); }
.section-footer-links { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
.section-footer-link { color:var(--muted-foreground); font-size:var(--text-sm); text-decoration:none; }
.section-footer-link:hover { color:var(--foreground); }
.section-footer-legal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2) var(--space-6); margin-block-start:var(--space-8); padding-block-start:var(--space-6); border-block-start:var(--border-width) solid transparent; color:var(--muted-foreground); font-size:var(--text-sm); }
/* layout="inline" (15/10/2026): o rodapé da página inicial da referência — UMA linha centrada, 12 de respiro em cima e
   embaixo, 8 entre as partes, letra 14 apagada; os links acendem com o ponteiro. Quebra linha se não couber. */
.section.section-footer-inline { padding-block:var(--space-3); }
.section-footer-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
.section-footer-inline-legal { margin:0; }
.section-footer-inline-links { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin:0; padding:0; list-style:none; }
.section-footer-line .section-footer-link { display:inline-flex; align-items:center; }
.section-footer-line .section-footer-link:hover { color:var(--foreground); }
@media (min-width:768px) {
  .section-footer-top { flex-direction:row; justify-content:space-between; }
  .section-footer-brand { flex:1 1 0; min-inline-size:0; }
  .section-footer-nav { flex:2 1 0; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); }
}

/* ========================================================================== */
/* 03. APP SHELL E DOCUMENTAÇÃO                                                */
/* ========================================================================== */
/* Regiões do AppShell — SUPERFÍCIES FLUTUANTES (decisão do Victor, 23/07/2026): topo,
   lateral e conteúdo são caixas soltas de raio --radius-card, separadas por --space-4 e
   descoladas da borda da janela pelo padding do shell. NADA de barra colada com linha
   divisória: caixa retangular genérica é proibida (CLAUDE.md).
   Arranjo escolhido: o TOPO atravessa toda a largura (grid-column 1/-1) e leva a marca;
   a lateral começa abaixo dele. Ambos grudam na rolagem por `sticky` — o conteúdo passa
   por baixo e as duas caixas seguem visíveis.
   ATENÇÃO: `.app-shell` NÃO se toca. O catálogo escrito à mão (apps/docs) usa essa MESMA
   classe como raiz, com filhos próprios (.doc-sidebar/.main-wrap) — mexer nela desloca as
   26 telas de referência inteiras (aconteceu; o portão visual pegou). Por isso a folga
   entre as caixas sai da MARGEM de cada filho, não de gap/padding no shell. As linhas
   extras do grid nascem sozinhas por auto-placement. */
.app-shell { --sidebar-track:calc(var(--sidebar-width) + var(--space-4)*2); min-height:100vh; display:grid; grid-template-columns:var(--sidebar-track) minmax(0,1fr); background:var(--background); }
/* `--sidebar-width` nomeia o PAINEL, não a trilha inteira. A variante flutuante ainda gasta
   `--space-4` dos dois lados; reservar só o token fazia 264px virarem 232px. A rente não tem
   margem, então a trilha dela continua sendo o token cru. */
.app-shell:has(> .sidebar-flush) { --sidebar-track:var(--sidebar-width); }
/* Sem linhas declaradas, o grid repartia a sobra do `min-height:100vh` entre as linhas `auto`:
   em tela estreita (a lateral vira gaveta) e página curta, a BARRA DO TOPO esticava. Medido no
   desenho da B-10 (24/09/2026): 78px viraram 100px com `contentVariant="plain"`. A sobra vai
   para a linha do conteúdo. Só com topo: sem ele, a primeira linha já é o conteúdo. */
.app-shell:has(> .topbar) { grid-template-rows:auto 1fr; }
/* A base do topo carrega só o ARRANJO; cada variante traz a própria superfície.
   floating = caixa solta (a que já estava) · flush = faixa encostada nas bordas com fio
   embaixo, para o topo virar moldura da janela · pill = cápsula centrada, de cabeçalho
   de site. Só floating e flush entram no grid do AppShell; a pill é peça avulsa (numa
   pílula não cabem busca + densidade + tema + comando). */
.topbar { grid-column:1/-1; position:sticky; z-index:var(--z-sticky); display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--topbar-height); }
.topbar-floating { top:var(--space-4); margin:var(--space-4) var(--space-4) 0; padding:var(--space-2) var(--space-4); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
/* flush: encostada nas bordas. SEM fio embaixo (pedido do Victor — a referência não tem)
   e sem superfície própria: ela se funde ao fundo e cola no conteúdo, que começa logo
   abaixo. É o topo do nosso catálogo. */
.topbar-flush { top:0; padding:var(--space-2) var(--space-5); background:var(--background); }
/* divider (B-07): a linha que separa a barra grudada do conteúdo que passa por baixo. */
.topbar-divider { border-block-end:var(--border-width) solid transparent; }
.topbar-pill { top:var(--space-4); width:max-content; max-width:calc(100% - var(--space-8)); margin:var(--space-4) auto 0; justify-content:flex-start; gap:var(--space-2); padding:var(--space-2); border:1px solid transparent; border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); }
/* .brand nasceu como cabeçalho VERTICAL da lateral (borda embaixo + respiro); no topo
   ele deita, então some com a borda e a margem — o lockup em si continua o mesmo. */
.topbar .brand { min-height:auto; margin:0; padding:0; border:0; }
/* GAR-01 (07/10/2026): o cabeçalho de SITE — o `Header` com `items`. A altura é o `--topbar-height`
   (64, a mesma da referência principal); os links ficam a --space-4 um do outro, como nela; o atual
   é o `[aria-current]`, com a cor de destaque e o peso médio. Abaixo de 768 (md-1, escala) os links
   saem da barra e descem num painel que é um POPOVER nativo (`<nav popover="auto">`), sem
   JavaScript — o mesmo mecanismo da gaveta do `AppShell`: o Esc e o toque fora fecham. O desenho do
   botão é o glifo `list` do Phosphor (e o `x` com o painel aberto), em máscara: a cor é a do texto. */
/* Os 64 são a faixa inteira, como na referência: sem respiro vertical, e o fio (`divider`) fica por
   fora. Medido: com o respiro da `flush` a barra saía com 81. */
.topbar-site { min-height:var(--topbar-height); padding-block:0; }
.topbar-contained { padding-inline:0; }
.topbar-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:inherit; }
/* Os links vão para a direita, logo antes das ações, como no guia da referência (a marca numa ponta,
   a navegação na outra). No celular eles saem, e são as ações que encostam à direita. */
.topbar-nav { display:flex; margin-inline-start:auto; }
/* Abaixo de 1024 a regra da barra do `AppShell` manda o `nav` filho para uma segunda linha
   (`.topbar > nav`, mais abaixo). O cabeçalho de SITE sem `maxWidth` também tem o `nav` como filho
   e caía junto: medido em 900, os links desciam e a barra ia de 64 para 80. Aqui os links ficam na
   linha da marca; se não couberem, a barra quebra por conteúdo, como já faz. */
.topbar-site > .topbar-nav { order:0; flex-basis:auto; }
.topbar-links { display:flex; align-items:center; gap:var(--space-4); margin:0; padding:0; list-style:none; }
.topbar-link { display:inline-flex; align-items:center; min-block-size:var(--control-h-md); color:var(--muted-foreground); font-size:var(--text-sm); text-decoration:none; }
.topbar-link:hover { color:var(--foreground); }
.topbar-link[aria-current] { color:var(--primary-emphasis); font-weight:var(--weight-medium); }
.topbar-actions { display:flex; align-items:center; gap:var(--space-2); margin-inline-start:auto; }
.topbar-site .topbar-actions { margin-inline-start:0; }
/* itemsJustify="start" (14/10/2026): os links perto da marca, como na página inicial da referência, e as ações na
   outra ponta. Da marca ao primeiro link, 32 (medido nela, 15/10/2026): o vão da barra (--space-4) e mais --space-4.
   No celular os links saem e nada muda. */
.topbar-items-start .topbar-nav { margin-inline-start:var(--space-4); }
.topbar-items-start .topbar-actions { margin-inline-start:auto; }
/* size="sm" (15/10/2026): a barra de 56 do topo da página inicial da referência (medida nela; o guia de barra dela tem
   64, o nosso padrão), com 6 entre as ações (o gap-1.5 dela). O painel do celular segue a altura, pela mesma variável. */
.topbar-sm { --topbar-height:calc(var(--space-12) + var(--space-2)); }
.topbar-sm .topbar-actions { gap:calc(var(--space-1) + var(--space-05)); }
/* A SEGUNDA LINHA DO CABEÇALHO (`Header tabs`, lote T, 17/10/2026 — os pedidos SITE-04 e SITE-05 do Victor): as áreas do
   site, cada uma com o ícone, como a linha das áreas da documentação da referência (medida no código dela): 40 de altura,
   4 abaixo da linha de cima, as áreas a 12 uma da outra, letra 14 em peso médio, o ícone a 8 do nome, com a altura da
   letra. A área atual tem a cor do texto e o traço de 2 embaixo, na cor de destaque, encostado na linha de baixo. A linha
   fica por último na ordem do Tab: as áreas vêm depois das ações. */
.topbar-with-tabs, .topbar-with-tabs > .topbar-inner { flex-wrap:wrap; row-gap:var(--space-1); }
.topbar-with-tabs { padding-block:0; border-block-end-width:0; }
/* Com as áreas, a barra tem 100 cravados e a linha de baixo fica PENDURADA logo abaixo dela, sobre o começo da página,
   como a da referência (a dela é um `::after` com `bottom:-1px`): a borda invisível de 1 do sem linha somava 1 à barra
   e empurrava tudo o que vem embaixo (medido: a lateral a 117 e não 116). */
.topbar-with-tabs.topbar-divider::after { inset-block-end:calc(-1 * var(--border-width)); }
/* A linha de cima tem a altura da barra (56 na `sm`, como a da referência): é a marca que a segura — sem isso a linha
   ficava da altura da busca (36) e a barra inteira com 89, e não 100. */
.topbar-with-tabs .brand { min-block-size:var(--topbar-height); }
/* As áreas ficam EMBAIXO da linha (como lá: a área tem 30 — a letra, 8 e o traço de 2 — numa linha de 40) e numa linha só,
   que ROLA DE LADO quando não cabe (medido na página da referência a 375: ela não quebra nem some; a página não rola).
   No celular, 4 entre as áreas; de 768 para cima, 12. Como a linha recorta o que passa dela, o anel do foco fica POR
   DENTRO da área, como o do item de menu — por fora, ele seria cortado embaixo. */
.topbar-tabs { flex-basis:100%; display:flex; align-items:flex-end; gap:var(--space-1); min-block-size:var(--space-10);
  overflow-x:auto; overflow-y:hidden; }
@media (min-width:768px) { .topbar-tabs { gap:var(--space-3); } }
/* A PONTA DA LINHA DAS ÁREAS (`Header tabsEnd`, bloco 1 — 23/10/2026): a chave Web | Native da documentação da
   referência, do lado oposto das áreas e no meio da altura da linha. As áreas continuam rolando de lado quando não cabem;
   a ponta não encolhe. Abaixo de 768 ela some, como lá. */
.topbar-tabs-row { flex-basis:100%; display:flex; align-items:center; gap:var(--space-4); min-inline-size:0; }
.topbar-tabs-row > .topbar-tabs { flex:1 1 auto; min-inline-size:0; }
.topbar-tabs-end { flex:none; }
@media (max-width:767px) { .topbar-tabs-end { display:none; } }
.topbar-tab { position:relative; flex-shrink:0; display:inline-flex; align-items:center; gap:var(--space-2);
  padding:0 var(--space-1) calc(var(--space-2) + var(--focus-width)); color:var(--muted-foreground); font-size:var(--text-sm);
  font-weight:var(--weight-medium); white-space:nowrap; text-decoration:none; }
.topbar-tab:focus-visible { outline-offset:calc(-1 * var(--focus-width)); }
.topbar-tab:hover, .topbar-tab[aria-current] { color:var(--foreground); }
.topbar-tab[aria-current]::after { content:""; position:absolute; z-index:1; inset-inline:0; inset-block-end:0; block-size:var(--focus-width);
  background:var(--primary); }
.topbar-tab-icon { display:inline-flex; font-size:var(--text-sm); }
.topbar-tab-icon > .icon { inline-size:1em; block-size:1em; }
/* A LINHA DE BAIXO (`divider`) volta como LINHA (lote T, SITE-05, o Victor: "a linha que vai de uma ponta a outra"): a
   segunda exceção ao sem linha (ADR-0072), desenhada, de uma ponta à outra da barra, na cor da linha. */
.topbar-divider::after { content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:var(--border-width);
  background:var(--border); pointer-events:none; }
/* blurred (15/10/2026), só na `flush`: o fundo transparente que embaça o que passa por baixo — o desfoque de 16 da
   referência. Quem pede menos transparência ao sistema, e o navegador sem desfoque, ficam com o fundo cheio. */
.topbar-flush.topbar-blurred { background:transparent; -webkit-backdrop-filter:blur(var(--space-4)); backdrop-filter:blur(var(--space-4)); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .topbar-flush.topbar-blurred { background:var(--background); } }
@media (prefers-reduced-transparency:reduce) { .topbar-flush.topbar-blurred { background:var(--background); -webkit-backdrop-filter:none; backdrop-filter:none; } }
/* menuActions (15/10/2026): o que só o menu do celular leva (o GitHub, na referência), embaixo dos links, depois de uma
   linha. */
.topbar-menu-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-block-start:var(--space-4); padding-block-start:var(--space-4); border-block-start:var(--border-width) solid transparent; }
/* O botão e o painel só existem no celular, e só onde há popover. O @supports lá embaixo é a rede,
   como na gaveta do `AppShell`: navegador sem popover não esconde o `<nav popover>` sozinho, e o
   painel apareceria solto na barra. Ali os links ficam na barra, que já quebra linha por conteúdo, e
   o botão não aparece (não haveria o que abrir). Duas classes no botão porque o `.btn` declara o
   próprio `display`. */
.btn.topbar-menu-toggle, .topbar-menu-panel { display:none; }
.topbar-menu-icon { display:block; inline-size:var(--icon-md); block-size:var(--icon-md); background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.topbar:has(.topbar-menu-panel:popover-open) .topbar-menu-icon { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E"); }
/* Aberto, o painel vai para a camada de cima, fora do fluxo da barra, e o navegador lhe dá `inset:0`,
   `margin:auto`, borda e a largura do conteúdo: tudo isso se desfaz aqui. Sem âncora, ele fica fixo
   logo abaixo dos 64 da barra. Com âncora (o @supports abaixo), cola no fim da barra onde ela estiver
   e toma a largura dela — na `floating`, a da caixa. O `- border-width` põe o fio de cima do painel
   EM CIMA do fio da barra (o `divider`, a borda da `floating`), e não um fio duplo. A altura tem teto
   e rola por dentro; a folga de --space-8 cobre a margem de cima da `floating`. */
.topbar-menu-panel:popover-open { position:fixed; inset:auto; inset-block-start:var(--topbar-height); inset-inline:0; inline-size:auto; block-size:auto; max-block-size:calc(100dvh - var(--topbar-height) - var(--space-8)); overflow:auto; margin:0; padding:var(--space-4); border:0; border-block:var(--border-width) solid transparent; background:var(--background); color:var(--foreground); }
.topbar-menu-panel .topbar-links { flex-direction:column; align-items:stretch; gap:var(--space-2); }
/* `anchor-scope` prende o nome da âncora a cada cabeçalho: com dois na página (cada um com o seu
   `menuId`), o painel de um não cola no outro. Onde não houver `anchor-scope`, vale o último. */
@supports (anchor-name:--a) {
  .topbar-site { anchor-name:--aurea-header; anchor-scope:--aurea-header; }
  .topbar-menu-panel:popover-open { position-anchor:--aurea-header; inset-block-start:calc(anchor(bottom) - var(--border-width)); inset-inline-start:anchor(start); inset-inline-end:anchor(end); }
}
@supports selector(:popover-open) {
@media (max-width:767px) { .topbar-site .topbar-nav { display:none; } .topbar-site .topbar-actions { margin-inline-start:auto; } .topbar-site .btn.topbar-menu-toggle { display:inline-flex; } .topbar-menu-panel:popover-open { display:block; } }
}
/* altura fixa = janela menos topo e as 3 folgas; assim a caixa parece cheia mesmo com
   poucos itens (é o que as referências mostram) e sobra o que rolar por dentro. */
/* E O TETO É O CONTAINER, NÃO A JANELA. A altura acima é da JANELA, e sozinha ela faz a lateral
   presumir que é dona da tela: dentro de qualquer caixa menor ela calcula 818px, transborda e é
   CORTADA — medido em 18/08/2026 na prévia do catálogo, 818px dentro de 272px, sem nem rolar.
   `max-height:100%` contra um pai de altura INDEFINIDA é ignorado, então no `AppShell` (onde a
   lateral realmente é dona da tela) nada muda — conferido: 818px antes e depois, idêntico. Contra
   um pai de altura definida ele manda, e a caixa passa a caber. Os `--space-4`*2 descontam a
   própria margem, senão ela transborda pelo dobro da folga.
   O intento da altura continua o mesmo: caixa cheia mesmo com poucos itens, e o que sobra rola
   por dentro (`overflow:auto`, logo abaixo). O que muda é de onde vem o teto. */
/* O PAINEL DÁ QUASE NADA E A LINHA DÁ O RESTO — o mesmo padrão do `.card:has(> .nav-list)`.
   Era `--space-4` (16px): o item começava a 17px da borda e ocupava 88% da largura, com o
   realce flutuando no meio do painel. */
/* A LATERAL FLUTUA POR PADRÃO — é a identidade desta casa, e o `CLAUDE.md` manda.
   EM 18/08/2026 O PADRÃO FOI INVERTIDO AQUI, E ESTAVA ERRADO. O Victor abriu exceção para a
   lateral PODER ser rente; uma sessão leu "abriu exceção" como "troque o padrão". São coisas
   diferentes, e ele separou as duas em 20/08/2026:
     "uma coisa é a gente ter o componente outra coisa é usar no nosso próprio projeto,
      o nosso vai ser tudo flutuante mas isso não impede da gente ter outras variações para
      as pessoas que nos acharem no npm usarem"
   E o estrago não foi de gosto: as 106 páginas do catálogo montam por `AppShell`, que chama a
   `Sidebar` SEM variante — inverter o padrão reescreveu o catálogo inteiro, e quatro baselines
   de pixel foram regravadas para aceitar. Ver ADR-0034.
   Esta regra é a de `b0599be`, íntegra: estado conhecido bom, provado pelo portão de pixel em vez
   de reafinado à mão. */
.sidebar { --shell-top:calc(var(--topbar-height) + var(--space-4)*2); position:sticky; top:var(--shell-top); align-self:start; height:calc(100vh - var(--shell-top) - var(--space-4)); max-height:calc(100% - var(--space-4)*2); margin:var(--space-4); display:flex; flex-direction:column; gap:var(--space-1); padding:var(--space-1); overflow:auto; border:1px solid transparent; border-radius:var(--radius-card); background:var(--sidebar); color:var(--sidebar-foreground); }
/* RENTE É A VARIANTE, e ela existe porque o Victor mediu quatro aplicativos que rodam na mão,
   um deles o painel da própria referência de desenho. Nenhum flutua a lateral — ela
   encosta nas bordas, ocupa a altura toda e se separa do conteúdo por UM TRAÇO, não por um vão.
   É a ÚNICA exceção à caixa flutuante nesta casa, e não generaliza: card, diálogo e painel seguem
   flutuando.
   Ela desfaz exatamente o que a flutuante põe — as duas contas de altura, a margem, o raio e de
   que lados vem a borda —, e é por isso que a trava de pele exige que as duas MEÇAM diferente:
   variante que desenha igual é enfeite. `--shell-top` volta a ser só a altura do topo, porque sem
   margem não há as duas folgas a descontar. */
.sidebar-flush { --shell-top:var(--topbar-height); height:calc(100vh - var(--shell-top)); max-height:100%; margin:0; border:0; border-inline-end:1px solid transparent; border-radius:0; }
/* `placement="right"` (0.32.0, DOC-01): a lateral do outro lado. A flutuante já tem margem nos quatro
   lados; a encostada leva o fio para o lado de dentro, que agora é o começo da linha. */
.sidebar-flush.sidebar-right { border-inline-end:0; border-inline-start:1px solid transparent; }
/* SEM CAIXA é outra variante (0.32.0): `plain`, o nome que a Aurea já dá ao "sem caixa" (`contentVariant`,
   o painel do `Tabs`, o `KPI`). É a coluna "On this page" de uma documentação, como a da referência: os
   itens soltos na página. Tira só a PINTURA — fundo, cor da borda, sombra — e guarda a geometria da
   flutuante (margens, altura, a mesma borda de 1, agora invisível), então trocar de variante não mexe em
   nada de lugar. O texto continua na escala da lateral: medido nos quatro (Aurea e `lory`, claro e
   escuro), o `--sidebar-foreground` é o mesmo `--foreground` da página. */
.sidebar-plain { border-color:transparent; background:transparent; box-shadow:none; }
/* A COLUNA DA DIREITA do `AppShell` (`aside`): a terceira trilha, da largura da lateral, de 1280 para
   cima. Abaixo, ela desce para depois do conteúdo, na última coluna que houver (a do conteúdo entre
   1024 e 1279; a única abaixo de 1024), sem grudar. Com ela, o conteúdo perde a margem da direita: a
   folga entre os dois é a margem da coluna, como entre a lateral e o conteúdo. */
.app-shell-with-aside { --aside-track:calc(var(--sidebar-width) + var(--space-4)*2); }
.app-shell-with-aside:has(> .app-shell-aside.sidebar-flush) { --aside-track:var(--sidebar-width); }
/* `.sidebar.app-shell-aside` (três classes) e não só a classe da coluna: a regra do shell recolhível
   (`.app-shell-collapsible > .sidebar`, mais abaixo na folha) prende TODA lateral na coluna 1, e com
   a mesma força ganharia por vir depois. */
.app-shell-with-aside > .sidebar.app-shell-aside { grid-column:-2 / -1; grid-row:auto; }
@media (max-width:1279px) { .app-shell-with-aside > .sidebar.app-shell-aside { position:static; height:auto; max-height:none; } }
@media (min-width:1280px) {
  .app-shell-with-aside { grid-template-columns:var(--sidebar-track) minmax(0,1fr) var(--aside-track); }
  .app-shell-with-aside > .content.content { grid-column:2; grid-row:2; margin-inline-end:0; }
  .app-shell-with-aside > .sidebar.app-shell-aside { grid-column:3; grid-row:2; }
}
/* a lateral ROLA mas nunca mostra a barra (pedido do Victor): a barra nativa risca a
   superfície flutuante e não segue o raio de 22px. `scrollbar-width` cobre Firefox e
   Chrome 121+; o pseudo cobre Safari e Chrome antigo. */

/* com o topo `flush` a barra COLA no conteúdo (pedido do Victor): a folga acima da lateral
   e do conteúdo é --space-1 (4px), e o --shell-top acompanha. */
/* flush cola no conteúdo com --space-05 (2px) — o degrau mais apertado da escala, criado
   pra este caso (o Victor aprovou os 2px; tokenizado, não cru). */
/* E ela NÃO vale para a lateral rente: `.app-shell-flush .sidebar` é mais específico que
   `.sidebar-flush` e roubaria dela a margem e o `--shell-top`. Esta regra é sobre o TOPO
   encostado, não sobre a lateral — a rente já encosta sozinha. */
.app-shell-flush .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
.app-shell-flush .content { margin-block-start:var(--space-05); }
/* O ARRANJO DE DOCUMENTAÇÃO (`AppShell layout="docs"`, lote T, 17/10/2026 — os pedidos SITE-01 e SITE-02 do Victor): o
   da documentação da referência, medido no código dela. Um bloco CENTRALIZADO de `--docs-width` (1400) em cinco trilhas —
   a sobra dos dois lados, iguais, centralizam —: a lateral (`--docs-sidebar-width`, 220), o texto, o índice
   (`--docs-aside-width`, 268, de 1280 para cima). Sem vão: o espaço vem do recheio de cada coluna. A lateral NÃO flutua
   (sem caixa; 16 abaixo da linha, 32 acima da borda da tela, 12 no começo); o texto tem 48 dos lados de 1280 para cima e 24
   abaixo, e cada bloco dele vai até `--docs-text-width` (900). Entre 1024 e 1279 o índice desce para depois do texto,
   como no `AppShell` de sempre; abaixo de 1024 a lateral é a gaveta. A barra de cima tem 56 + 4 + 40 (a linha das
   áreas): a lateral e o índice grudam logo abaixo dela. */
/* O bloco mora DEPOIS da regra do topo rente (`.app-shell-flush .sidebar:not(.sidebar-flush)`) e tem a MESMA força (o
   `:not`): mais fraca, ou antes dela, a lateral grudava a 66 do topo, por baixo da barra (medido). A linha de baixo
   fica pendurada fora da barra, como a da referência, e não entra na conta. */
.app-shell-docs { --docs-top:calc(var(--space-12) + var(--space-2) + var(--space-1) + var(--space-10)); }
.app-shell-docs > .content > * { max-inline-size:var(--docs-text-width); }
/* O texto a 24 da borda também no celular (o da página da referência a 375 e a 768; com o recheio de sempre do
   `AppShell`, ele encostava a 16 — a bancada do lote T pegou). */
.app-shell-docs > .content.content { margin:0; padding:var(--space-4) var(--space-6); }
@media (min-width:1024px) {
  .app-shell-docs { grid-template-columns:minmax(0,1fr) var(--docs-sidebar-width) minmax(0,calc(var(--docs-width) - var(--docs-sidebar-width))) minmax(0,1fr); }
  /* As duas colunas COMEÇAM 16 abaixo da linha e PARAM 32 acima da borda de baixo da tela, como as da referência
     medidas na página dela (17/10/2026, o Victor: "a distância do sidebar em relação aos itens de cima está muito
     próxima" e "a distância no final da página"): a caixa que rola — e a barra dela — não encosta mais na linha. Dentro,
     8 em cima e 16 embaixo, e o primeiro grupo sem a margem de cima: o "Overview" fica a 24 da linha, como lá. A
     referência ainda apaga a lista aos poucos nas duas pontas com um degradê; a Aurea não tem degradê, e a lista corta
     reto. Dos lados, 16 nos dois (12 + 4 lá) e 8 dentro do item e do nome do grupo: a cápsula começa a 16 da borda
     da coluna e o texto a 24, como lá (medido na página dela a 1280, 17/10/2026). */
  .app-shell-docs > .sidebar:not(.sidebar-flush) { --shell-top:calc(var(--docs-top) + var(--space-4)); grid-column:2; grid-row:2;
    block-size:calc(100vh - var(--shell-top) - var(--space-8)); max-block-size:none; margin:var(--space-4) 0 0; border-width:0;
    padding-block:var(--space-2) var(--space-4); padding-inline:var(--space-4); }
  .app-shell-docs > .sidebar > .sidebar-nav > .sidebar-list > li:first-child > .sidebar-group-label { margin-block-start:0; }
  .app-shell-docs > .sidebar .sidebar-item { padding-inline:var(--space-2); }
  .app-shell-docs > .sidebar .sidebar-group-label { margin-inline:var(--space-2); }
  .app-shell-docs > .content.content { grid-column:3; grid-row:2; }
  .app-shell-docs > .sidebar.app-shell-aside { grid-column:3; grid-row:3; block-size:auto; }
}
/* O índice ("On this page") SEM a barra de rolagem, como o da referência (o Victor, 17/10/2026: "ocultar a barra de
   rolagem"). Nem a da coluna nem a do PRÓPRIO índice: numa tela baixa ele encolhe para caber na coluna e rola sozinho
   (a barra que o Victor ainda viu, 1280 × 663, era a dele). Ele continua rolando com a roda e o toque, e o Tab leva cada
   link para a vista. É a ÚNICA exceção à regra da barra visível (`engine-batch.test.tsx`): o Victor escolheu "escondida
   sempre" entre esta e a da lateral, que some parada e volta com o ponteiro (17/10/2026). */
.app-shell-docs > .sidebar.app-shell-aside, .app-shell-docs > .sidebar.app-shell-aside > .toc { scrollbar-width:none; }
.app-shell-docs > .sidebar.app-shell-aside::-webkit-scrollbar,
.app-shell-docs > .sidebar.app-shell-aside > .toc::-webkit-scrollbar { display:none; }
/* Quem gruda aqui é a COLUNA; o índice dentro dela fica no lugar. Grudado também, ele somava os 16 dele aos da coluna e
   o "On this page" descia para 49 da linha (medido); assim, sem o recheio de cima, ele fica a 24, como o da referência. */
/* E ele ocupa a largura da coluna (o `align-self:start` de sempre o encolhia até o nome mais largo, 168). */
.app-shell-docs > .sidebar.app-shell-aside > .toc { position:static; align-self:stretch; }
@media (min-width:1280px) {
  .app-shell-docs { grid-template-columns:minmax(0,1fr) var(--docs-sidebar-width) minmax(0,calc(var(--docs-width) - var(--docs-sidebar-width) - var(--docs-aside-width))) var(--docs-aside-width) minmax(0,1fr); }
  .app-shell-docs > .content.content { padding:var(--space-8) var(--space-12) var(--space-4); }
  /* O índice tem 240 (`--docs-toc-width`) no começo da coluna de 268, com 16 dos dois lados, como o da referência: a
     ponta direita dele fica alinhada com a da barra de cima (o Victor, 17/10/2026: "componentes não alinhados"). */
  .app-shell-docs > .sidebar.app-shell-aside { grid-column:4; grid-row:2; justify-self:start; inline-size:var(--docs-toc-width);
    block-size:calc(100vh - var(--shell-top) - var(--space-8)); padding-block-start:0; padding-inline:var(--space-4); }
}
/* A margem é LÓGICA desde 03/10/2026 (AN-01): era `margin:space-4 space-4 space-4 0`, física, e na
   escrita da direita para a esquerda o conteúdo encostava na borda da página e deixava 32 de vão na
   junção com a lateral. Medido no banco da moldura; na esquerda para a direita nada muda. */
.content { min-width:0; margin-block:var(--space-4); margin-inline:0 var(--space-4); padding:var(--space-6); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); }
/* contentVariant="plain" (B-10): a área de conteúdo sem caixa. Os `Card` da tela passam a ser as
   únicas superfícies. A margem continua: é ela que afasta o conteúdo da lateral e da barra. */
.content-plain { padding:0; border:0; border-radius:0; background:none; color:inherit; }
/* O topo é presentational — não conhece o conteúdo — então garante o mínimo universal:
   os filhos encolhem em vez de forçar rolagem lateral. O COLAPSO de conteúdo (esconder a
   busca, trocar a nav por menu) é do consumidor, com os utilitários responsivos abaixo. */
.topbar > * { min-width:0; }
/* QUEBRA POR CONTEÚDO. O `flex-wrap` vivia só dentro do @media abaixo, ou seja, a barra só
   quebrava quando a JANELA era estreita. Texto a 200% (WCAG 1.4.4) aumenta o conteúdo sem
   mexer no viewport: o @media não disparava e a nav passava 27px da borda direita, em todas
   as páginas. Quebrar por conteúdo cobre os dois casos e não muda nada quando cabe. */
.topbar,.topbar > nav { flex-wrap:wrap; }
/* Colapso do shell abaixo de lg (1023 = lg-1, escala): a lateral do AppShell deixa o fluxo e
   vira a gaveta definida abaixo. A regra mira o filho `[popover]` de propósito: uma `Sidebar`
   standalone dentro de um preview estreito continua sendo o componente inteiro, não herda
   comportamento do shell que não existe ao redor dela. */
/* Abaixo de lg o topo QUEBRA em duas linhas em vez de esconder a navegação: perder o acesso
   a uma área inteira não é colapso responsivo, é bug. A nav vai pra segunda linha, centrada
   e na largura toda; badge e selo (secundários) seguem escondidos pelos utilitários. */
@media (max-width:1023px) { .app-shell { grid-template-columns:minmax(0,1fr); } .app-shell > .sidebar[popover] { position:static; height:auto; } .content { margin-inline-start:var(--space-4); }
  .topbar { flex-wrap:wrap; row-gap:var(--space-2); }
  .topbar > nav { order:3; flex-basis:100%; justify-content:center; }
  /* e a nav quebra entre os PRÓPRIOS itens: mandar a barra pra segunda linha não bastava,
     as cinco áreas somam 371px e estouravam a 320px (auditoria 26/07, A1). */
  .topbar > nav { flex-wrap:wrap; row-gap:var(--space-1); } }

/* ── GAVETA DE NAVEGAÇÃO (achado A8) ───────────────────────────────────────────────
   Empilhar a lateral acima do conteúdo passava, no gate de rolagem lateral, e era
   inutilizável: medido em 375px, o `h1` da página começava 4,6 telas abaixo, atrás dos 65
   itens da navegação. Abaixo de lg ela sai do fluxo e vira gaveta — o mesmo corte da
   referência e o breakpoint `--breakpoint-lg` já publicado pela Aurea.
   A MECÂNICA é nativa: o <aside> é popover e o botão do topo é o invoker. O navegador entrega
   Escape, clique fora, `aria-expanded` e ::backdrop; o AppShell normaliza entrada e retorno de
   foco nos três motores, porque o WebKit não os entregou sozinho (ADR-0019).
   Não-modal de propósito (o foco não fica preso), como o CommandPaletteShell: declarar
   modalidade sem entregá-la é pior que não declarar. */
.btn.nav-toggle { display:none; }
/* O UA aplica um bloco inteiro a `[popover]` mesmo FECHADO — `width:fit-content`, `inset:0`,
   `margin:auto`, borda e padding próprios. A `.sidebar` já sobrescreve quase tudo; sobravam
   largura e insets, e isso encolheu a lateral do DESKTOP de 232px para 225px. Quem pegou foi o
   gate de pixel, não o olho: 4.573 pixels de diferença numa captura de 0,03 de proporção. */
.sidebar[popover]:not(:popover-open) { width:auto; inset-inline:auto; inset-block-end:auto; }
/* Quem esconde a gaveta fechada é ESTA regra, não o `display:none` do UA para `[popover]`:
   regra de autor vence regra de UA por ORIGEM, e a `.sidebar` já declara `display:flex`.
   Medido: sem esta linha a lateral seguia empilhada em 375px, com o botão já visível.
   O @supports é a rede: em navegador sem popover a regra inteira não aplica, a lateral volta a
   empilhar (o comportamento de antes, feio e usável) em vez de sumir sem botão que a abra. */
@supports selector(:popover-open) {
@media (max-width:1023px) {
  .sidebar[popover]:not(:popover-open) { display:none; }
  .btn.nav-toggle { display:inline-flex; }
  /* altura EXPLÍCITA, não `auto`: medido em 30/07/2026, com `top` e `bottom` postos e
     `height:auto` o Chromium resolveu pela altura do CONTEÚDO (3.498px de lateral rolando a
     página inteira), não pelas âncoras. `dvh` porque a barra do navegador móvel some e volta. */
  /* 296px no teto: `--sidebar-width` (264) + as duas folgas externas (32), a mesma medida
     do drawer da referência. Em viewport menor, a segunda conta sempre preserva as bordas. */
  .sidebar[popover]:popover-open { position:fixed; inset-block:var(--space-4); inset-inline-start:var(--space-4); width:min(calc(var(--sidebar-width) + var(--space-4)*2),calc(100vw - var(--space-8))); height:calc(100dvh - var(--space-4) * 2); margin:0; }
  .sidebar[popover]::backdrop { background:var(--overlay); }
}
}

/* O ARRANJO DE DOCUMENTAÇÃO NO CELULAR E NO TABLET (`AppShell layout="docs"`, lote U, 19/10/2026 — o Victor: "tudo como
   ela"), medido na página da documentação da referência a 375, 768 e 1100:
   - a LATERAL é coluna desde 768 (e não desde 1024): de 768 a 1023 ela fica à esquerda do texto, como lá;
   - abaixo de 768 ela é a gaveta, e abre pela DIREITA, do lado do botão (que o `AppShell` põe no fim da barra);
   - o índice ("On this page") é coluna só de 1280 para cima. Abaixo, ele é a GAVETA da BARRA DO ÍNDICE: uma barra de 40
     presa logo abaixo do topo, na coluna do texto, com o nome da seção em vista e a setinha; tocar desce a lista. A
     referência desenha um círculo de progresso; aqui é o ícone de lista, e nenhuma linha (ADR-0072).
   Estas regras vêm DEPOIS das da gaveta de sempre e levam a classe do arranjo — com a mesma força, a ordem decide. */
.docs-toc-bar { display:none; }
@media (min-width:768px) and (max-width:1023px) {
  .app-shell.app-shell-docs { grid-template-columns:var(--docs-sidebar-width) minmax(0,1fr); }
  .app-shell-docs .btn.nav-toggle { display:none; }
  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):not(:popover-open) { display:flex; }
  .app-shell-docs > .sidebar:not(.app-shell-aside):not(.sidebar-flush) { --shell-top:calc(var(--docs-top) + var(--space-4)); grid-column:1; grid-row:2 / span 2;
    position:sticky; inset-block-start:var(--shell-top); align-self:start; block-size:calc(100vh - var(--shell-top) - var(--space-8));
    max-block-size:none; margin:var(--space-4) 0 0; border-width:0; padding-block:var(--space-2) var(--space-4); padding-inline:var(--space-4); }
  .app-shell-docs > .sidebar > .sidebar-nav > .sidebar-list > li:first-child > .sidebar-group-label { margin-block-start:0; }
  .app-shell-docs > .sidebar .sidebar-item { padding-inline:var(--space-2); }
  .app-shell-docs > .sidebar .sidebar-group-label { margin-inline:var(--space-2); }
  .app-shell-docs > .docs-toc-bar { grid-column:2; grid-row:2; }
  .app-shell-docs > .content.content { grid-column:2; grid-row:3; }
}
@media (min-width:1024px) and (max-width:1279px) {
  .app-shell-docs > .sidebar:not(.app-shell-aside):not(.sidebar-flush) { grid-row:2 / span 2; }
  .app-shell-docs > .docs-toc-bar { grid-column:3; grid-row:2; }
  .app-shell-docs > .content.content { grid-row:3; }
}
@media (max-width:1279px) {
  .app-shell-docs > .docs-toc-bar { display:block; position:sticky; inset-block-start:var(--docs-top); z-index:var(--z-sticky); background:var(--background); }
  .docs-toc-toggle { display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--space-10); padding:0 var(--space-6);
    border:0; background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-sm); text-align:start; cursor:pointer; }
  .docs-toc-toggle:hover { color:var(--foreground); }
  .docs-toc-toggle:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }
  .docs-toc-current { flex:1; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-shell-docs:has(> .app-shell-aside:popover-open) .docs-toc-toggle > .icon:last-child { rotate:180deg; }
}
@supports selector(:popover-open) {
@media (max-width:1279px) {
  .app-shell-docs > .sidebar.app-shell-aside[popover]:not(:popover-open) { display:none; }
  /* Aberto, ele desce da barra: preso logo abaixo dela, na largura da coluna do texto, uma superfície que flutua por cima
     do texto (o fundo opaco do popover, o canto do cartão). Sem véu: a lista é um atalho, não uma janela. */
  .app-shell-docs > .sidebar.app-shell-aside[popover]:popover-open { position:fixed; inset-block-start:calc(var(--docs-top) + var(--space-10));
    inset-block-end:auto; inset-inline:var(--space-4); inline-size:auto; block-size:auto;
    max-block-size:calc(100dvh - var(--docs-top) - var(--space-10) - var(--space-4)); margin:0; padding:var(--space-2) var(--space-4) var(--space-4);
    overflow:auto; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
  .app-shell-docs > .sidebar.app-shell-aside[popover]::backdrop { background:transparent; }
}
@media (min-width:768px) and (max-width:1279px) {
  .app-shell-docs > .sidebar.app-shell-aside[popover]:popover-open { inset-inline-start:calc(var(--docs-sidebar-width) + var(--space-4)); }
}
@media (max-width:767px) {
  /* A gaveta ABERTA é uma superfície, mesmo com a lateral sem caixa (`sidebarVariant="plain"`) do desktop: sem o fundo,
     a lista se misturava ao texto da página por baixo (medido a 375). O fundo e o canto do popover, como o do índice. */
  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open { inset-inline-start:auto; inset-inline-end:var(--space-4);
    padding:var(--space-2) var(--space-4) var(--space-4); border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open .sidebar-item { padding-inline:var(--space-2); }
  .app-shell-docs > .sidebar[popover]:not(.app-shell-aside):popover-open .sidebar-group-label { margin-inline:var(--space-2); }
}
}
/* De 1280 para cima o índice é a coluna, e o atributo de gaveta não pode encolhê-lo: a regra da gaveta fechada
   (`.sidebar[popover]:not(:popover-open)`, `width:auto`) vem antes na folha com a mesma força e o deixava com 200 (medido). */
@media (min-width:1280px) {
  .app-shell-docs > .sidebar.app-shell-aside[popover] { inline-size:var(--docs-toc-width); }
}
/* No celular o título fica a 32 da barra do índice, como o da referência a 375 (de 768 para cima, 16 nas duas). */
@media (max-width:767px) {
  .app-shell-docs > .content.content { padding-block-start:var(--space-8); }
}

/* ── A LISTA DA LATERAL (PLANO-1.0, item B1) ───────────────────────────────────────
   Até 06/08/2026 a Sidebar era só a caixa: item, grupo, aninhamento e marca de item atual
   existiam neste arquivo como `.doc-nav`, que é CHROME do catálogo (achado A6) e nunca foi
   API pública. Consequência medida: nenhum consumidor conseguia desenhar uma navegação sem
   reescrevê-la, e a peça já estava aqui.
   ITEM ATUAL por [aria-current] e não por uma classe `.active`: o estado que o leitor de tela
   anuncia e o que o olho vê passam a ser o MESMO atributo, então não há como marcar um e
   esquecer o outro — que é como o `.doc-nav` carrega `.active` E `aria-current` até hoje. */
.sidebar-nav { display:flex; flex-direction:column; gap:var(--space-1); }
.sidebar-list { display:flex; flex-direction:column; gap:var(--space-1); margin:0; padding:0; list-style:none; }
/* `width:100%` + `font:inherit` + `border:0`: o item também é <button> quando não navega, e
   sem isto o botão vem com a caixa do navegador e quebra a fila. */
/* 2-A (o item 102, 25/10/2026): o texto do item começa a `--sidebar-item-x` da borda dele, e o fio do item escolhido começa
   no mesmo ponto. Era 12 o texto e 15 o fio (um número cru): o Victor viu que não começavam juntos. Com 16 (`--space-4`) os
   dois começam onde a curva da cápsula já acabou (a 16 da borda o fundo fica 0,11 px acima da base) — a 12 o fio sairia da
   curva. O título do grupo, a marca e o título do painel seguem o mesmo recuo, para a coluna continuar uma só. */
.sidebar { --sidebar-item-x:var(--space-4); }
.sidebar-item { display:flex; align-items:center; gap:var(--space-2); width:100%; min-height:var(--control-h-md); padding:var(--space-1) var(--sidebar-item-x, var(--space-3)); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--sidebar-foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
.sidebar-item .icon { flex:none; opacity:.8; }
/* min-width:0 é o que deixa o ellipsis funcionar dentro do flex; sem ele o nome longo empurra
   o acessório para fora da caixa em vez de cortar. */
.sidebar-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A LATERAL SE PINTA COM OS TOKENS DELA, e isto é conserto de 20/08/2026 — o Victor viu.
   Estas duas regras usavam `--secondary` e `--foreground`, que são tokens da PÁGINA. Na Aurea
   isso nunca apareceu porque o painel e a página têm a mesma claridade nos dois temas; sob a
   marca `lory`, onde a lateral é escura mesmo no tema claro (decisão de produto da marca), o
   item atual virava uma pílula QUASE BRANCA com texto escuro em cima de um painel escuro. Ele
   chamou de "cores invertidas", e é exatamente o que era.
   `--sidebar-accent` e `--sidebar-accent-foreground` já eram PUBLICADOS e não tinham um único
   uso no core — token publicado que ninguém usa é promessa sem entrega, e era o par certo o
   tempo todo. O defeito não é da marca: a marca só o tornou visível. */
/* O ITEM ESMAECIDO, como o da referência (ADR-0067, decisão do Victor de 13/10/2026, vendo os dois rodando:
   "B, igual ao dela"): o item que não é o atual fica cinza, e o título de grupo e o item atual ficam fortes;
   passando o mouse, o item acende. O cinza sai da ESCALA DA LATERAL (o texto dela, esmaecido), e não do
   `--muted-foreground` da página — sob a marca `lory` a lateral é escura e a página não (a lição de
   20/08/2026, logo abaixo). Medido contra o fundo da lateral (13/10/2026): 7,6:1 no escuro e 5,4:1 no
   claro; na marca `lory`, 7,8:1 e 5,6:1 — o branco de antes era 14,5:1. */
.sidebar-item:not([aria-current]) { color:color-mix(in oklab, var(--sidebar-foreground) 68%, transparent); }
@media (hover:hover) and (pointer:fine) { .sidebar-item:hover { background:var(--sidebar-accent); } .sidebar-item:not([aria-current]):hover { color:var(--sidebar-foreground); } }
/* A-05 (24/09/2026), decisão do Victor: o item atual da lateral passa a usar a MARCA DA CASA para
   "selecionado" — fundo, texto na cor da marca e o fio de 2px embaixo —, que o `Toggle`, o
   `SegmentedControl`, o `Button variant="nav"` e a navegação do catálogo (`.doc-nav`) já usavam.
   Era o único de fora: pílula cinza com texto branco, e um app copiou a regra da casa à mão.
   As cores saem da escala DA LATERAL (`--sidebar-accent`, `--sidebar-primary`), exatamente como o
   `.doc-nav a.active` — não da página. Foi a lição de 20/08/2026 sob a marca `lory`: com
   `--secondary`/`--primary` da página, a lateral escura desenhava as cores invertidas.
   O FIO não mora aqui: a lateral entrou na lista da regra da casa (`.is-selected::after`, mais
   abaixo), com o do `.doc-nav`. Copiar a regra faria duas cópias do mesmo fio divergirem. */
.sidebar-item[aria-current] { position:relative; background:var(--sidebar-accent); color:var(--sidebar-primary); font-weight:var(--weight-medium); }
.sidebar-item[aria-current] .icon { opacity:1; }
/* Alinha com o TEXTO do item: padding do painel (4) + padding do item (12) = 16px. Com o
   painel apertado, os 8px de antes deixavam a rubrica fora do prumo da lista. */
/* O rótulo de grupo também sai da escala da LATERAL, pelo mesmo motivo: `--subtle-foreground` é
   apagado contra a página, e contra um painel escuro num tema claro ele some. Derivado do próprio
   `--sidebar-foreground` em vez de token novo — a lateral não publica um "muted" dela. */
/* 72% e não 62% desde a 0.27.0 (ADR-0061): com a letra da paleta nova (#242424, menos preta) os 62%
   davam 4,4:1 sobre o branco — o axe pegou na varredura. 72% é o cinza de texto apagado da paleta. */
/* O título de grupo da lateral é o da referência (ADR-0067, decisão do Victor de 13/10/2026: "igual ao dela"):
   letra 14, peso médio, SEM maiúsculas, na cor do texto da lateral — mais forte que o item, que é
   esmaecido; 16 antes do grupo. Era 12, em maiúsculas espaçadas, esmaecido. */
.sidebar-group-label { margin:var(--space-4) var(--sidebar-item-x, var(--space-3)) var(--space-1); color:var(--sidebar-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
.sidebar-sub { padding-inline-start:var(--space-5); }
/* RECOLHIDA — a lateral vira trilho de ícones. O rótulo NÃO some do DOM: o React troca a
   classe dele por `.sr-only`, então quem usa leitor de tela continua ouvindo o nome. Ícone
   sozinho não nomeia nada, e essa é a falha clássica do padrão de trilho. */
.sidebar-collapsed { padding-inline:var(--space-2); }
/* NO TRILHO O ITEM É QUADRADO E CENTRADO, não uma linha esticada. Medido no fonte da referência
   em 18/08/2026: o botão de navegação só de ícone é 36×36, exatamente o nosso `--control-h-md`.
   Antes o item herdava `width:100%` e virava 71×36 dentro de um trilho de 88: um retângulo largo
   que, com o raio de linha, fechava nas pontas e lia como CÁPSULA. Quadrado é o que a referência
   desenha, e é o que o olho reconhece como botão de ícone. */
.sidebar-collapsed .sidebar-item { justify-content:center; width:var(--control-h-md); padding-inline:0; margin-inline:auto; }
/* recolhida, o item tem só a largura do ícone: com os 15px de cada lado o fio sumiria. */
.sidebar-collapsed .sidebar-item[aria-current]::after { inset-inline:var(--space-2); }
.sidebar-collapsed .sidebar-sub { padding-inline-start:0; }
/* O TOPO E O PÉ FIXOS (4-C, 23/10/2026) — o desenho das quinze laterais aprovadas pelo Victor em 21/10/2026 (item 107).
   Com `header` ou `footer`, a caixa não rola mais: só o meio (`.sidebar-body`) rola, e o topo e o pé ficam presos. Sem
   linha entre as partes (ADR-0072): o vão separa. Sem eles, nada muda — o HTML é o de sempre. */
.sidebar-with-parts { overflow:hidden; }
/* Na de canto, o topo e o pé ganham 12 da borda da janela, como nas quinze (a flutuante já tem a margem dela). */
.sidebar-flush.sidebar-with-parts { padding-block:var(--space-3); }
.sidebar-header, .sidebar-footer { flex:none; display:grid; gap:var(--space-2); }
.sidebar-header { padding-block-end:var(--space-2); }
.sidebar-body { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:var(--space-1); }
.sidebar-footer { gap:var(--space-3); padding-block-start:var(--space-3); }
/* A marca do app: o quadrinho na cor primária, com a letra na fonte de título, o nome e o subtítulo. */
.sidebar-brand { display:flex; align-items:center; gap:var(--space-3); min-width:0; padding:var(--space-2) var(--sidebar-item-x, var(--space-3)); }
.sidebar-brand-logo { display:grid; place-items:center; flex:none; inline-size:var(--control-h-md); block-size:var(--control-h-md); overflow:hidden; border-radius:var(--radius-lg); background:var(--primary); color:var(--primary-foreground); font-family:var(--font-heading); font-weight:var(--weight-bold); }
/* `plain` (da 8 à 10 das quinze): o desenho solto, sem o quadrinho, e o nome na fonte e no tamanho de título. */
.sidebar-brand-plain { gap:var(--space-2); }
.sidebar-brand-plain .sidebar-brand-logo { inline-size:auto; block-size:auto; overflow:visible; border-radius:0; background:transparent; color:inherit; }
.sidebar-brand-plain .sidebar-brand-name { font-family:var(--font-heading); font-size:var(--text-lg); font-weight:var(--weight-bold); }
.sidebar-brand-text, .sidebar-user-text { display:grid; flex:1; min-width:0; line-height:var(--leading-tight); }
.sidebar-brand-name, .sidebar-user-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sidebar-foreground); font-size:var(--text-sm); }
.sidebar-brand-description, .sidebar-user-description { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted-foreground); font-size:var(--text-xs); }
/* A pessoa: numa caixinha do texto a 6% (`--fill-1`), com o canto do item da lateral. */
.sidebar-user { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-3) var(--space-1); border-radius:calc(var(--radius-card) - var(--space-1)); background:var(--fill-1); }
/* Recolhida: a marca vira só o quadrinho, e a pessoa, a foto e a ação empilhadas, sem a caixinha. Os nomes vão para o
   leitor de tela (o React troca a classe por `.sr-only`, como o rótulo do item). */
.sidebar-collapsed .sidebar-brand { justify-content:center; padding-inline:0; }
/* A marca com a ação (0.44.0): o botão de recolher ao lado do nome; recolhida, ele desce para baixo do logo. */
.sidebar-collapsed .sidebar-brand-with-action { flex-direction:column; gap:var(--space-2); }
.sidebar-collapsed .sidebar-user { flex-direction:column; padding-inline:0; background:transparent; }
/* O BLOCO 2 DA LATERAL (25/10/2026) — o que faltava das quinze laterais que o Victor aprovou em 21/10/2026 (item 107), como
   variação: o padrão de hoje não muda. A referência principal não tem lateral; a anatomia e o comportamento são os da
   segunda da fila (o provedor, o atalho, os jeitos de recolher, a ação do grupo e do item), com a aparência da Aurea.
   4-E — a foto do item (o time, a pessoa) no lugar do ícone: 24, o degrau que cabe na linha de 36 com folga. */
.sidebar-item > .sidebar-avatar { --step-avatar:var(--space-6); --step-avatar-fs:var(--text-xs); flex:none; }
/* 4-E — a divisória entre seções: um vão, sem linha (ADR-0072). Ela parte a lista em duas; o vão soma 16 aos 4 de sempre. */
.sidebar-separator { flex:none; block-size:var(--space-4); }
/* 4-D — a ação do item ("⋯"): fora do link, presa à ponta da linha, no meio da altura dela. O texto do item para antes dela. */
.sidebar-item-with-action { position:relative; }
.sidebar-item-with-action > .sidebar-item { padding-inline-end:calc(var(--control-h-sm) + var(--space-2)); }
.sidebar-item-action { position:absolute; inset-block-start:0; inset-inline-end:var(--space-1); display:flex; align-items:center; block-size:var(--control-h-md); }
/* 4-D — o grupo que dobra e a ação do grupo ("+"): o nome e a ação numa fila, com a margem que o nome tinha sozinho. */
.sidebar-group-head { display:flex; align-items:center; gap:var(--space-1); margin:var(--space-4) var(--space-1) var(--space-1) var(--sidebar-item-x, var(--space-3)); }
.sidebar-group-head > .sidebar-group-label { flex:1; min-width:0; margin:0; }
.sidebar-group-toggle { display:flex; align-items:center; gap:var(--space-1); min-block-size:var(--control-h-xs); padding:0; border:0; border-radius:var(--radius-control); background:transparent; font:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium); text-align:start; cursor:pointer; }
.sidebar-group-toggle > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-group-caret { flex:none; opacity:.8; }
.sidebar-group-action { display:flex; align-items:center; gap:var(--space-1); flex:none; }
/* 4-A — A LATERAL SOLTA vai do topo da janela até embaixo, como a da referência: fora do `AppShell` não há barra de cima
   para reservar (o item 106 mediu: solta, a lateral ficava 56 mais baixa e mais curta, e o app tinha de zerar o
   `--topbar-height` à mão). O app que põe uma barra própria em cima dela diz a altura em `--sidebar-offset`. */
.sidebar:not(.app-shell > *) { --shell-top:calc(var(--sidebar-offset, 0px) + var(--space-4)); }
.sidebar-flush:not(.app-shell > *) { --shell-top:var(--sidebar-offset, 0px); }
/* 4-A — a trilha em cápsula: recolhida, o canto é o do controle, e não o do cartão. */
.sidebar-collapse-capsule.sidebar-collapsed { border-radius:var(--radius-control); }
/* 4-A — a que sai da tela: recolhida, ela some, e a trilha do shell vai a zero. O botão da junção fica dentro da tela, a 16
   da borda (ele ficaria cortado ao meio na borda da janela). */
.sidebar-collapse-offcanvas.sidebar-collapsed { display:none; }
/* `.sidebar` repetido na regra de propósito: a da rente recolhida (`.app-shell:has(> .sidebar-collapsed.sidebar-flush)`) vem
   depois na folha, com a mesma força, e deixava a trilha em 68 na rente que sai da tela (o teste do bloco 2 achou). */
.app-shell:has(> .sidebar.sidebar-collapsed.sidebar-collapse-offcanvas) { --sidebar-track:0px; }
.app-shell-collapsible:has(> .sidebar.sidebar-collapsed.sidebar-collapse-offcanvas) > .sidebar-toggle-slot { --toggle-x:calc(var(--space-4) + var(--control-h-xs) / 2); }
/* 4-H — o item atual nas alternativas do item 101. Todas tiram o fio da casa (o `segment-line` o põe de volta, no amarelo).
   `segment`: a cápsula da aba escolhida (ADR-0059), a letra na cor do texto e o peso normal, como a referência. Os tokens
   são os da PÁGINA (`--segment` e `--foreground`), aos pares: sob uma marca de lateral escura, a cápsula clara continua
   legível com a letra dela. */
.sidebar[class*="sidebar-indicator-"] .sidebar-item[aria-current]::after { display:none; }
:is(.sidebar-indicator-segment,.sidebar-indicator-segment-dot,.sidebar-indicator-segment-line) .sidebar-item[aria-current] { --sidebar-primary:var(--foreground); --primary-emphasis:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); color:var(--foreground); font-weight:var(--weight-regular); }
.sidebar-indicator-segment-dot .sidebar-item[aria-current] > .sidebar-label::before { content:""; display:inline-block; inline-size:var(--space-2); block-size:var(--space-2); margin-inline-end:var(--space-2); border-radius:var(--radius-full); background:var(--primary); vertical-align:middle; }
.sidebar.sidebar-indicator-segment-line .sidebar-item[aria-current]::after { display:block; background:var(--primary); }
/* `subtle`: só o cinza da lateral e a letra cheia dela, sem cor de marca. ⚠ É o mesmo cinza do ponteiro em cima (o item 101
   anotou): o item atual só se distingue pela letra e pelo ícone cheio. */
.sidebar-indicator-subtle .sidebar-item[aria-current] { --sidebar-primary:var(--sidebar-foreground); --primary-emphasis:var(--sidebar-foreground); background:var(--sidebar-accent); color:var(--sidebar-foreground); }
/* 4-F e 4-G — a trilha das seções e o painel. A lateral vira uma fila de duas caixas: a trilha, em cápsula (a 6 e a 7 das
   quinze), e o painel ao lado, um cartão da largura da lateral. As duas pintam a cor da lateral; a caixa de fora some. */
.sidebar[class*="sidebar-panel-"] { flex-direction:row; align-items:stretch; gap:var(--space-2); padding:0; overflow:visible; border-width:0; border-radius:0; background:transparent; }
.sidebar-rail-box { display:flex; flex-direction:column; gap:var(--space-1); flex:none; inline-size:var(--sidebar-rail); min-block-size:0; padding:var(--space-1) var(--space-2); overflow:hidden auto; border-radius:var(--radius-control); background:var(--sidebar); }
.sidebar-rail-box .sidebar-item { justify-content:center; width:var(--control-h-md); padding-inline:0; margin-inline:auto; }
.sidebar-rail-box .sidebar-item[aria-expanded="true"]:not([aria-current]) { background:var(--sidebar-accent); color:var(--sidebar-foreground); }
/* O painel ENCOLHE quando falta lugar (a 320, ou na gaveta do celular, de 296): a trilha fica, e ele toma o resto, até a largura
   da lateral. Fixo em 264, a trilha e ele (340) passavam da gaveta e da tela — a varredura do site achou a 320. */
.sidebar-panel { display:flex; flex-direction:column; gap:var(--space-1); flex:0 1 var(--sidebar-width); min-inline-size:0; min-block-size:0; padding:var(--space-1); overflow:auto; border-radius:var(--radius-card); background:var(--sidebar); color:var(--sidebar-foreground); }
.sidebar-panel[hidden] { display:none; }
.sidebar-panel-title { margin:var(--space-2) var(--sidebar-item-x, var(--space-3)) var(--space-1); font-family:var(--font-heading); font-size:var(--text-lg); font-weight:var(--weight-bold); line-height:var(--leading-tight); }
.app-shell:has(> .sidebar-panel-docked) { --sidebar-track:calc(var(--sidebar-rail) + var(--space-2) + var(--sidebar-width) + var(--space-4)*2); }
.app-shell:has(> .sidebar-panel-docked.sidebar-collapsed), .app-shell:has(> .sidebar-panel-overlay) { --sidebar-track:calc(var(--sidebar-rail) + var(--space-4)*2); }
/* O painel por cima (4-G): a janelinha da Aurea, da largura da lateral, com a pele da lista dela. Os tokens da lateral passam a
   ser os da janelinha: sob uma marca de lateral escura, a janelinha é clara, e a letra da lateral sumiria nela. */
.popover.sidebar-flyout { --sidebar-item-x:var(--space-4); --sidebar-foreground:var(--popover-foreground); --sidebar-accent:var(--fill-1); --sidebar-primary:var(--primary-emphasis); inline-size:var(--sidebar-width); max-inline-size:calc(100vw - var(--space-8)); padding:var(--space-1); gap:var(--space-1); }
/* Estas regras tocam `.app-shell` porque a coluna do grid é do shell: a
   lateral não consegue encolher a própria trilha. `--sidebar-rail` continua sendo a largura
   do PAINEL; a flutuante soma as margens na trilha, a rente usa o token cru.
   O `>` NÃO É ENFEITE, e quem achou isso foi o navegador em 06/08/2026. Escrita como
   `:has(.sidebar-collapsed)`, a regra casa com QUALQUER descendente — e a página do catálogo
   que mostra uma lateral recolhida como EXEMPLO, dentro do <main>, recolhia a lateral de
   verdade do documento inteiro. Medido: a coluna do shell saía 88px numa página que não pediu
   nada. Gate nenhum via, porque `sidebar.html` não tem baseline de pixel. */
.app-shell:has(> .sidebar-collapsed) { --sidebar-track:calc(var(--sidebar-rail) + var(--space-4)*2); }
.app-shell:has(> .sidebar-collapsed.sidebar-flush) { --sidebar-track:var(--sidebar-rail); }
/* AN-01 (03/10/2026): O BOTÃO DE RECOLHER, no alto da junção do menu com o conteúdo — o lugar que o
   Victor marcou. Só com `sidebarCollapsible`, e por isso mora sob `.app-shell-collapsible`: o
   `.app-shell` cru (o catálogo escrito à mão o usa como raiz) não muda.
   O botão é um item da grade na MESMA célula da lateral, e por isso a lateral e o conteúdo ganham
   lugar escrito: sem ele, o posicionamento automático da grade empurraria a lateral para a coluna
   do conteúdo. A caixa do botão é de tamanho zero na borda da coluna e copia da lateral a margem de
   cima e o `--shell-top`, então gruda junto quando a página rola; o botão se centra nela.
   No alto: o centro do botão na altura do centro do primeiro item da lateral (borda + `space-1` +
   metade do `control-h-md`). Na junção: no meio do vão de `space-4` entre as duas caixas, ou em cima
   do fio, na lateral rente. */
.app-shell-collapsible > .sidebar { grid-column:1; grid-row:2; }
.app-shell-collapsible > .content { grid-column:2; grid-row:2; }
.sidebar-toggle-slot { --toggle-top:calc(var(--topbar-height) + var(--space-4)*2); --toggle-x:calc(var(--space-4) / -2); --toggle-edge:var(--border-width);
  grid-column:1; grid-row:2; justify-self:end; align-self:start; position:sticky; top:var(--toggle-top); z-index:var(--z-sticky); width:0; height:0; margin-block-start:var(--space-4); }
.app-shell-flush > .sidebar-toggle-slot { --toggle-top:calc(var(--topbar-height) + var(--space-05)); margin-block-start:var(--space-05); }
.app-shell-collapsible:has(> .sidebar-flush) > .sidebar-toggle-slot { --toggle-top:var(--topbar-height); --toggle-x:0px; --toggle-edge:0px; margin-block-start:0; }
/* O botão se centra por conta, com o lado dele escrito, e não por `translate` — que é físico e pede
   `:dir(rtl)` para virar, e o empacotador do app reescreve `:dir()` (medido no Vite, 03/10/2026).
   Com as margens lógicas ele vira sozinho. O lado é o `control-h-xs` do `IconButton size="xs"`, e o
   alvo de toque com o dedo (`target-min`, a mesma troca do `.btn-icon` lá embaixo). A seta, quem
   vira é o React, pela direção do provedor. */
.sidebar-toggle-slot > .btn.sidebar-toggle { --toggle-size:var(--control-h-xs); --btn-bg:var(--card); --btn-border:var(--border-strong); position:absolute; inline-size:var(--toggle-size); block-size:var(--toggle-size); min-inline-size:0; min-block-size:0;
  inset-block-start:calc(var(--toggle-edge) + var(--space-1) + var(--control-h-md) / 2 - var(--toggle-size) / 2); inset-inline-start:calc(var(--toggle-x) - var(--toggle-size) / 2); }
@media (pointer:coarse) { .sidebar-toggle-slot > .btn.sidebar-toggle { --toggle-size:var(--target-min); } }
@media (max-width:1023px) {
  .sidebar-toggle-slot { display:none; }
  .app-shell-collapsible > .sidebar, .app-shell-collapsible > .content { grid-column:auto; grid-row:auto; } }
/* A LATERAL ATÉ O TOPO (MNT-34, `AppShell layout="sidebar"`, 23/10/2026) — o pedido do app de rede (*"sidebar de canto e
   que vá até o topo"*) e o PV-04 de um segundo app, na bancada aprovada pelo Victor (*"mantenha o atual e faça também os
   outros 4"*). A marca mora no topo da lateral (o `header` da `Sidebar`, 4-C); a barra de cima só existe se o app passar
   `topbar`, e fica só em cima do conteúdo (a coluna 2), como no sistema que serviu de modelo. Uma linha só na grade. */
.app-shell-lateral { grid-template-rows:none; }
.app-shell-lateral > .app-shell-column { grid-column:2; grid-row:1; min-width:0; display:flex; flex-direction:column; }
.app-shell-lateral > .app-shell-column > .content { flex:1; }
.app-shell-lateral.app-shell-collapsible > .sidebar { grid-row:1; }
/* A lateral começa no topo da janela: a flutuante com a margem dela, a de canto encostada. Só na tela larga — abaixo de
   1024 ela é gaveta, com a altura e a margem da gaveta. */
@media (min-width:1024px) {
  .app-shell-lateral > .sidebar { top:var(--space-4); height:calc(100vh - var(--space-4) * 2); max-height:none; }
  .app-shell-lateral > .sidebar-flush { top:0; height:100vh; }
}
/* O respiro: a de canto não tem margem, e o conteúdo encostava nela (o MNT-34 mediu no app). */
.app-shell-lateral:has(> .sidebar-flush) > .app-shell-column > .content { margin-inline-start:var(--space-4); }
/* O botão de recolher é o das quinze laterais aprovadas (`AppShell.SidebarToggle`): o botão de ícone sem fundo, a 12 do
   título — na barra do conteúdo, o primeiro dela. A bolinha da junção (ADR-0056) fica só no arranjo de sempre. Abaixo de
   1024 ele some: a lateral é gaveta, e quem abre é o botão da gaveta. */
.app-shell-lateral > .app-shell-column > .topbar { gap:var(--space-3); justify-content:flex-start; }
@media (max-width:1023px) { .btn.sidebar-collapse-trigger { display:none; } }
/* Sem barra, abaixo de 1024, uma faixa com o botão da gaveta e a marca (a altura da barra pequena, 56). */
.app-shell-narrow-bar { display:none; }
@media (max-width:1023px) {
  .app-shell-lateral > .app-shell-column { grid-column:1; }
  .app-shell-narrow-bar { display:flex; align-items:center; gap:var(--space-3); min-height:calc(var(--space-12) + var(--space-2)); padding-inline:var(--space-4); }
}

/* ── Navegação inferior — o vocabulário de APLICATIVO ───────────────────────────────
   Lacuna estrutural medida no `CONSUMIDOR-1.md` §4.1: `.topbar` e `.sidebar` são
   vocabulário de DESKTOP, e aplicativo não navega assim.
   `sticky` e NÃO `fixed`, e a razão é o catálogo: fixo escapa do contêiner e a prévia
   cobriria a página inteira — o mesmo defeito que o `:has(> …)` da linha acima pagou.
   Grudado no fim do fluxo dá o mesmo efeito e degrada para estático sem rolagem.
   O `max()` do recuo inferior é o que impede a barra de ficar SOB o indicador de tela
   cheia do iPhone. Ele só tem efeito se o consumidor declarar `viewport-fit=cover` na
   meta viewport (está na ficha); sem isso `env()` devolve 0 e o `max()` entrega o
   espaço normal — degrada, não quebra. Nenhuma das nove referências usa isto: medido,
   `grep -ri safe-area-inset Referencia/` = 0. Veio de pesquisa, pelo BUILDING.md §2
   passo 4. */
/* A folga do sistema fica POR FORA da pilula: `margin-bottom`, nao `padding-bottom`. Conserto de
   19/09/2026, medido em Android com os tres botoes — como recheio, os ~48 pontos da faixa do
   sistema faziam a pilula crescer para baixo e a barriga dela ficava atras dos botoes. A borda de
   baixo agora fica `--space-4` acima da area do sistema, em qualquer aparelho.
   A variante `edge` reverte isto mais abaixo, e la o recheio e' o certo. */
.bottom-nav { --bottomnav-ring:calc(var(--icon-lg) + var(--space-1)); --bottomnav-surface:var(--card); position:sticky; bottom:0; z-index:var(--z-sticky); display:flex; gap:var(--space-1); margin:var(--space-4); margin-bottom:calc(var(--space-4) + env(safe-area-inset-bottom)); padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-control); background:var(--card); color:var(--card-foreground); box-shadow:var(--shadow-md); }
/* `--control-h-lg` e não `--control-h-md`: alvo de toque. O md dá 36px em comfortable e
   o alvo confortável de dedo é maior — com o recuo, o item renderiza acima de 44px. */
.bottom-nav-item { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-05); min-height:var(--control-h-lg); padding:var(--space-1); border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); font:inherit; font-size:var(--text-xs); text-align:center; text-decoration:none; cursor:pointer; }
.bottom-nav-item .icon { flex:none; opacity:.8; }
.bottom-nav-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* O CONTADOR PENDURA NO ÍCONE — canto superior da ponta, encostando na borda dele.
   A primeira versão pendurava no ITEM, com `inset-inline-start:50%`: em barra de coluna passa
   despercebido, e na variante de LINHA os 50% do item caem no meio do RÓTULO. O Victor achou
   assim, com o número cobrindo o nome inteiro (17/08/2026).
   A pesquisa que corrigiu: uma das referências de desenho põe o distintivo "sobre o ícone, no
   canto superior direito", e os guias de barra de abas do iOS dizem o mesmo com a razão junto — encostar na
   borda é para ser visto, sobrepor conteúdo é hesitação num controle que se usa o tempo todo.
   `inset-inline-end` e não `right`: o eixo espelha sozinho em RTL, e transform não espelharia.
   O `min-` da caixa é para o contador ter onde se ancorar quando o item não tem ícone.
   A CAIXA É `--icon-lg` (24px) e o contador `--space-4` (16px) porque a PROPORÇÃO foi medida
   em aplicativo que roda: um de mensagens, um de vídeo e duas lojas, nos prints do Victor de
   17/08/2026 — ícone ~24, contador ~16, razão **0,67**. A primeira versão tinha ícone de 16 e
   contador de 18: razão 1,12, o contador MAIOR que o ícone. Foi o que ele viu e mandou refazer. */
/* A MOLDURA É FIXA E VALE PARA OS SETE INDICADORES. Medido em 20/08/2026, e quem viu foi o
   Victor: os três indicadores redondos saíam com a BARRA MAIS LARGA que os outros quatro, porque
   só eles davam largura à moldura e a largura do item vinha do conteúdo. Trocar de indicador
   mudava a medida da barra — que é o defeito estrutural que esta reescrita existe para acabar.
   O achado 8 da auditoria pede a mesma coisa por outro caminho: o contador tem de se ancorar na
   caixa do ícone e ficar PREVISÍVEL, e caixa que muda de tamanho conforme a variante não é
   ancoragem previsível. Agora quem pinta é o indicador; quem MEDE é sempre esta regra.

   O NÚMERO É PESQUISADO, e a exigência é do Victor em 20/08/2026: *"vá pesquisar e descubra qual
   padrão é usado, pesquise não invente medidas"*. Ele pegou 2.25rem saído da minha cabeça.
   `2rem` = 32px é a ALTURA DO INDICADOR ATIVO de uma das referências de desenho (a especificação
   da barra de navegação dela e a doc da implementação dela para Android: indicador 64×32dp, canto
   totalmente arredondado, sobre um ícone de 24dp). 24 de ícone dentro de 32 deixa 4 de folga de
   cada lado, que é a mesma folga de 4dp que essa referência usa entre o indicador e o rótulo.
   O ALVO DE TOQUE não é este número e continua sendo o `min-height` do item: `--control-h-lg`
   entrega 42px em comfortable e 48 em spacious, contra os 44pt mínimos das diretrizes do iOS e
   os 48dp da mesma referência. A moldura é a caixa do DESENHO; o alvo é o item inteiro. */
.bottom-nav-mark { position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:var(--space-8); height:var(--bottomnav-ring); border-radius:var(--radius-control); }
/* A BARRA MAIS BAIXA — pedido do Victor, 30/09/2026, aprovado pela imagem: *"ele é muito largo, e
   é assim por conta da distância entre o ícone em cima e o texto embaixo"*. A moldura de 32 só
   serve aos quatro indicadores REDONDOS, em que ela vira o círculo. Nos outros três ela era folga
   vazia: 4 em cima e 4 embaixo do ícone de 24, mais o vão de 4 até o rótulo — 9 medidos entre o
   ícone e o texto. Fora dos redondos (e na barra sem classe de indicador, a do HTML puro) a
   moldura fica da altura do ícone, e o vão do item cai para
   `--space-05`. A largura continua 32: é ela que dá o canto ao contador. O mesmo conserto está no
   nativo (`navigation.tsx`). ~~A folga de 4dp da referência entre o indicador e o rótulo~~ vale só para
   os redondos agora. */
.bottom-nav-mark { height:var(--icon-lg); }
/* A BARRA NA MESMA ALTURA EM TODOS OS FORMATOS — pedido do Victor, 27/10/2026 (*"todos esses tem a altura maior que o
   restante ... quero todos da mesma altura do none, subtle, pill, expand"*), e a forma escolhida na bancada, entre duas
   rodando: *"B: o círculo e a cápsula com 28"* (ADR-0084). O círculo e a cápsula tinham 32 em volta do ícone de 24, e a
   barra media 62 (o `circle-bold`, 58) contra 54 nos outros. Agora são 28 (`--bottomnav-ring`), e passam 2 por fora da
   caixa em cima e embaixo (a margem negativa): o item fica com a altura do ícone, como nos outros. A largura das molduras
   que não são redondas continua 32 (`--space-8`): é ela que dá o canto ao contador. Igual no `navigation.tsx`. */
.bottom-nav-ind-circle .bottom-nav-mark, .bottom-nav-ind-circle-raised .bottom-nav-mark, .bottom-nav-ind-circle-outline .bottom-nav-mark {
  width:var(--bottomnav-ring); height:var(--bottomnav-ring); margin-block:calc((var(--icon-lg) - var(--bottomnav-ring)) / 2); }
/* `inline-flex` no envoltório: como `<span>` solto ele é caixa de LINHA, e mede a entrelinha do
   item (18px) em vez do contador que carrega (16px). A diferença não aparece na tela — aparece
   na medição, e medição errada é o que faz a razão parecer 0,75 quando é 0,67. */
.bottom-nav-badge { position:absolute; display:inline-flex; inset-block-start:calc(var(--space-05)*-1); inset-inline-end:calc(var(--space-05)*-1); }
/* O contador da barra usa `<Badge size="xs">`, e NÃO uma sobrescrita local de `.badge` aqui.
   A primeira versão sobrescrevia, e o `geometry.spec` reprovou com razão: `.badge` tem altura
   ÚNICA por contrato, e uma regra contextual fazia o mesmo nome medir 16px numa página e 24px
   noutra. Tamanho é do componente, não do lugar onde ele cai. */
/* SEM NÚMERO, É PONTO. Três dos quatro aplicativos medidos usam o ponto puro para "tem coisa
   nova" — o de vídeo (na aba de inscrições) e o de mensagens (em duas abas). O consumidor pede pelo vazio:
   `badge: ""`. A cor é a de AVISO e não a da marca, também como nos quatro: o contador não é
   decoração do item atual, é alerta.
   ⚠ Ponto não tem nome acessível — não há o que ler. Quem usa ponto põe o sentido no RÓTULO do
   item (`label: <>Updates <span className="sr-only">(new)</span></>`). Está na ficha. */
.bottom-nav-badge:empty { width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:var(--primary); }
/* SEM REALCE DE PASSAR O MOUSE, e isso é decisão do Victor em 20/08/2026: *"essa bola cinza
   que aparece quando mouse passar em cima pode retirar, é um recurso irrelevante no celular"*.
   Ele tem razão pelo escopo do componente: esta barra é o chrome de aplicativo de TELEFONE, e o
   dedo não tem estado de passar por cima. Pior: o realce cinza desenhava a MESMA forma que o
   indicador `subtle` usa para dizer "você está aqui", então passar o mouse por um item inativo
   fingia seleção — dois significados no mesmo desenho.
   O FOCO CONTINUA, e a diferença não é de gosto: `:focus-visible` é o que o teclado enxerga, vem
   do contrato de foco global e o `geometry.spec` cobra. Tirar hover é tirar enfeite; tirar foco
   seria tirar acesso. */
/* O PESO DO RÓTULO NÃO MUDA COM A ESCOLHA — 03/10/2026, pedido do Victor: *"quero ele estático,
   apenas os botões dinâmicos"*. Era `--weight-medium` só no escolhido, e texto mais grosso é texto
   mais LARGO: no `width="content"` a barra mudava de largura a cada toque, nos sete indicadores
   (medido: 247,7 contra 249,0). Agora todos os rótulos são `--weight-medium` — o rótulo médio de
   uma das referências de desenho, que na revisão mais nova também deixou de engrossar o escolhido. O que marca a escolha é a
   cor, o ícone cheio e a forma. Quem cobra: `geometry.spec`, "a barra não se mexe". */
.bottom-nav-item { font-weight:var(--weight-medium); }
/* A ALTURA DE REFERÊNCIA — 03/10/2026, pedido do Victor (*"ainda acho ele muito largo comparado a
   bottomnav como do [aplicativo de mensagens]"*; "largo" é a grossura). Medido no fonte desse
   aplicativo para Android: pílula de 56, botão de 48, ícone de 24, nome de 12 numa
   linha de 16. O recheio de cima
   e de baixo cai de `--space-1` para `--space-05`, e a linha do nome é a desse aplicativo: o tamanho
   mais `--space-1` (12 + 4). Com a do corpo (1,5) ela media 18; com a `--leading-tight` (14,4) a
   perna do "j" passava 1 da caixa, e a caixa corta (`overflow:hidden`, para as reticências).
   Fica 56 nos indicadores sem moldura e 64 nos que têm a de 32 — a altura de uma das referências
   de desenho. O mesmo no `navigation.tsx`. */
.bottom-nav-item { padding-block:var(--space-05); }
/* O NOME COLADO NO ÍCONE — 03/10/2026, pedido do Victor (*"o texto pode ficar mais próximo do
   ícone"*): vão ZERO, como no aplicativo de mensagens medido, em que o nome começa onde a caixa do ícone acaba. O
   `--space-05` de 30/09/2026 somava 2 aos 2 de folga da linha do nome: medido de tinta a tinta,
   eram 9 no `pill` e 13 no `circle-bold`. No `circle-bold` a moldura de 32 também sai (logo
   abaixo): lá o círculo é o disco, não ela. */
.bottom-nav-item, .bottom-nav-disc { gap:0; }
.bottom-nav-label { line-height:calc(1em + var(--space-1)); }
.bottom-nav-item[aria-current] { color:var(--foreground); }
.bottom-nav-item[aria-current] .icon { opacity:1; }
/* ── A GRAMÁTICA: DOIS EIXOS, E ELES NÃO SE MISTURAM ────────────────────────────────
   Reescrito em 20/08/2026 pela auditoria de UI/UX do BottomNav que o Victor encomendou.
   O achado dela não é estético, é ESTRUTURAL: `flat`, `surface`, `pill` e `dock` eram quatro
   implementações conceitualmente separadas — cada uma dizia "esta é a página atual" com uma
   linguagem diferente (uma pela cor, outra por cápsula cinza, outra por bloco amarelo), e duas
   delas escondiam o rótulo. Trocar de variante trocava o MODELO MENTAL do componente, não a
   forma dele.

   Agora são dois eixos independentes, e é isso que faz variante ser variante:

   • LAYOUT (a barra)   — `floating` (padrão, pílula solta) e `edge` (encostada, fio em cima).
   • INDICADOR (o item) — a FORMA que marca o atual. A SEMÂNTICA é sempre a mesma: ouro.

   O que TODO indicador compartilha, e por isso vive aqui em cima e não dentro de cada um:
   altura de alvo, moldura do ícone, tipografia, ancoragem do contador, rótulo sempre visível.
   A auditoria pedia exatamente isso — "a variante altera a forma, não toda a lógica visual".

   O RÓTULO NUNCA SOME em nenhum indicador. Era o defeito 6/7 da auditoria: a `dock` escondia
   todos e a `pill` escondia os inativos, e as sete telas que o Victor desenhou mostram o rótulo
   em todos os itens, nas sete. Ícone sozinho só funciona quando o símbolo é inequívoco, e
   `Garage`/`Fuel`/`Service` não são.

   `--bottomnav-ring` é a moldura do ícone quando o indicador é redondo. Válvula no idioma do
   `--chart-h` e do `--datagrid-max-h`: quem hospeda decide, o componente não vira prop nova. */
/* `edge` encosta na borda, entao a folga do sistema volta a ser RECHEIO — por fora ela deixaria
   uma faixa de fundo entre a barra e o pe' da tela. `max` e nao soma, como sempre foi. */
.bottom-nav-edge { --bottomnav-surface:var(--background); margin:0; padding-inline:0; padding-bottom:max(var(--space-1),env(safe-area-inset-bottom)); border-width:1px 0 0; border-radius:0; background:var(--background); box-shadow:none; }
/* width="content" — R-08, 24/09/2026: a pílula do tamanho das abas, no centro, em vez de ir de
   uma borda à outra. Só no floating (a edge encosta na borda). As abas deixam o flex:1 — com ele
   num recipiente do tamanho do conteúdo elas se espalham ou somem — e medem o próprio conteúdo;
   o mínimo é o alvo de toque da própria aba (--control-h-lg). */
.bottom-nav-content:not(.bottom-nav-edge) { inline-size:fit-content; max-inline-size:calc(100% - 2 * var(--space-4)); margin-inline:auto; }
.bottom-nav-content:not(.bottom-nav-edge) .bottom-nav-item { flex:0 1 auto; min-width:var(--control-h-lg); padding-inline:var(--space-3); }
/* `--primary-emphasis` e não `--primary`: sem fundo, a marca vira TEXTO, e o amarelo puro
   sobre o claro não se lê. É o mesmo token que o `.badge-primary` já usa por essa razão. */
.bottom-nav-ind-none .bottom-nav-item[aria-current] { color:var(--primary-emphasis); }
.bottom-nav-ind-none .bottom-nav-item[aria-current] .icon { opacity:1; }
/* SUAVE e PÍLULA envolvem ícone E rótulo — muda só o raio. O fundo é o amarelo a 12%, a mesma
   receita do `.badge-primary`, e não um cinza: a auditoria mediu que a cápsula cinza da antiga
   `surface` tirava a cor da marca justo do estado mais importante da barra. */
.bottom-nav-ind-subtle .bottom-nav-item[aria-current],.bottom-nav-ind-pill .bottom-nav-item[aria-current] { background:color-mix(in srgb,var(--primary) 12%,transparent); color:var(--primary-emphasis); }
.bottom-nav-ind-subtle .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-pill .bottom-nav-item[aria-current] .icon { opacity:1; }
.bottom-nav-ind-subtle .bottom-nav-item { border-radius:calc(var(--radius-card) - var(--space-1)); }
.bottom-nav-ind-pill .bottom-nav-item { border-radius:var(--radius-control); }
/* OS QUATRO REDONDOS envolvem SÓ O ÍCONE, e o rótulo fica embaixo, fora da forma. É o que as
   quatro telas do Victor mostram e o que um aplicativo de mensagens faz rodando; pintar o item
   inteiro não aparece em nenhum dos dois lugares. A moldura vira quadrado de lado fixo para ser
   CÍRCULO e não elipse — o rótulo é que é largo, e ele está fora daqui. */
.bottom-nav-ind-circle .bottom-nav-mark,.bottom-nav-ind-circle-raised .bottom-nav-mark,.bottom-nav-ind-circle-outline .bottom-nav-mark { border-radius:var(--radius-full); }
.bottom-nav-ind-circle .bottom-nav-item[aria-current],.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current],.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] { color:var(--primary-emphasis); }
.bottom-nav-ind-circle .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current] .icon,.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .icon { opacity:1; }
.bottom-nav-ind-circle .bottom-nav-item[aria-current] .bottom-nav-mark { background:color-mix(in srgb,var(--primary) 14%,transparent); }
/* ELEVADO: a moldura é uma superfície PRÓPRIA sobre a barra — por isso `--popover` e sombra, e
   não uma cor de fundo. É o único indicador que usa profundidade em vez de cor para separar. */
.bottom-nav-ind-circle-raised .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--popover); box-shadow:var(--shadow-md); }
.bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .bottom-nav-mark { border:1px solid transparent; background:color-mix(in srgb,var(--primary-emphasis) 10%,transparent); }
/* CHEIO é o único que preenche com o amarelo sólido, e por isso é o único que troca o primeiro
   plano inteiro para `--primary-foreground` — ícone, rótulo e contador juntos dentro da forma.
   A auditoria recusou a antiga `pill` sólida (achado 5: "o ativo assume presença de CTA"), e a
   diferença aqui é a FORMA: círculo do tamanho do alvo de toque lê como destino marcado; cápsula
   larga, esticada pelo rótulo, lê como botão de ação primária dentro da navegação. */
/* 3.5rem = 56px, e também é número de fora: é a largura do indicador ativo de uma das referências
   de desenho (56dp) e a altura do indicador expandido na mesma doc. É a única forma aqui que
   envolve ícone E rótulo, então usa a medida expandida e não a de 32. */
/* `padding-inline: space-1` — o recheio de sempre do item (`.bottom-nav-item`). No `width="content"`
   o item ganha `space-3` dos lados, e dentro dos 56 sobravam 32 para o rótulo: "Avisos" (35)
   saía "Avis…". Medido em 02/10/2026, no navegador e no nativo; igual no `navigation.tsx`. */
/* ~~O disco ERA o item escolhido~~ (até a `0.16.1`): ele media 56 e os outros mediam o conteúdo,
   então trocar de aba mudava a largura da barra (249 a 257 no app, medido em 03/10/2026) e, no
   `full`, os outros itens andavam. Agora o disco é uma caixa DENTRO do item (`.bottom-nav-disc`),
   em todos os itens, e o recheio passa do item para ele: o item mede o mesmo escolhido ou não, e a
   altura da barra não muda. O mesmo no `navigation.tsx`. */
.bottom-nav.bottom-nav-ind-circle-bold .bottom-nav-item { padding:0; }
/* O disco perdeu a altura mínima e o recheio de cima e de baixo caiu para `--space-05` (27/10/2026, a barra na mesma
   altura — acima): 56 × 44, e a barra fica em 54 como as outras. Era 56 × 48. */
.bottom-nav-disc { display:flex; flex-direction:column; align-items:center; justify-content:center; inline-size:var(--bottomnav-bold,3.5rem); max-inline-size:100%; padding:var(--space-05) var(--space-1); border-radius:var(--radius-full); }
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] { color:var(--primary-mark); }
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc { background:var(--primary); }
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .icon { opacity:1; }
/* O contador do `circle-bold` INVERTE, como o do `.btn-primary`, e a volta atrás está medida.
   Tentei em 20/08/2026 deixá-lo dourado com um anel da cor da barra em volta — é o que as telas
   do Victor mostram. O gate de contraste reprovou no tema CLARO: sobre o amarelo sólido, nem o
   fundo do contador nem o anel branco chegam a 3:1. No escuro passava, e é assim que este defeito
   se esconde. Fio fino não substitui contraste quando as duas cores são claras. */
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
.bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-badge { color:var(--primary-mark); }
/* ── CÁPSULA (`capsule`) — a "A" da bancada do Victor, 03/10/2026: o modelo de uma das referências ─
   A moldura do ícone vira a cápsula de 56 × 32 do indicador ativo dessa referência
   (`--bottomnav-bold` × `--bottomnav-ring`), em TODOS os itens; só a do escolhido é pintada, de
   amarelo sólido. O rótulo fica embaixo, fora dela — é isso que a separa do antigo bloco amarelo
   que a auditoria de 20/08/2026 recusou (achado 5): a forma não estica com o nome.
   O contador fica no canto do ÍCONE, e não da cápsula: sem a cápsula pintada ele ficaria solto,
   longe do sino. São os (56 − 32) / 2 a mais para dentro. E ele INVERTE sobre o amarelo, pela
   mesma razão medida do `circle-bold`, logo acima. */
/* 56 × 28 desde 27/10/2026 (a barra na mesma altura, acima): como o círculo, ela passa 2 por fora da caixa. */
.bottom-nav-ind-capsule .bottom-nav-mark { width:var(--bottomnav-bold,3.5rem); height:var(--bottomnav-ring); margin-block:calc((var(--icon-lg) - var(--bottomnav-ring)) / 2); border-radius:var(--radius-full); }
.bottom-nav-ind-capsule .bottom-nav-badge { inset-inline-end:calc((var(--bottomnav-bold,3.5rem) - var(--bottomnav-ring)) / 2 - var(--space-05)); }
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .bottom-nav-mark { background:var(--primary); color:var(--primary-mark); }
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .icon { opacity:1; }
.bottom-nav-ind-capsule .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
/* No `content`, o recheio de sempre (`--space-1`) e não o `--space-3`: com ele cada item teria 80. */
.bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-capsule .bottom-nav-item { padding-inline:var(--space-1); }
/* ── EXPANDE (`expand`) — a "C" da bancada do Victor, 03/10/2026 ───────────────────────────────
   Os outros itens mostram só o ícone; o escolhido vira cápsula amarela com o nome ao lado.
   ⚠ É a exceção à regra "o rótulo nunca some" (auditoria de 20/08/2026, achado 6/7), por ordem do
   Victor: o nome dos não escolhidos sai da TELA e fica para o leitor de tela (o componente põe a
   `.sr-only` nele), então o link continua com nome.
   É o ÚNICO em que o botão escolhido cresce — os botões andam, a BARRA não: a vaga do escolhido é
   FIXA, e não do tamanho do nome. Ícone + vão (`--space-2`) + lugar do nome (`--space-20`) +
   recheio (`--space-3` dos dois lados) = 136. Nome maior que 80 termina em "…". */
.bottom-nav-ind-expand .bottom-nav-item { flex-direction:row; gap:var(--space-2); min-width:var(--target-min); min-height:var(--target-min); padding:0; }
.bottom-nav-ind-expand .bottom-nav-mark { width:var(--icon-lg); }
.bottom-nav-ind-expand .bottom-nav-label { font-size:var(--text-sm); }
.bottom-nav-ind-expand .bottom-nav-item[aria-current] { flex:none; inline-size:calc(var(--icon-lg) + var(--space-2) + var(--space-20) + 2 * var(--space-3)); padding-inline:var(--space-3); background:var(--primary); color:var(--primary-mark); }
.bottom-nav-ind-expand .bottom-nav-item[aria-current] .icon { opacity:1; }
.bottom-nav-ind-expand .bottom-nav-item[aria-current] .badge { background:var(--primary-mark); color:var(--primary); border-color:transparent; }
.bottom-nav-content:not(.bottom-nav-edge).bottom-nav-ind-expand .bottom-nav-item:not([aria-current]) { flex:none; inline-size:var(--target-min); padding-inline:0; }

/* ── A LINHA DE LISTA TOCÁVEL (§4.3 do CONSUMIDOR-1) ──────────────────────────
   A LISTA NÃO PINTA SUPERFÍCIE. Quem dá o card é o `Card`, e repintar aqui seria um segundo
   lugar para a mesma coisa — a `DIRECTION.md` §3.9 diz que composto REUSA o menor.
   E SEM DIVISOR entre as linhas, que é decisão e não esquecimento: um traço ENTRE linhas promete
   grade, e quem agrupa é a superfície de fora.
   ⚠ Até 24/09/2026 este comentário dizia também que "o realce desta casa é a PÍLULA, e pílula com
   traço embaixo se contradizem". Era falso: cinco seletores da casa faziam pílula com fio, e desde
   a A-05 a lateral também. O fio embaixo do item ATUAL não é divisor — é a marca de "selecionado",
   uma por lista, e não promete grade nenhuma. */
.nav-list { display:flex; flex-direction:column; gap:var(--space-05); margin:0; padding:0; list-style:none; }
/* ── O RAIO DA LINHA SAI DE UMA CONTA, NÃO DE UM NÚMERO ─────────────────────────────
   `raio do filho = raio do pai − padding do pai`. É o que faz o vão ser CONSTANTE na curva; sem
   isso a curva da linha e a curva do painel divergem e o olho vê o desalinhamento antes de
   qualquer medição — foi o Victor que achou, riscando o canto num print (18/08/2026).
   POR QUE A PÍLULA NÃO SERVE AQUI, medido: `999px` não desenha 999 — o navegador limita à METADE
   DA ALTURA. Então o raio efetivo da pílula MUDA com a altura da linha: 21px numa linha de um
   texto, 26,8px numa de dois. Com o card em 22px e padding 4px o erro era de **8,8px**, e nenhum
   raio de card conserta os dois casos ao mesmo tempo. A conta conserta sempre.
   Escrito como `calc()` de propósito: se alguém mudar o raio do card ou o padding, a linha segue
   sozinha. Número cravado divergiria em silêncio. */
.nav-list-row { display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:var(--control-h-lg); padding:var(--space-2) var(--space-3); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; font-size:var(--text-sm); text-align:start; text-decoration:none; cursor:pointer; }
.nav-list-row .icon { flex:none; opacity:.8; }
/* O TEXTO É A ÚNICA TRILHA QUE ENCOLHE, e o par `flex:1` + `min-width:0` é o que faz isso: sem o
   `min-width:0` o conteúdo mínimo do flex é o texto inteiro, e o rótulo longo empurra o valor e a
   seta para fora da linha em vez de reticenciar. É a mesma família do defeito que a `pill` da
   barra inferior pagou em 18/08/2026 — lá o rótulo virava zero, aqui ele expulsaria os vizinhos. */
.nav-list-text { flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); }
/* MNT-23, "quem mais" (12/10/2026): a NavList empurrava a página como a árvore (360 → 729), pelo mesmo
   motivo — o `min-width:0` faz o texto encolher DENTRO da linha, mas a largura mínima da lista ainda era
   o rótulo inteiro. A grade de uma coluna `minmax(0,1fr)` pede zero e, quando cabe, mostra tudo. */
.nav-list-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-list-description { overflow:hidden; color:var(--muted-foreground); font-size:var(--text-xs); text-overflow:ellipsis; white-space:nowrap; }
/* O VALOR E A SETA NÃO ENCOLHEM: valor cortado MENTE (um "R$ 1.2" no lugar de "R$ 1.234"), e seta
   cortada deixa de dizer que a linha abre. Quem cede espaço é o texto, que reticencia dizendo. */
.nav-list-value { flex:none; color:var(--muted-foreground); font-size:var(--text-sm); }
/* AN-04 (03/10/2026): os sinais ao lado do valor — fixada, silenciada. Pequenos (`sm`), apagados como o
   valor, e o vão é o mesmo de dentro do texto (`space-1`). A foto é o `.avatar` de sempre. */
.nav-list-indicators { flex:none; display:inline-flex; align-items:center; gap:var(--space-1); color:var(--muted-foreground); }
.nav-list-indicators>span { display:inline-flex; }
.nav-list-row>.avatar { flex:none; }
.nav-list-row .nav-list-chevron { flex:none; opacity:.6; }
@media (hover:hover) and (pointer:fine) { .nav-list-row:hover { background:var(--secondary); } }
/* `aria-disabled` e NÃO `:disabled` — a razão está escrita ao lado de `.btn:disabled`, medida em
   13/08/2026: `:disabled` tira da ordem de foco e quem usa teclado nunca acha a linha. */
.nav-list-row[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
/* O PAINEL DÁ QUASE NADA, A LINHA DÁ O RESTO. Medido em 18/08/2026, depois de o Victor circular a
   folga no print: com o `--card-pad` de 20px o realce da linha começava a 21px da borda e o texto
   a 65px, e a linha ocupava só 88% da largura — realce flutuando no meio de uma caixa grande em
   vez de preencher o painel. `--card-pad` é padding de CONTEÚDO; lista de linhas tocáveis quer
   outra escala. É a anatomia dos dois exemplos de menu de navegação que ele mandou: o item leva
   o recheio que a nossa linha já tem, e o contêiner quase não leva nada.
   Filho DIRETO de propósito: um card com layout grande e uma lista pequena dentro não pode perder
   o padding dele. E `:has()` já é idioma desta folha (quatro usos antes deste). */
.card:has(> .nav-list) { padding:var(--space-1); }

/* ── Visibilidade responsiva — o mecanismo PADRÃO de colapsar uma barra ─────────────
   Regra do projeto (enraizada): todo layout horizontal que aperta esconde o secundário
   por breakpoint da escala, nunca rola de lado. Estas 4 classes são esse mecanismo; o
   gate (check 4b) trava os breakpoints. Mobile-first: `below` some acima do ponto. */
@media (max-width:1023px) { .hide-below-lg { display:none !important; } }
@media (max-width:767px)  { .hide-below-md { display:none !important; } }
.brand { min-height:var(--topbar-height); display:flex; align-items:center; gap:12px; padding:2px 4px 16px; margin:0 0 16px; border:0; border-bottom:1px solid transparent; border-radius:0; background:transparent; box-shadow:none; }
.brand strong { display:block; letter-spacing:var(--tracking-tight); } .brand small { display:block; color:var(--muted-foreground); font-size:11px; }
/* minmax(0,1fr): a trilha `auto` do grid crescia até o nome mais longo e os itens
   VAZAVAM pela direita da caixa (colavam na borda de um lado e sobrava do outro). */
  .doc-nav { padding:0 0 8px; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-1); }
/* .nav-group-label é o rótulo de categoria SEM ser título de documento: mesma aparência do
   h4 histórico, mas o grupo se nomeia por aria-labelledby e não entra na lista de títulos
   do leitor de tela (senão a lateral vem antes do h1 da página). É o jeito preferido. */
.doc-nav h4,.doc-nav .nav-group-label { margin:16px 8px 8px; color:color-mix(in oklab, var(--sidebar-foreground) 70%, transparent); font-size:11px; letter-spacing:var(--tracking-widest); text-transform:uppercase; }
.doc-nav .nav-group { display:grid; gap:var(--space-1); }
.doc-nav a { display:flex; align-items:center; gap:10px; min-height:40px; margin:0; padding:9px 12px; border:1px solid transparent; border-radius:var(--radius-lg); background:transparent; color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); text-decoration:none; box-shadow:none; }
.doc-nav a:hover { color:var(--sidebar-accent-foreground); background:var(--sidebar-accent); border-color:transparent; }
.doc-nav a.active { border-color:transparent; }
/* o glifo da família fica na frente do rótulo e nunca encolhe o texto */
.doc-nav a .icon { flex:none; opacity:.8; }
.doc-nav a.active .icon { opacity:1; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--primary); font-size:12px; font-weight:var(--weight-bold); letter-spacing:var(--tracking-widest); text-transform:uppercase; }
/* No claro o amarelo puro como texto não alcança 4.5:1 (axe). Aprofundar com --foreground
   mantém o matiz da marca e passa o AA; no escuro segue o amarelo cheio. */
/* GAR-05 (06/10/2026): TODA regra `[data-theme="light"] X` deste arquivo leva a guarda
   `:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)`. Sem ela, uma
   faixa ESCURA dentro de uma página clara (`<section data-theme="dark">`) herdava as 22 regras de
   tema claro: o botão de contorno saía com a tinta escurecida do claro sobre o fundo escuro. A
   guarda diz "não vale dentro de uma faixa escura, a não ser que haja de novo uma faixa clara
   dentro dela", e é `:where` para a força de cada regra não mudar — a ordem entre elas continua a
   de sempre, e numa página sem faixa escura o computado é o mesmo byte a byte. Limite declarado:
   quatro níveis alternados (escuro > claro > escuro > claro) não são cobertos. Quem cobra:
   `tests/visual/tema-na-secao.spec.ts`, e o `tema-na-secao.test.tsx` reprova regra nova sem a
   guarda. */
/* A mistura de 45% ficou SÓ na `lory` (ADR-0083, 26/10/2026): na Aurea, a letra de destaque do claro é o grafite —
   a regra fica na seção "A paleta da 1.0", no fim da folha. */
[data-theme="light"] .eyebrow:where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
.demo { min-width:0; padding:var(--card-pad); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }

/* ========================================================================== */
/* 04. COMPONENTES PRIMITIVOS                                                  */
/* ========================================================================== */
/* A base do botão carrega as VARIÁVEIS DE PASSO da camada responsiva (`--step-*`), e cada
   fallback é exatamente o valor fixo de antes — então o botão sem valor responsivo desenha o
   mesmo pixel. É o que permite a camada `size-*` repor a grandeza sem tocar no componente. */
.btn { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:transparent; display:inline-flex; align-items:center; justify-content:center; gap:var(--step-gap,8px); block-size:var(--step-h,var(--control-h-md)); border:1px solid transparent; border-radius:var(--radius-control); background:var(--btn-bg); color:var(--btn-fg); font-size:var(--step-fs,var(--text-sm)); font-weight:var(--weight-medium); line-height:var(--leading-none); text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast),opacity var(--duration-fast); }
/* GAR-14 (0.28.0): o recheio do botão vale também para o aviso preso a ele (`.toast-anchored`),
   que tem a MEDIDA do botão — pedido do Victor na bancada. Uma regra só, para os dois nunca
   divergirem e para o número não se repetir. */
.btn,.toast-anchored { padding-inline:var(--step-px,var(--space-4)); }
/* 0.32.0 — o ícone do botão é o da referência: 16 em tela de 640 para cima, 20 abaixo (no celular),
   e 16 sempre no `sm` e no `xs`. Era 20 sempre. O tamanho vai no próprio `.icon` (o `--step-icon`
   não herda), e o ícone de quem pediu outro tamanho (`size` no `Icon`) não é tocado. O `:where()`
   deixa a regra com a força de UMA classe: a peça que tem medida própria de ícone (o X do
   `CloseButton`, o link do `MediaEmbed`) continua mandando. */
.btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-md); }
@media (min-width:640px) { .btn :where(.icon:not(.icon-sm,.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); } }
.btn-sm :where(.icon:not(.icon-lg,.icon-xl)),.btn-xs :where(.icon:not(.icon-lg,.icon-xl)) { --step-icon:var(--icon-sm); }
.btn:hover:not(:disabled):not([aria-disabled="true"]) { transform:none; } .btn:active:not(:disabled) { transform:scale(.97); opacity:.9; }
/* Duas formas de "não dá para fazer isto", e a diferença é QUEM alcança a explicação.
   `:disabled` tira o controle da ordem de foco — medido em 13/08/2026: quem usa teclado nunca
   chega nele, então uma dica pendurada ali não é lida por ninguém. O embrulho de <span> que uma
   das referências documenta resolve o ponteiro e NÃO resolve o teclado (o span nasce com
   tabIndex -1, medido). `[aria-disabled="true"]` mantém o controle focável e inerte — é ele
   que se usa quando existe um PORQUÊ a dizer. A pele é a mesma; o que muda é o alcance. */
.btn:disabled,.btn[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
/* Cinco alturas, todas de token de densidade (autorizado pelo Victor em 24/07/2026). O raio
   é pill em TODAS — o tamanho muda altura e respiro, nunca a forma. Em ponteiro grosso o
   mínimo de 44px lá embaixo pega o xs e o sm, então alvo pequeno não vira alvo impossível. */
/* G-AXIS-04 — as classes de tamanho do botão passam a SETAR variáveis de passo em vez de
   escrever `height`/`padding`/`font-size` direto. A classe emitida é a mesma (`btn-sm`), o
   resultado computado é o mesmo (a suíte de geometria e as baselines de pixel cobram isso), e o
   que muda é só POR ONDE o valor chega.

   Sem isso, responsivo não funciona: uma regra dentro de `@media`/`@container` que setasse
   `--step-h` perderia para o `height:` direto de `.btn-sm`, porque declaração direta não é
   sobrescrita por variável que o autor já não leu. Fazer o valor passar pela variável é o que
   permite a camada responsiva existir UMA vez, genérica, em vez de uma vez por componente. */
.btn-xs { --step-h:var(--control-h-xs); --step-px:10px; --step-gap:6px; --step-fs:var(--text-xs); border-radius:var(--radius-control); }
.btn-sm { --step-h:var(--control-h-sm); --step-px:var(--space-3); --step-fs:var(--text-sm); border-radius:var(--radius-control); }
.btn-lg { --step-h:var(--control-h-lg); --step-px:var(--space-4); --step-fs:var(--text-base); border-radius:var(--radius-control); }
.btn-xl { --step-h:var(--control-h-xl); --step-px:26px; --step-gap:10px; --step-fs:var(--text-base); border-radius:var(--radius-control); }
/* quiet (15/10/2026): menos peso — a letra apagada e um degrau menor (12 no `sm`), como o botão "Theme" do topo da
   referência. A caixa e o fundo ficam os da aparência; o contraste da letra apagada sobre o fundo neutro é o da Aurea. */
.btn.btn-quiet { --btn-fg:var(--muted-foreground); --step-fs:var(--text-xs); }
.btn.btn-quiet:is(.btn-lg,.btn-xl) { --step-fs:var(--text-sm); }
/* Largura total: para rodapé de formulário e tela estreita. Só a largura muda. */
.btn-block { width:100%; }
/* grow (C-03): parte igual de uma fila. `min-width:0` deixa o rótulo encolher em vez de estourar. */
.btn-grow { flex:1 1 0%; min-width:0; }
/* SKIP LINK — WCAG 2.2 SC 2.4.1 (Bypass Blocks), nível A.
   Medido em 21/08/2026: existia só no `apps/docs/index.html`, escrito à mão. O core não tinha,
   o `AppShell` não tinha, e as 200 páginas do catálogo não tinham — ou seja, a página de
   demonstração era acessível e o componente que o consumidor instala não era. Achado ao
   conferir se o `skip-nav` de uma das referências era gap de verdade (`G-A11Y-03`).
   Fora da tela por TRANSFORMAÇÃO, não por `display:none` nem por `left:-9999px`: o primeiro
   tira do foco (e um link que não recebe foco não pula nada), e o segundo faz o navegador
   rolar a página lateralmente ao focar. Aparece no foco, que é o único momento em que precisa
   aparecer. */
.skip-link { position:fixed; inset-block-start:var(--space-2); inset-inline-start:var(--space-2); z-index:calc(var(--z-toast) + 1); display:inline-flex; align-items:center; height:var(--control-h-md); padding:0 var(--space-4); border-radius:var(--radius-control); background:var(--primary); color:var(--primary-foreground); font-size:var(--text-sm); font-weight:var(--weight-semibold); line-height:var(--leading-none); text-decoration:none; transform:translateY(-160%); transition:transform var(--duration-fast) var(--ease-standard); }
.skip-link:focus-visible { transform:translateY(0); outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
.btn-primary { --btn-bg:var(--primary); --btn-fg:var(--primary-foreground); --btn-border:transparent; }
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--primary-hover); --btn-border:transparent; }
/* 0.32.0 — os dois botões de fundo neutro da referência (decisão do Victor, 11/10/2026, "A"):
   o `secondary` com a LETRA DA MARCA (o `--primary-emphasis`, que segue a marca) e o `tertiary` com a
   letra normal — o `secondary` de até a 0.31.0, e o padrão do `Button` sem `variant`. A regra dela
   para escolher: salvar é o primário, editar o secundário, cancelar o terciário. */
.btn-secondary { --btn-bg:var(--secondary); --btn-fg:var(--primary-emphasis); --btn-border:transparent; }
.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--secondary-hover); --btn-border:transparent; }
.btn-tertiary { --btn-bg:var(--secondary); --btn-fg:var(--secondary-foreground); --btn-border:transparent; }
.btn-tertiary:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--secondary-hover); --btn-border:transparent; }
.btn-outline { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:var(--border-strong); }
.btn-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--accent); }
.btn-ghost { --btn-bg:transparent; --btn-fg:var(--foreground); --btn-border:transparent; }
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--accent); --btn-fg:var(--accent-foreground); }
.btn-danger { --btn-bg:var(--destructive); --btn-fg:var(--destructive-foreground); --btn-border:transparent; }
.btn-danger:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:var(--danger-400); }
/* Destrutivo em OUTRAS hierarquias: apagar não é sempre a ação principal da tela. O tom é o
   mesmo (--destructive); o que muda é o peso. No claro o vermelho puro como texto não chega
   a 4.5:1, então aprofunda com --foreground — mesmo tratamento do amarelo. */
/* As duas combinações que faltavam na matriz aparência × tom, achadas ao decompor o enum de
   variante contra o eixo que o DIRECTION.md §5 já declara: o tom de marca existia em `solid`
   (`primary`) e em `link` (`link-primary`), e NÃO existia em `outline` nem em `ghost`. Ou seja: a
   Aurea não tinha o botão de ação secundária mais comum do mercado — contorno na cor da marca.
   Nada de novo aqui: mesma receita do par `danger-*` logo abaixo, com o token do outro tom, e o
   texto em `--primary` já era precedente do `.btn-link-primary`. */
.btn-primary-outline { --btn-bg:transparent; --btn-fg:var(--primary-emphasis); --btn-border:var(--primary-emphasis); }
.btn-primary-outline:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
.btn-primary-ghost { --btn-bg:transparent; --btn-fg:var(--primary-emphasis); --btn-border:transparent; }
.btn-primary-ghost:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
.btn-danger-outline { --btn-bg:transparent; --btn-fg:var(--danger-400); --btn-border:var(--danger-400); }
.btn-danger-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
.btn-danger-ghost { --btn-bg:transparent; --btn-fg:var(--danger-400); --btn-border:transparent; }
.btn-danger-ghost:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
[data-theme="light"] .btn-danger-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-ghost:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-link-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:var(--danger-400); }
/* A LETRA DA MARCA nos botões sem caixa é a de DESTAQUE (ADR-0081, 24/10/2026 — a ADR-0076 aplicada a eles): o azul no
   claro, o amarelo no escuro, e na `lory` o laranja escuro dela. De 21/08 até aqui, o claro levava a mistura marrom
   (a marca a 45% no texto): passava sobre a página e caía para 4,22 dentro da barra de ferramentas; o azul dá 4,69. O
   `--primary-outline` não serve de letra: na `lory` ele é translúcido (é do contorno). */
/* LINK: aparência de texto, sem cápsula e sem altura de controle — o sublinhado é o que diz
   que é clicável, então ele existe desde o repouso (revelar no hover esconde a affordance).
   Três tons: neutro, marca e destrutivo. No claro a marca aprofunda, senão não passa o AA. */
/* `min-height:24px` = WCAG 2.2 SC 2.5.8. A exceção de "alvo em linha" NÃO cobre este caso:
   medido no catálogo, o "Learn more" é ação isolada dentro de um flex, não link no meio de
   prosa, e media 67×13px. O texto continua onde está — a caixa cresce centrada nele. */
.btn-link { height:auto; min-height:24px; padding:0; gap:6px; border:0; border-radius:var(--radius-sm); --btn-bg:transparent; --btn-fg:var(--foreground); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.btn-link:hover:not(:disabled):not([aria-disabled="true"]) { text-decoration-thickness:2px; }
.btn-link-primary { --btn-fg:var(--primary-emphasis); }
.btn-link-danger { --btn-fg:var(--danger-400); }
/* pressed entra na linguagem única de "selecionado" acima; só-ícone não leva o fio. */
/* Kbd — a tecla que dispara a ação, dentro ou fora do botão. Peça própria, não decoração.
   0.32.0: as medidas da referência (24 de altura, 8 dos lados, letra 14 peso médio na fonte do
   texto, cinza neutro, sem borda); o canto é o nosso: cápsula, e CÍRCULO quando a tecla é um
   caractere só (`kbd-single`, que o componente põe sozinho). Era 20, letra 11 de código, borda. */
.kbd { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-05); min-width:var(--space-6); height:var(--space-6); padding:0 var(--space-2); border:0; border-radius:var(--radius-full); background:var(--secondary); color:var(--muted-foreground); font:var(--weight-medium) var(--text-sm)/1 var(--font-ui); white-space:nowrap; }
.kbd-single { width:var(--space-6); padding:0; }
/* dentro do botão a tecla herda a cor do rótulo, SEM opacidade: a 85% o contraste caía
   para 3.67:1 (axe) e o atalho é informação, não enfeite. O fundo já o separa. */
/* Dentro do botão a tecla NÃO ganha fundo próprio: qualquer tinta escurece a cápsula e o
   rótulo perde contraste (no primary claro caiu a 3.55:1). Sem fundo, o contraste da
   tecla é o MESMO do rótulo — se o botão passa, ela passa. O fio de currentColor separa (sem
   borda desde a 0.32.0, o fio é sombra por dentro, e não muda a medida).
   A MEDIDA de dentro do botão (20, para caber no botão pequeno) é declarada pela CLASSE que o `Button` põe no
   atalho (`btn-kbd`), e não pelo contexto: com o botão de busca do site em toda página, o `.kbd` de 24 e o de 20
   dividiam a página, e a trava de geometria (uma altura por classe) reprovou (14/10/2026). */
.btn .kbd { background:transparent; box-shadow:none; color:inherit; }
.btn-kbd { min-width:var(--space-5); height:var(--space-5); padding:0 var(--space-1); font-size:var(--text-xs); }
.btn-kbd.kbd-single { width:var(--space-5); padding:0; }
/* Uma caixinha por tecla (15/10/2026), como a busca da referência: 2 entre elas. */
.btn-kbds { display:inline-flex; gap:var(--space-05); }

/* nav: item de navegação. Normal = ghost silencioso; o ATIVO (aria-current) ganha texto
   amarelo + traço embaixo — SEM borda (pedido do Victor). aria-current, não uma variante
   "ativa", porque ele também anuncia "página atual" pro leitor de tela. O traço é
   ::after, pill, alinhado ao padding do texto; posição pelo eixo bloco (não espelha RTL). */
.btn-nav { --btn-bg:transparent; --btn-fg:var(--muted-foreground); --btn-border:transparent; }
.btn-nav:hover:not(:disabled) { --btn-fg:var(--foreground); }
/* O bloco do TOM mora aqui, e o lugar é a correção de um defeito medido no navegador em
   21/08/2026: escrito logo abaixo das variantes de `link`, ele perdia por ORDEM DE ORIGEM
   para `.btn-nav`, que vem depois e tem a mesma especificidade — `nav`+success saía cinza.
   Tom é a última palavra sobre a cor do rótulo, então vem depois de toda regra `.btn-*`
   que mexe em `--btn-fg`. O teste `button-tone` simula a cascata e cobra esta ordem. */
/* TOM — o SEGUNDO eixo do botão (G-API-01). A `variant` de hoje é o produto cartesiano de
   APARÊNCIA × TOM achatado num nome só, e o achatamento vaza até na ordem das palavras:
   `danger-outline` põe o tom na frente, `link-danger` põe atrás. As treze continuam valendo e
   continuam saindo com a MESMA classe de sempre — nada aqui repinta o que já existe.

   Cada tom pinta a partir do PAR semântico (`--success` + `--success-foreground`), nunca de um
   degrau de rampa. É a mesma estrutura do `--destructive`, e a razão é a mesma: o preenchido só
   é possível quando existe a cor E o texto que vai por cima dela, escolhidos por tema. Até
   21/08/2026 esse par não existia para sucesso e informação, e `appearance="solid"` caía em
   `outline` — API anunciando uma coisa e entregando outra. Os pares foram criados e medidos
   (G-TOKEN-01); a degradação silenciosa deixou de existir.

   `warning` entra como tom pela primeira vez. Ele estava fora porque `--warning-400` resolvia
   para `var(--brand-yellow)` no escuro — a MESMA cor de `--primary`, dE=0.001. O token ganhou
   identidade própria em âmbar, escolhida por otimização (G-TOKEN-02). */
.btn-solid.btn-tone-success { --btn-bg:var(--success); --btn-fg:var(--success-foreground); --btn-border:transparent; }
.btn-solid.btn-tone-success:hover:not(:disabled) { --btn-bg:var(--success-hover); --btn-fg:var(--success-foreground); }
.btn-solid.btn-tone-info { --btn-bg:var(--info); --btn-fg:var(--info-foreground); --btn-border:transparent; }
.btn-solid.btn-tone-info:hover:not(:disabled) { --btn-bg:var(--info-hover); --btn-fg:var(--info-foreground); }
.btn-solid.btn-tone-warning { --btn-bg:var(--warning); --btn-fg:var(--warning-foreground); --btn-border:transparent; }
.btn-solid.btn-tone-warning:hover:not(:disabled) { --btn-bg:var(--warning-hover); --btn-fg:var(--warning-foreground); }
/* e o mesmo tom SEM caixa: contorno, fantasma, link e navegação. ⚠ Desde a 0.27.0 (ADR-0061) o
   token de tom (`--success`) é o FUNDO cheio — a mesma cor funda nos dois temas —, e não serve
   de letra no escuro. Letra, ícone, borda e barra sobre a superfície usam o par de letra
   (`--success-400`, `--info-400`, `--warning-400`, `--danger-400`), que cada tema ajusta. */
.btn-tone-brand,.btn-tone-brand:hover:not(:disabled) { --btn-fg:var(--primary-emphasis); }
.btn-outline.btn-tone-brand { --btn-border:var(--primary-emphasis); }
.btn-tone-brand:not(.btn-link):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
.btn-tone-danger,.btn-tone-danger:hover:not(:disabled) { --btn-fg:var(--danger-400); }
[data-theme="light"] .btn-tone-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-tone-danger:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:var(--danger-400); }
.btn-outline.btn-tone-danger { --btn-border:var(--danger-400); }
.btn-tone-danger:not(.btn-link):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 14%, transparent); }
.btn-tone-success,.btn-tone-success:hover:not(:disabled) { --btn-fg:var(--success-400); }
.btn-outline.btn-tone-success { --btn-border:var(--success-400); }
.btn-tone-success:not(.btn-link):not(.btn-solid):not(.btn-soft):not(.btn-outline):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--success) 14%, transparent); }
.btn-tone-info,.btn-tone-info:hover:not(:disabled) { --btn-fg:var(--info-400); }
.btn-outline.btn-tone-info { --btn-border:var(--info-400); }
.btn-tone-info:not(.btn-link):not(.btn-solid):not(.btn-soft):not(.btn-outline):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--info) 14%, transparent); }
.btn-tone-warning,.btn-tone-warning:hover:not(:disabled) { --btn-fg:var(--warning-400); }
.btn-outline.btn-tone-warning { --btn-border:var(--warning-400); }
.btn-tone-warning:not(.btn-link):not(.btn-solid):not(.btn-soft):not(.btn-outline):hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--warning) 14%, transparent); }
/* appearance="soft" (15/10/2026, o "danger-soft" da referência): o fundo clarinho do tom e a letra do tom (a letra é a
   do tom, das regras acima). Em repouso, a tinta que os botões sem caixa usam no hover (14%); no hover, 22%. O neutro
   é o fundo --muted com a letra normal. */
.btn-soft { --btn-border:transparent; }
.btn-soft.btn-tone-neutral { --btn-bg:var(--muted); --btn-fg:var(--foreground); }
.btn-soft.btn-tone-neutral:hover:not(:disabled) { --btn-bg:var(--secondary-hover); }
.btn-soft.btn-tone-brand { --btn-bg:color-mix(in oklab, var(--primary) 14%, transparent); }
.btn-soft.btn-tone-brand:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--primary) 22%, transparent); }
/* Os quatro tons de estado no fundo clarinho do próprio tom (`--{tom}-bg`, o dos avisos), e 8% do tom com o mouse em
   cima (15/10/2026): com o tom a 14% e 22% por cima da página, o rótulo `info` caía a 4,10:1 parado e 3,69:1 com o
   mouse no claro, e o vermelho e o verde a 4,42 e 4,23 com o mouse. Medido: assim o pior é o `info` do claro, 5,08
   parado e 4,61 com o mouse (com 10% seria 4,49). A marca continua no tom a 14% e 22%: passa nos dois temas. */
/* E o suave fica FORA das regras gerais de mouse dos tons (`:not(.btn-soft)` nelas): sendo mais fortes, elas pintavam o
   suave com o tom a 14% por cima da página, e a regra de mouse dele nunca valia — o teste do mouse em cima pegou. */
.btn-soft.btn-tone-danger { --btn-bg:var(--danger-bg); }
.btn-soft.btn-tone-danger:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--destructive) 8%, var(--danger-bg)); }
.btn-soft.btn-tone-success { --btn-bg:var(--success-bg); }
.btn-soft.btn-tone-success:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--success) 8%, var(--success-bg)); }
.btn-soft.btn-tone-warning { --btn-bg:var(--warning-bg); }
.btn-soft.btn-tone-warning:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--warning) 8%, var(--warning-bg)); }
.btn-soft.btn-tone-info { --btn-bg:var(--info-bg); }
.btn-soft.btn-tone-info:hover:not(:disabled) { --btn-bg:color-mix(in oklab, var(--info) 8%, var(--info-bg)); }
.btn-nav:hover:not(:disabled):not([aria-disabled="true"]) { --btn-fg:var(--foreground); }
/* O botão só de ícone é REDONDO, em todos os tamanhos — decisão do Victor, 25/09/2026
   (ADR-0052). Era um quadrado de canto 10px (6px nos dois menores). A referência faz o
   botão só de ícone redondo, e os botões de texto da Aurea já são cápsula: o de ícone era o único quadrado. */
.btn-icon { width:var(--control-h-md); padding:0; border-radius:var(--radius-full); }
.btn-icon.btn-xs { width:var(--control-h-xs); }
.btn-icon.btn-sm { width:var(--control-h-sm); } .btn-icon.btn-lg { width:var(--control-h-lg); }
/* xs e xl também precisam de largura: sem isto a altura mudava e a largura ficava na do
   md, e o alvo só-ícone deixava de ser quadrado (achado na onda Actions, 24/07). */
.btn-icon.btn-xl { width:var(--control-h-xl); }
/* CloseButton (HER-12, 0.32.0) — o botão de fechar da referência, quase idêntico: 24 × 24, o X de
   16 no cinza neutro, esmaecido; escurece com o mouse (o `--secondary-hover` do `.btn-tertiary`) e
   encolhe para 93% ao apertar, como o dela. O canto é o nosso: círculo cheio. O tamanho do X vai no
   próprio `.icon`, porque o `--step-icon` não herda. No TOQUE o círculo não cresce: a área de 44
   (`--target-min`) é um `::before` invisível em volta dele, e o `.btn` de toque o deixa de fora da
   altura mínima (regra do `pointer:coarse`, mais abaixo). */
.close-button { --btn-fg:var(--muted-foreground); position:relative; flex:none; inline-size:var(--space-6); block-size:var(--space-6); min-inline-size:0; min-block-size:0; padding:0; border-radius:var(--radius-full); }
.close-button .icon { --step-icon:var(--icon-sm); }
.close-button:active:not(:disabled) { transform:scale(.93); }
@media (pointer:coarse) { .close-button::before { content:""; position:absolute; inset:calc((var(--space-6) - var(--target-min)) / 2); border-radius:var(--radius-full); } }
/* ThemeToggle (25/09/2026): a cor no ícone mostra o tema para onde se vai. No claro a LUA, na tinta
   do texto; no escuro o SOL, no amarelo da marca — as duas combinações se enxergam, e é por isso
   que o botão nunca mostra a lua no escuro nem o sol no claro. Mais específico que o `.btn:hover`,
   então a cor fica também com o mouse em cima. */
.theme-toggle-moon .icon { color:var(--foreground); }
.theme-toggle-sun .icon { color:var(--primary); }
/* ThemeToggle mode="light-dark-system" (15/10/2026): a chave de três posições do topo da referência, medida nela — a
   cápsula de 34 (4 de recheio) com as três opções de 26 e o glifo de 16. A cápsula e a escolhida têm a pele da escolha de
   abas da Aurea (`.segmented`, ADR-0059): o fundo --muted, e a escolhida no --segment com a sombra, a letra cheia. São
   botões de opção nativos por cima de cada glifo, como as amostras do `ColorSwatch`. No toque, cada opção tem 44. */
.theme-switch { display:inline-flex; align-items:center; padding:calc(var(--space-1) - var(--border-width)); border:var(--border-width) solid transparent; border-radius:var(--radius-control); background:var(--muted); }
.theme-switch-option { position:relative; display:inline-grid; place-items:center; inline-size:var(--control-h-xs); block-size:var(--control-h-xs); border-radius:var(--radius-control); color:var(--muted-foreground); cursor:pointer; }
.theme-switch-option:has(:checked) { color:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); }
/* PINTADA, como a chave de duas posições era (o Victor, 15/10/2026: "o sol deve ficar amarelo quando clicado e a lua
   quero um preto absoluto"). A escolhida é BRANCA nos dois temas, como a da referência — no escuro ela era o cinza do
   `--segment`, e a lua preta sumia nele (2,4:1). A lua e o monitor, o preto absoluto (21:1). O sol é o AMARELO DA
   MARCA, puro: o amarelo de ícone do tema claro (ADR-0054, 5,65:1) foi reprovado — *"não existe sol marrom"* — e, das
   três formas de sol amarelo mostradas rodando, o Victor escolheu esta (*"B"*, 15/10/2026), sabendo do contraste
   medido: 1,91:1 no branco. A escolha continua dita pelo fundo branco da escolhida e pelo nome da opção. */
.theme-switch-option:has(:checked) { background:var(--white); color:var(--black); }
.theme-switch-option:has(:checked[value="light"]) { color:var(--brand-yellow); }
.theme-switch-option:hover:not(:has(:checked,:disabled)) { color:var(--foreground); }
.theme-switch-option:has(:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
.theme-switch-option:has(:disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
.theme-switch-input { position:absolute; inset:0; z-index:1; margin:0; opacity:0; cursor:inherit; }
@media (pointer:coarse) { .theme-switch-option { inline-size:var(--target-min); block-size:var(--target-min); } }
@media (forced-colors:active) { .theme-switch-option:has(:checked) { outline:var(--focus-width) solid Highlight; outline-offset:calc(var(--border-width) * -2); } }
/* GRUPOS COLADOS (0.32.0) — o `ButtonGroup` e o `ToggleGroup` da referência: os botões COLADOS numa
   cápsula só (vão 0), canto só nas pontas, um fio entre eles (a cor do texto a 15%, metade da
   altura), sem o encolher ao apertar (o grupo é uma peça só), e o contorno que não dobra entre
   vizinhos. Os cantos de dentro são retos, como os dela: quem desenha a forma é a cápsula inteira.
   Até a 0.31.0 eram cápsulas soltas com vão de 4 — continua existindo, como `detached` (o
   `isDetached` dela), e só ele quebra linha.
   A DIREÇÃO vem por variável, e não por regra de filho de cada direção: a direção do `ButtonGroup`
   pode mudar com a largura (camada responsiva, que copia o corpo de `.btn-group-vertical` — o
   gerador confere que os dois dizem o mesmo) e a do `ToggleGroup` vem do motor (`data-orientation`).
   Deitado: canto na ponta de dentro da linha (`--btn-group-h`), fio em pé; em pé, o contrário. */
.btn-group,.toggle-group { display:inline-flex; align-items:center; gap:0; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); }
/* Grupo VERTICAL (`G-AXIS-01`). `align-items:stretch` é o que faz os botões medirem igual: sem
   ele cada um teria a largura do próprio rótulo e a coluna ficaria serrilhada — que é o defeito
   que um grupo vertical tem de não ter. */
.btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; }
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn { position:relative; border-radius:0; }
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:first-child { border-start-start-radius:var(--radius-full); border-end-start-radius:var(--btn-group-h); border-start-end-radius:var(--btn-group-v); }
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:last-child { border-end-end-radius:var(--radius-full); border-start-end-radius:var(--btn-group-h); border-end-start-radius:var(--btn-group-v); }
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:only-child { border-radius:var(--radius-full); }
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn + .btn::before { content:""; position:absolute; inset-inline-start:var(--btn-group-sep-i); inset-block-start:var(--btn-group-sep-b); inline-size:var(--btn-group-sep-w); block-size:var(--btn-group-sep-h); border-radius:var(--radius-full); background:currentColor; opacity:.15; pointer-events:none; }
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn:active:not(:disabled) { transform:none; }
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:not(:last-child) { border-inline-end-width:var(--btn-group-bi); border-block-end-width:var(--btn-group-bb); }
:is(.btn-group:not(.btn-group-detached),.toggle-group:not(.toggle-group-detached)) > .btn-outline:not(:first-child) { border-inline-start-width:var(--btn-group-bi); border-block-start-width:var(--btn-group-bb); }
/* o anel de foco de um botão do meio fica por cima dos vizinhos, e não por baixo */
:is(.btn-group,.toggle-group) > .btn:focus-visible { z-index:1; }
.btn-group-detached,.toggle-group-detached { flex-wrap:wrap; gap:var(--space-1); }
.btn-group-full,.toggle-group-full { display:flex; inline-size:100%; }
:is(.btn-group-full,.toggle-group-full) > .btn { flex:1 1 0%; min-inline-size:0; }
/* Toolbar: contêiner de controles; o roving tabindex vem do Base UI. */
.toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:6px; border:1px solid transparent; border-radius:var(--radius-control); background:var(--secondary); }
/* Vertical sai da pílula: --radius-control (999px) clampa em 50% da menor
   dimensão e vira um oval num container alto. */
.toolbar[data-orientation="vertical"] { flex-direction:column; align-items:stretch; border-radius:var(--radius-lg); }
.toolbar-group { display:flex; align-items:center; gap:var(--space-1); }
.toolbar-sep { flex:none; align-self:stretch; inline-size:1px; min-block-size:20px; margin-inline:4px; margin-block:0; background:var(--border); border:0; }
/* SEPARADOR — a linha de divisão do sistema, num lugar só.
   Ela já existia duas vezes, resolvida localmente: `.toolbar-sep` (vertical, na barra) e
   `.menu-sep` (horizontal, no menu). O componente `Separator` seria a terceira cópia da mesma
   regra, e a pergunta "quem mais tem esse problema?" do CLAUDE.md manda o contrário. Cor e
   espessura moram aqui; espaçamento e medida mínima continuam com quem usa, porque separador de
   barra e separador de menu respiram diferente.
   Sem `--space-*`: a linha do sistema é de UM pixel, e um pixel não é espaçamento. */
.separator { background:var(--border); border:0; }
.separator[data-orientation="horizontal"] { block-size:1px; inline-size:100%; }
.separator[data-orientation="vertical"] { inline-size:1px; align-self:stretch; min-block-size:var(--space-5); }
.toolbar[data-orientation="vertical"] .toolbar-sep { align-self:auto; inline-size:auto; block-size:1px; min-block-size:0; margin-inline:0; margin-block:4px; }
/* Spinner: o glifo existia desde sempre e só era usado por dentro do Button. Ganhou componente
   e escala no Lote 1, e o eixo passou a ser o dos ÍCONES — mas o tamanho base continua o que
   sempre foi: `--icon-sm` são os mesmos 16px de antes, então nenhum botão em nenhuma página
   mudou de aparência. Cheguei a apontar o base para `--icon-md` (20px) e os baselines de pixel
   acusaram na hora: teria trocado o tamanho do spinner dentro de todo botão sem ninguém pedir.
   A casa do spinner é dentro de um controle, ao lado de texto; os degraus maiores existem para
   quando ele é a única coisa na tela. */
/* O spinner lê a MESMA escala de glifo, mas o degrau base dele é `sm` e não `md` — presumir
   `md` como base de toda família é o erro que esta atividade já cometeu duas vezes. */
.spinner { width:var(--step-icon,var(--icon-sm)); height:var(--step-icon,var(--icon-sm)); background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='2' stroke-dasharray='33 11'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23000' stroke-width='2' stroke-dasharray='33 11'/%3E%3C/svg%3E") center/contain no-repeat; animation:spin .7s linear infinite; }
/* 0.32.0: a escala da referência — 16 · 24 · 32 · 40. O componente nasce no `md` (24); o glifo cru
   continua no `sm` (16), dentro do botão e do aviso. */
.spinner-md { --step-icon:var(--space-6); }
.spinner-lg { --step-icon:var(--space-8); }
.spinner-xl { --step-icon:var(--space-10); } @keyframes spin { to { transform:rotate(360deg); } }

.field { display:flex; flex-direction:column; gap:7px; }
/* CAMPO NA HORIZONTAL — rótulo à esquerda, controle à direita. É a linha do formulário de
   configurações, e até 21/08/2026 ela só saía da Aurea com CSS ad hoc (`G-AXIS-01`).
   Grid, e não `flex-direction:row`, por causa do ERRO: em linha, o `.field-error` viraria uma
   terceira coluna ao lado do controle. Em grade ele cai na coluna 2, embaixo do controle, que é
   onde a mensagem pertence — ela fala do valor, não do rótulo.
   A largura da coluna do rótulo é token de componente para o consumidor poder alinhar várias
   linhas entre si; sem isso cada campo escolheria a própria largura e a coluna ficaria serrilhada. */
.field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); }
.field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); }
.field-horizontal>*:not(.label) { grid-column:2; }
/* 0.32.0 — o rótulo, a dica e a descrição da referência: rótulo 14 PESO MÉDIO (era 600); dica e
   descrição 12 com entrelinha 16, esmaecidas e SEM negrito (a dica mora na linha do rótulo e herdava
   o 600 dele). O obrigatório ganha o asterisco vermelho depois do rótulo, escondido do leitor de
   tela — quem anuncia "obrigatório" é o `required` do controle, e não o desenho. */
.label { display:flex; justify-content:space-between; gap:12px; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
.hint { color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-regular); line-height:var(--space-4); }
.label-required { margin-inline-start:var(--space-05); color:var(--danger-400); }
.input,.textarea,.select { width:100%; min-width:0; block-size:var(--step-h,var(--control-h-md)); padding-block:0; padding-inline:var(--step-field-px,var(--space-3)); color:var(--foreground); background:var(--field-bg); border:1px solid transparent; border-radius:var(--radius-control); transition:border-color var(--duration-fast),background-color var(--duration-fast),box-shadow var(--duration-fast); }
.input:hover,.textarea:hover,.select:hover { border-color:transparent; }
/* `variant="secondary"` (0.32.0), o da referência: o campo de fundo NEUTRO e sem borda à vista, para
   dentro de um cartão, onde o fundo de campo some contra o do cartão. A borda fica (transparente),
   para o foco continuar sendo a borda que muda de cor (ADR-0059). */
.input-secondary,.textarea-secondary { background:var(--secondary); border-color:transparent; }
.input-secondary:hover,.textarea-secondary:hover { background:var(--secondary-hover); border-color:transparent; }
.input::placeholder,.textarea::placeholder { color:var(--subtle-foreground); }
.input:disabled,.textarea:disabled,.select:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
/* O `padding-inline` daqui tem de LER a variável também, e com o próprio padrão: a base do
   textarea vem DEPOIS da regra compartilhada e a sobrescrevia, congelando o padding em 14px nos
   três degraus. Medido em 22/08/2026 contra o estado anterior — era 12/14/16 e virou 14/14/14.
   0.32.0: a família de campo passa a ser uniforme no md, como na referência — 12 dos lados no campo
   e na área de texto (eram 13 e 14), e a área com 8 em cima e embaixo (eram 12). */
.textarea { min-block-size:104px; padding-block:var(--space-2); padding-inline:var(--step-field-px,var(--space-3)); resize:vertical; border-radius:var(--radius-lg); }
/* chevron: cor = --muted-foreground de cada tema (dark #a1a1a1, light #505050); tokenizar na Fase 1 */
.select { appearance:none; padding-inline-end:var(--step-select-pe,38px); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a1a1a1' stroke-width='1.6'/%3E%3C/svg%3E"); background-position:calc(100% - 12px) 50%; background-size:12px 8px; background-repeat:no-repeat; }
[data-theme="light"] .select:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23505050' stroke-width='1.6'/%3E%3C/svg%3E"); }
/* Widgets nativos dos campos (calendário do type=date, dropdown do select, scrollbar do textarea) seguem o tema */
.input,.textarea,.select { color-scheme:dark; font-size:var(--step-fs,inherit); }
/* ESCALA DA REFERÊNCIA (ADR-0050, 24/09/2026): no computador o texto digitado é 14, como toda peça;
   no telefone ele sobe para 16. É a regra dela (a troca é em 640px), e a razão
   é do Safari do iPhone: campo com letra menor que 16 faz a página AMPLIAR sozinha ao ganhar foco. */
@media (max-width:639.98px) { .input,.textarea,.number-field-input,.select-value { font-size:var(--text-base); } }
[data-theme="light"] .input:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .textarea:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .select:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color-scheme:light; }
/* NumberField (Lote 1): menos · campo · mais numa peça só, que é onde as referências convergem.
   O campo é `.input` — a mesma altura, o mesmo raio, o mesmo foco de qualquer campo do sistema.
   Largura em token para caber de 3 a 4 dígitos sem virar caixa de texto. */
/* 0.32.0 — o da referência: UM GRUPO SÓ, com a borda e o fundo de campo, e os botões DENTRO dele
   (40 de largura, ícone 16), cada um separado do número por um fio (a cor esmaecida a 15%). Até a
   0.31.0 eram dois botões fantasma soltos ao lado de um campo. O foco é o do `InputGroup`: o anel no
   grupo inteiro, que é a peça que a pessoa vê. No toque o grupo sobe para o alvo de 44, como os
   botões soltos subiam. */
.number-field { display:inline-flex; }
.number-field-group { display:inline-flex; align-items:stretch; block-size:var(--control-h-md); border:var(--border-width) solid transparent; border-radius:var(--radius-full); background:var(--field-bg); overflow:hidden; transition:border-color var(--duration-fast),box-shadow var(--duration-fast); }
.number-field-group:hover { border-color:transparent; }
.number-field-group:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:transparent; }
.number-field-input { width:var(--space-16); text-align:center; font-variant-numeric:tabular-nums; }
.number-field-group > .number-field-input { block-size:auto; border:0; border-radius:0; background:transparent; }
.number-field-group > .number-field-input:focus-visible { outline:none; }
.number-field-button { flex:none; display:inline-flex; align-items:center; justify-content:center; inline-size:var(--space-10); padding:0; border:0; background:transparent; color:var(--foreground); cursor:pointer; transition:background var(--duration-fast); }
.number-field-button .icon { --step-icon:var(--icon-sm); }
.number-field-button:hover:not(:disabled) { background:var(--surface-hover); }
.number-field-button:active:not(:disabled) { background:color-mix(in oklab, var(--foreground) 10%, transparent); }
.number-field-button:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
/* o anel do botão fica DENTRO dele: o grupo corta o que passa da borda */
.number-field-button:focus-visible { outline-offset:calc(-1 * var(--focus-width)); }
.number-field-decrement { border-inline-end:var(--border-width) solid transparent; }
.number-field-increment { border-inline-start:var(--border-width) solid transparent; }
@media (pointer:coarse) { .number-field-group { block-size:var(--target-min); } }
/* A ALÇA DE ARRASTO (G-API-02), e só quando `scrubbable` está ligada.
   O motor já põe por ESTILO EM LINHA tudo o que é mecânica — `touch-action:none` e
   `user-select:none` na alça, e `position:fixed` mais o `transform` no cursor virtual, que ele
   reposiciona a cada movimento do ponteiro. Aqui fica só o que é PELE, e a separação é de
   propósito: redeclarar posição por cima do motor criaria duas fontes de verdade para a mesma
   coordenada, e a nossa perderia — ou, pior, ganharia. */
.number-field-scrub { flex:none; display:inline-flex; align-items:center; justify-content:center; inline-size:var(--control-h-sm); block-size:var(--control-h-sm); border-radius:var(--radius-control); color:var(--muted-foreground); cursor:ew-resize; }
/* O eixo é CLASSE porque o motor não publica atributo para ele — a mesma regra do
   `.range-vertical`. Sem esta linha a alça vertical mostraria `ew-resize`: um cursor que mente
   sobre o gesto, que é o defeito de classe do `.tabs-vertical` pego pelo G-GATE-02 — a pele
   descrevendo um comportamento que não é o que acontece. */
.number-field-scrub-vertical { cursor:ns-resize; }
.number-field-scrub:hover { background:var(--surface-hover); color:var(--foreground); }
.number-field-scrub[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
/* O cursor virtual é PORTALADO para o <body> — o ponteiro do sistema fica escondido pelo Pointer
   Lock durante o arraste, e este elemento é o que a pessoa vê no lugar dele. Portalado, ele sai
   de qualquer contexto de empilhamento local, então precisa do degrau de overlay para não ficar
   atrás de um diálogo aberto. A superfície é a flutuante do sistema, a mesma do `.menu` e do
   `.popover`: um cursor desenhado com outra pele seria uma segunda identidade para a mesma
   camada. */
.number-field-scrub-cursor { z-index:var(--z-modal); display:inline-flex; padding:var(--space-1); border-radius:var(--radius-control); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); }
/* OTPField (Lote 1): um quadrado por dígito. O lado é a altura de controle, então a fila mede o
   mesmo que qualquer campo ao lado dela; o padding zera porque o dígito é centralizado. */
.otp-field { display:inline-flex; align-items:center; gap:var(--space-2); }
/* 0.32.0: a casa da referência — 38 × 40, o número 18 em seminegrito (era 36 × 36, letra 14). */
.otp-slot { width:calc(var(--space-10) - var(--space-05)); block-size:var(--space-10); padding:0; text-align:center; font-family:var(--font-code); font-size:var(--text-lg); font-weight:var(--weight-semibold); }
/* O tracinho entre os grupos (15/10/2026): o da referência, 6 × 2 com a ponta arredondada. Só desenho — o leitor de
   tela segue de caixa em caixa. */
.otp-separator { flex:none; inline-size:calc(var(--space-1) + var(--space-05)); block-size:var(--space-05); border-radius:var(--radius-sm); background:var(--border-strong); }
/* HoverCard (Lote 1) reusa `.popover`; só limita a largura, porque prévia é conteúdo, não rótulo. */
.hover-card { max-width:min(20rem,calc(100vw - var(--space-8))); }

/* GRUPO DE CAMPO. A moldura vem para o GRUPO e o controle de dentro fica sem borda — é o que
   permite o adorno morar dentro da caixa em vez de flutuar sobre ela, que era o limite do
   `.input-wrap`. O grupo herda a altura e o raio de um campo, então um `InputGroup` e um `Input`
   soltos na mesma linha medem igual.
   O foco é do CONTROLE e aparece na MOLDURA: `:focus-within` põe o anel no grupo, porque o
   contorno do input de dentro ficaria escondido atrás da borda do grupo. */
.input-group { display:flex; flex-wrap:wrap; align-items:center; inline-size:100%; min-inline-size:0; min-block-size:var(--control-h-md); background:var(--field-bg); border:1px solid transparent; border-radius:var(--radius-control); transition:border-color var(--duration-fast),box-shadow var(--duration-fast); }
.input-group:hover { border-color:transparent; }
/* A pele `secondary` do campo vale para o GRUPO, como o tamanho (abaixo): quem desenha a caixa é o grupo, e o
   `ColorField variant="secondary"` (e todo `InputGroup` com um `Input variant="secondary"` dentro) saía igual ao
   `primary` (medido na bancada em 14/10/2026). Antes do foco, para a borda do foco valer. */
.input-group:has(>.input-secondary) { background:var(--secondary); border-color:transparent; }
.input-group:has(>.input-secondary):hover { background:var(--secondary-hover); }
.input-group:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:transparent; }
.input-group:has(.input-sm) { min-block-size:var(--control-h-sm); }
.input-group:has(.input-lg) { min-block-size:var(--control-h-lg); }
/* O controle dentro do grupo abre mão da própria moldura: quem desenha a caixa é o grupo. */
/* `flex:1 1 0` e não `1 1 auto`: com o grupo podendo quebrar linha, uma base `auto` resolve
   para o `width:100%` que o campo já tem, e o campo sozinho enche a linha — os adornos iam
   todos para a linha de baixo. Base zero deixa o campo crescer no que sobra, e quem quebra
   linha passa a ser só o adorno de 100%, que é o que se quer. */
.input-group>.input,.input-group>.select,.input-group>.textarea { flex:1 1 0; min-inline-size:0; background:transparent; border:0; border-radius:0; }
.input-group>.input:focus-visible,.input-group>.select:focus-visible,.input-group>.textarea:focus-visible { outline:none; }
/* Desativado (lote 1, 20/10/2026): no grupo, quem pinta o estado é a moldura, como no inválido — só o texto recuava, e o
   fundo e o ícone ficavam iguais. O campo de dentro não recua de novo (seriam 0,25). Só o CAMPO conta: um botão
   desativado no adorno (o de limpar, sem texto) não desativa o grupo. */
.input-group:has(> :is(.input,.select,.textarea):disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
.input-group>.input:disabled,.input-group>.select:disabled,.input-group>.textarea:disabled { opacity:1; }
/* O adorno não estica nem encolhe, e nunca rouba o clique do campo — a menos que ele PRÓPRIO
   seja clicável, e aí quem devolve o ponteiro é o botão de dentro. */
.input-group-addon { display:inline-flex; flex:none; align-items:center; gap:var(--space-1); color:var(--subtle-foreground); }
/* ~~A distância que o texto guarda do glifo é a mesma de antes, e por construção: 12px de um lado,
   o glifo, 12px do outro~~ — não era: o campo somava os 12 DELE depois dos 12 do adorno, e o texto
   ficava a 24 do glifo (28 no `lg`), com 13 do outro lado. Medido em 15/10/2026, depois que o Victor
   viu a busca ao lado do campo da referência (*"de um lado é curto, do outro é largo"*). A
   referência tira o recuo do campo quando há adorno na frente (`ps-0`): 12, o glifo, 12. Aqui é a
   regra logo abaixo das do adorno — e ela entra também na camada responsiva, pelo gerador. */
/* G-A11Y-06 — DOIS EIXOS, e nenhum `order`.
   O `align` antigo achatava duas dimensões independentes num enum só: ORDEM LÓGICA (start/end) e
   GEOMETRIA (inline/block). E como a ordem lógica virava desenho por `order`, um adorno focável
   podia aparecer antes do campo e ser tabulado depois — WCAG 2.4.3.
   Separados, o `order` deixa de ser necessário: `side` decide a posição no DOM (o `InputGroup`
   ordena os filhos), e a geometria sai sozinha do `flex-wrap`. Um adorno `block` ocupa a linha
   inteira; como já está antes ou depois do controle no DOM, ele cai acima ou abaixo por
   consequência, não por pintura. Ver a ADR-0020. */
/* As DUAS geometrias declaram o que são. `inline` chegou a nascer sem corpo — só as regras
   compostas de recuo —, e aí a camada responsiva não conseguia VOLTAR: `block` põe
   `inline-size:100%`, e um `inline` vazio não desfaz nada. O adorno ficava em faixa no
   contêiner largo, com a classe certa e o desenho errado. Valor de eixo que não diz o que é
   só funciona enquanto for o primeiro. */
.input-group-addon-inline { inline-size:auto; justify-content:normal; }
.input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); }
/* O FIM (15/10/2026): texto ou ícone a 12 da borda, como o sufixo da referência (`px-3`) — eram 4, o recuo pensado
   para o BOTÃO redondo, que continua (o glifo dele cai a 12 da borda); a tecla, a 8 (`pe-2` no exemplo de atalho
   dela). `:where` para não ganhar força: a camada responsiva, que vem depois, continua mandando. */
.input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); }
.input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); }
.input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); }
/* O campo depois de um adorno EM LINHA não põe recuo próprio: quem separa o texto do glifo são os 12
   do adorno, como na referência. Em FAIXA o adorno fica em cima, e o campo guarda o recuo dele. */
.input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; }
/* A busca é 12, a lupa, 8 — a da referência (`ms-3` na lupa, `ps-2` no campo). */
.search-field > .input-group-addon-inline.input-group-addon-start { padding-inline-end:var(--space-2); }
/* ADORNO EM BLOCO — a barra de ações ACIMA ou ABAIXO do campo, dentro da mesma moldura. É a
   forma da caixa de composição moderna: o texto em cima, os controles embaixo, tudo numa caixa
   só. Vem do `G-AXIS-01`; duas das referências têm as quatro posições e a Aurea tinha duas.
   Registro de correção: escrevi neste lugar que o `MessageComposer` da Aurea já desenhava essa
   forma à mão, e fui conferir — NÃO desenha. Ele é uma LINHA (`.message-composer` é flex com o
   grupo e o botão lado a lado). Então isto não é consolidação de solução local como foi o
   `InputGroup`; é capacidade que a Aurea não tinha, e o eixo entrou onde o `align` já morava em
   vez de virar componente novo.
   `inline-size:100%` é o que força a linha própria, e ele só funciona porque a regra abaixo
   liga `flex-wrap` — condicionalmente, para não mudar o comportamento de quem já usa o grupo. */
/* Alinhamento medido em 21/08/2026, não estimado: a CAIXA do primeiro botão cai a 13px da borda
   do grupo e o texto do campo a 15px. Dois pixels, e fechá-los exigiria um padding de 14px —
   fora da escala de espaço, ou seja, px cru, que a catraca do check 12 existe para impedir e por
   bom motivo. Fica alinhado o suficiente e dentro do sistema. */
.input-group-addon-block { inline-size:100%; justify-content:flex-start; }
.input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; }
.input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); }
.input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); }
/* Com adorno em bloco o grupo deixa de ser uma linha e o controle não pode mais ser centralizado
   verticalmente contra ele: o campo tem de ocupar a largura toda da própria linha. */
/* O RAIO MUDA, e isso não é escolha nova — é a regra da Aurea aplicada ao caso certo. A
   identidade diz: campo em linha é pílula (`--radius-control`), painel é 22px (`--radius-card`).
   Um grupo com adorno em bloco DEIXOU de ser uma linha: ele tem duas linhas, cresce em altura e
   é uma superfície. Medido no navegador em 21/08/2026, e foi ver que resolveu: com 999px numa
   caixa alta as laterais viram semicírculos do tamanho da caixa, e o texto do campo encosta na
   curva. Não é ajuste de gosto, é colisão de conteúdo.
   Se o Victor discordar da leitura, o que muda é uma linha — mas a alternativa (manter a pílula)
   foi vista e não serve. */
/* O ADORNO EM FAIXA SE BASTA. Antes, quem quebrava a linha era o GRUPO, por `:has()` — e `:has()`
   enxerga a CLASSE, não a geometria efetiva. Com `layout` responsivo a classe `…-block` continua
   no elemento enquanto a camada já o desenha `inline`, e o grupo seguia quebrando linha com o
   adorno ao lado: classe certa, desenho errado. Foi o segundo caso do mesmo defeito no mesmo dia.
   Agora o grupo sempre pode quebrar, e quem quebra é o adorno de 100% — que é consequência da
   largura dele, e acompanha a camada sozinho. O raio segue o mesmo caminho, pela camada. */
.input-group:has(.input-group-addon-block) { border-radius:var(--radius-card); }
.input-group:has(.input-group-addon-block)>.input,
.input-group:has(.input-group-addon-block)>.textarea { padding-block:var(--space-2); }
/* Proporção fixa: a caixa manda na altura, e `min-width:0` impede que ela estoure a coluna de um
   grid — que é o defeito que todo mundo escreve à mão e esquece. */
.aspect-ratio { min-inline-size:0; overflow:hidden; }
.aspect-ratio>* { inline-size:100%; block-size:100%; object-fit:cover; }
/* TAMANHO DE CAMPO — G-FORM-01 da ATIVIDADE-2, 21/08/2026.
   Cinco fichas do registry anunciavam `sizes: sm/md/lg` e não existia nada: `.input,.textarea,
   .select` fixavam --control-h-md e não havia modificador nenhum. Os tokens de altura já
   existiam e o `.btn-*` já os usava desde sempre — o campo é que tinha ficado para trás.
   `md` é a classe base e não tem modificador, como não existe `.btn-md`.
   O que muda por tamanho é o que converge nas referências (o campo e a lista de uma delas, o
   campo base de outra no tamanho pequeno) e o que o `.btn-*` daqui já fazia: altura,
   padding inline e corpo do texto. Tudo em token: a catraca do check 12 não aceita px cru novo,
   e é ela que obrigou o `calc()` em vez de um 44 escrito na mão. */
/* G-AXIS-04 — as classes de tamanho do campo passam a SETAR variáveis, como as do botão. A
   classe emitida e o computado são os mesmos; o que muda é por onde o valor chega, e é isso que
   permite a camada responsiva vencer a cascata.
   A família de CAMPO tem medida própria: `--step-field-px` (13px no md, contra 15px do botão) e
   `--step-select-pe` (a borda que a seta ocupa). Foi ao aplicar aqui que apareceu o defeito da
   primeira camada, que tratava a escala como universal — altura e corpo de texto são
   compartilhados, padding não. */
.input-sm,.select-sm,.textarea-sm { --step-h:var(--control-h-sm); --step-fs:var(--text-sm); --step-field-px:var(--space-3); --step-select-pe:var(--space-8); }
.input-lg,.select-lg,.textarea-lg { --step-h:var(--control-h-lg); --step-fs:var(--text-base); --step-field-px:var(--space-4); --step-select-pe:calc(var(--space-10) + var(--space-1)); }
/* O textarea não tem altura: o corpo dele é o conteúdo. O que escala é a caixa mínima. */
/* Deriva do passo, então vale para qualquer degrau — inclusive um vindo da camada responsiva,
   que as duas regras por nome de classe não alcançariam. */
.textarea-sm,.textarea-lg { min-block-size:calc(var(--step-h) * 3); }
/* A seta do select ocupa a borda final, e o espaço reservado para ela acompanha o tamanho —
   senão o texto passa por baixo do glifo no lg. Vem DEPOIS do padding-inline acima de propósito. */
/* COLLAPSIBLE. Não desenha caixa: quem desenha é o Card ou a lateral em volta. O que ele tem é
   o gatilho, que é a mesma linha de texto com chevron do `<summary>` do Accordion — dois modos
   de virar a seta seriam dois idiomas para "isto está aberto". */
.collapsible { display:grid; }
.collapsible-trigger { display:flex; align-items:center; gap:var(--space-2); inline-size:100%; min-block-size:var(--control-h-sm); padding:0; border:0; background:transparent; color:var(--foreground); font:inherit; font-weight:var(--weight-medium); text-align:start; cursor:pointer; }
.collapsible-trigger:hover:not([data-disabled]) { color:var(--primary); }
/* Desativado (lote 1, 20/10/2026): o motor marca o gatilho com `data-disabled`; ele recua e não acende no hover. */
.collapsible-trigger[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
.collapsible-chevron { flex:none; transition:transform var(--duration-fast) var(--ease-standard); }
.collapsible-trigger[data-panel-open] .collapsible-chevron { transform:rotate(180deg); }
.collapsible-panel { overflow:hidden; }
/* TOGGLE GROUP. A pele é a do grupo de botões, porque é o que ele é (colado, 0.32.0 — a regra
   está no `.btn-group`). O que muda é o eixo, que aqui o MOTOR publica. */
/* G-AXIS-06 — a pele destes cinco reage ao `data-orientation` que o MOTOR publica, e não a uma
   classe que o React escolhe por conta própria. É o que garante uma fonte de verdade só: o
   valor responsivo resolvido vai para o motor, o motor publica o atributo e ajusta o teclado,
   e o desenho segue o atributo. Enquanto a orientação vinha de classe, era possível o CSS
   dizer coluna e o `aria-orientation` dizer horizontal — foi o que impediu estes cinco de
   entrarem no eixo responsivo até 22/08/2026. Ver a ADR-0019. */
.toggle-group[data-orientation="vertical"] { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; }

/* Form (M1): empilhar campos com respiro. Nada além disso — sem borda, sem fundo, sem largura.
   Formulário é ARRANJO, e arranjo é do Stack/Grid; se esta classe crescer, ela vira uma terceira
   maneira de fazer layout e passa a brigar com as duas que já existem. */
/* `minmax(0, 1fr)` (MNT-33, 21/10/2026): a coluna implícita (`auto`) não fica menor que o conteúdo, e uma tabela larga
   dentro de um invólucro do app alargava a PÁGINA em vez de rolar na caixa dela (a 640 px, 104 px para o lado). O mesmo
   no `.data-state` e no `.dialog-body`: as grades que embrulham conteúdo do app. */
.form { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-5); }
/* description (B-12): a frase de ajuda embaixo do controle, com a letra e a cor do `.hint`. */
.field-description { color:var(--muted-foreground); font-size:var(--text-xs); line-height:var(--space-4); }
/* o erro com 4 de recuo, como o da referência (0.32.0) */
.field-error { padding-inline:var(--space-1); color:var(--danger-400); font-size:var(--text-xs); line-height:var(--space-4); }
/* 0.32.0 — os marcáveis da referência: vão de 12 até o texto, texto 14 PESO MÉDIO (o da caixa era
   negrito, o `<strong>`), descrição 12/16 esmaecida e sem negrito embaixo dele. */
.checkbox,.radio { display:inline-flex; align-items:flex-start; gap:var(--space-3); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; }
.checkbox > span > strong { font-weight:inherit; }
/* LISTBOX (0.32.0): a da referência — recheio de 4, 4 entre itens; item de 36 no mínimo, 8 dos lados
   e 6 em cima e embaixo, vão 12; fundo neutro sob o mouse e no foco do teclado (com o anel); o visto
   de 16 no fim do escolhido; perigo na cor de perigo. O canto é o nosso: cápsula. A seção é um título
   pequeno e esmaecido em cima dos itens dela. */
.list-box { position:relative; display:flex; flex-direction:column; gap:var(--space-1); inline-size:100%; padding:var(--space-1); }
.list-box-section { display:flex; flex-direction:column; gap:var(--space-1); }
.list-box-section-title { padding:var(--space-2) var(--space-2) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
/* A linha entre as seções (15/10/2026), como em todos os exemplos de seções da referência: lá quem a põe é quem usa a
   lista; aqui a lista vem por dados, então ela é automática. 1 de altura, 8 para dentro de cada lado, e o vão da lista
   (4) em cima e o da seção (4) embaixo. Desenho, não item: o leitor de tela já conta os grupos. É BORDA, e não fundo,
   para continuar no alto contraste do Windows (ele apaga fundo de enfeite). */
.list-box-section + .list-box-section::before { content:""; border-block-start:var(--border-width) solid transparent; margin-inline:var(--space-2); }
.list-box-item { position:relative; display:flex; align-items:center; gap:var(--space-3); inline-size:100%; min-block-size:var(--control-h-md); padding:calc(var(--space-1) + var(--space-05)) var(--space-2); border-radius:var(--radius-full); color:var(--foreground); font-size:var(--text-sm); cursor:pointer; transition:background var(--duration-fast),transform var(--duration-fast) var(--ease-standard); }
/* O atalho do item (15/10/2026), como o da referência: o `Kbd` na ponta da linha. */
.list-box-item-kbd { flex:none; margin-inline-start:auto; }
.list-box-item:has(.list-box-item-indicator) { padding-inline-end:var(--space-7); }
.list-box-item:hover:not([aria-disabled="true"]),.list-box-item:focus-visible { background:var(--secondary); }
.list-box-item:focus-visible { outline-offset:calc(-1 * var(--focus-width)); }
.list-box-item:active:not([aria-disabled="true"]) { transform:scale(.98); }
.list-box-item[aria-disabled="true"] { opacity:var(--opacity-disabled); cursor:not-allowed; }
.list-box-item > .icon { --step-icon:var(--icon-sm); color:var(--muted-foreground); }
.list-box-item-text { display:flex; flex-direction:column; min-inline-size:0; }
.list-box-item-label { font-weight:var(--weight-medium); }
.list-box-item-description { color:var(--muted-foreground); font-size:var(--text-xs); line-height:var(--space-4); }
.list-box-item > .list-box-item-indicator { --step-icon:var(--icon-sm); position:absolute; inset-inline-end:var(--space-2); top:50%; translate:0 -50%; color:var(--foreground); }
.list-box-item-danger,.list-box-item-danger > .icon,.list-box-item-danger .list-box-item-indicator { color:var(--danger-400); }
/* CHECKBOXGROUP (0.32.0): o da referência — rótulo, descrição, as caixas com 16 antes de cada uma, o
   erro no fim. A descrição de cada caixa fica alinhada com o texto dela, como no `Checkbox` solto. */
.checkbox-group { display:flex; flex-direction:column; align-items:flex-start; }
.checkbox-group > .checkbox { margin-block-start:var(--space-4); }
.checkbox-group > .field-error { margin-block-start:var(--space-2); }
/* RadioGroup (15/10/2026): o molde do CheckboxGroup — 16 antes de cada opção; na horizontal, as opções numa linha com 16
   entre elas, como na referência. */
.radio-group { display:flex; flex-direction:column; align-items:flex-start; }
.radio-group > .radio { margin-block-start:var(--space-4); }
.radio-group-items { display:flex; flex-wrap:wrap; gap:var(--space-4); margin-block-start:var(--space-4); }
.radio-group > .field-error { margin-block-start:var(--space-2); }
/* `labelHidden` (15/10/2026): sem o nome na tela, as opções começam no alto — nada do vão de 16 que o separava delas. */
.radio-group-bare > .label + :is(.radio,.radio-group-items) { margin-block-start:0; }
.checkbox > span > .muted { font-size:var(--text-xs); font-weight:var(--weight-regular); line-height:var(--space-4); }
.checkbox input,.radio input { position:absolute; opacity:0; pointer-events:none; }
/* A MARCA DE SELEÇÃO acompanha a densidade, e antes não acompanhava. Era `18px` cru: em
   `comfortable` casava com metade da altura de controle por coincidência, e em `compact` e
   `spacious` ficava do mesmo tamanho enquanto o resto da linha do formulário mudava — o mesmo
   defeito que o achado A1 pegou no SegmentedControl em 26/07/2026.
   Metade da altura de controle dá exatamente os 18px de antes em `comfortable`, então a captura
   não mexe; o que muda é que agora as outras duas densidades também ficam certas. */
/* 0.32.0: a marca da referência tem 16. A conta passa a "metade menos 2" — 14 · 16 · 18 no sm · md ·
   lg, e continua andando com a densidade, sem número quebrado. Centrada na primeira linha do texto
   (`1lh`), qualquer que seja a entrelinha. O canto da caixa é o 6 dela (`--radius-xs`; era 5 cru). */
.control-mark { --mark:calc(var(--step-h,var(--control-h-md)) / 2 - var(--space-05)); flex:none; inline-size:var(--mark); block-size:var(--mark); margin-top:calc((1lh - var(--mark)) / 2); display:grid; place-items:center; border:1px solid transparent; background:var(--field-bg); }
.control-mark-sm { --step-h:var(--control-h-sm); }
.control-mark-lg { --step-h:var(--control-h-lg); }
.checkbox .control-mark { border-radius:var(--radius-xs); } .radio .control-mark { border-radius:50%; }
.checkbox input:checked + .control-mark { background:var(--control-selected); border-color:transparent; color:var(--control-selected-foreground); }
.checkbox input:focus-visible + .control-mark,.radio input:focus-visible + .control-mark,.switch input:focus-visible + .switch-track { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:transparent; }
/* Cheia com a cor do foco (marcada, ligada), a peça volta ao VÃO (ADR-0059): colado, o anel sumiria
   no recheio, como no botão amarelo. A borda dela já é da cor do recheio, então continua uma linha
   só — é o que a referência principal faz no checkbox e no switch. Inválida, a borda é vermelha e o
   anel volta a colar (vermelho, pela regra do inválido). */
.checkbox input:focus-visible:checked:not([aria-invalid="true"],:user-invalid) + .control-mark,.switch input:focus-visible:checked:not([aria-invalid="true"],:user-invalid) + .switch-track { outline-offset:var(--focus-offset); }
.checkbox input:checked + .control-mark:after { content:""; inline-size:100%; block-size:100%; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
/* A opção marcada fica CHEIA, com o ponto no meio, como a da referência (o ponto dela tem 8 numa
   marca de 16: a metade). Era vazia, com o ponto amarelo. */
.radio input:checked + .control-mark { background:var(--control-selected); border-color:transparent; }
/* A BOLINHA tem 6 de 14, a da referência (`scale: 0.4286` no CSS publicado dela, 3.2.6), e é ENCOLHIDA POR ESCALA a
   partir do miolo inteiro, e não desenhada pequena (17/10/2026 — o Victor: "a bolinha do rádio não está centralizada, é
   torta"). Medido na imagem: a de antes, 7 dentro de 14, ficava meio ponto acima e à esquerda do centro em todo zoom —
   a folga de 3,5 virava 3 de um lado e 4 do outro. A escala gira em torno do centro exato da caixa. */
.radio input:checked + .control-mark:after { content:""; inline-size:100%; block-size:100%; border-radius:50%;
  background:var(--control-selected-dot); scale:calc(3 / 7); }
.switch { display:inline-flex; align-items:center; gap:var(--space-3); font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; } .switch input { position:absolute; opacity:0; }
/* O TRILHO DO SWITCH (0.32.0): o da referência, 40 × 20 (sm 32 × 16, lg 48 × 24) — a largura é o
   dobro da altura. Era 42 × 24. A altura é a de controle MENOS 16: dá exatamente os três dela
   (32 · 36 · 40 → 16 · 20 · 24), continua andando com a densidade e passa pela `--step-h`, que é o
   caminho do tamanho responsivo (`size-*`). */
.switch-track { --switch-h:calc(var(--step-h,var(--control-h-md)) - var(--space-4)); position:relative; flex:none; inline-size:calc(var(--switch-h) * 2); block-size:var(--switch-h); border-radius:999px; background:var(--muted); border:1px solid transparent; transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard); }
.switch-track-sm { --step-h:var(--control-h-sm); }
.switch-track-lg { --step-h:var(--control-h-lg); }
/* O botão TEM de encolher com o trilho: preso em 16px, num trilho `compact` de 20px de altura
   ele mais os dois recuos dariam 22px e vazariam. `100% - --space-2` dá os 16px de antes em
   `comfortable` e encolhe junto nas outras.
   A conta desconta 6 e não 8 porque `100%` num elemento ABSOLUTO resolve contra a caixa de
   PADDING do contêiner: 24 menos as duas bordas de 1px são 22.
   E o tamanho vem de UM eixo só, com `aspect-ratio` fechando o quadrado, porque porcentagem no
   eixo inline resolve contra a LARGURA do contêiner (40px) e não contra a altura. Escrever a
   mesma conta nos dois eixos dava um botão de 34×16 — medido no navegador, não deduzido, depois
   que a suíte de captura reprovou duas seções da página de docs. */
/* 0.32.0 — a bolinha da referência é uma CÁPSULA (a altura do trilho menos 4; a largura, 11/8 dela:
   22 × 16 no md), a 2 da borda de fora. O trilho tem borda de 1 (é ela que fica vermelha no
   inválido), então a folga por dentro é 1. Ligada, ela anda até a outra ponta: `--switch-x`, a
   mesma distância nos dois sentidos de escrita. */
.switch-track:after { --thumb-h:calc(var(--switch-h) - 2 * var(--space-05)); --thumb-w:calc(var(--thumb-h) * 11 / 8); content:""; position:absolute; inset-inline-start:calc(var(--space-05) - var(--border-width)); top:calc(var(--space-05) - var(--border-width)); block-size:var(--thumb-h); inline-size:var(--thumb-w); border-radius:var(--radius-full); background:var(--muted-foreground); transition:transform var(--duration-base) var(--ease-standard),background var(--duration-base) var(--ease-standard); }
.switch-track { --switch-x:calc(var(--switch-h) * 2 - (var(--switch-h) - 2 * var(--space-05)) * 11 / 8 - 2 * var(--space-05)); }
.switch input:checked + .switch-track { background:var(--control-selected); border-color:transparent; } .switch input:checked + .switch-track:after { transform:translateX(var(--switch-x)); background:var(--control-thumb); }
/* DESATIVADO (lote 1, as travas, 20/10/2026 — o check 49 achou): o `<input>` é invisível e quem desenha é a marca,
   então o `disabled` chegava ao campo e nada mudava na tela. A peça inteira recua, marca e nome, como na referência
   (o estado de desativado dela vai na raiz do controle, a 0,5). Vale também para as opções de um grupo desativado. */
.checkbox:has(> input:disabled),.radio:has(> input:disabled),.switch:has(> input:disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
.range { width:100%; accent-color:var(--primary); }
/* Slider VERTICAL, no `<input type=range>` NATIVO — sem trocar de motor.

   Eu havia registrado no `G-AXIS-03` que a vertical "exige trocar o motor". Era premissa errada,
   e a medição nos TRÊS motores (Chromium, Firefox, WebKit, 22/08/2026) desmentiu: geometria, as
   oito teclas, direção, arraste e RTL passam todos no elemento nativo.

   Duas propriedades, e cada uma faz uma coisa:
   • `writing-mode:vertical-rl` põe o eixo INLINE na vertical. É por isso que a altura se dá com
     `inline-size` e NÃO com `block-size`: em writing-mode vertical o block-size é a LARGURA, e a
     primeira tentativa saiu com a caixa deitada exatamente por isso.
   • `direction:rtl` inverte o início do eixo inline, para o TOPO ser o valor MAIOR. Sem ela,
     medido: ArrowUp diminui e clicar no topo dá 0. Ela vai no PRÓPRIO elemento e não herdada,
     para o eixo não mudar com a direção do documento — "para cima é mais" é convenção de
     instrumento, não de idioma, e foi medido que em documento RTL o comportamento se mantém.

   E a regra vem DEPOIS da base de propósito: as duas têm a mesma especificidade, e
   `.range{width:100%}` anulava o `width:auto` daqui — a caixa saía 129x16 nos três motores.
   Mesma armadilha de ordem de cascata que os tons do botão. */
.range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; }
/* SLIDER (HER-05, 0.32.0) — o desenhado da referência. Rótulo e valor na linha de cima (14, peso
   médio, o número tabular); o trilho de 20 no cinza neutro, o preenchimento na cor da marca; a alça
   é uma cápsula de 28 × 20 na cor da marca com o miolo de 24 × 16, que encolhe a 90% enquanto se
   arrasta. O miolo dela é branco sobre o azul; aqui é a cor de LETRA sobre o amarelo
   (`--primary-foreground`, escura) — branco sobre amarelo quase não se vê. O canto é o nosso: cápsula em tudo. Quem põe a alça e o preenchimento no lugar é o
   motor, por estilo em linha (posição e tamanho); aqui fica só a pele. Nas pontas a alça fica dentro
   do trilho pelo jeito da referência: 12 de borda TRANSPARENTE em cada ponta do trilho (o fundo pinta
   por baixo dela, então o trilho continua inteiro), e a alça, centrada, anda só no miolo. O
   preenchimento volta 12 para começar na ponta visível. O alinhamento "na borda" do motor faria o
   mesmo, mas só depois de a página rodar no navegador — a alça sairia invisível no HTML do servidor.
   Vertical: o valor em cima, o trilho no meio, o rótulo embaixo, e a altura é a do `Range` vertical
   (`--range-vertical-size`). */
.slider { display:grid; grid-template-areas:"label output" "track track"; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-1); inline-size:100%; }
.slider-label { grid-area:label; inline-size:fit-content; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
.slider-output { grid-area:output; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
.slider-control { grid-area:track; display:flex; align-items:center; touch-action:none; }
.slider-track { position:relative; inline-size:100%; block-size:var(--space-5); border-inline:var(--space-3) solid transparent; border-radius:var(--radius-full); background:var(--secondary); }
.slider-fill { box-sizing:content-box; block-size:100%; margin-inline-start:calc(-1 * var(--space-3)); padding-inline-start:var(--space-3); border-radius:var(--radius-full); background:var(--primary); }
.slider-thumb { display:grid; place-items:center; inline-size:calc(var(--space-6) + var(--space-1)); block-size:100%; border-radius:var(--radius-full); background:var(--primary); cursor:grab; }
.slider-thumb::after { content:""; inline-size:var(--space-6); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--control-thumb); box-shadow:var(--shadow-sm); transition:scale var(--duration-fast) var(--ease-standard); }
.slider-thumb[data-dragging] { cursor:grabbing; }
.slider-thumb[data-dragging]::after { scale:.9; }
.slider-thumb:has(input:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
.slider[data-disabled] { opacity:var(--opacity-disabled); }
.slider[data-disabled] .slider-thumb { cursor:not-allowed; }
.slider[data-orientation="vertical"] { grid-template-areas:"output" "track" "label"; grid-template-columns:minmax(0,1fr); justify-items:center; gap:var(--space-2); inline-size:auto; }
.slider[data-orientation="vertical"] .slider-control { block-size:var(--range-vertical-size,10rem); }
.slider[data-orientation="vertical"] .slider-track { inline-size:var(--space-5); block-size:100%; border-inline:0; border-block:var(--space-3) solid transparent; }
.slider[data-orientation="vertical"] .slider-fill { inline-size:100%; margin-inline-start:0; padding-inline-start:0; margin-block-end:calc(-1 * var(--space-3)); padding-block-end:var(--space-3); }
.slider[data-orientation="vertical"] .slider-thumb { inline-size:100%; block-size:calc(var(--space-6) + var(--space-1)); }
.slider[data-orientation="vertical"] .slider-thumb::after { inline-size:var(--space-4); block-size:var(--space-6); }
@media (prefers-reduced-motion:reduce) { .slider-thumb::after { transition:none; } }
/* A TRILHA DE COR (0.32.0, ADR-0069) — a variação `channel` do Slider, em qualquer canal. A pintura (a exceção da
   ADR-0069) chega pela variável que o componente põe; esta folha não escreve gradiente (check 4). O gradiente vai
   de ponta a ponta do trilho (`background-origin: border-box`) e as paradas começam na folga (`--slider-cap`, a
   mesma de onde o pino para): a ponta tem a cor chapada do mínimo e do máximo. Sem o preenchimento: a cor É a
   trilha. O pino é o da referência (lido no CSS publicado dela, 3.2.6): redondo de 16, na cor do valor, com o anel
   branco de 3 — branco nos dois temas, porque fica sobre a cor. A cor do pino vai por uma sombra por dentro, para o
   xadrez aparecer por baixo quando ela é transparente.
   O XADREZ (14/10/2026, o Victor: "xadrez sim", só onde há transparência) é desenho de SVG, e não gradiente: no
   alfa, embaixo da trilha e do pino. E `forced-color-adjust:none`, como na biblioteca da referência: com o alto
   contraste do sistema, a trilha continua mostrando as cores. */
/* O xadrez da transparência, um desenho só para as peças que o mostram (a trilha do alfa, a amostra transparente). */
.slider-color,.color-swatch-alpha { --color-checker:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath fill='%23fff' d='M0 0h8v8H0z'/%3E%3Cpath fill='%23c8c8c8' d='M0 0h4v4H0zM4 4h4v4H4z'/%3E%3C/svg%3E"); }
.slider-color { --slider-cap:var(--space-3); }
.slider-color .slider-track { background:var(--slider-track-fill,var(--secondary)); background-origin:border-box; forced-color-adjust:none; }
.slider-alpha .slider-track { background-image:var(--slider-track-fill,none),var(--color-checker); background-size:auto,var(--space-2) var(--space-2); }
.slider-color .slider-thumb { box-sizing:border-box; inline-size:var(--space-4); block-size:var(--space-4); align-self:center; border:0; background:var(--color-checker) center/var(--space-2) var(--space-2); box-shadow:inset 0 0 0 var(--space-4) var(--slider-thumb-color,var(--primary)), var(--shadow-md); forced-color-adjust:none; }
.slider-color .slider-thumb::after { content:none; }
.slider-color[data-orientation="vertical"] .slider-thumb { inline-size:var(--space-4); block-size:var(--space-4); }
/* COLORAREA (0.32.0, ADR-0069) — a área de cor. A pintura (o gradiente, a ÚNICA exceção à ADR-0007) chega pela
   variável que o componente põe (`--color-area-fill`): esta folha não escreve gradiente nenhum (check 4).
   Medidas da referência, lidas no CSS publicado dela (3.2.6): quadrada, até 224 de largura, canto 16; o pino de
   16 que cresce para 20 ao arrastar, com o anel de 3. 224 não tem token: sai de dois `--space-24` e um `--space-8`.
   O anel é BRANCO nos dois temas, e não um token de tema: ele fica sobre a cor escolhida, e não sobre a página.
   Os dois `range` escondidos (o motor da área) cobrem o pino com opacidade quase zero, como na referência: o
   leitor de tela por toque os acha no lugar do pino. */
.color-area { position:relative; inline-size:100%; max-inline-size:calc(2 * var(--space-24) + var(--space-8)); aspect-ratio:1; border-radius:var(--radius-lg); background:var(--color-area-fill,var(--secondary)); background-blend-mode:var(--color-area-blend,normal); box-shadow:none; touch-action:none; cursor:crosshair; user-select:none; forced-color-adjust:none; }
/* Os pontinhos (`showDots`, o da referência: um ponto branco a 20% a cada 8) são desenho de SVG por cima da área,
   e não gradiente. O pino fica acima deles. */
.color-area-dots::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='4' cy='4' r='1' fill='%23fff' fill-opacity='.2'/%3E%3C/svg%3E"); background-size:var(--space-2) var(--space-2); }
.color-area-dots .color-area-thumb { z-index:1; }
.color-area[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
.color-area-thumb { position:absolute; box-sizing:border-box; inline-size:var(--space-4); block-size:var(--space-4); margin-inline-start:calc(var(--space-4) / -2); margin-block-start:calc(var(--space-4) / -2); border:0; border-radius:var(--radius-full); background:var(--color-area-thumb,transparent); box-shadow:var(--shadow-md); pointer-events:none; forced-color-adjust:none; transition:inline-size var(--duration-base) var(--ease-standard), block-size var(--duration-base) var(--ease-standard), margin var(--duration-base) var(--ease-standard); }
.color-area[data-dragging] .color-area-thumb { inline-size:var(--space-5); block-size:var(--space-5); margin-inline-start:calc(var(--space-5) / -2); margin-block-start:calc(var(--space-5) / -2); }
.color-area-thumb[data-focus-visible] { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
.color-area-input { position:absolute; inset:0; inline-size:100%; block-size:100%; margin:0; opacity:.0001; pointer-events:none; }
@media (prefers-reduced-motion:reduce) { .color-area-thumb { transition:none; } }
/* COLORPICKER (0.32.0, ADR-0069) — o gatilho é a amostra com o nome, em linha, com o vão de 12 (o da referência,
   lido no CSS publicado dela, 3.2.6). A janela é o `.popover` com o recheio dela — 8 em cima e dos lados, 12
   embaixo — e o vão de 12; a largura é a da área (224) mais o recheio, sem número novo. Dentro, a área ocupa a
   largura toda. */
.color-picker-trigger { display:inline-flex; align-items:center; gap:var(--space-3); padding:0; border:0; border-radius:var(--radius-full); background:none; color:var(--foreground); font:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium); cursor:pointer; }
.color-picker-trigger:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
.color-picker-trigger:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
.color-picker-popover { min-width:0; inline-size:calc(2 * var(--space-24) + var(--space-8) + 2 * var(--space-2)); padding:var(--space-2) var(--space-2) var(--space-3); gap:var(--space-3); }
.color-picker-popover > .color-area { max-inline-size:none; }

/* A CÁPSULA é que tem de medir igual a um botão/campo ao lado — não o botão de dentro.
   Antes: `height:30px` no filho, cru. Em comfortable dava 30+3+3=36 = --control-h-md por
   coincidência; em compact a cápsula ficava 4px alta demais e em spacious 4px baixa demais,
   porque a densidade não alcançava a regra (achado A1, 26/07/2026). Com a altura na cápsula
   os filhos esticam sozinhos (align-items é stretch por padrão) e a conta fecha nas TRÊS. */
/* 0.32.0 — as medidas das abas da referência (o segmentado é a mesma peça): trilho com 4 de recheio
   e sem vão; cada segmento com a altura `sm` (32 no padrão, e anda com a densidade), 16 dos lados,
   letra peso médio. O trilho dá 40 (era 36: 3 + 30 + 3). */
/* A borda transparente de 1 (as abas não têm) entra no recheio: 1 + 3 = os 4 da referência, e o
   trilho mede 40 como o das abas — sem o desconto, 42 (a geometria pegou). */
.segmented { display:inline-flex; gap:0; padding:calc(var(--space-1) - var(--border-width)); border-radius:var(--radius-control); background:var(--muted); border:var(--border-width) solid transparent; box-shadow:none; }
.segmented :is(button,a) { min-block-size:var(--control-h-sm); padding:0 var(--space-4); border:0; border-radius:var(--radius-control); color:var(--muted-foreground); background:transparent; font-weight:var(--weight-medium); cursor:pointer; }
.segmented :is(button,a).active { color:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); border:0; }
/* `fullWidth` (A5, 06/10/2026): ocupa a linha, e cada segmento cresce a partir do rótulo sem
   encolher abaixo dele — o mesmo desenho do nativo. `1 0 auto` e não `1` (= `1 1 0%`): base zero
   reparte a largura em partes iguais, e é isso que quebrava o rótulo no nativo rodando no
   navegador. Quando não cabe, rola pela regra de tela estreita, como sem a prop. */
.segmented-full { display:flex; } .segmented-full :is(button,a) { flex:1 0 auto; }
/* A CÁPSULA QUE NAVEGA (bloco 1, o 5-A — 23/10/2026): com `href` nos itens, o `SegmentedControl` é um <nav> de links — a
   chave Web | Native do site, a peça "Tabs em pílula" da referência na ponta da linha das áreas. O link tem a pele do
   segmento; o atual leva `aria-current="page"` e a mesma marca do escolhido. */
.segmented a { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); text-decoration:none; }
/* `size="sm"`: a da referência (abas de 24 numa cápsula de 32, letra 14) — a altura do controle `xs` da densidade. */
.segmented-sm :is(button,a) { min-block-size:var(--control-h-xs); padding:0 var(--space-4); font-size:var(--text-sm); }
/* Toggle (Lote 1): pressionado usa o MESMO par de tokens do segmento aceso, logo acima. Um
   toggle solto e um segmento selecionado dizem a mesma coisa — se parecessem diferentes, o
   sistema teria dois idiomas para "isto está ligado". O estado vem do motor (`data-pressed`),
   não de uma classe que alguém precisa lembrar de pôr. */
.toggle[data-pressed] { --btn-bg:var(--secondary); --btn-fg:var(--primary); }
/* ── SELECIONADO: uma linguagem só ────────────────────────────────────────────────────
   Item de nav ativo, aba ativa, item de lista lateral e botão alternado ligado mostram o
   MESMO sinal: cápsula elevada + rótulo na cor da marca + fio amarelo encostado na borda de
   baixo. Um usuário aprende uma vez e reconhece em todo lugar (pedido do Victor, 24/07).
   O fio é 2px (fração de pixel borra), inset 15px, e o amarelo entra a 75% — cheio ele
   grita mais que o próprio rótulo. No tema CLARO o amarelo puro como texto dá 1.6:1, longe
   dos 4.5:1 do AA, então o rótulo aprofunda com --foreground e segue âmbar. */
/* O BOTÃO LIGADO saiu desta linguagem na Aurea (ADR-0083, 26/10/2026): amarelo cheio, a letra do botão primário e
   sem fio — a regra fica na seção "A paleta da 1.0", no fim da folha. Aqui ele continua só na `lory`. */
.is-selected,.btn-nav[aria-current]:not([aria-current="false"]),.btn[aria-pressed="true"]:where([data-brand="lory"],[data-brand="lory"] *),
.segmented :is(button,a).active { --btn-bg:var(--secondary); --btn-fg:var(--primary); position:relative; background:var(--secondary); color:var(--primary); }
/* A CÁPSULA ELEVADA que a regra acima promete, e que no trilho não se via (ADR-0059, 08/10/2026):
   o segmento aceso e a aba escolhida vivem sobre --muted, e --secondary dava 1:1 contra ele no
   claro e 1,02:1 no escuro. Sobre o trilho a cápsula é --segment, com a sombra pequena — como a
   aba da referência principal. O rótulo na cor da marca e o fio continuam. */
.segmented :is(button,a).active { --btn-bg:var(--segment); background:var(--segment); box-shadow:var(--shadow-sm); }
/* O TOGGLE LIGADO tem fundo próprio (0.32.0). Com o solto no fundo neutro (o `default` da referência),
   o cinza do "selecionado" acima deixava ligado e desligado com o MESMO fundo — só a letra e o fio
   mudavam, e o `skin.spec` cobra que o ligado pareça ligado pelo fundo. O ligado dela é o tom suave
   da marca; o da Aurea é o "clarinho" (o amarelo a 10%, a receita do `.badge-primary` que o Victor
   escolheu para a página atual da paginação), aqui sobre o cinza, para o grupo colado continuar uma
   cápsula só. A letra da marca e o fio continuam os do "selecionado". */
.btn.toggle[data-pressed]:where([data-brand="lory"],[data-brand="lory"] *) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary)); background:var(--btn-bg); }
.btn.toggle[data-pressed]:hover:not(:disabled):not([aria-disabled="true"]):where([data-brand="lory"],[data-brand="lory"] *) { --btn-bg:color-mix(in oklab, var(--primary) 10%, var(--secondary-hover)); }
/* O ATIVO DA NAV DA LATERAL sai da escala DELA, e não da página (20/08/2026, o Victor viu sob a
   marca `lory`). Ele dividia esta regra com o `.segmented`, que vive no conteúdo — e `--secondary`
   é quase branco no tema claro. Numa lateral escura isso desenhava uma pílula branca com texto
   escuro: as cores invertidas que ele apontou.
   `--sidebar-accent` e `--sidebar-primary` já eram publicados e não tinham uso no core. O segundo
   é o que mantém a MARCA no item atual: fundo da lateral, texto da marca. */
.doc-nav a.active { position:relative; background:var(--sidebar-accent); color:var(--sidebar-primary); }
/* E O ITEM EM REPOUSO PRECISA DA MESMA PROTEÇÃO, por um motivo de ESPECIFICIDADE que só apareceu
   medindo a tela do Victor em 20/08/2026 — eu tinha medido o ATIVO e dado o conserto por pronto.
   Os links da lateral do catálogo não têm atributo `class`, então `[data-theme="light"]
   a:not([class])` — a regra que existe para LINK DE PROSA — casa com eles. Ela pesa (0,2,1) e a
   `.doc-nav a` pesa (0,1,1): a regra de prosa ganhava e pintava o item com
   `color-mix(--primary, --foreground)`. Sob a marca `lory` isso deu MARROM ESCURO
   (`oklab(0.44 0.059 0.051)`) sobre um painel escuro — ilegível, e foi o que ele viu.
   Mesmo peso, e depois na folha: quem manda no que está DENTRO da lateral é a lateral.
   `:not(.active)` NÃO é enfeite — a primeira versão desta linha não tinha, pesava igual à regra do
   item atual e, vindo depois, APAGAVA o laranja dele. Medido no mesmo minuto: ativo e inativo
   saíram com a mesma cor. Com o `:not` ela pesa (0,3,1) e só alcança quem está em repouso. */
[data-theme="light"] .doc-nav a:not(.active):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { color:color-mix(in oklab, var(--sidebar-foreground) 72%, transparent); }
.is-selected::after,.btn-nav[aria-current]:not([aria-current="false"])::after,
.btn[aria-pressed="true"]:not(.btn-icon):where([data-brand="lory"],[data-brand="lory"] *)::after,.segmented :is(button,a).active::after,.tabs-secondary .tab[data-active]::after,
.doc-nav a.active::after,.sidebar-item[aria-current]::after { content:""; position:absolute; inset-inline:15px; bottom:0; height:2px; border-radius:var(--radius-full); background:color-mix(in oklab, var(--primary) 75%, transparent); }
/* e o fio do ativo da lateral segue a marca DELA, pelo mesmo motivo da regra de cor acima. */
.doc-nav a.active::after,.sidebar-item[aria-current]::after { background:var(--sidebar-current-line, color-mix(in oklab, var(--sidebar-primary) 75%, transparent)); }
.sidebar-item[aria-current]::after { inset-inline:var(--sidebar-item-x, var(--space-4)); }
/* ADR-0076 (20/10/2026), o Victor olhando a bancada: "não quero ele azul, não pode ser na cor do botão?". No claro da Aurea
   padrão, o item atual da lateral é o botão primário: o fundo amarelo e a letra cinza-escura dele (8,13:1). O fundo já
   marca o estado, e o fio de baixo some (`--sidebar-current-line` transparente: regra no `::after` não aceitaria a guarda
   de tema no fim). Só sem `data-brand` (a `lory` tem a lateral dela) e só no claro (no escuro, a letra amarela continua).
   Sobre o amarelo, a letra de destaque de DENTRO do item (o selo primário de contagem, um ícone de destaque) é a tinta do
   botão: o azul sobre o amarelo mede 3,49:1 — o axe da varredura achou, no "12" do exemplo da `Sidebar`. */
[data-theme="light"] :is(.sidebar-item[aria-current],.doc-nav a.active):not(:where([data-brand],[data-brand] *,.sidebar[class*="sidebar-indicator-"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --sidebar-current-line:transparent; --primary-emphasis:var(--primary-foreground); --sidebar-primary:var(--primary-foreground); background:var(--primary); color:var(--primary-foreground); }
/* A mistura de 45% (o "marrom") ficou SÓ na `lory` (ADR-0083, 26/10/2026). Na Aurea, o escolhido do claro tem a letra
   grafite, e o botão ligado é amarelo — as duas regras ficam na seção "A paleta da 1.0", no fim da folha. */
[data-theme="light"] .is-selected:where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
[data-theme="light"] .btn[aria-pressed="true"]:where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .segmented :is(button,a).active:where([data-brand="lory"],[data-brand="lory"] *):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
  { --btn-fg:color-mix(in oklab, var(--primary) 45%, var(--foreground)); color:color-mix(in oklab, var(--primary) 45%, var(--foreground)); }
/* A NAV DA LATERAL SAIU DESTA LISTA em 20/08/2026. O ajuste existe porque o amarelo puro não se lê
   sobre o claro — mas ele mistura o `--foreground` da PÁGINA, e o item da lateral não está sobre a
   página: está sobre `--sidebar-accent`. Sob a marca `lory`, onde esse fundo é escuro no tema
   claro, a mistura escurecia o texto contra um fundo escuro. Quem manda ali é `--sidebar-primary`,
   que cada marca já publica com a claridade certa para o painel dela. */

/* `line-height:1` não é enfeite: sem ele o .badge herdava a entrelinha do pai e a MESMA
   classe media 26px dentro do .brand (lh 18px) e 22px dentro de um .btn-nav (lh 12px) — na
   mesma barra (achado A2, 26/07/2026). Geometria de componente não se decide pelo contexto.
   A etiqueta de código do SITE (a classe `.chip` do `scripts/build-catalog.mjs`, que não é peça da Aurea) já tinha
   aprendido isso; o .badge não. Desde 19/10/2026 (GAR-20), o componente `Chip` existe: é outro nome do `Badge`. */
/* 0.32.0: as medidas do Chip da referência (o `Badge` da Aurea é o Chip dela), lidas no CSS publicado:
   24 de altura, 10 até o texto (8 da caixa + 2 do rótulo — aqui, com a borda de 1 que é nossa, 9), 4
   entre o glifo e o texto (era 6); `sm` 20 com 6 até o texto, `lg` 28 com 14 e letra de 14. A cápsula e a
   borda continuam da Aurea, como no nativo (0.11.0). */
.badge { --badge-accent:var(--secondary-foreground); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); min-height:var(--space-6); padding:0 calc(var(--space-2) + var(--space-05) - var(--border-width)); border:1px solid transparent; border-radius:var(--radius-control); background:var(--secondary); color:var(--secondary-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--space-4); white-space:nowrap; }
/* O glifo do badge tem tamanho PRÓPRIO, senão o `.icon` padrão (20px) estoura os 24px e o
   badge com ícone fica mais alto que o badge de texto na mesma fila. 16px + 3+3 de padding
   + 1+1 de borda = 24px exatos: com ícone ou sem, mede o mesmo. */
.badge .icon { width:var(--icon-sm); height:var(--icon-sm); }
/* fit="content" (R-01): o tamanho do texto mesmo numa coluna. `fit-content` e não `align-self`:
   numa fila, `align-self:flex-start` tiraria o selo do meio; o tamanho definido só desliga o
   esticar, que é o que a coluna faz com um item sem tamanho. */
.badge-fit { inline-size:fit-content; }
/* O cheio da marca escreve com a letra do botão amarelo (`--primary-foreground`): na ADR-0073 o acento do claro virou o
   próprio amarelo, e a letra de antes (`--background`, clara) media 1,75:1 em cima dele. O fundo, na Aurea padrão, é o
   primário desde a ADR-0076 (a regra logo abaixo). */
.badge-primary { --badge-accent:var(--primary-emphasis); --badge-on:var(--primary-foreground); color:var(--primary-emphasis); border-color:transparent; background:color-mix(in srgb,var(--primary) 10%,transparent); }
/* ADR-0076 (20/10/2026): na Aurea padrão a letra de destaque do claro é o AZUL, e o cheio continua o AMARELO — o fundo do
   selo cheio é o primário, e não o acento (com o acento, sairia a letra cinza no azul, 1,99:1). Só sem `data-brand`, como o
   contorno lá embaixo: na `lory` do claro o primário com a letra dela mede 3,08:1, e o acento dela já é o fundo certo. */
.badge-primary:not(:where([data-brand],[data-brand] *)) { --badge-fill:var(--primary); }
/* TAMANHOS. O md é a base (24px), que não muda — é o que as 103 fichas já usam. */
.badge-xs { min-height:var(--space-4); padding:0 var(--space-1); border-width:0; }
.badge-sm { min-height:var(--space-5); padding:0 calc(var(--space-1) + var(--space-05) - var(--border-width)); }
.badge-lg { min-height:var(--space-7); padding:0 calc(var(--space-3) + var(--space-05) - var(--border-width)); font-size:var(--text-sm); }
/* ACESSÓRIOS de dentro do chip. O ponto herda a cor do texto por `currentColor`, então ele
   acompanha variante e ênfase sem uma regra por combinação. */
.badge-dot { flex:none; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:currentColor; }
.badge-image { flex:none; width:var(--space-4); height:var(--space-4); border-radius:var(--radius-full); object-fit:cover; }
.badge-dismiss { display:inline-flex; align-items:center; justify-content:center; flex:none; width:var(--space-4); height:var(--space-4); margin-inline-end:calc(var(--space-1)*-1); padding:0; border:0; border-radius:var(--radius-full); background:transparent; color:inherit; cursor:pointer; }
.badge-dismiss:hover { background:color-mix(in srgb,currentColor 16%,transparent); }
.badge-dismiss .icon { width:var(--space-3); height:var(--space-3); }

/* As quatro variantes de propósito vivem no bloco das ÊNFASES, mais abaixo, porque é de lá que
   sai o `--badge-accent` de que `solid` e `outline` dependem. O merge das duas linhagens tinha
   deixado uma SEGUNDA cópia delas aqui em cima, sem o acento: mesma especificidade, e a de
   baixo vencia por ordem de fonte. Quatro regras mortas, medidas em 29/08/2026. */
/* ── O BADGE SOBREPOSTO — contador no canto de outra coisa ──────────────────────────
   Anatomia do selo de uma das referências, medida no fonte: raiz `relative/inline-flex/flex-shrink:0`,
   o contador `absolute` com `z-index:1`, e o deslocamento do canto valendo **0 para caixa
   quadrada e 14% para redonda** — é a prop de sobreposição dela, e sem ele o contador de um avatar fica solto
   fora do círculo.
   O ANEL DE RECORTE é o que faltava e o que fazia parecer sujo: um fio da cor da superfície
   entre o contador e o que está atrás. Três fontes independentes, todas entre as referências:
   um anel de 1,5px da cor do fundo, uma borda de 2 da cor do fundo e uma sombra `0 0 0 2px` da
   cor da superfície (esta no exemplo de contato da mesma referência da anatomia).
   A superfície de trás NÃO é adivinhável em CSS — dentro de um card ela é `--card`, não
   `--background`. Por isso ela é uma propriedade: sobrescreva `--badge-ring` no contêiner. */
.badge-anchor { position:relative; display:inline-flex; vertical-align:middle; flex-shrink:0; }
.badge-overlay { --badge-ring:var(--background); --badge-inset:0%; position:absolute; z-index:1; min-height:var(--space-4); padding:0 var(--space-1); box-shadow:none; }
.badge-on-circle { --badge-inset:14%; }
/* O ponto sozinho não tem conteúdo, então ele precisa de medida própria. */
.badge-overlay.badge-is-dot { width:var(--space-2); min-width:var(--space-2); height:var(--space-2); min-height:var(--space-2); padding:0; }
.badge-at-top-end { inset-block-start:var(--badge-inset); inset-inline-end:var(--badge-inset); transform:translate(50%,-50%); }
.badge-at-top-start { inset-block-start:var(--badge-inset); inset-inline-start:var(--badge-inset); transform:translate(-50%,-50%); }
.badge-at-bottom-end { inset-block-end:var(--badge-inset); inset-inline-end:var(--badge-inset); transform:translate(50%,50%); }
.badge-at-bottom-start { inset-block-end:var(--badge-inset); inset-inline-start:var(--badge-inset); transform:translate(-50%,50%); }
/* `transform` não espelha sozinho, e `inset-inline-*` sim: em RTL o par sai trocado e o
   contador vai para dentro da caixa. As quatro regras abaixo são o preço disso. */
.badge-at-top-end:dir(rtl) { transform:translate(-50%,-50%); }
.badge-at-top-start:dir(rtl) { transform:translate(50%,-50%); }
.badge-at-bottom-end:dir(rtl) { transform:translate(-50%,50%); }
.badge-at-bottom-start:dir(rtl) { transform:translate(50%,50%); }
/* ACESSÓRIO SOBRE A MARCA — o badge INVERTE quando o que está debaixo dele é o amarelo.
   Achado pelo Victor em 17/08/2026 na barra inferior, e a pergunta obrigatória do CLAUDE.md
   ("quem mais tem esse problema?") devolveu um defeito ANTIGO e publicado: `.badge-primary`
   dentro de `.btn-primary` é amarelo translúcido com texto `--primary-emphasis` — medido no
   navegador, texto `oklch(0.795 0.184 86.047)` sobre fundo `oklch(0.795 0.184 86.047)`.
   Contraste 1:1, literalmente invisível, e nenhum gate via: check nenhum compara a cor de um
   filho com a do pai.
   A inversão é a saída óbvia e a única que não inventa cor nova — o par da marca já existe
   (`--primary`/`--primary-foreground`) e é o mesmo que o botão usa.
   O ENVOLTÓRIO leva só a cor de texto, nunca fundo: ele é a caixa de posição do acessório, e
   pintá-lo desenharia um retângulo atrás de um badge que é pílula. */
.btn-primary .badge { background:var(--primary-foreground); color:var(--primary); border-color:transparent; }
/* O `circle-bold` é o único indicador que preenche com o amarelo sólido, então é o único onde
   o contador cai sobre a cor da marca e precisa da mesma inversão do botão primário. Os outros
   seis deixam o contador sobre a superfície da barra, onde ele já se lê. */

.badge-success { --badge-accent:var(--success-400); --badge-fill:var(--success); --badge-on:var(--success-foreground); color:var(--success-400); background:var(--success-bg); border-color:transparent; }
.badge-warning,.badge-paused { --badge-accent:var(--warning-400); --badge-fill:var(--warning); --badge-on:var(--warning-foreground); color:var(--warning-400); background:var(--warning-bg); border-color:transparent; }
.badge-danger { --badge-accent:var(--danger-400); --badge-fill:var(--destructive); --badge-on:var(--destructive-foreground); color:var(--danger-400); background:var(--danger-bg); border-color:transparent; }
.badge-info,.badge-running { --badge-accent:var(--info-400); --badge-fill:var(--info); --badge-on:var(--info-foreground); color:var(--info-400); background:var(--info-bg); border-color:transparent; }
/* Os tons de ESTADO DE TRABALHO (ADR-0081, 24/10/2026): running é o info (acima), paused o aviso, review o violeta de
   categoria, e offline o apagado — como o `Status offline`. Antes paused, offline e review saíam iguais ao neutral. O
   cheio do offline é o par do texto apagado invertido: a letra que passa sobre o fundo vira o fundo. */
.badge-offline { --badge-accent:var(--subtle-foreground); --badge-fill:var(--muted-foreground); --badge-on:var(--background); color:var(--subtle-foreground); background:var(--fill-1); border-color:transparent; }
/* AS OITO CORES DE CATEGORIA (GAR-07, ADR-0060, 09/10/2026): marcam GRUPO, não estado — "Motos" e
   "Carros" num site de notícias. Mesma receita dos quatro propósitos acima (acento, fundo suave e
   o fio misturado com a borda), e por isso as três ênfases valem para elas sem regra nova. O
   amarelo fica de fora: é da marca. Quem cobra o AA nos dois temas é o `badge-categoria.spec.ts`. */
.badge-red { --badge-accent:var(--category-red); color:var(--category-red); background:var(--category-red-bg); border-color:transparent; }
.badge-orange { --badge-accent:var(--category-orange); color:var(--category-orange); background:var(--category-orange-bg); border-color:transparent; }
.badge-green { --badge-accent:var(--category-green); color:var(--category-green); background:var(--category-green-bg); border-color:transparent; }
.badge-teal { --badge-accent:var(--category-teal); color:var(--category-teal); background:var(--category-teal-bg); border-color:transparent; }
.badge-cyan { --badge-accent:var(--category-cyan); color:var(--category-cyan); background:var(--category-cyan-bg); border-color:transparent; }
.badge-blue { --badge-accent:var(--category-blue); color:var(--category-blue); background:var(--category-blue-bg); border-color:transparent; }
.badge-violet,.badge-review { --badge-accent:var(--category-violet); color:var(--category-violet); background:var(--category-violet-bg); border-color:transparent; }
.badge-pink { --badge-accent:var(--category-pink); color:var(--category-pink); background:var(--category-pink-bg); border-color:transparent; }
/* ── AS TRÊS ÊNFASES — e elas vêm DEPOIS das variantes de propósito ─────────────────
   Cada variante declara só o ACENTO; as ênfases saem dele. Antes cada variante escrevia
   cor + fundo + borda na mão, e uma ênfase nova custaria seis regras novas.
   A POSIÇÃO NO ARQUIVO É A REGRA, não estilo: `.badge-solid` e `.badge-success` têm a MESMA
   especificidade (0,1,0), então quem vem depois vence. Escritas antes, as três não faziam
   nada em quatro das seis variantes — medido no navegador, `solid` e `outline` devolviam o
   número do `soft`. É a mesma armadilha que o `.banner` e o `.data-list` já pagaram aqui.
   `--background` como texto do sólido serve aos DOIS temas porque o acento já vira com o
   tema: `--success-400` é verde CLARO no escuro e verde ESCURO no claro. */
/* O selo CHEIO de estado é o botão cheio do mesmo tom (ADR-0061): a mesma cor funda e a mesma letra
   (`--badge-fill`/`--badge-on`). Quem não declara o par (as categorias, o neutro) segue enchendo com o
   acento, como antes; a marca declara a letra (ADR-0073) e, na Aurea padrão, o fundo é o primário (ADR-0076). */
.badge-solid { background:var(--badge-fill, var(--badge-accent)); color:var(--badge-on, var(--background)); border-color:transparent; }
.badge-outline { background:transparent; color:var(--badge-accent); border-color:transparent; }
/* flat (15/10/2026): o tom de sempre sem a linha em volta — o selo da referência não tem borda em forma nenhuma. A
   borda fica, transparente: a medida do selo não muda. */
.badge.badge-flat { border-color:transparent; }
.status-dot { width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }
/* Status: condição operacional (DIRECTION §3.6) — NÃO é o pill do Badge; é ponto + rótulo
   solto na linha. A variante pinta o .status (o ponto herda por currentColor) e o rótulo
   volta pra --foreground, senão a frase inteira fica colorida e ilegível no claro. Os
   nomes operacionais e os semânticos apontam pro mesmo par de tokens de propósito. */
.status { display:inline-flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--text-sm); }
.status-label { color:var(--foreground); }
.status-online,.status-success { color:var(--success-400); }
.status-away,.status-warning { color:var(--warning-400); }
.status-busy,.status-danger { color:var(--danger-400); }
.status-running,.status-info { color:var(--info-400); }
/* offline é o único que NÃO é "mais uma cor": --subtle-foreground e --muted-foreground
   colapsam no MESMO valor no tema claro, então offline sairia idêntico ao neutral. Ponto
   VAZADO resolve nos dois temas e ainda diz a coisa certa (ausência, não outro estado).
   Escopado em .status-offline: o .status-dot dentro do Badge (Chat) segue preenchido. */
.status-offline { color:var(--subtle-foreground); }
.status-offline .status-dot { background:color-mix(in srgb,currentColor 40%,transparent); box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent); }

.card { min-width:0; padding:var(--card-pad); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--card-foreground); box-shadow:none; }
/* padding="none" (C-05): sem respiro, e a mídia recortada no raio 22 do próprio cartão. */
.card-flush { padding:0; overflow:hidden; }
/* Card.Media e orientation (A-14). Vertical: a mídia primeira sangra até a borda de cima e dos
   lados. Horizontal (o modo lista): a mídia à esquerda, 96 de largura (a do exemplo da
   referência, nosso --space-24), 16 até o texto, e o raio concêntrico da casa. */
.card-media { display:block; overflow:hidden; }
/* As partes do cartão (15/10/2026), as da referência: o título 14/24 médio e a descrição 14/20 apagada, colados no
   cabeçalho; o conteúdo em coluna com 4; o rodapé em linha, com 8 entre os botões; 12 entre as partes. */
.card-header { display:flex; flex-direction:column; }
.card-title { margin:0; color:var(--card-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--space-6); }
.card-description { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
.card-content { display:flex; flex-direction:column; gap:var(--space-1); }
.card-footer { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
:is(.card-header,.card-content,.card-footer) + :is(.card-header,.card-content,.card-footer) { margin-block-start:var(--space-3); }
.card-media > :is(img,video,.image) { display:block; width:100%; }
.card:not(.card-horizontal) > .card-media:first-child { margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad); border-radius:calc(var(--radius-card) - var(--border-width)) calc(var(--radius-card) - var(--border-width)) 0 0; }
.card-flush:not(.card-horizontal) > .card-media:first-child { margin:0; }
.card-horizontal { display:grid; grid-template-columns:var(--space-24) minmax(0,1fr); align-items:start; column-gap:var(--space-4); }
.card-horizontal > .card-media { grid-row:1 / span 99; border-radius:calc(var(--radius-card) - var(--card-pad)); }
.card-horizontal > :not(.card-media) { grid-column:2; min-width:0; }
.card-raised { box-shadow:none; } .card-inset { background:var(--secondary); }
/* `outline` (0.32.0): o cartão da cor de onde ele está, só com a linha em volta — a caixa grande do
   Início da documentação da referência (o Victor, 13/10/2026: "na mesma cor do site, só tem uma linha
   ao redor"). O nome é o da referência para "sem fundo, com contorno" (o botão dela); o `transparent`
   do cartão dela tira também a linha, e esta guarda. A borda, o raio e o recheio são os do `.card`. */
.card-outline { background:transparent; }
/* A variante interativa é o ALVO, e desde o G-A11Y-11 ela exige `render` — o elemento vem de
   quem consome, e é `<button>` ou `<a href>` conforme a promessa seja ação ou navegação.
   As quatro normalizações abaixo existem por causa disso: um <button> traz fonte própria,
   centraliza o texto, encolhe até o conteúdo e é inline-block. Sem elas o cartão-botão desenharia
   diferente do cartão-div, e a identidade dependeria de qual elemento o consumidor escolheu.
   É a mesma lição do `.step-trigger` (G-A11Y-10): o elemento certo precisa da pele certa. */
/* GAR-08 (06/10/2026): o `display:block` daqui vinha DEPOIS do `.card-horizontal { display:grid }`,
   com a mesma força, e ganhava — o cartão clicável na horizontal perdia a coluna da foto. Agora o
   bloco é só o padrão do alvo (um `<a>` ou `<button>` nasceria em linha), com força ZERO
   (`:where`): qualquer orientação ganha dele, sem depender da ordem das regras. */
:where(.card-interactive) { display:block; }
/* E o sublinhado (achado ao medir o GAR-08, 06/10/2026): o cartão clicável costuma ser um `<a>`
   (o `render` do `Card`), e todo o texto dele saía sublinhado pelo navegador. Os outros alvos que
   viram link (`.btn`, `.sidebar-item`, `.nav-list-row`…) já tiravam; o cartão e o item de menu
   não. Quem cobra é o `link-sem-sublinhado.spec.ts`. */
.card-interactive { cursor:pointer; inline-size:100%; text-decoration:none; font:inherit; text-align:inherit; color:inherit; transition:transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast); }
.card-interactive:hover { transform:translateY(-2px); border-color:transparent; background:var(--surface-2); }
.card-selected { border-color:transparent; background:color-mix(in oklab,var(--primary) 12%,var(--card)); }
.card-danger { border-color:transparent; background:var(--danger-bg); }
/* MT-01 (10/10/2026, ADR-0063): o cartão `contrast` traz `data-theme="dark"` no próprio elemento —
   o fundo, a letra e todo filho já saem do tema escuro. Falta só a linha em volta: no claro, nenhuma
   (o cartão escuro já se separa da tela, 13,3:1); no escuro, o amarelo, com a borda de sempre (1).
   O "está num pedaço escuro?" é o do ANCESTRAL, com a guarda do GAR-05: o atributo do próprio
   cartão não conta, e uma faixa clara dentro da página escura não ganha o contorno. */
.card-contrast { border-color:transparent; }
[data-theme="dark"] .card-contrast:where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *) { border-color:transparent; }
/* MT-02 (10/10/2026, ADR-0063): o traço no topo, `--accent-width` (4), na cor CHEIA do tom e igual
   nos dois temas — a exceção que a ADR-0063 abriu na ADR-0061 para enfeite. O navegador desenha a
   borda grossa do topo afinando na curva do canto, até a de 1 dos lados. `.card.card-accent` tem a
   força de duas classes e vem depois: o escolhido, o de perigo e o contorno do `contrast` mudam os
   outros lados, e o topo continua o traço. */
.card.card-accent { border-block-start-width:0; padding-block-start:calc(var(--card-pad) + var(--accent-width)); box-shadow:inset 0 var(--accent-width) 0 0 var(--card-accent); }
.card-accent-brand { --card-accent:var(--primary); } .card-accent-success { --card-accent:var(--success); }
.card-accent-info { --card-accent:var(--info); } .card-accent-warning { --card-accent:var(--warning); }
.card-accent-danger { --card-accent:var(--destructive); }
/* 0.32.0: a descrição 14/20 colada no título. O `.card-header` e o `.card-title` desta linha (o cabeçalho em LINHA, com
   16 de vão e 16 embaixo, da primeira versão pública) saíram em 15/10/2026: nenhuma peça os usava, e vindo DEPOIS das
   partes do cartão eles separavam o título da descrição do `Card.Header` em 16 — na referência, colados. */
.card-subtitle { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }

/* HER-02 (06/10/2026): o `.alert` e o `.toast` eram `--radius-lg` (16). Painel e superfície
   flutuante são `--radius-card` (22) na identidade da Aurea, como o `.popover`, o `.dialog` e o
   `.banner`; a referência usa 24 nos dois. */
/* 0.32.0, o Alert da referência (lido no CSS publicado dela, ordem do Victor: "igual ao dela"): o fundo
   de CARTÃO, sem borda, com a sombra de superfície; 12 em cima e embaixo e 16 dos lados; 16 entre as
   partes; o ícone de 16 numa caixa de 24; o título 14/24 peso médio NA COR DO ESTADO, e o corpo 14/20
   esmaecido. Até a 0.31.0 a cor do estado tingia o fundo e a borda. `--alert-tone` é a cor do estado. */
.alert { --alert-tone:var(--info-400); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:var(--space-4); padding:var(--space-3) var(--space-4); border:0; border-radius:var(--radius-card); background:var(--card); color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); box-shadow:var(--shadow-sm); }
.alert-success { --alert-tone:var(--success-400); } .alert-warning { --alert-tone:var(--warning-400); } .alert-danger { --alert-tone:var(--danger-400); } .alert-accent { --alert-tone:var(--link); }
/* action (15/10/2026): a coluna do botão, depois do texto e antes do X, no meio da altura. Abaixo de 640 o botão desce
   para baixo do texto, na mesma coluna — a referência repete o botão no celular; aqui ele só muda de lugar. */
.alert-has-action { grid-template-columns:auto minmax(0,1fr) auto auto; }
.alert-action { display:flex; align-items:center; align-self:center; gap:var(--space-2); }
@media (max-width:639px) { .alert-has-action { grid-template-columns:auto minmax(0,1fr) auto; } .alert-has-action > .alert-action { grid-column:2; grid-row:2; justify-self:start; align-self:start; } }
/* Banner: aviso de largura de página. Base ANTES das variantes — mesma
   especificidade, então a última regra vence e a base apagaria as cores. */
.banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 18px; border:1px solid transparent; border-radius:var(--radius-card); background:var(--secondary); }
.banner-info { border-color:transparent; background:var(--info-bg); }
.banner-success { border-color:transparent; background:var(--success-bg); }
.banner-warning { border-color:transparent; background:var(--warning-bg); }
.banner-danger { border-color:transparent; background:var(--danger-bg); }
/* O título do alerta é <strong> e não <h4>: alerta cai em qualquer profundidade da página e
   um h4 fixo quebraria a ordem de cabeçalhos. `display:block` porque o corpo vem embaixo
   dele, não ao lado — as duas linhas são o desenho da referência congelada. */
.alert h4,.alert strong { display:block; margin:0; color:var(--alert-tone); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--space-6); } .alert p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
/* A cor do glifo é a da variante, senão o ícone vira enfeite cinza e não repete o sinal.
   Só o ícone DIRETO do alerta: um ícone dentro do corpo (num botão, num link) é do corpo. */
.alert>.icon { --step-icon:var(--icon-sm); margin:var(--space-1); color:var(--alert-tone); }
.banner strong { font-size:var(--text-sm); } .banner p { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }
/* GAR-19 (lote U, 19/10/2026): o aviso de cookies, Banner variant="consent". Uma coluna: o título (h2), o texto e os
   três botões de MESMO peso numa linha que quebra — rejeitar tão fácil de ver quanto aceitar (o guia da ANPD) —; depois
   da escolha, a confirmação no lugar deles. O aviso mora no alto da página e não fica preso: com position:fixed ele
   cobriria o que recebe o foco (WCAG 2.4.11). A janela de preferências é o Dialog, e as categorias, o Switch. */
/* O fundo e a sombra são os do cartão, como os do Alert: no fundo cinza do Banner comum, os botões cinza sumiam (medido na
   bancada). */
.banner-consent { grid-template-columns:minmax(0,1fr); align-items:start; gap:var(--space-3); background:var(--card); box-shadow:var(--shadow-sm); }
.banner-consent-title { margin:0; color:var(--foreground); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:var(--leading-tight); }
.banner-consent-text { min-inline-size:0; color:var(--muted-foreground); font-size:var(--text-sm); }
.banner-consent-text > * + * { margin-block-start:var(--space-2); }
.banner-consent-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.banner-consent-message { color:var(--foreground); font-size:var(--text-sm); }
.banner-consent-categories { display:grid; gap:var(--space-5); }
.banner-consent-required { display:grid; gap:var(--space-1); }
.banner-consent-required-head { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.banner-consent-required p { margin:0; color:var(--muted-foreground); font-size:var(--text-xs); line-height:var(--space-4); }
@media (max-width:640px) { .banner:not(.banner-consent) { grid-template-columns:auto minmax(0,1fr); } .banner:not(.banner-consent)>:last-child { grid-column:2; justify-self:start; } }
.progress { height:8px; overflow:hidden; border-radius:999px; background:var(--surface-3); }
.progress>span { display:block; height:100%; border-radius:inherit; background:var(--primary); }
/* AN-07 (03/10/2026): a caixa de fora, o texto de apoio e o tom. A anatomia é a da barra de progresso da
   referência (o pacote de estilos dela): a saída no alto à direita, `text-sm` médio com
   algarismos de largura igual, e um vão pequeno até o trilho. O tom é a lista fechada do `ButtonTone`:
   pausado é `neutral`, falha é `danger`. */
.progress-field { display:grid; gap:var(--space-1); }
.progress-detail { justify-self:end; color:var(--muted-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; }
/* 0.32.0, a barra da referência: o rótulo à mostra no alto à esquerda (14 peso médio), a saída à direita,
   e o trilho embaixo, ocupando as duas colunas. sm 4, md 8, lg 12 de espessura. */
.progress-field:has(> .progress-label) { grid-template-columns:minmax(0,1fr) auto; }
.progress-field:has(> .progress-label) > .progress { grid-column:1 / -1; }
.progress-label { color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
.progress-sm { height:var(--space-1); }
.progress-lg { height:var(--space-3); }
.progress-tone-neutral>span { background:var(--muted-foreground); }
.progress-tone-success>span { background:var(--success-400); }
.progress-tone-warning>span { background:var(--warning-400); }
.progress-tone-danger>span { background:var(--danger-400); }
.progress-tone-info>span { background:var(--info-400); }
/* Sem total, um pedaço de 2/5 corre pelo trilho: os números da referência (a largura de 2/5, de -100% a 350%
   da própria largura, 1,5 s, a curva dela). A referência anda com `translateX`; aqui anda a MARGEM LÓGICA
   (de -40% a 140% do trilho, o mesmo percurso), para correr ao contrário na escrita da direita para
   a esquerda sem `:dir(rtl)` — o empacotador do app reescreve `:dir()` como lista de idiomas e a
   regra deixa de pegar (medido no Vite, 03/10/2026). O pedaço tem 8 de altura: a conta por quadro é
   desprezível.
   Com menos movimento ele não corre: a barra inteira, apagada — nunca um pedaço parado, que leria
   como 40% feito. */
.progress-indeterminate>span { width:40%; animation:progress-indeterminate 1.5s cubic-bezier(0.65,0,0.35,1) infinite; }
@keyframes progress-indeterminate { from { margin-inline-start:-40%; } to { margin-inline-start:140%; } }
@media (prefers-reduced-motion:reduce) { .progress-indeterminate>span { width:100%; animation:none; opacity:var(--opacity-disabled); } }
/* DataState (M3): a região que troca de cara. Ela NÃO desenha nada próprio — só empilha o que
   já existe (esqueleto, alerta, estado vazio, conteúdo) com respiro entre eles. Se ganhar borda
   ou fundo, viram duas superfícies para a mesma coisa — o defeito que a `.table-region` cobrou. */
.data-state { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--space-3); }
.skeleton { position:relative; overflow:hidden; border-radius:var(--radius-sm); background:var(--surface-3); }
.skeleton { animation:skeleton-pulse 1.35s ease-in-out infinite; } @keyframes skeleton-pulse { 50% { opacity:.55; } }
/* 0.32.0: `animation="none"` para o pulso; e quem pediu menos movimento ao sistema também não o vê. */
.skeleton-static { animation:none; }
@media (prefers-reduced-motion:reduce) { .skeleton { animation:none; } }

/* Mesma regra da .segmented (0.32.0, as medidas da referência): 4 de recheio, sem vão, a aba de 32
   (`--control-h-sm`, que anda com a densidade), 16 dos lados, peso médio. */
.tabs { display:inline-flex; gap:0; padding:var(--space-1); border:0; border-radius:var(--radius-control); background:var(--muted); }
/* Abas VERTICAIS (a família da orientação, achada pela matriz do §13). A raiz vira GRADE e
   não linha: com `flex-direction:row` o painel herdaria a altura da lista, e uma aba com
   muito conteúdo esticaria a coluna de rótulos junto — medido no navegador em 22/08/2026.
   `align-items:start` para a lista não crescer até a altura do painel; `min-inline-size` no
   painel porque `minmax(0,1fr)` sozinho deixa conteúdo largo (uma tabela) empurrar a coluna
   de rótulos para fora. */
.tabs-root[data-orientation="vertical"] { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:var(--space-4); }
.tabs[data-orientation="vertical"] { flex-direction:column; align-items:stretch; gap:var(--space-1); min-height:0; }
/* o rótulo alinha ao INÍCIO da linha: centrado, uma coluna de abas de larguras diferentes
   sai serrilhada, que é o mesmo defeito que o `.btn-group-vertical` resolve com `stretch`. */
.tabs[data-orientation="vertical"] .tab { text-align:start; }
.tab { position:relative; min-block-size:var(--control-h-sm); padding:0 var(--space-4); border:0; border-radius:var(--radius-control); background:transparent; color:var(--muted-foreground); font-weight:var(--weight-medium); cursor:pointer; }
.tab.active,.tab[data-active] { color:var(--foreground); background:var(--segment); box-shadow:var(--shadow-sm); } .tab.active:after,.tab[data-active]:after { display:none; }
/* `variant="secondary"` (0.32.0): a aba secundária da referência — sem trilho e sem cápsula, um fio
   embaixo da lista, a escolhida com a letra normal e o fio da casa (a regra do "selecionado", mais
   abaixo). */
.tabs-secondary { gap:var(--space-1); padding:0; border-block-end:var(--border-width) solid transparent; border-radius:0; background:transparent; }
.tabs-secondary[data-orientation="vertical"] { border-block-end:0; border-inline-start:var(--border-width) solid transparent; }
.tabs-secondary .tab { border-radius:0; }
.tabs-secondary .tab.active,.tabs-secondary .tab[data-active] { background:transparent; box-shadow:none; color:var(--foreground); }
.tabs-secondary .tab[data-active]::after { display:block; }
/* `panel="plain"` (MNT-05 e C9, 06/10/2026): o painel sem caixa, como o painel de abas da
   referência. Sem recheio dos lados — o conteúdo começa na linha do que está fora do `Tabs` —, e o
   espaço de cima é o mesmo `space-3` do painel do nativo. Na vertical, quem separa é o `gap` da
   grade da raiz, então o espaço de cima não entra. */
.tabs-panel { min-width:0; } .tabs-root:not([data-orientation="vertical"])>.tabs-panel { padding-block-start:var(--space-3); }
/* 0.32.0 — a trilha da referência: vão 6, link 14 PESO MÉDIO esmaecido (sublinhado com o mouse, como o
   dela), a página atual na cor do texto e em peso médio (era negrito), e o separador de 12 (era 16). */
.breadcrumb { display:flex; align-items:center; flex-wrap:wrap; gap:calc(var(--space-1) + var(--space-05)); color:var(--muted-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
.breadcrumb a { color:inherit; text-decoration:none; } .breadcrumb a:hover { color:var(--foreground); text-decoration:underline; text-underline-offset:var(--space-05); }
.breadcrumb > .icon { --step-icon:var(--space-3); }
.breadcrumb [aria-current="page"] { color:var(--foreground); font-weight:inherit; }
/* PAGINATION (0.32.0) — a da referência: o resumo à esquerda (14 esmaecido) e os itens à direita,
   com 4 entre eles; cada número é uma cápsula de 32 (`--control-h-sm`, 44 no toque), 14 PESO MÉDIO,
   que escurece com o mouse; "anterior" e "próxima" com a seta de 16 e o texto, 10 dos lados e 6 entre
   a seta e o texto; as reticências esmaecidas. A página ATUAL é o "clarinho" da Aurea — a receita do
   `.badge-primary` suave (o amarelo a 10%, o contorno da marca e a letra da marca), decisão do Victor.
   O `compact` (o desenho de até a 0.31.0) usa o `Button` e o `Badge`, e não passa por aqui. */
.pagination { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); }
.pagination-summary { margin-inline-end:auto; color:var(--muted-foreground); font-size:var(--text-sm); }
.pagination-content { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); margin:0; padding:0; list-style:none; }
.pagination-link { display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--space-1) + var(--space-05)); min-inline-size:var(--control-h-sm); block-size:var(--control-h-sm); padding-inline:var(--space-1); border:var(--border-width) solid transparent; border-radius:var(--radius-full); background:transparent; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; text-decoration:none; cursor:pointer; transition:background var(--duration-fast),transform var(--duration-fast) var(--ease-standard); }
.pagination-link:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); }
.pagination-link:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.97); }
.pagination-link:disabled,.pagination-link[aria-disabled="true"] { opacity:var(--opacity-disabled); cursor:not-allowed; }
.pagination-link.active { border-color:transparent; background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary-emphasis); }
.pagination-link-nav { padding-inline:calc(var(--space-2) + var(--space-05)); }
.pagination-nav-icon { --step-icon:var(--icon-sm); }
.pagination-ellipsis { display:inline-grid; place-items:center; inline-size:var(--control-h-sm); color:var(--muted-foreground); font-size:var(--text-sm); }
/* Stepper (Lote 2): o container NUNCA existiu no core — só no docs.css, e lá era
   `repeat(4,1fr)`, com o número de etapas cravado. `grid-auto-flow:column` distribui N etapas
   iguais sem saber quanto é N, e colunas iguais são o que faz a linha conectora (`.step:before`,
   ancorada em -50%) cair no lugar certo. */
.stepper { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; }
.step { position:relative; text-align:center; color:var(--subtle-foreground); }
/* O ponto também morava só no docs.css, como o container. Os estados dele (`.step.done`,
   `.step.active`) estavam no core e miravam uma regra que não existia aqui — meia peça. */
.step-dot { position:relative; z-index:1; width:32px; height:32px; margin:0 auto var(--space-2); display:grid; place-items:center; border-radius:50%; border:1px solid transparent; background:var(--surface-1); }
/* Erro é o estado que faltava: uma etapa que reprovou na validação não tinha como se mostrar.
   Cor semântica, não a primária — reprovar não é progredir. */
.step-error { color:var(--danger-400); } .step-error .step-dot { color:var(--danger-400); border-color:transparent; background:var(--danger-bg); }
.step-optional { display:block; color:var(--muted-foreground); font-size:var(--text-xs); }
/* Etapa clicável (fluxo não-linear): o alvo é um botão de verdade, com o foco do sistema.
   E ele PRECISA GERAR CAIXA. `display:contents` era o que estava aqui, e um <button> sem caixa
   não recebe foco — o Chromium recusa `.focus()`, e a etapa clicável só funcionava com o mouse.
   Falha de WCAG 2.1.1 (Teclado), e a regra contradizia o comentário logo acima dela.
   Medido em 27/08/2026 pelo banco do `apps/keyboard-probe`, que reprovou com "o seletor não pôs
   o foco dentro do banco" — a asserção de foco existe exatamente para isto não passar em branco.
   `display:block` + `width:100%` reproduz o arranjo: o `.step-dot` já é `margin:0 auto` e o
   rótulo já herda `text-align:center` do `.step`. Único `display:contents` do core — a pergunta
   "quem mais tem esse problema?" foi feita e a resposta é ninguém. */
.step-trigger { display:block; width:100%; border:0; padding:0; background:none; color:inherit; font:inherit; text-align:inherit; cursor:pointer; }
.step:before { content:""; position:absolute; top:15px; inset-inline-start:-50%; width:100%; height:2px; background:var(--border); } .step:first-child:before { display:none; }
/* 16/10/2026: o `Stepper` do React escreve `step-done` e `step-active`, e estas regras só liam `.step.done` e
   `.step.active` (a marcação à mão) — o passo concluído nunca ficava amarelo na web. As duas formas valem. */
:is(.step.done,.step-done),:is(.step.active,.step-active) { color:var(--foreground); } :is(.step.done,.step-done):before,:is(.step.active,.step-active):before { background:var(--primary); } :is(.step.done,.step-done) .step-dot { color:var(--primary-foreground); background:var(--primary); border-color:transparent; } :is(.step.active,.step-active) .step-dot { border-color:transparent; box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent); }

/* TABELA DE DADOS — e só ela. Estas cinco regras eram de ELEMENTO (`table`, `th,td`, `th`,
   `tr:last-child td`, `tbody tr:hover`) e valiam para toda <table> do documento, inclusive a de
   um consumidor. Nenhum gate as via: os checks 15 e 18 comparam CLASSE, e seletor de elemento
   não tem nenhuma. O Lote 4 pagou a conta — a grade do calendário nasceu com `min-width:720px`
   e o cabeçalho de dias herdou a faixa cinza, a caixa alta e o espaçamento de letra de um
   cabeçalho de tabela de dados. Medido no navegador em 01 e 02/08/2026.
   Escopar é seguro e foi medido antes: `Table` embrulha em `.table-region` e emite `.table` na
   tabela; `DataGrid` embrulha em `.table-wrap`; e as 3 tabelas da página legada estão todas
   dentro de `.table-wrap`. Nenhuma <table> do repositório fica descoberta — o gate de pixel é
   quem prova, e ele tem de acusar ZERO mudança nas superfícies de tabela. */
/* `.table-region` entrou nesta regra em 13/08/2026, e a linha acima ("o gate tem de acusar ZERO
   mudança nas superfícies de tabela") vale para o ESCOPO daquele lote, não para sempre: aqui a
   mudança de superfície é o pedido. O `Table` embrulhava em `.table-region`, que tinha só
   `overflow` e `--radius-lg` — sem borda e sem fundo. Resultado na tela: a tabela aparecia solta
   na página enquanto o `DataGrid`, do lado, tinha a caixa flutuante da marca. Duas peles para a
   mesma coisa, e a do componente mais simples era a errada.
   Somar o seletor em vez de copiar os valores: copiar deixaria duas listas para manter em sincronia,
   que é como as duas peles divergiram. O que continua só do `.table-region` é o foco — ele é
   `tabIndex=0` (região rolável precisa ser alcançável pelo teclado) e o `.table-wrap` não é. */
/* HER-13 (0.32.0, *"tabela quero como essa"*): a pele da referência, lida no CSS publicado dela — a
   MOLDURA cinza (sem borda, 4 dos lados e embaixo), o cabeçalho sobre ela (12 peso médio esmaecido, sem
   caixa-alta, 10 em cima e embaixo e 16 dos lados, com um fio de 16 entre as colunas) e o CORPO como um
   cartão por dentro: as células no fundo de cartão, 12/16 de recheio, letra de 14/20, um fio a meio-tom
   entre as linhas e o canto da casa (o da moldura menos a folga, como a ADR-0033) nas quatro pontas.
   A moldura é a região que rola: no celular a tabela rola de lado dentro dela (a "A" do Victor).
   A densidade continua da Aurea: o recheio de cima e de baixo sai do `--row-h` (no confortável, 12, o
   dela). */
.table-wrap,.table-region { --table-head-h:calc(var(--space-4) + 2 * (var(--space-2) + var(--space-05))); --table-cell-r:calc(var(--radius-card) - var(--space-1)); overflow:auto; padding:0 var(--space-1) var(--space-1); border-radius:var(--radius-card); background:var(--surface-2); }
.table,.table-wrap table { width:100%; border-collapse:separate; border-spacing:0; min-width:720px; font-size:var(--text-sm); }
/* GAR-16 (0.28.0): a tabela inteira com algarismos da mesma largura — a coluna de preço e de ano
   alinha. Só os algarismos mudam; o texto das outras colunas fica igual. */
.table th,.table td,.table-wrap th,.table-wrap td { padding:calc((var(--row-h) - var(--space-5)) / 2 - var(--space-05)) var(--space-4); text-align:start; line-height:var(--space-5); border-bottom:var(--border-width) solid transparent; font-variant-numeric:tabular-nums; }
/* O título da tabela (`caption`) mora na moldura, em cima do cabeçalho, alinhado ao texto das colunas
   (sem regra, o navegador o centralizava). */
.table > caption,.table-wrap table > caption { padding:var(--space-3) var(--space-4) var(--space-1); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--space-5); text-align:start; }
.table thead th,.table-wrap thead th { position:relative; block-size:var(--table-head-h); padding-block:0; border-bottom:0; color:var(--muted-foreground); background:var(--surface-2); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--space-4); }
.table thead th:not(:last-child)::after,.table-wrap thead th:not(:last-child)::after { content:""; position:absolute; inset-inline-end:0; inset-block-start:50%; translate:0 -50%; inline-size:var(--border-width); block-size:var(--space-4); border-radius:var(--radius-full); background:var(--border); pointer-events:none; }
.table tbody :is(td,th),.table-wrap tbody :is(td,th) { background:var(--card); }
.table tbody tr:first-child > :first-child,.table-wrap tbody tr:first-child > :first-child { border-start-start-radius:var(--table-cell-r); }
.table tbody tr:first-child > :last-child,.table-wrap tbody tr:first-child > :last-child { border-start-end-radius:var(--table-cell-r); }
.table tbody tr:last-child > :first-child,.table-wrap tbody tr:last-child > :first-child { border-end-start-radius:var(--table-cell-r); }
.table tbody tr:last-child > :last-child,.table-wrap tbody tr:last-child > :last-child { border-end-end-radius:var(--table-cell-r); }
.table tr:last-child td,.table-wrap tr:last-child td { border-bottom:0; }
@media (hover:hover) { .table tbody tr:hover > :is(td,th),.table-wrap tbody tr:hover > :is(td,th) { background:color-mix(in oklab,var(--card) 40%,var(--surface-2)); } }
/* GAR-12 e GAR-13 (08/10/2026): a tabela de COMPARAÇÃO — as chaves da `Table` e a pele do HTML de
   comparação. A referência principal só tem o cabeçalho preso, à mão, numa caixa de altura fixa; o
   resto veio do mercado, por escolha do Victor (o detalhe está no comentário da `Table`).
   O NOME DA LINHA (`<th scope="row">`) é texto de corpo, não rótulo de coluna: sem caixa-alta, na
   cor do texto, peso médio. Antes herdava a pele do cabeçalho — e ninguém no repositório usava
   `th` no corpo (medido), então nenhum exemplo muda. A FAIXA DE GRUPO (`<th scope="rowgroup">`)
   continua com a pele do cabeçalho de propósito: é rótulo, no idioma que a tabela já usa. */
.table tbody th[scope="row"],.table-wrap tbody th[scope="row"] { color:var(--foreground); font-size:inherit; font-weight:var(--weight-medium); }
/* 0.32.0: a faixa de grupo continua rótulo — o cinza da moldura e a letra do cabeçalho —, agora que o
   cabeçalho da referência mora só no `thead`. */
.table tbody th[scope="rowgroup"],.table-wrap tbody th[scope="rowgroup"] { color:var(--muted-foreground); background:var(--surface-2); font-size:var(--text-xs); font-weight:var(--weight-medium); }
.table tbody tr:last-child th,.table-wrap tbody tr:last-child th { border-bottom:0; }
/* O melhor valor: negrito. O selo "Melhor", em TEXTO, é um `Badge` que o site põe na célula — a
   cor sozinha não diz nada a quem não a enxerga (WCAG 1.4.1). */
.table td[data-best],.table-wrap td[data-best] { font-weight:var(--weight-semibold); }
/* `fit`: sem o mínimo de 720 — a comparação de dois itens cabe num celular de 360. */
.table.table-fit { min-width:0; }
/* `differencesOnly`: o "Só diferenças" esconde as linhas que o site marcou como iguais. */
.table-differences-only tr[data-same] { display:none; }
/* `stickyHeader`: o mesmo mecanismo do `DataGrid` (F6, mais abaixo). A caixa é o contêiner de
   rolagem, então precisa de teto para rolar por dentro; `--table-max-h` é a válvula do consumidor.
   O cabeçalho gruda no topo da CAIXA, não da página: com a caixa rolando de lado, um elemento
   grudento só gruda no contêiner de rolagem mais próximo. */
.table-sticky-header { max-block-size:var(--table-max-h,60vh); }
.table-sticky-header thead th { position:sticky; inset-block-start:0; z-index:1; }
/* `stickyFirstColumn`: a primeira célula de cada linha fica parada ao rolar de lado, com fundo
   próprio (o de cartão; o do cabeçalho no cabeçalho e na faixa de grupo) para o que rola passar
   POR BAIXO dela. O canto (cabeçalho × primeira coluna) fica por cima dos dois. O fio do fim da
   coluna é um pseudo-elemento, porque a borda de célula grudenta, com `border-collapse`, fica para
   trás quando a tabela rola. `isolation` prende os `z-index` daqui dentro da caixa: eles não
   disputam com menu e janela da página. */
.table-sticky-header,.table-sticky-first { isolation:isolate; }
.table-sticky-first :is(thead,tbody,tfoot) > tr > :first-child { position:sticky; inset-inline-start:0; z-index:1; background:var(--card); }
.table-sticky-first thead > tr > :first-child { z-index:2; background:var(--surface-2); }
.table-sticky-first tbody > tr > th[scope="rowgroup"]:first-child { background:var(--surface-2); }
@media (hover:hover) { .table-sticky-first tbody > tr:hover > :first-child { background:color-mix(in oklab,var(--card) 40%,var(--surface-2)); } }
.table-sticky-first :is(thead,tbody,tfoot) > tr > :first-child:not([colspan])::after { content:""; position:absolute; inset-block:0; inset-inline-end:0; inline-size:var(--border-width); background:var(--border); }
/* Achado em 12/10/2026 (o teste GAR-12, vencido desde o passo 6): a moldura da tabela tem recheio de 4 dos
   lados, e a coluna parada gruda na borda de DENTRO dela — a 4. Ao rolar de lado, as células passavam
   nessa faixa de 4 à esquerda da coluna parada. Cada célula parada tapa a faixa com a cor da moldura, por
   fora; com propriedade lógica, vale também na escrita da direita para a esquerda. */
.table-sticky-first :is(thead,tbody,tfoot) > tr > :first-child::before { content:""; position:absolute; inset-block:0; inset-inline-start:calc(-1 * var(--space-1)); inline-size:var(--space-1); background:var(--surface-2); }
/* Avatar (Lote 2): `overflow:hidden` e o `object-fit` da imagem são a correção do defeito que
   a medição achou — foto que não é quadrada vazava inteira da caixa redonda, porque
   `border-radius` não recorta filho sozinho. Foto de perfil raramente vem quadrada, então isto
   quebrava no primeiro uso real. */
/* B5 do PLANO-1.0: os 36px viraram --control-h-md, que É 2.25rem = os mesmos 36px em
   `comfortable`. Nada muda de aparência aqui; o que muda é que agora a DENSIDADE alcança o
   avatar, e a escala é a mesma dos controles — avatar e botão na mesma linha ficam da mesma
   altura por construção, em vez de por coincidência. */
/* 0.32.0: a escala da referência, 32 · 40 · 48, com a letra de 12 · 14 · 16 em peso médio (era a
   altura do botão, 32 · 36 · 40, e negrito). `--step-avatar` é a variável de passo própria do avatar
   (a camada responsiva a emite junto das outras). */
.avatar { width:var(--step-avatar,var(--space-10)); height:var(--step-avatar,var(--space-10)); font-size:var(--step-avatar-fs,var(--text-sm)); display:grid; place-items:center; overflow:hidden; border-radius:50%; background:var(--surface-3); color:var(--foreground); border:1px solid transparent; font-weight:var(--weight-medium); }
.avatar-sm { --step-avatar:var(--space-8); --step-avatar-fs:var(--text-xs); }
.avatar-lg { --step-avatar:var(--space-12); --step-avatar-fs:var(--text-base); }
/* tone e emphasis="soft" (15/10/2026), o `color` e o `soft` do avatar da referência: o tom pinta a letra ou o ícone (o par
   de letra de cada estado, ADR-0061); o `soft` tira a moldura e põe o fundo clarinho do tom (14%, a tinta dos botões
   suaves). O neutro suave é o --muted. */
.avatar-tone-brand { --avatar-ink:var(--primary-emphasis); --avatar-tint:var(--primary); }
.avatar-tone-danger { --avatar-ink:var(--danger-400); --avatar-tint:var(--destructive); }
.avatar-tone-success { --avatar-ink:var(--success-400); --avatar-tint:var(--success); }
.avatar-tone-warning { --avatar-ink:var(--warning-400); --avatar-tint:var(--warning); }
.avatar-tone-info { --avatar-ink:var(--info-400); --avatar-tint:var(--info); }
.avatar:is(.avatar-tone-brand,.avatar-tone-danger,.avatar-tone-success,.avatar-tone-warning,.avatar-tone-info) { color:var(--avatar-ink); }
.avatar.avatar-soft { border-color:transparent; background:var(--muted); }
.avatar.avatar-soft:is(.avatar-tone-brand,.avatar-tone-danger,.avatar-tone-success,.avatar-tone-warning,.avatar-tone-info) { background:color-mix(in oklab, var(--avatar-tint) 14%, transparent); }
/* Os quatro tons de ESTADO no fundo do selo suave (o `-bg` de cada um, a receita do `Badge` — ADR-0081, 24/10/2026): com
   o tom a 14%, o info media 4,12 no claro. A marca fica na mistura: o fundo dela não tem par. */
.avatar.avatar-soft.avatar-tone-info { background:var(--info-bg); }
.avatar.avatar-soft.avatar-tone-success { background:var(--success-bg); }
.avatar.avatar-soft.avatar-tone-warning { background:var(--warning-bg); }
.avatar.avatar-soft.avatar-tone-danger { background:var(--danger-bg); }
.avatar img { width:100%; height:100%; object-fit:cover; }
/* LINK (0.32.0): o link de texto da referência — peso médio, a cor de link, sem sublinhado; com o mouse
   ou apertado, o sublinhado de 1,5 a 4 da letra, na cor esmaecida (a meia força com o mouse). A seta do
   `external` é o `arrow-up-right` do Phosphor por máscara, a 60% (inteira com o mouse). O desenho é
   em LINHA (`inline`), e não o bloco em linha dela: o link longo quebra dentro do parágrafo, que é o
   que a página ampliada a 200% precisa (baixa visão). */
.link { border-radius:var(--radius-sm); color:var(--link); font-weight:var(--weight-medium); text-decoration-line:none; text-decoration-thickness:calc(var(--border-width) * 1.5); text-underline-offset:var(--space-1); text-decoration-color:color-mix(in oklab,var(--muted-foreground) 50%,transparent); cursor:pointer; }
@media (hover:hover) { .link:hover { color:var(--link-hover); text-decoration-line:underline; } .link:hover > .link-external { opacity:1; } }
.link:active { text-decoration-line:underline; text-decoration-color:var(--muted-foreground); }
.link[aria-disabled="true"] { opacity:var(--opacity-disabled); text-decoration-line:none; cursor:not-allowed; }
.link-external { --link-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E"); display:inline-block; inline-size:.75em; block-size:.75em; margin-inline-start:var(--space-1); vertical-align:baseline; background:currentColor; opacity:.6; -webkit-mask:var(--link-glifo) center/contain no-repeat; mask:var(--link-glifo) center/contain no-repeat; }
/* COLORSWATCH (0.32.0): a amostra de cor da referência — xs 16, sm 24, md 32, lg 36, xl 40 —, só redonda
   e sem o xadrez (decisão do Victor). O anel de 1 por dentro, a 10% da cor do texto, segura a amostra da
   cor do fundo no fundo. */
.color-swatch { --color-swatch-size:var(--space-8); display:inline-block; flex:none; inline-size:var(--color-swatch-size); block-size:var(--color-swatch-size); border-radius:var(--radius-full); background:var(--color-swatch-current,transparent); box-shadow:var(--shadow-sm); }
.color-swatch-xs { --color-swatch-size:var(--space-4); }
.color-swatch-sm { --color-swatch-size:var(--space-6); }
.color-swatch-lg { --color-swatch-size:calc(var(--space-8) + var(--space-1)); }
.color-swatch-xl { --color-swatch-size:var(--space-10); }
/* A amostra TRANSPARENTE (14/10/2026): o xadrez embaixo, e a cor por uma sombra por dentro (a sombra pinta POR CIMA
   do fundo; a cor de fundo pintaria por baixo do xadrez). O anel de 1 continua por cima de tudo. */
.color-swatch-alpha { background:var(--color-checker) center/var(--space-2) var(--space-2); box-shadow:inset 0 0 0 var(--color-swatch-size) var(--color-swatch-current,transparent); }
/* AS AMOSTRAS PARA ESCOLHER (0.32.0, ADR-0069): a variação `options` do ColorSwatch. Cada cor é um rótulo com um
   botão de opção nativo por cima, invisível (o navegador cuida da escolha e das setas). O desenho é o da
   referência (3.2.6): opção de 32 (os mesmos tamanhos da amostra), borda de 2 transparente, vão de 8; a escolhida
   ganha a borda na cor dela, a amostra encolhe a 77% por dentro e aparece o "visto" (1/3 da opção) — preto ou
   branco pela conta de contraste (a classe `color-swatch-option-dark`, posta pelo componente). Ao passar o ponteiro, a amostra cresce 10%. */
.color-swatch-picker { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.color-swatch-option { --color-swatch-size:var(--space-8); --swatch-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); position:relative; display:inline-grid; place-items:center; box-sizing:border-box; inline-size:var(--color-swatch-size); block-size:var(--color-swatch-size); border:calc(2 * var(--border-width)) solid transparent; border-radius:var(--radius-full); cursor:pointer; transition:border-color var(--duration-fast) var(--ease-standard); }
.color-swatch-option > .color-swatch { inline-size:100%; block-size:100%; transition:scale var(--duration-fast) var(--ease-standard); }
.color-swatch-option::after { content:""; position:absolute; inset:0; margin:auto; inline-size:calc(var(--color-swatch-size) / 3); block-size:calc(var(--color-swatch-size) / 3); background:#fff; -webkit-mask:var(--swatch-glifo) center/contain no-repeat; mask:var(--swatch-glifo) center/contain no-repeat; scale:0; pointer-events:none; transition:scale var(--duration-fast) var(--ease-standard); }
.color-swatch-option-dark::after { background:#000; }
.color-swatch-option:has(:checked) { border-color:transparent; }
.color-swatch-option:has(:checked) > .color-swatch { scale:.77; }
.color-swatch-option:has(:checked)::after { scale:1; }
@media (hover:hover) { .color-swatch-option:not(:has(:checked,:disabled)):hover > .color-swatch { scale:1.1; } }
.color-swatch-option:has(:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
.color-swatch-option:has(:disabled) { opacity:var(--opacity-disabled); cursor:not-allowed; }
.color-swatch-input { position:absolute; inset:0; z-index:1; margin:0; opacity:0; cursor:inherit; }
/* Em coluna (`layout="stack"`) e a marca própria (`indicator`, no lugar do "visto"), como na referência. A marca
   aparece só na escolhida, na tinta que contrasta, com 1/3 da opção. */
.color-swatch-picker-stack { flex-direction:column; align-items:flex-start; }
.color-swatch-indicator { position:absolute; inset:0; display:grid; place-items:center; color:#fff; pointer-events:none; scale:0; transition:scale var(--duration-fast) var(--ease-standard); }
.color-swatch-indicator > * { inline-size:calc(var(--color-swatch-size) / 3); block-size:calc(var(--color-swatch-size) / 3); }
.color-swatch-option-dark .color-swatch-indicator { color:#000; }
.color-swatch-option:has(:checked) .color-swatch-indicator { scale:1; }
.color-swatch-option:has(.color-swatch-indicator)::after { content:none; }
.color-swatch-picker-xs .color-swatch-option { --color-swatch-size:var(--space-4); border-width:var(--border-width); }
.color-swatch-picker-sm .color-swatch-option { --color-swatch-size:var(--space-6); }
.color-swatch-picker-lg .color-swatch-option { --color-swatch-size:calc(var(--space-8) + var(--space-1)); }
.color-swatch-picker-xl .color-swatch-option { --color-swatch-size:var(--space-10); }
/* showLabels (14/10/2026): o nome embaixo de cada cor, como a escolha de tema da referência — a amostra, 4 abaixo o nome
   pequeno e apagado, que acende na escolhida; 12 entre os itens (a grade dela). O rótulo inteiro escolhe. O nome usa a
   menor letra da Aurea (12), e não os 10 da referência: a Aurea é de baixa visão. */
.color-swatch-picker-labels { gap:var(--space-3); }
.color-swatch-item { display:inline-grid; justify-items:center; gap:var(--space-1); cursor:pointer; }
.color-swatch-name { color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--space-4); }
.color-swatch-item:has(:checked) .color-swatch-name { color:var(--foreground); }
.color-swatch-item:has(:disabled) { cursor:not-allowed; }
@media (prefers-reduced-motion:reduce) { .color-swatch-option,.color-swatch-option > .color-swatch,.color-swatch-option::after,.color-swatch-indicator { transition:none; } }
/* PROGRESSCIRCLE (0.32.0): o anel da referência — traço de 4 num quadro de 36, ponta redonda, começando no
   topo —, em 20 · 28 · 36. O trilho e as cores são as do `Progress`. Sem valor, gira. */
.progress-circle { --progress-circle-size:calc(var(--space-6) + var(--space-1)); --progress-circle-fill:var(--primary); display:inline-flex; flex:none; inline-size:var(--progress-circle-size); block-size:var(--progress-circle-size); }
.progress-circle > svg { inline-size:100%; block-size:100%; }
.progress-circle-track,.progress-circle-fill { fill:none; stroke-width:4; }
.progress-circle-track { stroke:var(--surface-3); }
.progress-circle-fill { stroke:var(--progress-circle-fill); stroke-linecap:round; transform:rotate(-90deg); transform-box:fill-box; transform-origin:center; transition:stroke-dashoffset var(--duration-base) var(--ease-standard); }
.progress-circle-sm { --progress-circle-size:var(--space-5); }
.progress-circle-lg { --progress-circle-size:calc(var(--space-8) + var(--space-1)); }
.progress-circle-neutral { --progress-circle-fill:var(--muted-foreground); }
.progress-circle-success { --progress-circle-fill:var(--success-400); }
.progress-circle-warning { --progress-circle-fill:var(--warning-400); }
.progress-circle-danger { --progress-circle-fill:var(--danger-400); }
.progress-circle-info { --progress-circle-fill:var(--info-400); }
.progress-circle-indeterminate > svg { animation:spin 1s linear infinite; }
@media (prefers-reduced-motion:reduce) { .progress-circle-indeterminate > svg { animation-duration:3s; } .progress-circle-fill { transition:none; } }
/* TAGGROUP (0.32.0): as etiquetas da referência — 24 de altura (sm 20, lg 32), 8 dos lados (lg 10), letra
   de 12 peso médio (lg 14), ícone de 12, 4 entre as partes, 6 entre as etiquetas; o fundo neutro (ou o de
   cartão, `surface`), a escolhida no clarinho. O canto é a cápsula da Aurea. O anel de foco vai na
   etiqueta inteira, e não só no botão de dentro. */
.tag-group { display:flex; flex-direction:column; gap:var(--space-1); }
.tag-group-list { display:flex; flex-wrap:wrap; gap:calc(var(--space-1) + var(--space-05)); }
.tag { display:inline-flex; align-items:center; gap:var(--space-1); min-block-size:var(--space-6); padding:0 var(--space-2); border-radius:var(--radius-full); background:var(--secondary); color:var(--secondary-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); line-height:var(--space-4); user-select:none; }
.tag-main { display:inline-flex; align-items:center; gap:var(--space-1); padding:0; border:0; background:none; color:inherit; font:inherit; }
button.tag-main { cursor:pointer; }
.tag-main > .icon { --step-icon:var(--space-3); }
.tag-label { white-space:nowrap; }
.tag-sm { min-block-size:var(--space-5); }
.tag-lg { min-block-size:var(--space-8); padding-inline:calc(var(--space-2) + var(--space-05)); font-size:var(--text-sm); line-height:var(--space-5); }
.tag-surface { background:var(--card); color:var(--card-foreground); }
@media (hover:hover) { .tag:has(> button.tag-main):not([data-selected]):not([data-disabled]):hover { background:var(--secondary-hover); } }
.tag[data-selected] { background:color-mix(in oklab,var(--primary) 10%,var(--secondary)); color:var(--primary-emphasis); }
.tag[data-disabled] { opacity:var(--opacity-disabled); }
.tag-main:focus-visible { outline:none; }
.tag:has(> .tag-main:focus-visible) { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
.tag-remove { position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; inline-size:var(--space-3); block-size:var(--space-3); padding:0; border:0; border-radius:var(--radius-full); background:none; color:inherit; opacity:.7; cursor:pointer; }
.tag-remove > .icon { --step-icon:var(--space-3); }
.tag-remove:hover:not(:disabled) { opacity:1; }
.tag-remove:disabled { cursor:not-allowed; }
@media (pointer:coarse) { .tag-remove::before { content:""; position:absolute; inset:calc((var(--space-3) - var(--target-min)) / 2); border-radius:var(--radius-full); } }
/* O container do grupo NUNCA teve regra: a sobreposição abaixo existia e os avatares empilhavam
   na vertical porque o pai saía `display:block`. Mesma falha do `.stepper` e do `.command`. */
.avatar-group { display:inline-flex; align-items:center; }
.avatar-group .avatar { margin-inline-start:-9px; border:2px solid transparent; } .avatar-group .avatar:first-child { margin-inline-start:0; }
/* O "+N" é um avatar como os outros — mesma caixa, mesma borda —, só que menor por dentro e sem
   peso de nome próprio: ele conta, não identifica. */
.avatar-count { background:var(--secondary); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
.kpi { display:flex; flex-direction:column; gap:var(--space-1); }
/* O NÚMERO do KPI (08/10/2026, pedido de um consumidor com baixa visão): a ficha sempre prometeu
   `--text-3xl`, e o CSS nunca aplicou — medido no navegador, o valor saía com 14, igual ao rótulo,
   e a tendência com 11,7 (o `small` do navegador encolhe a letra). O número é a razão do
   componente; os algarismos ficam tabulares para não dançar quando o valor muda. */
/* ADR-0077 (22/10/2026, decisão do Victor): o número do indicador na fonte de código, a IBM Plex Mono — como os
   valores no sistema que serviu de modelo. Os pesos publicados dela são 400, 500 e 600: o `strong` (700) usa o 600. */
.kpi > strong { font-family:var(--font-code); font-size:var(--text-3xl); line-height:var(--leading-tight); font-variant-numeric:tabular-nums; }
.kpi > small { font-size:var(--text-sm); }
/* A TENDÊNCIA COM DIREÇÃO (GAR-09, ADR-0060, 09/10/2026): seta, palavra para o leitor de tela e cor,
   nunca a cor sozinha. A seta é o `trend-up`/`trend-down`/`minus` do Phosphor (o mesmo desenho do
   sprite), por máscara — o KPI é marcação pura e o `Icon` precisa de hook; o menu do `Header` já
   faz assim. A cor é a do texto do selo de cada estado, que já passa AA nos dois temas. */
/* A seta fica na PRIMEIRA linha: com `center`, uma tendência que quebra em duas linhas deixava a
   seta solta entre elas (visto na bancada, 09/10/2026). `1lh` é a altura da linha do próprio texto. */
.kpi-trend { display:inline-flex; align-items:flex-start; gap:var(--space-1); }
.kpi-trend-icon { flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); margin-block-start:calc((1lh - var(--icon-sm)) / 2); background:currentColor; -webkit-mask:var(--kpi-glifo) center/contain no-repeat; mask:var(--kpi-glifo) center/contain no-repeat; }
.kpi-trend-up { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,56v64a8,8,0,0,1-16,0V75.31l-82.34,82.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,212.69,64H168a8,8,0,0,1,0-16h64A8,8,0,0,1,240,56Z'/%3E%3C/svg%3E"); }
.kpi-trend-down { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128v64a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h44.69L136,107.31l-34.34,34.35a8,8,0,0,1-11.32,0l-72-72A8,8,0,0,1,29.66,58.34L96,124.69l34.34-34.35a8,8,0,0,1,11.32,0L224,172.69V128a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E"); }
.kpi-trend-flat { --kpi-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
.kpi-tone-success { color:var(--success-400); }
.kpi-tone-danger { color:var(--danger-400); }
.kpi-tone-neutral { color:var(--muted-foreground); }
/* DataList: chave/valor em duas colunas. O termo é secundário — mesmo idioma do cabeçalho de
   tabela. Sem a regra (achado A13) o <dl> saía cru: dt e dd empilhados, com o recuo de 40px
   que o navegador dá ao <dd>. */
/* A coluna do TERMO era `max-content`, que não encolhe nunca: um `dt` comprido empurrava a
   PÁGINA para fora em telas estreitas — medido em 16/08/2026 a 320px, quando a página de hooks
   estreou termos de frase inteira e a varredura acusou +179px de rolagem lateral. `auto` sizes
   igual quando há espaço (por isso nenhuma baseline mudou) e cai para min-content quando não há,
   deixando o termo quebrar em vez de arrastar o documento. O defeito era do COMPONENTE, não da
   página nova: o `DataList` é publicado, e quem escrevesse um termo longo levava o mesmo.
   `auto` foi TENTADO primeiro e não resolveu — medido, não suposto: a trilha `auto` tem
   max-content como máximo e não encolhe abaixo dele quando o contêiner aperta, e a sobra caiu de
   179px para 90px em vez de zerar. `minmax(0,max-content)` é o que encolhe: com espaço mede
   igual ao que media antes (nenhuma baseline mudou), sem espaço o termo quebra. */
.data-list { display:grid; grid-template-columns:minmax(0,max-content) minmax(0,1fr); gap:var(--space-2) var(--space-6); margin:0; }
.data-list dt { min-width:0; color:var(--muted-foreground); }
.data-list dd { min-width:0; margin:0; }
/* E no ESTREITO ele empilha — a outra metade da correção. Medido a 320px com termos de frase
   inteira: duas colunas não cabem, o termo resolvia em 164px, a calha comia o resto e a coluna do
   valor ficava com `0px`, jogando o texto para fora da PÁGINA. Mesmo remédio que `.message` e
   `.log-line` já usam aqui. A regra mora DEPOIS da base de propósito: escrita antes, ela não
   valia nada — mídia não soma especificidade, então a base vencia por vir por último. Foi
   exatamente o que aconteceu na primeira tentativa, e é a armadilha que o comentário do
   `.banner` lá em cima já registrava. */
@media (max-width:640px) { .data-list { grid-template-columns:minmax(0,1fr); } }
/* Timeline: o trilho existia e o PONTO não — `.timeline-dot` media 0×0 (achado A13), então a
   linha do tempo saía com a régua e sem as marcas, e o <ol> ainda mostrava a numeração do
   navegador. Agora os dois derivam do MESMO token: o trilho fica a meio diâmetro do ponto, e
   alinham por construção em vez de por número copiado. Saem junto os 24px de recuo e os 7px
   do trilho — dois px crus a menos na catraca do check 12. */
.timeline { position:relative; display:flex; flex-direction:column; gap:var(--space-5); margin:0; padding:0; list-style:none; }
/* O TRILHO POR BAIXO DOS PONTOS (ADR-0083, 27/10/2026, em todas as marcas — o Victor: o defeito "não tinha só na lory, no
   tema padrão da Aurea também"). Era um `::before` da lista inteira, posicionado, e o ponto não: o navegador pinta o
   posicionado por cima, e a linha passava por CIMA da bolinha; e ia até o fim da lista, sobrando depois do último ponto.
   Agora cada item desenha o trecho até o ponto seguinte, centrado no ponto, e o ponto fica por cima. A cor é a da linha
   (`--border`); a paleta da 1.0 a troca por `--input`, mais adiante, fora da lory. */
.timeline > li { position:relative; display:flex; align-items:flex-start; gap:var(--space-3); }
.timeline > li:not(:last-child)::before { content:""; position:absolute; inset-inline-start:calc(var(--space-3) / 2 - var(--border-width) / 2);
  inset-block-start:calc(var(--space-1) + var(--space-3)); inset-block-end:calc(-1 * (var(--space-5) + var(--space-1)));
  inline-size:var(--border-width); background:var(--border); }
/* A coluna de conteúdo é uma PILHA, e não por estética: sem isso o item empilhava quando
   tinha descrição (o <p> é bloco) e colava título e horário na mesma linha quando não tinha —
   "Shipped14:20". Geometria de componente não depende do conteúdo (achados A2/A3). */
.timeline > li > div { display:flex; flex-direction:column; gap:var(--space-05); min-width:0; }
.timeline > li > div > p { margin:0; }
.timeline-dot { position:relative; z-index:1; flex:none; width:var(--space-3); height:var(--space-3); border-radius:var(--radius-full); margin-block-start:var(--space-1); background:var(--primary); box-shadow:none; }
/* ACCORDION (0.32.0) — o da referência, com o realce em CÁPSULA (decisão do Victor, 11/10/2026). Sem
   caixa em volta: um fio de 1 entre os itens, nenhum depois do último. A pergunta: 16 de todos os
   lados, 14 peso médio, a seta de 16 no FIM (esmaecida), que vira −180° ao abrir — o marcador do
   navegador sai (era ele que girava, no começo da linha). O realce do mouse só no item fechado: a cor
   do texto a 3%, em cápsula. A resposta: 14 esmaecida, 16 dos lados e embaixo. Recuo INLINE, não
   `padding-left`: em RTL a seta troca de lado e o corpo acompanha (o gate de RTL mede o eixo inline).
   `surface`: tudo num cartão, o fio a 94% (3% de cada lado) e o realce no cinza neutro. */
.accordion { display:flex; flex-direction:column; }
.accordion-item { position:relative; }
.accordion-item::after { content:""; position:absolute; inset-inline-start:0; inset-block-end:0; inline-size:100%; block-size:var(--border-width); background:var(--border); }
.accordion-item:last-child::after { content:none; }
.accordion-item > summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); border-radius:var(--radius-full); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--leading-normal); list-style:none; cursor:pointer; transition:background var(--duration-fast); }
.accordion-item > summary::-webkit-details-marker { display:none; }
.accordion-title { min-inline-size:0; }
.accordion-item:not([open]) > summary:hover:not([aria-disabled="true"]) { background:color-mix(in oklab, var(--foreground) 3%, transparent); }
.accordion-item > summary[aria-disabled="true"] { opacity:var(--opacity-disabled); cursor:not-allowed; }
/* A seta é desenho do CSS por máscara, como a do `KPI` e a do aviso preso ao botão (12/10/2026). No
   passo 4 ela entrou como `<Icon>`, que busca o arquivo de ícones: quem usava só o `Accordion` — que
   abre sem JavaScript e não pedia arquivo nenhum — passou a ver um erro de rede e uma seta vazia (a
   prova A4 pegou). O desenho é o `caret-down` do Phosphor, o mesmo do arquivo, no mesmo tamanho. */
.accordion-chevron { --accordion-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); background:currentColor; color:var(--muted-foreground); -webkit-mask:var(--accordion-glifo) center/contain no-repeat; mask:var(--accordion-glifo) center/contain no-repeat; transition:transform var(--duration-fast) var(--ease-standard); }
.accordion-item[open] > summary .accordion-chevron { transform:rotate(-180deg); }
.accordion-content { padding-block:0 var(--space-4); padding-inline:var(--space-4); color:var(--muted-foreground); font-size:var(--text-sm); }
.accordion-surface { border-radius:var(--radius-card); background:var(--card); }
.accordion-surface > .accordion-item::after { inset-inline-start:3%; inline-size:94%; }
.accordion-surface > .accordion-item:not([open]) > summary:hover:not([aria-disabled="true"]) { background:var(--secondary); }
@media (prefers-reduced-motion:reduce) { .accordion-chevron { transition:none; } }
/* Mockup do kit de origem (apps/docs) — não é o Accordion do sistema, que é <details> nativo. */

/* QRCode: superfície flutuante Aurea, mas o miolo é de alto contraste FIXO — um QR
   não segue o tema (dark inverteria e nem todo leitor decodifica invertido). Override
   consciente por --qr-module/--qr-quiet. Módulos suaves (rx no SVG) sem perder escaneabilidade. */
/* B6 do PLANO-1.0: o tamanho saiu dos atributos width/height do SVG e virou --qr-size, no
   mesmo idioma dos dois botões de ajuste que este componente já tinha. `md` são os 10rem =
   160px de antes (com box-sizing:border-box o quiet zone continua por dentro da medida).
   Três degraus e não um número livre: o número livre era o que obrigava pixel cru no
   consumidor. Quem precisar de um QR de cartaz sobrescreve --qr-size, que é o mesmo caminho
   já documentado para trocar a cor dos módulos. */
.qrcode { --qr-module:#0b0b0c; --qr-quiet:#fff; --qr-size:var(--step-qr,10rem); box-sizing:border-box; width:var(--qr-size); height:var(--qr-size); padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--qr-quiet); }
.qrcode-sm { --step-qr:7.5rem; }
.qrcode-lg { --step-qr:15rem; }
.qrcode .qr-mod { fill:var(--qr-module); }
.qrcode .qr-eye-gap { fill:var(--qr-quiet); }

/* `overflow:auto` faz do <pre> uma REGIÃO ROLÁVEL, e região rolável sem nada focável dentro
   é inalcançável por teclado (axe scrollable-region-focusable). Quem escreve esta marcação à
   mão precisa de `tabindex="0"` no <pre> — o componente React já o emite. */
.code-block { overflow:auto; padding:16px; border:1px solid transparent; border-radius:var(--radius-lg); background:var(--surface-inset); color:var(--muted-foreground); font:12px/1.7 var(--font-code); }
/* O CÓDIGO EM ABAS (`CodeBlock tabs`, bloco 1 — o 3-A): a caixa é UMA — a fileira em cima e o código embaixo —, como a
   documentação da referência, medida na página dela (1280 × 663, 23/10/2026): a fileira de 37 (o texto 14, peso médio, a
   entrelinha 20 → a `--leading-normal`, 21, com 8 em cima e embaixo), as abas a 14 uma da outra e a 16 da borda; o
   código é o bloco de sempre. A fileira é um degrau acima da página e o código um acima dela (a referência: a página, a
   superfície, o código) — no texto do site, a página 31, a fileira 41 e o código 51, a cor do bloco sozinho. A escolhida
   na cor do texto, com o traço cheio de baixo, como as abas de área do site (o indicador, não uma linha — ADR-0072). */
.code-tabs { border-radius:var(--radius-lg); background:var(--surface-1); overflow:hidden; }
.prose .code-tabs { border-radius:var(--radius-card); }
.code-tabs-list { display:flex; gap:calc(var(--space-3) + var(--space-05)); padding:0 var(--space-4); overflow-x:auto; }
.code-tab { position:relative; flex:none; padding:var(--space-2) 0; border:0; background:transparent; color:var(--muted-foreground);
  font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--leading-normal); cursor:pointer; }
.code-tab:hover, .code-tab.active { color:var(--foreground); }
.code-tab.active::after { content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:var(--focus-width); background:var(--primary); }
.code-tab:focus-visible { outline-offset:calc(-1 * var(--focus-width)); }
.code-tabs .code-block { border-radius:0; }
/* Lote V (20/10/2026): o número da linha e as cores do código (`CodeBlock lineNumbers` e `highlight`). O número é o da
   referência, medido na página dela: uma coluna de 16 (--space-4), alinhada à direita, a 24 do código (--space-6); ela
   cresce com os algarismos da última linha (`--code-line-digits`, que o componente escreve), para a coluna não pular
   na linha 100. A cor é a apagada da Aurea, que se lê (a da referência apaga até ~2:1). O número é DESENHO: não entra
   no texto copiado (`user-select:none`) nem no leitor de tela (o texto alternativo vazio depois da barra; quem não
   entende a barra fica com a linha de cima).
   As cores são as do `CodeEditor` (o `aureaHighlightStyle`), pelos mesmos tokens. Com cor, o texto sem cor é o do
   tema (`--foreground`), e não o apagado: o apagado fica para o comentário. */
.code-block-numbered { counter-reset:aurea-linha; }
.code-block-numbered .code-line::before { counter-increment:aurea-linha; content:counter(aurea-linha); content:counter(aurea-linha) / ""; display:inline-block; min-inline-size:max(var(--space-4), calc(var(--code-line-digits, 2) * 1ch)); margin-inline-end:var(--space-6); color:var(--muted-foreground); text-align:end; -webkit-user-select:none; user-select:none; }
.code-block-highlighted { color:var(--foreground); }
.code-block .tok-comment { color:var(--muted-foreground); font-style:italic; }
/* As cores levam 20% do texto, como o nível do registro, que mora no mesmo fundo (`.log-stream`, ADR-0072): puras, o azul
   caía a 4,08:1 no claro e o verde a 4,44:1 no escuro (medido no site, 20/10/2026). */
.code-block .tok-keyword { color:color-mix(in oklab,var(--info-400) 80%,var(--foreground)); }
.code-block .tok-string { color:color-mix(in oklab,var(--success-400) 80%,var(--foreground)); }
.code-block .tok-number { color:color-mix(in oklab,var(--warning-400) 80%,var(--foreground)); }
.code-block .tok-property { color:var(--foreground); }
.code-block .tok-function { color:var(--foreground); font-weight:var(--weight-semibold); }
.code-block .tok-invalid { color:color-mix(in oklab,var(--danger-400) 80%,var(--foreground)); }
/* Bloco de código COM copiar: a moldura não rola, o <pre> rola por dentro e o gatilho fica
   parado no canto. O comportamento é do core (aurea.js, [data-aurea-copy]); aqui só a pele.
   O check em amarelo é confirmação instantânea — dura 1,5s e volta ao ícone de copiar. */
/* checkbox com rótulo fora da tela: sem o texto, o alvo é só a marca — nada de gap sobrando. */
.checkbox-bare,.radio-bare,.switch-bare { gap:0; }
/* A chave no fim (`indicatorPlacement="end"`): só a ordem do desenho; o campo continua antes da chave. */
.switch-end > .switch-track { order:1; }
.code-block-wrap { position:relative; display:flex; min-width:0; }
.code-block-wrap > .code-block { flex:1; min-width:0; margin:0; }
/* DOC-02 (0.32.0): a caixa de exemplo do site (`CodeBlock preview`), trazida para o core do jeito que
   ela é no site — o cartão sem recheio, a barra de abas com o segmentado ocupando a largura, a prévia
   no fundo afundado, centrada, e o código sem moldura (o cartão já é a moldura). A altura é do conteúdo;
   o site fixa a dele (`--demo-height`). */
.code-preview { display:flex; flex-direction:column; block-size:var(--demo-height,auto); padding:0; overflow:hidden; }
.demo-tabs { display:flex; padding:var(--space-2); border-bottom:var(--border-width) solid transparent; }
.demo-tabs .segmented { flex:1; display:flex; }
.demo-tabs .segmented :is(button,a) { flex:1; }
.demo-panel { flex:1; min-height:0; overflow:auto; padding:var(--space-6); }
.demo-panel[hidden] { display:none; }
.demo-panel[data-panel="preview"] { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-4); background:var(--surface-inset); }
.demo-panel[data-panel="preview"][hidden] { display:none; }
.demo-code { display:flex; padding:0; overflow:hidden; }
.demo-code .code-block-wrap { flex:1; }
.demo-code .code-block { padding:var(--space-6); border:0; border-radius:0; }
.copy-code { position:absolute; top:var(--space-3); inset-inline-end:var(--space-3); z-index:1; }
/* O fim da linha fica fora do botão de copiar (achado no 3-A, 23/10/2026): no Quick Start, o `pnpm add` de uma linha
   terminava a 915 e o botão começava a 901 — o fim do comando ficava embaixo dele. O código reserva no fim o lugar do
   botão (a distância da borda, o botão e um vão), e a linha mais longa ROLA antes de chegar nele. Vale para todo bloco
   com copiar: o sozinho, o do texto do site (`.prose pre`) e o do exemplo (`.demo-code`) — por isso vem depois deles. */
.code-block-wrap > .code-block { padding-inline-end:calc(var(--space-3) + var(--control-h-md) + var(--space-2)); }
.copy-code .c-done { display:none; }
.copy-code.is-done .c-copy { display:none; } .copy-code.is-done .c-done { display:block; color:var(--primary); }
/* "On this page": índice da própria página, fixo na lateral. Navegação, não decoração —
   por isso é <nav> com rótulo, e o item atual se marca com aria-current. */
.toc { position:sticky; top:var(--space-4); align-self:start; display:grid; gap:var(--space-1); max-height:calc(100vh - var(--space-8)); overflow:auto; padding:var(--space-2) 0; }

/* O "On this page" é o da referência (ADR-0067): letra 14, peso normal, esmaecido, SEM maiúsculas, e o
   ícone de linhas ao lado — desenho do CSS por máscara (o `text-align-left` do Phosphor), para o sumário
   não passar a depender do arquivo de ícones. Era 11, em maiúsculas espaçadas. */
.toc-label { display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-1); padding-inline:var(--space-3); color:var(--muted-foreground); font-size:var(--text-sm); }
.toc-label-icon { --toc-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M32,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H40A8,8,0,0,1,32,64Zm8,48H168a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Zm176,24H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm-48,40H40a8,8,0,0,0,0,16H168a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E"); flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); background:currentColor; -webkit-mask:var(--toc-glifo) center/contain no-repeat; mask:var(--toc-glifo) center/contain no-repeat; }
.toc a { padding:var(--space-1) var(--space-3); border-inline-start:2px solid transparent; color:var(--muted-foreground); font-size:var(--text-sm); text-decoration:none; }
.toc a:hover { color:var(--foreground); }
.toc a[aria-current] { border-inline-start-color:transparent; color:var(--foreground); }
/* O marcador do item ATUAL não é contorno: é o indicador, como o das abas (ADR-0072, item 5). Era a borda de um lado,
   que saiu junto com as linhas, e o item atual ficou só com a cor do texto. Volta como desenho cheio, no lugar da
   borda (que continua, transparente) e com a medida dela (2). Quem cobra: `tests/visual/indicador-atual.spec.ts`. */
.toc a { position:relative; }
.toc a[aria-current]::before { content:""; position:absolute; inset-block:0; inset-inline-start:calc(-1 * var(--space-05)); inline-size:var(--space-05); background:var(--primary); }
.toc a.toc-sub { padding-inline-start:var(--space-6); }
/* `--log-h` é a QUINTA válvula de altura do core, no idioma de `--chart-h` (I4), `--qr-size` (B6),
   `--datagrid-max-h` (F6) e `--media-h` (I7). Default 240px — o de antes —, então nada muda para
   quem não passa nada. A causa é medida em 11/08/2026: a altura era FIXA, e por isso três prévias
   do catálogo gastavam 240px para mostrar três linhas de log e rolavam dentro da caixa de
   demonstração, contra a ADR-0002. Altura é decisão da página, e não vira prop (check 23). */
.log-stream { height:var(--log-h,240px); overflow:auto; padding:14px; border:1px solid transparent; border-radius:var(--radius-md); background:var(--surface-inset); font:12px/1.65 var(--font-code); }
/* UM MECANISMO SÓ para o nível, e o merge de 28/08/2026 é o que permitiu escolher.
   Havia dois: o valor como MODIFICADOR do `.log-level`, e três regras DESCENDENTES pintadas a
   partir de uma classe no container (`.log-warn .log-level`). O comentário que justificava as
   descendentes dizia, com todas as letras, que `.log-level.warn` "serve a apps/docs/index.html
   [...] e sai junto com ele na Parte D" — e a Parte D é justamente o que este merge traz: o
   `apps/docs` foi apagado. O motivo de manter as duas foi embora com a página.
   Fica o modificador, que é o que o `LogStream` do React emite, e some a duplicata.
   `.log-level.info` recebe `--info` e não o amarelo da marca: é a ADR-0016 aplicada — INFO num
   log e a cor primária da Aurea são duas intenções, e ficavam indistinguíveis. `text-transform`
   porque o React passa o valor em minúsculas (é ele que casa a regra) e o nível tem de LER como
   nível. */
.log-line { display:grid; grid-template-columns:86px 72px minmax(0,1fr); gap:12px; padding:3px 0; } .log-time { color:var(--subtle-foreground); } .log-level { color:var(--primary); text-transform:uppercase; } .log-level.info { color:var(--info-400); } .log-level.warn { color:var(--warning-400); } .log-level.error { color:var(--danger-400); }

/* ========================================================================== */
/* 05. GRÁFICOS E VISUALIZAÇÃO                                                 */
/* ========================================================================== */
/* I4 do PLANO-1.0: a altura vira válvula de escape, no MESMO idioma do `--qr-size` e do
   `--datagrid-max-h` — quem sabe quanta tela tem é quem hospeda, e altura não vira prop
   numérica (check 23). O default é os mesmos 220px de antes, então nada muda para quem já
   usa: medido, zero pixel nas capturas. O que ele destrava é a composição — o `I4
   AnalyticsWorkbench` põe gráfico E tabela na mesma caixa de altura fixa (ADR-0002), e com
   220 fixos as duas peças sozinhas já passavam do vão do painel em 95px. O fallback é
   deliberado e é o que o check 29 exige de quem não declara o token. */
/* A célula de saúde é superfície PREENCHIDA, e por isso fica no degrau da escala (`-500`) e não
   no papel semântico: o papel é para TEXTO, onde a conta de contraste é outra. */
.chart { width:100%; height:var(--chart-h,220px); } .chart-bar.alt { fill:var(--chart-1); } .health-cell.warn { background:var(--warning-500); } .health-cell.bad { background:var(--danger-500); } .health-cell.off { background:var(--surface-3); }
/* Chart (Lote 3) — a pele do desenho que o Recharts emite. Os seletores são de ELEMENTO, nunca
   `.recharts-*`: nome de classe de terceiro dentro do core reprovaria o check 15 (o core só
   declara classe que a Aurea produz), e é a mesma razão pela qual a pele do CodeEditor vem pelo
   EditorView.theme do CodeMirror e não daqui. O motor põe stroke/fill como ATRIBUTO de
   apresentação (#ccc nas linhas de grade, #666 nos rótulos), e CSS vence atributo — medido em
   01/08/2026: 20 <line> e 9 <text> num gráfico de linha com grade e dois eixos. */
/* `--chart-text` (08/10/2026): o tamanho do texto dos eixos e da legenda, com o padrão de sempre
   (`--text-xs`). Pedido de um consumidor com baixa visão: a regra é CSS e vence o `tick` do motor,
   então o app não tinha como aumentar sem sobrescrever a Aurea. Agora pede no contêiner — por
   exemplo `--chart-text: var(--text-sm)` —, o mesmo idioma de válvula do `--datagrid-max-h`. */
.chart svg line { stroke:var(--border); } .chart svg text { fill:var(--muted-foreground); font-size:var(--chart-text,var(--text-xs)); }
.chart-tooltip { display:grid; gap:var(--space-1); pointer-events:none; } .chart-tooltip strong { color:var(--foreground); font-weight:var(--weight-medium); }
.chart-tooltip b { margin-inline-start:auto; color:var(--foreground); font-variant-numeric:tabular-nums; }
.chart-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-1) var(--space-4); margin:0; padding:0; list-style:none; }
.chart-key { display:flex; align-items:center; gap:var(--space-2); color:var(--muted-foreground); font-size:var(--chart-text,var(--text-xs)); } .chart-key i { flex:none; width:9px; height:9px; border-radius:var(--radius-sm); }
/* O cursor precisa de DOIS pontos de especificidade porque `.chart svg line` acima já tem dois
   elementos: `.chart .chart-cursor` (0,2,0) vence `.chart svg line` (0,1,2). Em gráfico de linha
   o cursor é <line> e em barra é <rect>, então a regra dá stroke E fill — cada um usa o seu. */
.chart .chart-cursor { stroke:var(--border-strong); fill:var(--secondary); }
/* Calendar (Lote 4) — a pele da grade que o react-day-picker emite. Mesma regra do Chart e pela
   mesma razão: nada de `.rdp-*` aqui (o check 15 reprova nome de classe que a Aurea não produz).
   Três nomes vêm renomeados pela API `classNames` do motor; o resto é ELEMENTO e `data-*`, e
   atributo não é classe. Estado medido em 01/08/2026: data-selected, data-today, data-outside,
   data-disabled e data-hidden — este último é obrigatório, senão o dia escondido das pontas
   APARECE (o motor conta com o CSS dele para escondê-lo, e nós não importamos o CSS dele). */
.calendar { display:inline-block; padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--surface-1); }
.calendar-months { position:relative; }
/* 0.32.0, o calendário da referência, lido no CSS publicado dela: o mês no COMEÇO, em 14 peso médio, e as
   duas setas juntas no FIM, botões de 24 na cor de letra da marca; 16 até a grade; o nome do dia em 12
   peso médio esmaecido, com 8 embaixo; o dia de 36 redondo, em 14 peso médio; HOJE no clarinho (o "soft"
   dela), o escolhido no amarelo cheio, o de fora do mês esmaecido a meia força, o desligado riscado. */
.calendar nav { position:absolute; inset-block-start:0; inset-inline-end:0; display:flex; }
.calendar nav button { display:inline-flex; align-items:center; justify-content:center; width:var(--space-6); height:var(--space-6); padding:0; border:0; border-radius:var(--radius-full); background:transparent; color:var(--primary-emphasis); cursor:pointer; }
.calendar nav button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); }
.calendar nav button:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.95); }
.calendar nav button:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
.calendar nav svg { width:var(--icon-sm); height:var(--icon-sm); fill:currentColor; }
.calendar-caption { display:flex; align-items:center; justify-content:flex-start; height:var(--space-6); padding-inline-start:var(--space-05); color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); }
/* Estas três já foram um DESFAZIMENTO: `width:auto`, `min-width:0`, `height:auto` e
   `border-bottom:0` existiam só para anular a regra de elemento da seção de dados. A regra foi
   escopada em 02/08/2026 e o antídoto saiu junto — corrigir onde nasce, não onde dói.
   O `padding:0` FICA, e não é antídoto: é o 1px que o NAVEGADOR dá a `<td>`/`<th>`. Tirá-lo
   junto com o resto engordou a célula para 38px e a grade para 266px — medido, e voltado. */
.calendar table { border-collapse:collapse; margin-block-start:var(--space-4); }
.calendar th { padding:0 0 var(--space-2); text-align:center; color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
.calendar td { padding:0; text-align:center; }
.calendar td button { display:flex; align-items:center; justify-content:center; width:var(--control-h-md); height:var(--control-h-md); border:0; border-radius:var(--radius-full); background:transparent; color:var(--foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); font-variant-numeric:tabular-nums; cursor:pointer; }
.calendar td button:hover:not(:disabled):not([aria-disabled="true"]) { background:var(--secondary); }
.calendar td button:active:not(:disabled):not([aria-disabled="true"]) { transform:scale(.95); }
.calendar td[data-today] button { background:color-mix(in oklab,var(--primary) 10%,var(--secondary)); color:var(--primary-emphasis); }
.calendar td[data-selected] button { background:var(--primary); color:var(--primary-foreground); }
.calendar td[data-outside] button { color:var(--muted-foreground); opacity:.5; }
.calendar td[data-selected][data-outside] button { background:var(--secondary); color:var(--muted-foreground); }
.calendar td button:disabled { opacity:var(--opacity-disabled); text-decoration:line-through; cursor:not-allowed; }
.calendar td[data-hidden] { visibility:hidden; }
.message { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; } .message-bubble { padding:12px 14px; border-radius:6px var(--radius-lg) var(--radius-lg) var(--radius-lg); background:var(--secondary); } .message-bubble p { margin:0; }
/* Chat React (Fase 5.4): estrutura fixa em classe, não inline (auditoria 18/07, M14). */
.message-status { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin-block-start:var(--space-2); }
.message-composer { display:flex; align-items:center; gap:var(--space-3); flex-wrap:nowrap; } .message-composer .input-group { flex:1; min-width:0; }
/* AN-03 (Lote H, 04/10/2026). A FAIXA ACIMA DO CAMPO é o adorno em bloco da casa, empilhado: a
   citação (responder ou editar) em cima, os anexos embaixo. Com ela o grupo vira superfície (raio
   de cartão, a regra do adorno em bloco) e o botão de enviar desce para a linha do campo, onde
   está o texto — sem faixa, nada muda.
   A CITAÇÃO é a da prosa: o fio no começo da linha, apagado, com o recuo de dentro. O fio tem a
   espessura do `blockquote` da `.prose` (2), escrita a partir do `--border-width`. O título leva o
   peso médio, e o corpo fica numa linha só, com reticências. Ela serve também ao cabeçalho de
   resposta do `MessageList` (AN-02). */
.message-composer:has(.message-composer-context) { align-items:flex-end; }
.message-composer-context { flex-direction:column; align-items:stretch; gap:var(--space-2); color:var(--foreground); }
.message-composer-context > .file-list { margin:0; }
.message-quote { display:flex; align-items:center; gap:var(--space-2); padding-inline-start:var(--space-3); border-inline-start:calc(var(--border-width) * 2) solid transparent; color:var(--muted-foreground); font-size:var(--text-sm); }
.message-quote > .icon { flex:none; }
.message-quote-text { display:grid; flex:1; min-inline-size:0; }
.message-quote-title { color:var(--foreground); font-weight:var(--weight-medium); }
.message-quote-body { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* AN-02 (Lote H, 04/10/2026). O LADO DA MENSAGEM. Quem declara `direction` ganha a bolha do
   tamanho do texto e uma folga do lado oposto igual ao avatar mais o vão (`--control-h-md` +
   `--space-3`): a conversa fica em duas margens, como em todo app de mensagem. Quem não declara
   continua como antes, com a bolha na largura toda.
   A MINHA vai para o fim, sem avatar, com o canto pequeno (`--radius-xs`, os mesmos 6 da bolha de
   sempre) do lado dela, e o fundo tingido da marca — o mesmo tom do nó escolhido do `TreeView`, que
   já é a forma desta folha de dizer "é seu" sem o amarelo cheio. Os cantos são lógicos: viram
   sozinhos na escrita da direita para a esquerda.
   O ÁLBUM é a `Gallery`, e a medida dela: no máximo duas miniaturas por linha (`--gallery-min` ×2
   mais o vão), e `auto-fit` para uma foto só ocupar a largura. */
.message-in { padding-inline-end:calc(var(--control-h-md) + var(--space-3)); }
.message-out { grid-template-columns:minmax(0,1fr); padding-inline-start:calc(var(--control-h-md) + var(--space-3)); }
.message-in > .message-bubble { justify-self:start; border-radius:var(--radius-lg); border-start-start-radius:var(--radius-xs); }
.message-out > .message-bubble { justify-self:end; border-radius:var(--radius-lg); border-start-end-radius:var(--radius-xs); background:color-mix(in srgb,var(--primary) 14%,transparent); }
.message-day { display:flex; justify-content:center; }
.message-forwarded { display:flex; align-items:center; gap:var(--space-1); color:var(--muted-foreground); font-size:var(--text-sm); }
.message-bubble > .message-forwarded, .message-bubble > .message-quote, .message-bubble > .message-album, .message-bubble > .file-list { margin-block:0 var(--space-2); }
.message-album { inline-size:min(100%, calc(var(--gallery-min,8rem) * 2 + var(--space-3))); grid-template-columns:repeat(auto-fit,minmax(var(--gallery-min,8rem),1fr)); }

/* ========================================================================== */
/* 07. MÍDIA                                                                   */
/* ========================================================================== */
/* `--media-h` e `--media-ar` são VÁLVULA DE ESCAPE, autorizada pelo Victor em 11/08/2026 no item
   I7 do PLANO-1.0, e no idioma exato das três que já existem: `--chart-h` (I4), `--qr-size` (B6) e
   `--datagrid-max-h` (F6). O default é o de antes — 360px e 16/9 —, então nada muda para quem não
   passa nada. A causa é medida: numa caixa de demonstração de 826px de largura o `aspect-ratio`
   produz 464px de altura, contra um vão útil de 354; o player não cabe numa composição, e o
   `MediaPlayer` não repassa `style` para esta caixa (as props sobrando vão para o `<video>`, de
   propósito). Quem sabe quanta altura tem é a página, e altura não vira prop (check 23).
   ⚠ `--media-ar:auto` SÓ é seguro junto com `--media-h`. A razão do `aspect-ratio` aqui não é
   estética: é CLS. O exemplo de playlist de uma das referências declara o mesmo com o motivo escrito —
   sem proporção fixa, um player com `preload=none` mede zero até a mídia chegar e a página SALTA.
   Tirar a proporção sem fixar a altura devolve o salto. */
/* A cor do foco no player é a do contexto, não uma regra à parte (B-09, 24/09/2026). O fundo do
   player é quase preto nos DOIS temas (`--media-canvas`), e o `--focus-strong` do tema claro é
   escuro: o foco dos controles sumia no tema claro. Redefinir o token aqui conserta todos os
   controles de uma vez e deixa a linha de foco (espessura, afastamento) com a regra global. */
.media-player { --focus-strong:var(--primary); position:relative; isolation:isolate; overflow:hidden; min-height:var(--media-h,360px); aspect-ratio:var(--media-ar,16/9); border:1px solid transparent; border-radius:var(--radius-card); background:var(--media-canvas); color:var(--media-foreground); }
.media-viewport { position:absolute; inset:0; display:grid; place-items:center; background:var(--media-canvas); }
.media-fill { width:100%; height:100%; object-fit:contain; } /* vídeo React preenche o viewport (auditoria 18/07, M14) */
.media-placeholder { display:grid; place-items:center; gap:10px; color:var(--media-muted); text-align:center; }
.media-placeholder .icon { width:48px; height:48px; color:var(--media-foreground); }
.media-placeholder strong { color:var(--media-foreground); }
.media-overlay-title { position:absolute; top:16px; inset-inline:16px; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; color:var(--media-foreground); }
.media-overlay-title>div>span { display:block; color:var(--media-muted); font-size:var(--text-xs); }
.media-player .badge { border-color:transparent; background:var(--media-track); color:var(--media-foreground); }
.media-controls { position:absolute; inset:auto 0 0; z-index:3; display:grid; gap:8px; padding:12px; background:var(--media-scrim); color:var(--media-foreground); }
.media-seek { --media-played:34%; position:relative; height:20px; display:flex; align-items:center; }
.media-seek-track { position:absolute; inset-inline:0; height:4px; overflow:hidden; border-radius:var(--radius-full); background:var(--media-track); pointer-events:none; }
.media-seek-buffered,.media-seek-played { position:absolute; inset-block:0; inset-inline:0 auto; border-radius:inherit; }
.media-seek-buffered { width:62%; background:var(--media-buffered); }
.media-seek-played { width:var(--media-played); background:var(--primary); }
.media-seek input { position:relative; z-index:1; width:100%; height:20px; margin:0; appearance:none; background:transparent; cursor:pointer; }
.media-seek input::-webkit-slider-runnable-track { height:4px; background:transparent; }
.media-seek input::-webkit-slider-thumb { width:14px; height:14px; margin-top:-5px; appearance:none; border:2px solid transparent; border-radius:50%; background:var(--primary); }
.media-seek input::-moz-range-track { height:4px; background:transparent; }
.media-seek input::-moz-range-thumb { width:12px; height:12px; border:2px solid transparent; border-radius:50%; background:var(--primary); }
.media-seek input:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); box-shadow:none; }
.media-control-row,.media-control-group { display:flex; align-items:center; gap:4px; }
.media-control-row { min-width:0; justify-content:space-between; }
.media-control { min-width:36px; height:36px; display:inline-grid; place-items:center; padding:0; border:1px solid transparent; border-radius:var(--radius-full); background:transparent; color:var(--media-foreground); cursor:pointer; }
.media-control:hover,.media-control.active { background:var(--media-track); color:var(--primary); }
.media-time { padding:0 7px; color:var(--media-muted); font:var(--text-xs) var(--font-code); white-space:nowrap; }
.media-volume { width:82px; accent-color:var(--primary); }

/* IMAGEM (PLANO-1.0, item L4). A caixa é reservada ANTES do byte chegar — é a mesma razão que o
   comentário do `--media-ar` acima registra: sem proporção, a imagem mede zero até carregar e a
   página salta quando ela chega (CLS). O fundo é a superfície do esqueleto, e o bitmap a cobre ao
   pintar — marcador de carregamento sem uma linha de JavaScript.

   ⚠ NÃO declare `aspect-ratio` aqui, e isto foi MEDIDO em 15/08/2026, não deduzido. A primeira
   versão desta regra tinha `aspect-ratio:var(--image-ratio,auto)`, e o fallback `auto` PASSA POR
   CIMA do `aspect-ratio: auto <width> / <height>` que o navegador deriva dos atributos do
   elemento. Resultado medido numa caixa de 400px: com `width=300 height=200` e sem a prop `ratio`,
   a imagem saía **400×0** — ou seja, a regra escrita para impedir o salto de layout produzia
   exatamente o salto. Sem a declaração, o mesmo caso reserva 400×267. Quem tem proporção declarada
   recebe `aspect-ratio` inline, do componente; quem não tem fica com o comportamento do navegador,
   que já é o certo. */
.image { display:block; width:100%; height:auto; object-fit:cover; border-radius:var(--radius-lg); background:var(--surface-3); }
.image-contain { object-fit:contain; background:transparent; }
.image-broken { display:grid; place-items:center; color:var(--muted-foreground); }
/* GAR-15 (0.28.0): a moldura de celular do `Image frame="phone"`. GENÉRICA de propósito — sem ilha,
   sem entalhe, sem botões: as regras de marketing de um fabricante proíbem simular o aparelho dele,
   e a Aurea não leva marca de terceiro. A moldura segue o tema (a superfície do cartão, a borda e a
   sombra de sempre) e o canto é o da folha de baixo, o maior que a Aurea tem; o de dentro acompanha. */
.image-frame { display:block; }
.image-frame-phone { padding:var(--space-2); border:var(--border-width) solid transparent; border-radius:var(--radius-sheet); background:var(--card); box-shadow:var(--shadow-md); }
.image-frame-phone > .image { aspect-ratio:9 / 19.5; object-position:top; border-radius:calc(var(--radius-sheet) - var(--space-2)); }
/* A captura de cada tema (`srcDark`). Sem `data-theme` na página, vale a clara. A guarda é a do
   GAR-05 espelhada: uma faixa CLARA dentro da página escura volta a mostrar a captura clara. */
.image-theme-dark { display:none; }
[data-theme="dark"] .image-theme-dark:where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *) { display:block; }
[data-theme="dark"] .image-theme-light:where(:not([data-theme="light"] *),[data-theme="light"] [data-theme="dark"] *) { display:none; }

/* VÍDEO INCORPORADO (achado N-10, 24/09/2026). A caixa é a mesma superfície do `.media-player` —
   raio de cartão, borda e o fundo `--media-canvas` —, então um trailer do YouTube e um vídeo
   próprio saem com a mesma moldura na mesma tela. A proporção vem INLINE do componente, como no
   `.image`; aqui fica só o que não varia. O `<iframe>` é absoluto porque a altura é da caixa, não
   dele. A fachada é um `<button>` que cobre a caixa inteira: o alvo de clique é o vídeo todo, e o
   anel de foco é o `:focus-visible` global da casa. A pastilha de tocar é amarela porque é a ação
   da tela — o mesmo combinado do `Card variant="brand"`: amarelo só para pedir ação. O ícone dela
   é o marrom da marca (`--primary-mark`), e ela não tem mais o anel escuro em volta: decisão do
   Victor, 17/10/2026 (*"não quero preto"*). Numa capa amarela, quem a separa é a sombra. A caixa
   pinta o fundo só por dentro da borda transparente (`background-clip`): sem isso, o fundo escuro
   aparecia como um aro de 1 em volta da capa. */
.media-embed { display:grid; gap:var(--space-2); min-inline-size:0; }
.media-embed-frame { position:relative; overflow:hidden; border:1px solid transparent; border-radius:var(--radius-card); background:var(--media-canvas); background-clip:padding-box; }
.media-embed-frame>iframe { position:absolute; inset:0; inline-size:100%; block-size:100%; border:0; }
.media-embed-facade { position:absolute; inset:0; display:grid; place-items:center; padding:0; border:0; border-radius:inherit; background:var(--media-canvas); color:var(--media-foreground); cursor:pointer; }
.media-embed-facade>img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
.media-embed-play { position:relative; display:grid; place-items:center; inline-size:var(--control-h-lg); block-size:var(--control-h-lg); border-radius:var(--radius-full); background:var(--primary); color:var(--primary-mark); box-shadow:var(--shadow-lg); }
.media-embed-facade:hover .media-embed-play { transform:scale(1.06); }
.media-embed-link { display:inline-flex; align-items:center; gap:var(--space-1); justify-self:start; color:var(--muted-foreground); font-size:var(--text-sm); }
.media-embed-link:hover { color:var(--foreground); }
.media-embed-link .icon { --step-icon:var(--icon-sm); }

/* GALERIA (PLANO-1.0, item L2). A grade se adapta sozinha — `auto-fill` com um mínimo, e não um
   número de colunas —, porque quem sabe quanta largura existe é o contêiner, não o componente.
   `--gallery-min` é a válvula, no idioma do `--carousel-slide` e do `--qr-size`.
   O SELECIONADO NÃO INVENTA LINGUAGEM: o ladrilho recebe `.is-selected`, a mesma classe da aba
   ativa, do item de lateral e do botão alternado — cápsula elevada, rótulo na cor da marca e o
   fio amarelo embaixo. É a regra "uma linguagem só" deste arquivo, e por isso aqui não há uma
   segunda maneira de dizer "este está escolhido". O recuo existe para a cápsula aparecer: com
   `padding:0` o fundo do selecionado fica exatamente sob a foto e não se vê.
   Foco também não tem regra própria: a global do topo deste arquivo já desenha o anel, e ele é
   de cor DIFERENTE da seleção — senão focar e escolher viram o mesmo sinal. */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--gallery-min,8rem),1fr)); gap:var(--space-3); margin:0; padding:0; list-style:none; }
.gallery-item { min-width:0; }
.gallery-tile { display:grid; gap:var(--space-1); width:100%; padding:var(--space-1); border:0; border-radius:var(--radius-lg); font:inherit; text-align:start; cursor:pointer; }
/* `:not(.is-selected)` e não uma regra de selecionado própria, e a diferença foi MEDIDA em
   15/08/2026: `.gallery-tile` e `.is-selected` têm a MESMA especificidade, e a do ladrilho vem
   depois no arquivo — então `background:transparent` matava a cápsula da linguagem da casa e o
   selecionado saía só com o fio amarelo. Reescrever a cápsula aqui seria a segunda cópia da
   linguagem "uma linguagem só" existe para impedir; tirar o fundo só de quem NÃO está escolhido
   deixa a regra de lá governar sem competição. O fundo de botão do navegador precisa morrer de
   qualquer forma — ele é `buttonface`, não transparente. */
.gallery-tile:not(.is-selected) { background:transparent; color:var(--muted-foreground); }
.gallery-caption { font-size:var(--text-sm); }
/* AN-05 (Lote H, 04/10/2026). O VÍDEO não inventa peça: é o `Badge` da casa, pousado no canto do
   fim da foto, com as cores do reprodutor: o véu (`--media-scrim`, preto a 82%) e a letra dele
   (`--media-foreground`). O `--media-track` que o `.media-player` dá ao `Badge` é branco a 18% e só
   funciona sobre o véu: sobre foto clara, o tempo sumia (visto no banco em 04/10/2026). O canto é lógico (`inset-inline-end`), então vira sozinho na escrita da
   direita para a esquerda; o recuo do canto é `--space-2`.
   A LINHA DE "CARREGANDO MAIS" tem a medida da linha de "carregar mais" da tabela da referência (centrada): é
   ela que o observador vigia, então existe também parada, sem a rodinha. A do `MessageList` (AN-02),
   nas duas pontas da conversa, é a mesma linha. */
.gallery-media { position:relative; display:block; }
.gallery-media > .gallery-duration { position:absolute; inset-block-end:var(--space-2); inset-inline-end:var(--space-2); border-color:transparent; background:var(--media-scrim); color:var(--media-foreground); }
.gallery-more,.message-more { display:flex; align-items:center; justify-content:center; min-block-size:var(--icon-sm); padding-block:var(--space-3); color:var(--muted-foreground); }

/* TIPOGRAFIA (B-02, 25/09/2026) — `Text`, `Heading`, `Paragraph` e `Code`, no molde da
   referência (a folha de tipografia dela), por ordem do Victor: a referência sempre primeiro.
   O que vem dela é a FORMA:
   uma LISTA FECHADA de papéis em vez de tamanhos soltos (título 1–6, texto, texto pequeno, texto
   mínimo, código), cor só normal ou apagada, quatro pesos. O que é nosso são os números, todos de
   token: a escala de letras é a dela desde a ADR-0050, a entrelinha do texto é `--leading-relaxed`
   (27, 24 e 20px, contra os 28, 24 e 20 dela) e o código reusa a pele do `code` do `.prose`.
   A margem vai a zero porque `h1`…`h6` e `p` trazem a do navegador; o espaço entre blocos é de
   quem os empilha (`Stack`), não do texto.
   0.32.0: a entrelinha do título passa a ser a de CADA tamanho, como na escala publicada dela
   (40 · 36 · 32 · 28 · 28 · 24); até aqui era 1,2 em todos (43 · 36 · 29 · 24 · 22 · 19). */
.typography { margin:0; color:var(--foreground); }
.typography-h1,.typography-h2,.typography-h3,.typography-h4,.typography-h5,.typography-h6 { font-family:var(--font-heading); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-tight); }
.typography-h1 { font-size:var(--text-4xl); line-height:var(--text-4xl-leading); }
.typography-h2 { font-size:var(--text-3xl); line-height:var(--text-3xl-leading); }
.typography-h3 { font-size:var(--text-2xl); line-height:var(--text-2xl-leading); }
.typography-h4 { font-size:var(--text-xl); line-height:var(--text-xl-leading); }
.typography-h5 { font-size:var(--text-lg); line-height:var(--text-lg-leading); }
.typography-h6 { font-size:var(--text-base); line-height:var(--leading-normal); }
.typography-body { font-size:var(--text-base); line-height:var(--leading-relaxed); }
.typography-body-sm { font-size:var(--text-sm); line-height:var(--leading-relaxed); }
.typography-body-xs { font-size:var(--text-xs); line-height:var(--leading-relaxed); }
.typography-code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:var(--text-sm); }
.typography-muted { color:var(--muted-foreground); }
/* DOC-11 (0.32.0): o `tone` do nativo, na web. `link` é o amarelo de escrever; `primary`, o de
   preencher (no claro quase some, como no nativo); as cores de estado, o par `-400` (ADR-0061). */
.typography-tone-subtle { color:var(--subtle-foreground); }
/* A letra do tom primary é a de DESTAQUE (ADR-0081, 24/10/2026): o azul no claro, o amarelo no escuro. Era o amarelo de
   preencher, de propósito — 1,75:1 no claro. */
.typography-tone-primary { color:var(--primary-emphasis); }
.typography-tone-link { color:var(--link); }
.typography-tone-danger { color:var(--danger-400); }
.typography-tone-success { color:var(--success-400); }
.typography-tone-warning { color:var(--warning-400); }
.typography-tone-info { color:var(--info-400); }
.typography-weight-normal { font-weight:var(--weight-regular); }
.typography-weight-medium { font-weight:var(--weight-medium); }
.typography-weight-semibold { font-weight:var(--weight-semibold); }
.typography-weight-bold { font-weight:var(--weight-bold); }
.typography-weight-extrabold { font-weight:var(--weight-extrabold); }
/* GAR-16 (0.28.0): algarismos da mesma largura, para número que alinha em coluna ou muda na tela.
   Ligado só onde se pede — no texto corrido o "1" estreito é o certo.
   ADR-0077 (22/10/2026, decisão do Victor): e na fonte de código, a IBM Plex Mono — o valor e o número de
   identificação, como no sistema que serviu de modelo (na tabela dele, só a coluna de número e a de valor; o resto
   da tabela fica no texto). Vem depois dos `.typography-h*`, e por isso o título com `numeric` também troca. */
.typography-numeric { font-family:var(--font-code); font-variant-numeric:tabular-nums; }
/* O alinhamento só existe num bloco: o `Text` (um <span>) e o `Code` (um <code>) são texto em linha, e com o
   `text-align` sozinho o `align` deles não fazia nada — achado pelo exemplo de cada valor (bloco 1, o catálogo fiel,
   23/10/2026). Com `align`, a peça vira bloco, como já faz o `truncate`; no `Heading` e no `Paragraph`, que já são
   bloco, nada muda. */
.typography-align-start, .typography-align-center, .typography-align-end, .typography-align-justify { display:block; }
.typography-align-start { text-align:start; }
.typography-align-center { text-align:center; }
.typography-align-end { text-align:end; }
.typography-align-justify { text-align:justify; }
.typography-truncate { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* PROSA (PLANO-1.0, item L5). É a PELE do texto longo, não o parser — quem transforma Markdown em
   elementos é o consumidor. Aqui só se decide como esses elementos se leem.

   ⚠ TODA regra abaixo é ESCOPADA em `.prose`, e isso não é estilo de escrita: é a trava do item, e
   ela tem uma conta paga atrás. As cinco regras de tabela deste arquivo eram de ELEMENTO e valiam
   para toda <table> do documento — o calendário nasceu com 720px de largura por causa disso, e
   nenhum gate viu, porque os checks 15 e 18 comparam CLASSE e seletor de elemento não tem
   nenhuma. Escrever `blockquote{...}` aqui repetiria o Lote 4 com outro elemento.

   O tamanho sobe para `--text-base`: o corpo do documento é `--text-sm` (14px), que serve a
   interface e é pequeno para ler artigo. A entrelinha é `--leading-relaxed`, que existe no token
   e não tinha uso. A MEDIDA de linha é `--prose-measure`, no idioma das outras válvulas.

   A FONTE não muda: a prosa usa a do texto. ~~`--font-editorial` (IBM Plex Serif) existe e está
   sem uso~~ — desde a ADR-0053 (01/10/2026) a Plex Serif saiu, e `--font-editorial` é apelido da
   fonte do texto (desde a ADR-0077, a Inter), mantido só para não quebrar quem o usa; sai na 1.0. */
.prose { max-width:var(--prose-measure,68ch); font-size:var(--text-base); line-height:var(--leading-relaxed); }
.prose > * + * { margin-block-start:var(--space-4); }
.prose > h2,.prose > h3,.prose > h4 { margin-block-start:var(--space-8); }
.prose h1,.prose h2,.prose h3,.prose h4 { font-weight:var(--weight-semibold); }
.prose h1 { font-size:var(--text-3xl); line-height:var(--text-3xl-leading); }
.prose h2 { font-size:var(--text-2xl); line-height:var(--text-2xl-leading); }
.prose h3 { font-size:var(--text-xl); line-height:var(--text-xl-leading); }
.prose h4 { font-size:var(--text-lg); line-height:var(--text-lg-leading); }
.prose blockquote { margin-inline:0; padding-inline-start:var(--space-4); border-inline-start:2px solid transparent; color:var(--muted-foreground); }
.prose ul,.prose ol { padding-inline-start:var(--space-6); }
.prose li + li { margin-block-start:var(--space-2); }
/* `0.9em` e não um token: código dentro do texto se mede em relação à LINHA em que está, e um
   valor absoluto o deixaria maior que o parágrafo dentro de um h2. É o mesmo motivo pelo qual o
   `.badge` tem `line-height:1` — geometria que depende do contexto se escreve relativa. */
/* `overflow-wrap:anywhere` (18/10/2026, lote U): código no meio do texto é uma palavra só — `window.Aurea.setDensity("compact")`
   —, e sem a quebra ele empurrava a página para o lado a 320 (medido na página Density do site; a WCAG 1.4.10 pede que
   nada role para o lado). Dentro do `pre` ela não age: lá o `white-space` não quebra, e a caixa rola. */
.prose code { padding:var(--space-05) var(--space-1); border-radius:var(--radius-xs); background:var(--surface-2); font-family:var(--font-code); font-size:0.9em; overflow-wrap:anywhere; }
.prose pre { overflow-x:auto; padding:var(--space-4); border:1px solid transparent; border-radius:var(--radius-card); background:var(--surface-2); }
.prose pre code { padding:0; border-radius:0; background:transparent; font-size:var(--text-sm); }
.prose img { max-width:100%; height:auto; border-radius:var(--radius-lg); }
.prose hr { border:0; border-block-start:1px solid transparent; }
.prose figcaption { color:var(--muted-foreground); font-size:var(--text-sm); }
/* A tabela da prosa NÃO é a tabela de dados: sem `min-width:720px`, sem faixa de cabeçalho em
   caixa alta e sem hover de linha. Uma tabela de três colunas no meio de um artigo não é uma
   grade — forçá-la a 720px é exatamente o defeito que o calendário sofreu. */
.prose table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.prose th,.prose td { padding:var(--space-2) var(--space-3); text-align:start; border-block-end:1px solid transparent; }
.prose th { color:var(--subtle-foreground); font-weight:var(--weight-semibold); }

/* LISTA ORDENÁVEL (PLANO-1.0, item L3). Duas regras aqui não são decoração e quebram
   comportamento se saírem:
   • `touch-action:none` na alça — sem ela o navegador rola a página em vez de deixar arrastar, e
     o componente não funciona em toque nenhum. É o par obrigatório do `setPointerCapture`;
   • `cursor:grab`/`grabbing`, que é a única affordance de que aquilo se arrasta.
   O item PEGO se marca com `data-grabbed`, e o sinal é ELEVAÇÃO e borda — não cor sozinha
   (WCAG 1.4.1), e não a cápsula de `.is-selected`: pego e escolhido são coisas diferentes e não
   podem falar a mesma língua. */
.sortable-list { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
.sortable-item { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-3); border:1px solid transparent; border-radius:var(--radius-lg); background:var(--card); }
.sortable-item[data-grabbed] { border-color:transparent; box-shadow:var(--shadow-lg); }
.sortable-handle { display:grid; place-items:center; min-width:var(--space-6); min-height:var(--space-6); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); cursor:grab; touch-action:none; }
.sortable-handle[aria-pressed="true"] { cursor:grabbing; color:var(--primary); }
.sortable-label { min-width:0; }

/* EDITOR POR BLOCOS (PLANO-1.0, item N1). A Aurea é dona da MOLDURA; o texto rico de dentro é do
   consumidor — ADR-0025, e o comentário do `inputs.tsx` traz a medição inteira.
   Duas regras aqui são COMPORTAMENTO e não enfeite, as mesmas da lista ordenável, porque o
   protocolo de arrasto é o mesmo (`useReorder`):
   • `touch-action:none` na alça — sem ela o navegador rola a página em vez de deixar arrastar, e
     o componente não funciona em toque nenhum. É o par obrigatório do `setPointerCapture`;
   • `cursor:grab`/`grabbing`, a única affordance de que aquilo se arrasta.
   `min-width:0` no corpo NÃO é enfeite tampouco: sem ele um filho largo (imagem, tabela, bloco de
   código) estoura a coluna do grid em vez de encolher, e a página ganha rolagem lateral — que é
   exatamente o que o `catalog-sweep` reprova.
   O raio é `--radius-lg` e não `--radius-card`: bloco é LINHA de uma lista, no mesmo idioma do
   `.sortable-item`, e não um cartão flutuante. Sai da identidade que já existe, sem decisão de
   aparência nova. O bloco PEGO se marca com `data-grabbed`, e o sinal é ELEVAÇÃO e borda — não
   cor sozinha (WCAG 1.4.1). */
.block-editor { display:grid; gap:var(--space-3); margin:0; padding:0; list-style:none; }
.block-item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-lg); background:var(--card); }
.block-item[data-grabbed] { border-color:transparent; box-shadow:var(--shadow-lg); }
.block-rail { display:grid; grid-auto-rows:min-content; gap:var(--space-1); }
.block-handle,.block-remove { display:grid; place-items:center; min-width:var(--space-6); min-height:var(--space-6); padding:0; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--muted-foreground); }
.block-handle { cursor:grab; touch-action:none; }
.block-handle[aria-pressed="true"] { cursor:grabbing; color:var(--primary); }
.block-body { min-width:0; }

/* CARROSSEL (PLANO-1.0, item L1). A pele É o motor: o encaixe, a rolagem por toque, a inércia e
   as setas de teclado saem de `scroll-snap` num contêiner nativo — o React só descobre em qual
   slide se está. Por isso estas regras não são decoração, e apagá-las quebra comportamento.
   `--carousel-slide` é a válvula que faz o caso `multiple` da referência sem uma prop: quantos
   aparecem por vez é decisão de layout da página, no idioma do `--qr-size` e do `--media-h`.
   `scroll-behavior:smooth` mora AQUI e não no JavaScript de propósito: `scrollBy` sem `behavior`
   obedece ao valor computado, e a regra global de `prefers-reduced-motion` deste arquivo já o
   derruba para `auto` — quem pediu menos movimento recebe menos movimento, sem código novo. */
.carousel { display:grid; gap:var(--space-3); }
.carousel-track { display:flex; gap:var(--space-3); overflow-x:auto; overflow-y:hidden; scroll-snap-type:inline mandatory; scroll-behavior:smooth; overscroll-behavior-inline:contain; }

/* Sem regra de foco própria: a global do topo deste arquivo já dá o anel, e ela usa
   `--focus-strong` — que é `--primary` no escuro e `--brand-yellow-foreground` no claro. A versão
   anterior desta linha fixava `--primary` nos dois e teria trocado a cor do foco num deles. */
.carousel-slide { flex:0 0 var(--carousel-slide,100%); min-width:0; scroll-snap-align:start; }
.carousel-controls { display:flex; align-items:center; justify-content:center; gap:var(--space-2); }
.carousel-dots { display:flex; align-items:center; gap:var(--space-1); }
/* 24×24 de ALVO com 8×8 de desenho: abaixo disso é reprovação do WCAG 2.2 AA (2.5.8), e uma fila
   de pontos é onde esse erro nasce. O ponto vem do ::before para não custar um elemento nem uma
   classe a mais — o alvo é o botão inteiro, o desenho é o miolo. */
.carousel-dot { width:var(--space-6); height:var(--space-6); display:grid; place-items:center; padding:0; border:0; background:transparent; cursor:pointer; }
.carousel-dot::before { content:""; width:var(--space-2); height:var(--space-2); border-radius:var(--radius-full); background:var(--border); }
.carousel-dot[aria-current="true"]::before { background:var(--primary); }

/* ========================================================================== */
/* 08. ÍCONES                                                                  */
/* ========================================================================== */
.icon-search { max-width:420px; }
.icon-category { margin-top:26px; } .icon-category h3 { margin:0 0 12px; font-size:var(--text-base); }
.icon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.icon-tile { min-height:86px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; padding:13px; border:1px solid transparent; border-radius:var(--radius-lg); background:var(--secondary); color:var(--muted-foreground); cursor:pointer; text-align:start; transition:transform var(--duration-fast) var(--ease-standard),border-color var(--duration-fast),color var(--duration-fast); }
@media (hover:hover) and (pointer:fine) { .icon-tile:hover { color:var(--foreground); border-color:transparent; transform:translateY(-1px); } } .icon-tile:focus-visible { color:var(--foreground); border-color:transparent; } .icon-tile span { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; font:11px var(--font-code); }
/* JANELAS (0.32.0): o Dialog, o ConfirmDialog e o Drawer com a anatomia da referência, lida no CSS
   PUBLICADO dela — recheio de 24; o X a 16 do topo e do fim; o cabeçalho em coluna (o ícone num círculo
   de 40 em cima, 12 até o título de 16, peso médio); o corpo de 14/20 esmaecido, que é o que rola; 8
   entre o cabeçalho e o corpo e 20 antes do rodapé; o rodapé ao fim, com 8 entre os botões. Da tela, a
   janela guarda 16 no celular e 40 de 640 para cima. Entra crescendo de 0,95 a 1 e sai encolhendo, como
   a dela. A borda continua (a dela é só sombra no claro): baixa visão, como nas outras janelas.
   O que já rolava (a janela inteira) passou para o corpo — a ficha prometia isso desde sempre. */
.dialog-backdrop { position:fixed; inset:0; z-index:var(--z-modal); background:var(--overlay); backdrop-filter:blur(5px); transition:opacity var(--duration-slow) var(--ease-standard); }
.dialog-backdrop[data-starting-style],.dialog-backdrop[data-ending-style] { opacity:0; }
.dialog-backdrop[data-ending-style] { transition-duration:var(--duration-fast); }
.dialog { --dialog-margin:var(--space-4); --dialog-w:28rem; position:fixed; inset-inline:0; top:50%; translate:0 -50%; z-index:var(--z-modal); display:flex; flex-direction:column; inline-size:min(var(--dialog-w),calc(100vw - 2 * var(--dialog-margin))); max-block-size:calc(100dvh - 2 * var(--dialog-margin)); margin-inline:auto; padding:var(--space-6); border:var(--border-width) solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); outline:none; transition:opacity var(--duration-slow) var(--ease-standard),scale var(--duration-slow) var(--ease-standard); }
.dialog[data-starting-style] { opacity:0; scale:1.05; }
.dialog[data-ending-style] { opacity:0; scale:.95; transition-duration:var(--duration-fast); }
@media (min-width:640px) { .dialog { --dialog-margin:var(--space-10); } }
/* `placement` (o dela): `auto` senta a janela EMBAIXO no celular, onde o polegar alcança, e no meio de
   640 para cima. Sem o atributo (a marcação pura), a janela fica no meio, como sempre ficou. */
.dialog[data-placement="top"] { top:var(--dialog-margin); translate:none; }
.dialog[data-placement="bottom"] { top:auto; bottom:var(--dialog-margin); translate:none; }
@media (max-width:639.98px) { .dialog[data-placement="auto"] { top:auto; bottom:var(--dialog-margin); translate:none; } }
/* size (B-03), decisão do Victor em 24/09/2026: as quatro larguras da referência — as do
   pacote de estilos dela, 20/24/28/32rem = 320/384/448/512 — mais 1024
   (o token --breakpoint-lg) e a tela cheia. O padrão passou a ser o `md` da referência, 448; até a 0.8.14
   era 560. */
.dialog-xs { --dialog-w:20rem; }
.dialog-sm { --dialog-w:24rem; }
.dialog-lg { --dialog-w:32rem; }
.dialog-xl { --dialog-w:var(--breakpoint-lg); }
.dialog-full { --dialog-w:100vw; block-size:calc(100dvh - 2 * var(--dialog-margin)); }
/* As partes, as mesmas no Dialog, no ConfirmDialog e no Drawer. O corpo guarda, dos lados e em cima e
   embaixo, o espaço do anel de foco (a largura e o afastamento dele): é ele que rola, e o que rola corta
   o anel de quem encosta na borda — a referência faz a mesma conta, com 3. */
/* 16 da borda de FORA, como a dela (que não tem borda): o absoluto conta de dentro da borda de 1. */
.dialog-close { position:absolute; inset-block-start:calc(var(--space-4) - var(--border-width)); inset-inline-end:calc(var(--space-4) - var(--border-width)); }
.dialog-header { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3); }
.dialog-heading { margin:0; padding-inline-end:var(--space-6); color:var(--popover-foreground); font-size:var(--text-base); font-weight:var(--weight-medium); line-height:var(--leading-normal); text-wrap:balance; }
.dialog-icon { display:inline-flex; flex:none; align-items:center; justify-content:center; inline-size:var(--space-10); block-size:var(--space-10); border-radius:var(--radius-full); background:var(--secondary); color:var(--foreground); }
.dialog-icon > .icon { --step-icon:var(--icon-md); }
.dialog-icon-brand { background:color-mix(in oklab,var(--primary) 10%,var(--secondary)); color:var(--primary-emphasis); }
.dialog-icon-info { background:var(--info-bg); color:var(--info-400); }
.dialog-icon-success { background:var(--success-bg); color:var(--success-400); }
.dialog-icon-warning { background:var(--warning-bg); color:var(--warning-400); }
.dialog-icon-danger { background:var(--danger-bg); color:var(--danger-400); }
.dialog-body { --dialog-ring:calc(var(--focus-width) + var(--focus-offset)); display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; flex:1 1 auto; min-block-size:0; overflow-y:auto; overscroll-behavior:contain; margin-inline:calc(-1 * var(--dialog-ring)); padding:var(--dialog-ring); color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
.dialog-header + .dialog-body { margin-block-start:calc(var(--space-2) - var(--dialog-ring)); }
.dialog-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--space-2); }
.dialog-body + .dialog-footer { margin-block-start:calc(var(--space-5) - var(--dialog-ring)); }
.dialog-header + .dialog-footer { margin-block-start:var(--space-5); }
/* O ConfirmDialog é o MESMO `.dialog` — não nasce uma segunda superfície flutuante, que seria a
   pele divergindo como divergiu entre `.table-wrap` e `.table-region`. O que muda é a caixa mais
   estreita (uma frase e dois botões não precisam da largura do Dialog), com o destrutivo por último no
   rodapé: a ordem visual é cancelar → agir, e é onde as quatro referências batem. */
.dialog-confirm { --dialog-w:26.25rem; }
.drawer-wrap { position:fixed; inset:0; z-index:var(--z-drawer); display:none; background:var(--overlay); } .drawer-wrap.open { display:block; }
/* DRAWER (0.32.0): a gaveta da referência nos quatro lados, no motor de gaveta do Base UI, que arrasta
   para fechar. Laterais de 320 (384 de 640 para cima, nunca mais que 85% da tela); a de cima e a de
   baixo, a largura toda e até 85% da altura, com a alça de 36 × 4. Os cantos são da Aurea: 22 do lado de
   dentro nas laterais (a dela é quadrada) e o 32 da folha na de cima e na de baixo (ADR-0058). Enquanto
   o dedo arrasta, a gaveta segue o dedo (as variáveis do motor) e o fundo clareia junto. */
.drawer-backdrop { position:fixed; inset:0; z-index:var(--z-drawer); background:var(--overlay); opacity:calc(1 - var(--drawer-swipe-progress,0)); transition:opacity var(--duration-slow) var(--ease-emphasized); }
.drawer-backdrop[data-starting-style],.drawer-backdrop[data-ending-style] { opacity:0; }
.drawer-backdrop[data-swiping] { transition-duration:0ms; }
.drawer-viewport { position:fixed; inset:0; z-index:var(--z-drawer); }
.drawer { position:fixed; z-index:var(--z-drawer); display:flex; flex-direction:column; padding:var(--space-6); border:0 solid transparent; background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); outline:none; overscroll-behavior:contain; transition:transform var(--duration-slow) var(--ease-emphasized); }
.drawer[data-swiping] { transition-duration:0ms; }
.drawer[data-ending-style] { transition-duration:calc(var(--drawer-swipe-strength,1) * var(--duration-slow)); }
.drawer-left,.drawer-right { top:0; bottom:0; inline-size:min(20rem,85vw); transform:translateX(var(--drawer-swipe-movement-x,0px)); }
@media (min-width:640px) { .drawer-left,.drawer-right { inline-size:min(24rem,85vw); } }
.drawer-right { right:0; border-left-width:var(--border-width); border-radius:var(--radius-card) 0 0 var(--radius-card); }
.drawer-left { left:0; border-right-width:var(--border-width); border-radius:0 var(--radius-card) var(--radius-card) 0; }
.drawer-top,.drawer-bottom { left:0; right:0; max-block-size:85dvh; transform:translateY(var(--drawer-swipe-movement-y,0px)); }
.drawer-bottom { bottom:0; border-top-width:var(--border-width); border-radius:var(--radius-sheet) var(--radius-sheet) 0 0; padding-block-end:calc(var(--space-6) + env(safe-area-inset-bottom,0px)); }
.drawer-top { top:0; border-bottom-width:var(--border-width); border-radius:0 0 var(--radius-sheet) var(--radius-sheet); padding-block:calc(var(--space-6) + env(safe-area-inset-top,0px)) var(--space-2); }
.drawer-right[data-starting-style],.drawer-right[data-ending-style] { transform:translateX(100%); }
.drawer-left[data-starting-style],.drawer-left[data-ending-style] { transform:translateX(-100%); }
.drawer-bottom[data-starting-style],.drawer-bottom[data-ending-style] { transform:translateY(100%); }
.drawer-top[data-starting-style],.drawer-top[data-ending-style] { transform:translateY(-100%); }
.drawer-handle { flex:none; align-self:center; inline-size:calc(var(--space-8) + var(--space-1)); block-size:var(--space-1); border-radius:var(--radius-full); background:var(--border-strong); }
.drawer-bottom > .drawer-handle { margin-block-end:var(--space-2); }
.drawer-top > .drawer-handle { margin-block-start:var(--space-2); }
/* TOAST (0.32.0): o aviso da referência, lido no CSS e no código publicados dela, sobre a pilha do
   motor (as variáveis `--toast-*` do Base UI). Os avisos moram todos no mesmo lugar: o da frente
   inteiro, os de trás 12 acima e 5% menores a cada um, com o conteúdo apagado; passar o mouse ou o
   foco abre a pilha, com 12 entre eles. Embaixo no meio por padrão (o dela), 460 de largura de 640
   para cima e a tela menos 16 de cada lado no celular. `--toast-dir` é o sentido da pilha: para cima
   quando ela mora embaixo, para baixo quando mora em cima. */
.toast-stack { --toast-gap:var(--space-3); --toast-dir:-1; position:fixed; z-index:var(--z-toast); inset-block-end:var(--space-4); inset-inline:0; inline-size:min(28.75rem,calc(100vw - 2 * var(--space-4))); margin-inline:auto; outline:none; }
.toast-stack:is(.toast-stack-top,.toast-stack-top-start,.toast-stack-top-end) { --toast-dir:1; inset-block:var(--space-4) auto; }
.toast-stack:is(.toast-stack-bottom-start,.toast-stack-top-start) { inset-inline:var(--space-4) auto; margin-inline:0; }
.toast-stack:is(.toast-stack-bottom-end,.toast-stack-top-end) { inset-inline:auto var(--space-4); margin-inline:0; }
.toast { position:absolute; inset-inline:0; bottom:0; z-index:calc(1000 - var(--toast-index,0)); box-sizing:border-box; block-size:var(--toast-frontmost-height,var(--toast-height,auto)); padding:var(--space-3) var(--space-4); border:var(--border-width) solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); user-select:none; transform-origin:50% 100%; transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-dir) * var(--toast-index,0) * var(--toast-gap))) scale(calc(1 - var(--toast-index,0) * .05)); transition:transform var(--duration-slow) var(--ease-emphasized),opacity var(--duration-slow) var(--ease-standard),block-size var(--duration-fast) var(--ease-standard); }
.toast-stack:is(.toast-stack-top,.toast-stack-top-start,.toast-stack-top-end) .toast { top:0; bottom:auto; transform-origin:50% 0; }
.toast[data-expanded] { block-size:var(--toast-height,auto); transform:translateX(var(--toast-swipe-movement-x,0px)) translateY(calc(var(--toast-swipe-movement-y,0px) + var(--toast-dir) * (var(--toast-offset-y,0px) + var(--toast-index,0) * var(--toast-gap)))); }
.toast[data-starting-style],.toast[data-ending-style] { transform:translateY(calc(-1 * var(--toast-dir) * 150%)); }
.toast[data-limited],.toast[data-ending-style] { opacity:0; }
.toast[data-ending-style][data-swipe-direction="right"] { transform:translateX(calc(var(--toast-swipe-movement-x,0px) + 150%)); }
.toast[data-ending-style][data-swipe-direction="up"] { transform:translateY(calc(var(--toast-swipe-movement-y,0px) - 150%)); }
.toast[data-ending-style][data-swipe-direction="down"] { transform:translateY(calc(var(--toast-swipe-movement-y,0px) + 150%)); }
/* A ponte entre dois avisos abertos: sem ela, o mouse que passa pelo vão de 12 sai da pilha e ela fecha. */
.toast::after { content:""; position:absolute; inset-inline:0; top:100%; block-size:calc(var(--toast-gap) + var(--border-width)); }
.toast-stack:is(.toast-stack-top,.toast-stack-top-start,.toast-stack-top-end) .toast::after { top:auto; bottom:100%; }
.toast-content { display:flex; align-items:flex-start; gap:calc(var(--space-1) + var(--space-05)); block-size:100%; overflow:hidden; transition:opacity var(--duration-base) var(--ease-standard); }
.toast-content[data-behind] { opacity:0; }
.toast-content[data-expanded] { opacity:1; }
.toast-indicator { display:inline-flex; flex:none; align-items:center; justify-content:center; inline-size:var(--space-6); block-size:var(--space-6); color:var(--popover-foreground); }
.toast-indicator > .icon { --step-icon:var(--icon-sm); }
.toast-text { display:flex; flex:1 1 0; flex-direction:column; align-self:center; min-inline-size:0; }
.toast-title { color:var(--popover-foreground); font-size:var(--text-sm); font-weight:var(--weight-medium); line-height:var(--space-5); }
.toast-description { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); line-height:var(--space-5); }
.toast-action { flex:none; align-self:center; }
/* No celular a ação desce para baixo do texto, alinhada com ele — como a dela. */
@media (max-width:639.98px) { .toast-content { flex-wrap:wrap; } .toast-text { flex-basis:calc(100% - var(--space-6) - var(--space-1) - var(--space-05)); } .toast-action { margin-inline-start:calc(var(--space-6) + var(--space-1) + var(--space-05)); } }
/* As faces do tipo (desde 16/08/2026 elas pintam; o check 18 não enxerga classe por template). Em
   0.32.0 o tipo deixou de tingir o fundo e a borda: pinta o ícone e o título, no par `-400` da
   ADR-0061, como o aviso da referência. */
.toast-info :is(.toast-indicator,.toast-title) { color:var(--info-400); }
.toast-success :is(.toast-indicator,.toast-title) { color:var(--success-400); }
.toast-warning :is(.toast-indicator,.toast-title) { color:var(--warning-400); }
.toast-danger :is(.toast-indicator,.toast-title) { color:var(--danger-400); }
/* O X do aviso: o `CloseButton` de 20 com o X de 12, na quina, com borda. Aparece com o mouse ou o
   foco no aviso da frente (ou na pilha aberta); no toque, fica sempre à vista. */
.toast-close.close-button { position:absolute; inset-block-start:calc(-1 * var(--space-1)); inset-inline-end:calc(-1 * var(--space-1)); inline-size:var(--space-5); block-size:var(--space-5); border:var(--border-width) solid transparent; background:var(--popover); opacity:0; pointer-events:none; transition:opacity var(--duration-fast) var(--ease-standard); }
.toast-close.close-button .icon { --step-icon:var(--space-3); }
:is(.toast[data-expanded],.toast:has(> .toast-content:not([data-behind]))):is(:hover,:focus-within) > .toast-close { opacity:1; pointer-events:auto; }
@media (hover:none) { :is(.toast[data-expanded],.toast:has(> .toast-content:not([data-behind]))) > .toast-close { opacity:1; pointer-events:auto; } }
@media (pointer:coarse) { .toast-close.close-button::before { inset:calc((var(--space-5) - var(--target-min)) / 2); } }
/* GAR-14 (0.28.0): o aviso do `Button share`, preso ao botão — "Link copiado", ou o erro com o link à
   mostra. Tem a medida do botão (a altura, o recheio da regra de cima, a letra e a cápsula) e a pele
   do aviso de sempre. O ícone é desenho de máscara, como a seta do `KPI`: a mesma marcação serve ao
   React (o motor posiciona) e ao HTML puro (o `aurea.js` posiciona, com `.toast-anchored-fixed`). */
.toast-anchored { display:inline-flex; align-items:center; gap:var(--space-2); min-block-size:var(--step-h,var(--control-h-md)); max-inline-size:calc(100vw - 2 * var(--space-4)); padding-block:var(--space-1); border:var(--border-width) solid transparent; border-radius:var(--radius-control); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-md); font-size:var(--step-fs,var(--text-sm)); font-weight:var(--weight-medium); line-height:var(--leading-tight); transition:opacity var(--duration-fast) var(--ease-standard); }
.toast-anchored[data-starting-style],.toast-anchored[data-ending-style] { opacity:0; }
.toast-anchored-icon { --toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); flex:none; inline-size:var(--icon-sm); block-size:var(--icon-sm); background:currentColor; color:var(--success-400); -webkit-mask:var(--toast-glifo) center/contain no-repeat; mask:var(--toast-glifo) center/contain no-repeat; }
.toast-anchored-danger { border-color:transparent; background:var(--danger-bg); }
.toast-anchored-danger .toast-anchored-icon { --toast-glifo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E"); color:var(--danger-400); }
/* O erro leva o link logo abaixo do aviso, já selecionado, para a pessoa copiar com o teclado. */
.toast-anchored-stack { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); inline-size:max-content; max-inline-size:calc(100vw - 2 * var(--space-4)); }
.toast-anchored-link { inline-size:100%; }
.toast-anchored-fixed { position:fixed; z-index:var(--z-toast); }
/* A CAMADA DAS JANELINHAS mora no POSICIONADOR (15/10/2026). Ela estava na caixa de dentro (`.popover`, `.menu`,
   `.tooltip`…), que é estática — e `z-index` em caixa estática não vale. Quem flutua é o posicionador do motor (o
   `absolute`), e sem camada ele ficava por baixo de qualquer peça posicionada com camada: o topo fixo do site (20)
   cortava a borda de cima da escolha de tema (o Victor viu: "a caixa dos temas continua cortando"). Agora todo
   posicionador leva a classe `positioner`, na camada que as caixas já pediam. */
.positioner { z-index:var(--z-modal); }
.toast-anchored-positioner { z-index:var(--z-toast); }
/* CommandPaletteShell (Fase 11, achado A13). A superfície já existia aqui sob o nome
   `.command` — e `.command` é chrome da página de docs manual: nenhum componente React a
   emite. Ela passava no check 15 por ACIDENTE, porque o rótulo padrão "Type a command…" põe
   a palavra "command" numa string do pacote React e o gate lê as strings do fonte. Foi para
   apps/docs/docs.css, que é a casa dela; o sistema fica com os dois nomes que o componente
   emite de verdade. Não-modal de propósito, como a gaveta do AppShell (ADR-0003): o foco não
   fica preso, então não declaramos modalidade que não entregamos. */
.command-overlay { position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:start center; padding:var(--space-16) var(--space-5) var(--space-5); background:var(--overlay); backdrop-filter:blur(5px); }
.command-palette { display:grid; gap:var(--space-2); width:min(680px,100%); max-height:100%; overflow:auto; padding:var(--space-4); border:1px solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
/* Camadas flutuantes (Base UI): tooltip, popover, menu. z-modal para funcionarem sobre diálogos; empilhamento mútuo pela ordem do portal no DOM. */
/* 0.32.0, a dica da referência: recheio de 8, letra de 12/16, até 320 de largura, o fundo das janelas
   (era o fundo afundado), e a palavra longa quebra onde precisar. O canto continua o 10 da Aurea (o
   dela é 12, que a nossa escala não tem). Entra crescendo de 0,9 e sai encolhendo; pelo teclado, e
   quando passa de uma dica para a vizinha, entra sem animação (`data-instant` do motor). */
.tooltip { z-index:var(--z-modal); max-inline-size:min(20rem,calc(100vw - 2 * var(--space-4))); padding:var(--space-2); border:var(--border-width) solid transparent; border-radius:var(--radius-md); background:var(--popover); color:var(--popover-foreground); font-size:var(--text-xs); line-height:var(--space-4); overflow-wrap:anywhere; box-shadow:var(--shadow-md); transform-origin:var(--transform-origin,center); transition:opacity var(--duration-base) var(--ease-standard),scale var(--duration-base) var(--ease-standard); }
.tooltip[data-starting-style],.tooltip[data-ending-style],.popover[data-starting-style],.popover[data-ending-style] { opacity:0; scale:.9; }
.tooltip[data-ending-style],.popover[data-ending-style] { transition-duration:var(--duration-fast); }
.tooltip[data-instant] { transition:none; }
.popover { z-index:var(--z-modal); min-width:220px; max-width:min(360px,calc(100vw - 32px)); padding:16px; border:1px solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); font-size:var(--text-sm); box-shadow:var(--shadow-lg); display:grid; gap:10px; transform-origin:var(--transform-origin,center); transition:opacity var(--duration-base) var(--ease-standard),scale var(--duration-base) var(--ease-standard); }
.popover-title { font-weight:var(--weight-medium); }
/* A SETA (0.32.0): o desenho é nosso — uma curva de 12 × 6 —, com o fundo da janela e a linha da borda,
   e ela entra 1 por cima da borda da janela para a linha dar a volta sem emenda. O motor põe a seta
   no ponto certo do lado; aqui só se diz em que lado ela encosta e para onde aponta. */
.overlay-arrow { display:flex; inline-size:var(--space-3); block-size:var(--space-3); }
.overlay-arrow > svg { inline-size:100%; block-size:100%; overflow:visible; }
.overlay-arrow-fill { fill:var(--popover); }
.overlay-arrow-line { stroke:var(--border); stroke-width:var(--border-width); }
.overlay-arrow[data-side="top"] { top:calc(100% - var(--border-width)); }
.overlay-arrow[data-side="bottom"] { bottom:calc(100% - var(--border-width)); rotate:180deg; }
.overlay-arrow[data-side="left"] { left:calc(100% - var(--border-width)); rotate:-90deg; }
.overlay-arrow[data-side="right"] { right:calc(100% - var(--border-width)); rotate:90deg; }
/* `--menu-px` existe porque o RÓTULO DE GRUPO tem de alinhar com o texto dos itens, e o número
   estava escrito duas vezes. Uma relação entre duas regras não se mantém repetindo a constante:
   quem mudar o recuo do item mudaria o alinhamento do rótulo sem perceber. */
/* O RAIO DA LINHA DO MENU SAI DA CONTA DA CASA (C-09, 23/09/2026 — decidido pelo Victor: 18px).
   O item tinha `--radius-sm` cravado (8px) dentro de um painel de 16px com 6px de respiro: nem a
   conta (16 − 6 = 10) ele seguia. Ele comparou 8, 10 e 18 no popup real e escolheu 18 — que é
   exatamente o que a conta já dá na `.sidebar-item` e na `.nav-list-row` (22 − 4). Para o 18
   continuar sendo CONTA e não número, o painel passa a ter as medidas da lateral: raio de cartão
   e `--space-1` de respiro. Vale para toda lista que usa `.menu`: Combobox, MultiCombobox,
   DropdownMenu, ContextMenu, Menubar e a lista da CommandPalette. */
.menu { --menu-px:10px; z-index:var(--z-modal); min-width:200px; max-width:min(320px,calc(100vw - 32px)); padding:var(--space-1); border:1px solid transparent; border-radius:var(--radius-card); background:var(--popover); color:var(--popover-foreground); box-shadow:var(--shadow-lg); }
.menu-item { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--control-h-md); padding:0 var(--menu-px,10px); border:0; border-radius:calc(var(--radius-card) - var(--space-1)); background:transparent; color:var(--foreground); font:inherit; text-align:start; text-decoration:none; cursor:pointer; }
.menu-item[data-highlighted],.menu-item:hover:not([data-disabled]) { background:var(--surface-3); }
/* Foco de TECLADO no item: a linha de foco, por dentro, porque a lista recorta o que passa da borda
   (B-09 e a ordem de 25/09/2026, "a referência sempre primeiro": o item de menu dela
   leva a linha de foco no foco de teclado). Até aqui a regra de cima apagava a linha com
   `outline:none` e vencia a global: com o teclado, o item em foco era só o fundo cinza — igual ao
   do mouse em cima. O mouse continua só com o fundo: `:focus-visible` não acende por ponteiro.
   ⚠ Onde o foco fica no CAMPO (`Combobox`, `CommandPalette`: o item é destacado por
   `aria-activedescendant`), o item nunca tem `:focus-visible`, e o destaque continua sendo o fundo. */
.menu-item:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }
.menu-item[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
/* CommandPalette (M6): a lista dentro da paleta. Reusa `.menu` e `.menu-item` — a paleta nao
   inventa uma segunda pele de lista, que e o defeito que a `.table-region` cobrou caro. O que se
   acrescenta e o teto de altura (a lista rola, a caixa nao cresce sem fim) e a linha do item,
   que tem icone, rotulo que se estica e atalho no fim.
   DEPOIS do `.menu-item` de proposito: as duas regras tem a MESMA especificidade, entao quem vem
   por ultimo vence. Escrita antes, a grade de tres colunas era apagada pelo `display:flex` do
   menu — medido em 13/08/2026, e o gate de pele foi quem pegou. */
.command-list { max-height:min(50vh,360px); overflow-y:auto; overscroll-behavior:contain; }
/* 0.32.0 — a lista mora DENTRO da caixa da paleta (o `inline` do motor), e não num popup: o `.menu`
   aqui não flutua — sem borda, sem sombra, sem largura própria; a caixa é a da paleta. */
.command-palette .command-list { position:static; z-index:auto; min-width:0; max-width:none; border:0; box-shadow:none; padding:0; background:transparent; }
/* O título do grupo (DOC-06) = o `Header` da seção da lista da referência: 12, peso médio,
   esmaecido, sem maiúsculas; 6 em cima e 4 embaixo; alinhado ao texto do item (`--menu-px`). */
.command-group + .command-group { margin-block-start:var(--space-1); }
.command-group-label { padding:calc(var(--space-1) + var(--space-05)) var(--menu-px, var(--space-3)) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-medium); }
/* A linha de atalhos (DOC-07): a tecla da referência (o `Kbd`) com o que ela faz, 12 esmaecido,
   separada da lista por um fio. */
.command-shortcuts { display:flex; flex-wrap:wrap; gap:var(--space-4); margin:0; padding:var(--space-2) var(--space-1) 0; border-top:var(--border-width) solid transparent; color:var(--muted-foreground); font-size:var(--text-xs); }
.command-shortcuts > span { display:inline-flex; align-items:center; gap:var(--space-1); }
.command-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-3); align-items:center; }
.command-item-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.menu-sep { height:1px; margin:6px 4px; background:var(--border); border:0; }
/* G-API-02 — a anatomia que o menu ganhou quando o dado deixou de ter uma forma só.
   Nada aqui inventa linguagem visual: a marca reusa a caixa do `.menu-item`, o rótulo de grupo
   reusa a escala de texto e o ponto do rádio é a MESMA forma do `.control-mark` do `Radio` —
   círculo desenhado, não glifo. Duas linguagens para a mesma marca seria o defeito. */
/* A LARGURA É FIXA E INCONDICIONAL. Sem o slot, um menu com um item marcado e outro não
   desalinharia os rótulos a cada clique — o texto andaria para o lado sozinho. É a mesma razão
   de o `leadingIcon` ter lugar próprio. */
/* A largura é a do GLIFO que mora dentro (`--icon-sm`, o mesmo do `<Icon size="sm">`), e não um
   px cru: assim o slot acompanha a escala de glifo do sistema em vez de fixar um número. */
.menu-mark { flex:none; display:inline-flex; align-items:center; justify-content:center; inline-size:var(--icon-sm); block-size:var(--icon-sm); color:var(--primary); }
/* METADE do slot: a marca é proporcional, e PAR (8 em 16), então fica no centro em qualquer zoom — o ponto do `Radio`
   precisou de escala porque o dele era ímpar (17/10/2026). */
.menu-ponto { inline-size:calc(var(--icon-sm) / 2); block-size:calc(var(--icon-sm) / 2); border-radius:50%; background:currentColor; }
/* O rótulo de grupo NÃO é item: não é focável, não é clicável, e a pele não pode sugerir que é. */
.menu-label { padding:var(--space-2) var(--menu-px) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
/* A seta do submenu vai para o FIM da linha, e `margin-inline-start:auto` é o que respeita RTL —
   `margin-left` prenderia a seta à esquerda em árabe. */
.menu-seta { flex:none; margin-inline-start:auto; color:var(--muted-foreground); }
.menu-item[data-popup-open] { background:var(--surface-3); }
/* MENUBAR. A fila em si não tem caixa — quem tem é o Topbar ou a janela em volta. Cada gatilho é
   um botão textual em pill, o mesmo `.btn-ghost` do resto do sistema, e o estado aberto usa o
   mesmo par de tokens do segmento aceso e do toggle pressionado: um só idioma para "ligado". */
.menubar { display:flex; align-items:center; gap:var(--space-05); }
/* Barra de menu VERTICAL. `align-items:stretch` para os gatilhos medirem igual — uma coluna
   de rótulos de larguras diferentes sai serrilhada, o mesmo defeito do `.btn-group-vertical`.
   E `justify-content:flex-start` no gatilho porque `inline-flex` centrado deixaria cada
   rótulo num ponto diferente da linha. */
/* `inline-size:max-content` é o que faz o `stretch` significar 'todos do tamanho do MAIOR
   rótulo' em vez de 'todos do tamanho da viewport'. Medido no navegador em 22/08/2026: sem
   isto os gatilhos saíam com 1216px, porque `.menubar` é flex de nível de bloco e ocupa o
   pai inteiro — invisível na horizontal, gritante na vertical. */
.menubar[data-orientation="vertical"] { flex-direction:column; align-items:stretch; inline-size:max-content; }
.menubar[data-orientation="vertical"] .menubar-trigger { justify-content:flex-start; }
.menubar-trigger { display:inline-flex; align-items:center; min-block-size:var(--control-h-sm); padding-inline:var(--space-3); border:0; border-radius:var(--radius-control); background:transparent; color:var(--foreground); font:inherit; font-size:var(--text-sm); font-weight:var(--weight-medium); white-space:nowrap; cursor:pointer; }
.menubar-trigger:hover { background:var(--surface-hover); }
.menubar-trigger[data-popup-open] { background:var(--secondary); color:var(--primary); }
.menubar-trigger:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); }
/* Combobox: reaproveita .menu/.menu-item; só dimensionamento e a coluna do check são próprios.
   --anchor-width e --available-height vêm do positioner do Base UI. */
.combobox-group { position:relative; display:flex; align-items:center; }
.combobox-group .input { padding-inline-end:calc(var(--control-h-sm) * 2 + 10px); }
/* No lg os dois botões da direita sobem para md, então o reservado sobe junto (G-FORM-01). */
.combobox-group .input-lg { padding-inline-end:calc(var(--control-h-md) * 2 + var(--space-3)); }
.combobox-actions { position:absolute; inset-inline-end:5px; display:flex; align-items:center; gap:2px; }
/* O gatilho do `Select` é um <button> vestido da pele `.select`: a cápsula, a seta e o degrau de
   tamanho são os de sempre. O que o botão traz do navegador e o <select> não tinha é o texto
   centralizado; e o valor longo termina em "…" em vez de passar por baixo da seta. */
.select-trigger { display:flex; align-items:center; text-align:start; cursor:pointer; }
.select-trigger:disabled,.select-trigger[data-disabled] { cursor:not-allowed; }
/* O GATILHO DO `DatePicker` (0.32.0, ADR-0068) é o campo do `Select`, com o calendário no lugar da seta:
   sem a seta desenhada no fundo, o recheio do fim volta ao do lado de dentro, e o ícone vai no fim. */
/* A seta sai com `.select.date-picker-trigger` (força 0,2,0), e não só `.date-picker-trigger`: a regra do tema claro
   do `.select` (`[data-theme="light"] .select:where(…)`, mais acima) também tem 0,2,0 e repintava a seta por cima do
   calendário — visto pelo Victor em 13/10/2026. Empate de força: vale a que vem depois, que é esta. */
.date-picker-trigger { gap:var(--space-2); padding-inline-end:var(--step-field-px,var(--space-3)); }
.select.date-picker-trigger { background-image:none; }
.date-picker-trigger > .icon { flex:none; color:var(--muted-foreground); }
/* A janela abraça o calendário (o `.popover` tem um piso de largura para texto, e aqui não há texto). E é UMA
   superfície só, como na referência: a janela tem o fundo, a sombra e o canto, com recheio 12 (o `p-3` dela); o
   calendário de dentro perde a moldura própria — antes saía caixa dentro de caixa (visto em 13/10/2026). */
.date-picker-popover { min-width:0; padding:var(--space-3); }
.date-picker-popover > .calendar { padding:0; border:0; border-radius:0; background:transparent; }
.select-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-value[data-placeholder] { color:var(--muted-foreground); }
.combobox-popup { inline-size:var(--anchor-width); min-inline-size:0; max-inline-size:none; max-block-size:min(320px,var(--available-height)); overflow-y:auto; overscroll-behavior:contain; }
.combobox-empty { padding:12px 10px; color:var(--muted-foreground); font-size:var(--text-sm); }
.combobox-empty:empty { display:none; }
.combobox-item { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; align-items:center; }
.combobox-check { display:inline-flex; color:var(--primary); }
/* A-01: o texto vai SEMPRE para a segunda coluna, mesmo em HTML escrito à mão sem o invólucro do
   check — é quem monta a lista sem o React que ficaria de novo com o rótulo na coluna de 16px. */
.combobox-item > :last-child { grid-column:2; }
/* MultiCombobox (Fase 4) — chips de multi-seleção + grupos. Espaçamento novo tokenizado. */
.combobox-multi { display:flex; align-items:center; gap:var(--space-2); width:100%; min-width:0; min-height:var(--control-h-md); padding:var(--space-1) var(--space-2); background:var(--field-bg); border:1px solid transparent; border-radius:var(--radius-control); transition:border-color var(--duration-fast); }
.combobox-multi:hover { border-color:transparent; }
.combobox-multi:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:transparent; }
.combobox-multi>.combobox-actions { position:static; inset-inline-end:auto; }
/* o campo de chips não é `.input`, então a regra de :disabled dos campos não o alcança. Quem
   marca aqui é o `data-disabled` que o Base UI põe no InputGroup a partir do estado da Root. */
.combobox-multi[data-disabled] { opacity:var(--opacity-disabled); cursor:not-allowed; }
.combobox-multi[data-disabled] .combobox-chip-input { cursor:not-allowed; }
.combobox-chips { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:var(--space-2); min-width:0; }
.combobox-chip { display:inline-flex; align-items:center; gap:var(--space-1); padding-block:var(--space-1); padding-inline:var(--space-3) var(--space-1); background:var(--secondary); color:var(--foreground); border-radius:var(--radius-control); font-size:var(--text-sm); }
.combobox-chip-remove { display:inline-flex; padding:0; border:0; background:transparent; color:var(--muted-foreground); border-radius:var(--radius-full); cursor:pointer; }
.combobox-chip-remove:hover { color:var(--foreground); }
.combobox-chip-input { flex:1; min-width:6ch; height:var(--control-h-sm); border:0; background:transparent; padding:0 var(--space-1); color:var(--foreground); }
.combobox-chip-input::placeholder { color:var(--subtle-foreground); }
.combobox-chip-input:focus-visible { outline:none; }
.combobox-group-label { padding:var(--space-1) var(--space-2); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); }
/* `.combobox-section` era emitida pelo MultiCombobox desde a Fase 4 e não tinha regra NENHUMA —
   vivia na allowlist `semRegra` do check 18, que é dívida DECLARADA, não permissão. O G-API-02
   trouxe o agrupamento também para o Combobox de seleção única, então a dívida ia dobrar de
   tamanho em vez de ser paga. Paga aqui, com o mesmo respiro entre seções que o `.menu-group`
   usa, pelo mesmo `+`: a primeira seção encosta no topo do popup como qualquer item, e a folga
   só existe ENTRE seções — margem no bloco deixaria sobra solta no fim da lista. */
/* E a linha entre elas (15/10/2026), a mesma da `ListBox`: 4, a linha, 4 — o `Select` com grupos e os dois `Combobox`. */
.combobox-section + .combobox-section { margin-block-start:var(--space-1); }
.combobox-section + .combobox-section::before { content:""; display:block; border-block-start:var(--border-width) solid transparent; margin:0 var(--space-2) var(--space-1); }
/* FileInput / DropZone (Fase 4) — só a UI de entrada; upload real é a Fase 5.
   A zona é um <label> em volta do <input> nativo: clique/foco/teclado de graça,
   o arrastar-soltar é reforço. Espaçamento novo tokenizado; superfície = card. */
.dropzone { display:flex; flex-direction:column; align-items:center; gap:var(--space-2); padding:var(--space-8) var(--space-6); text-align:center; color:var(--muted-foreground); background:var(--surface-inset); border:1px dashed transparent; border-radius:var(--radius-card); cursor:pointer; transition:border-color var(--duration-fast),background-color var(--duration-fast); }
.dropzone:hover { border-color:transparent; }
.dropzone:focus-within { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:transparent; }
.dropzone[data-dragging="true"] { border-style:solid; border-color:transparent; background:var(--surface-2); }
.dropzone strong { color:var(--foreground); }
.dropzone-icon { color:var(--primary); }
.dropzone-hint { font-size:var(--text-xs); }
.file-list { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); padding:0; list-style:none; }
.file-item { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); background:var(--surface-2); border:1px solid transparent; border-radius:var(--radius-md); }
.file-progress { flex-basis:var(--space-20); flex-shrink:0; } /* largura fixa da barra de upload (auditoria 18/07, M14) */
.file-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-size { flex:none; color:var(--muted-foreground); font-size:var(--text-xs); font-variant-numeric:tabular-nums; }

/* ═══ INVÁLIDO — um vocabulário só, para a FAMÍLIA inteira, e num lugar só. ═══════════════════

   `invalid` é estado de CAMPO, não de `.input`. Até 28/08/2026 ele existia em três controles de
   texto e em mais nenhum: um checkbox obrigatório reprovado — "aceite os termos", o caso de
   validação mais comum que existe num formulário — não tinha estado visual nenhum. Um vocabulário
   que vale para três dos oito controles não é vocabulário, é exceção (§131).

   QUEM PINTA é a superfície que TEM a borda, e ela nem sempre é quem carrega o atributo. A
   família saiu de um comando, não de memória — `grep -n "var(--field-bg)" aurea.css` mais o
   `--surface-inset` do dropzone dão as seis superfícies de campo do sistema, e o gate as confirmou
   varrendo as 328 páginas:

     o próprio controle   `.input` `.textarea` `.select`   ele tem a borda
     o IRMÃO              `.control-mark` `.switch-track`  o <input> é `opacity:0`; quem desenha é o irmão
     o ANCESTRAL          `.input-group` `.combobox-multi` `.dropzone`
                                                          o filho abre mão da moldura (`border:0`),
                                                          então pintar o filho não pinta nada

   DOIS CAMINHOS, e são dois de propósito:
   1. `aria-invalid` é o caminho da APLICAÇÃO: ela validou (esquema, servidor) e decide quando
      marcar.
   2. `:user-invalid` é o caminho da PLATAFORMA, e resolve de graça o problema que toda biblioteca
      resolve com um estado `touched` em JavaScript: `required`, `type="email"` e `pattern` só
      pintam DEPOIS que a pessoa mexeu no campo e saiu dele. Um `:invalid` cru pintaria o
      formulário inteiro de vermelho antes do primeiro caractere.
      Suporte medido em 21/08/2026 pelos dados do MDN: Chrome 119, Firefox 88, Safari 16.5 — o
      mais novo tem quase três anos. Antes disso o campo simplesmente não pinta, que é o
      comportamento de hoje.
   Não há regra para `:user-valid`: pintar o campo de verde é decisão visual nova, e o §96 da
   ATIVIDADE-2 manda essas subirem para o Victor em vez de eu inventar uma cor de sucesso.

   E O BLOCO É ÚNICO E FICA AQUI porque o inválido tem de ser a ÚLTIMA palavra sobre a borda de um
   campo. Espalhado, ele perdia empates de ordem sem avisar: escrito junto do `.input`, a regra do
   checkbox perdia para `input:checked + .control-mark`, que mora 200 linhas abaixo com a MESMA
   especificidade — o seletor casava, a cor não mudava, e um checkbox marcado e inválido continuava
   amarelo. Movido para junto do checkbox, o switch repetiu o defeito contra a `:checked` DELE, 20
   linhas adiante. Duas vezes o mesmo empate, dois lugares diferentes: o problema não era a linha,
   era estar espalhado. Aqui embaixo, depois da última regra que pinta borda de campo em todo o
   arquivo (`.dropzone[data-dragging]`), não há empate a perder — e quem acrescentar uma superfície
   de campo nova acrescenta uma linha AQUI, num lugar que já tem a resposta.

   O que garante isso não é este comentário: é `tests/visual/invalido.spec.ts`, que injeta o
   atributo no controle REAL de todas as páginas construídas e mede se a aparência muda — inclusive
   nos dois estados dos marcáveis, porque o empate só aparecia no estado marcado. */
.input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"],
.input:user-invalid,.textarea:user-invalid,.select:user-invalid,
.checkbox input[aria-invalid="true"] + .control-mark,
.radio input[aria-invalid="true"] + .control-mark,
.checkbox input:user-invalid + .control-mark,
.radio input:user-invalid + .control-mark,
.switch input[aria-invalid="true"] + .switch-track,
.switch input:user-invalid + .switch-track,
.input-group:has(>[aria-invalid="true"]),
.input-group:has(>:user-invalid),
.combobox-multi:has([aria-invalid="true"]),
.combobox-multi:has(:user-invalid),
.dropzone:has([aria-invalid="true"]),
.dropzone:has(:user-invalid) { border-color:transparent; background-color:var(--danger-bg); --focus-strong:var(--danger-400); }
/* ↑ Sem linha (16/10/2026, o Victor: "quero tudo sem borda sem exceções"): o inválido era a borda vermelha; sem
   borda, ele é o FUNDO de perigo (`--danger-bg`), o mesmo dos avisos. A frase de erro do `Field` continua embaixo.
   `--focus-strong` (ADR-0059, 08/10/2026): o anel de foco agora COLA na borda e a pinta — com o
   amarelo, o campo inválido perdia o vermelho justo enquanto a pessoa corrige. No inválido o anel é
   da cor do perigo, como o campo inválido da referência principal. Cor por contexto se faz assim,
   redefinindo `--focus-strong` (check 44). */


/* TreeView (Fase 4) — árvore headless própria (Base UI 1.6 não tem tree).
   role=tree/treeitem/group + roving tabindex vêm do React; aqui só a pele.
   A indentação por nível é padding-inline-start inline (style). Espaço novo
   tokenizado. A linha é CÁPSULA (`--radius-control`): o escolhido e o realce de passar o mouse
   são cápsula, como os campos, as abas e os botões de texto — regra do Victor, dita olhando a
   bancada do Lote H em 04/10/2026. Antes era `--radius-sm` (8). O texto do nó é uma linha só
   (`.tree-label` não quebra), então a cápsula não deforma. */
.tree, .tree-group { margin:0; padding:0; list-style:none; }
.tree-item { outline:none; }
.tree-node { display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; column-gap:0; min-height:var(--control-h-md); padding-block:var(--space-1); padding-inline-end:var(--space-3); border-radius:var(--radius-control); color:var(--foreground); cursor:pointer; user-select:none; }
.tree-node:hover { background:var(--surface-3); }
.tree-item:focus-visible > .tree-node { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }
.tree-node[data-selected] { background:color-mix(in srgb,var(--primary) 14%,transparent); }
/* A seta gira pela propriedade `rotate`, e não por `transform`: assim a rodinha que ocupa o lugar
   dela enquanto o nó carrega (AN-06) continua girando pela animação dela, que é `transform`.
   Na escrita da direita para a esquerda a seta fechada aponta para a esquerda. Quem diz a direção é
   o React, pela direção do provedor (`.tree-twist-rtl`), e não `:dir(rtl)` — o empacotador do app
   reescreve `:dir()` como lista de idiomas e a regra deixa de pegar (medido no Vite, 03/10/2026). */
.tree-twist { flex:none; color:var(--muted-foreground); transition:rotate var(--duration-fast); }
.tree-twist-rtl { rotate:180deg; }
.tree-item[aria-expanded="true"] > .tree-node > .tree-twist { rotate:90deg; }
.tree-indent { flex:none; width:1rem; }
/* MNT-23 (12/10/2026): a árvore ALARGAVA A PÁGINA. O rótulo não quebra linha, e numa linha `flex` a
   largura mínima da árvore era o rótulo inteiro: numa coluna `1fr` de grade, num filho `flex: 1` ou num
   div dentro deles, ela empurrava a caixa (medido: 360 → 820). A linha é uma GRADE, e a trilha do
   rótulo é `minmax(0,1fr)`: ela pede zero de largura mínima e, quando há espaço (um painel que se
   ajusta ao conteúdo), mostra o rótulo inteiro — largura 0 no rótulo resolveria só a primeira metade.
   As três colunas: a seta (ou o recuo, ou a rodinha), o ícone do nó e o rótulo. O vão vira margem do
   ícone e do rótulo: sem ícone, a coluna dele fica vazia e não sobra vão dobrado. Quem cobra:
   `tests/visual/rede3.spec.ts`. */
.tree-node > .tree-twist, .tree-node > .tree-indent { grid-column:1; }
.tree-node > .icon:not(.tree-twist) { grid-column:2; margin-inline-start:var(--space-2); }
.tree-label { grid-column:3; margin-inline-start:var(--space-2); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* NotificationCenter (Fase 4) — compõe o .popover; aqui só o gatilho com count,
   o cabeçalho e as linhas do feed. Espaço novo tokenizado; a linha usa radius-sm
   (não é pill, como o .menu-item; o .tree-node virou cápsula em 04/10/2026). O painel NÃO é live region — a
   chegada é anunciada por um role=status à parte no React. */
.notification-trigger { position:relative; display:inline-flex; }
.notification-count { position:absolute; inset-block-start:-4px; inset-inline-end:-4px; display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 var(--space-1); border-radius:var(--radius-control); background:var(--primary); color:var(--primary-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:var(--leading-none); pointer-events:none; }
.notification-panel { width:min(360px,calc(100vw - 32px)); max-width:none; padding:0; gap:0; display:flex; flex-direction:column; overflow:hidden; }
.notification-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-block-end:1px solid transparent; }
.notification-head strong { font-size:var(--text-sm); }
.notification-list { margin:0; padding:var(--space-1); overflow-y:auto; max-height:min(60vh,440px); }
.notification-sublist { margin:0; padding:0; list-style:none; }
.notification-group-label { margin:0; padding:var(--space-2) var(--space-3) var(--space-1); color:var(--muted-foreground); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; }
.notification-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; column-gap:var(--space-3); row-gap:var(--space-1); width:100%; padding:var(--space-3); border:0; border-radius:var(--radius-sm); background:none; color:var(--foreground); font:inherit; text-align:start; }
button.notification-item { cursor:pointer; }
button.notification-item:hover { background:var(--surface-3); }
.notification-item:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }
.notification-dot { grid-row:1/-1; align-self:center; width:8px; height:8px; border-radius:50%; background:var(--primary); }
.notification-item[data-read] .notification-dot { visibility:hidden; }
.notification-item-title { grid-column:2; display:flex; align-items:center; gap:var(--space-2); min-width:0; font-size:var(--text-sm); font-weight:var(--weight-medium); }
.notification-item[data-read] .notification-item-title { color:var(--muted-foreground); font-weight:var(--weight-regular); }
.notification-item-desc { grid-column:2; color:var(--muted-foreground); font-size:var(--text-xs); }
.notification-time { grid-column:3; grid-row:1; color:var(--muted-foreground); font-size:var(--text-xs); white-space:nowrap; }
.notification-empty { margin:0; padding:var(--space-8) var(--space-4); color:var(--muted-foreground); font-size:var(--text-sm); text-align:center; }
/* EmptyState é o membro GRANDE da família "aqui não há nada" — .notification-empty acima e
   .datagrid-empty abaixo já respondiam a mesma pergunta do mesmo jeito (centralizado, muted),
   e o componente público era o único dos três sem regra (achado A13). A ordem das partes
   (imagem → título → corpo → ação) é a do padrão de empty state de uma das referências, registrado em
   REFERENCES.md; a pele é Aurea. O título vinha com o h3 do NAVEGADOR (16,38px). */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-10) var(--space-6); color:var(--muted-foreground); text-align:center; }
.empty-state > .icon { color:var(--subtle-foreground); }
.empty-state p { max-width:46ch; margin:0; }
.empty-title { margin:0; color:var(--foreground); font-size:var(--text-base); font-weight:var(--weight-semibold); line-height:var(--leading-tight); }

/* DataGrid (Fase 4) — TanStack Table v8 headless; aqui só a pele, que reusa
   .table-wrap/table/th/td. aria-sort fica só no th ordenado; a linha
   selecionada usa data-selected (o estado acessível é o checkbox da linha).
   Espaço novo tokenizado. */
.datagrid { display:grid; gap:var(--space-3); }
.datagrid > .table-wrap:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); box-shadow:none; }
.datagrid > .pagination { justify-self:end; }
/* Fix aditivo: os 34px dos botões numéricos do .pagination esmagavam os botões
   de TEXTO (Anterior/Próxima) do Pagination React. Não muda os numéricos. */
/* text-transform/letter-spacing: o UA reseta nos <button>; herdar explícito
   para o cabeçalho ordenável ficar idêntico ao th estático. */
.datagrid-sort { display:inline-flex; align-items:center; gap:var(--space-1); padding:0; border:0; background:none; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
.datagrid-sort:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:var(--focus-offset); border-radius:var(--radius-sm); }
.datagrid-sort-icon { flex:none; color:var(--subtle-foreground); }
th[aria-sort] .datagrid-sort-icon { color:var(--primary); }
.datagrid-selcol { width:1%; white-space:nowrap; }

/* F3: a linha de filtro é do PRÓPRIO cabeçalho, então herda o recuo lateral das
   células e nasce alinhada com a coluna — ninguém escreve alinhamento aqui.
   As três declarações abaixo foram provadas UMA A UMA no navegador, tirando cada
   uma e medindo de novo: sem `text-transform` o campo digita em MAIÚSCULAS; sem
   `vertical-align` os dois controles (36px e 40px) começam em linhas diferentes;
   sem `gap:0` o rótulo só-para-leitor-de-tela cobra 7px de vão.
   Três outras foram escritas e MORRERAM na mesma prova, por não mudarem nada:
   `height:auto` (o conteúdo já passa de --row-h, e altura em célula é mínimo),
   `letter-spacing:normal` (o .input não herda o entreletras do cabeçalho) e
   `line-height:0` no rótulo (o <label> vazio já não ocupa altura). */
.table-wrap thead tr.datagrid-filters th { block-size:auto; padding-block:var(--space-2); vertical-align:top; }
.table-wrap thead tr.datagrid-filters th::after { content:none; }
.datagrid-filters .field { gap:0; }

/* F6: cabeçalho fixo. A `.table-wrap` já é o contêiner de rolagem (overflow:auto),
   e é ELE que ancora o sticky — não a janela. Por isso a altura precisa de teto:
   sem teto a caixa nunca rola por dentro e o cabeçalho nunca teria de grudar.
   `--datagrid-max-h` é a válvula de escape, no mesmo idioma do `--qr-size`: quem
   sabe quanta tela tem é o consumidor, e altura não vira prop numérica (check 23).
   A linha de FILTRO gruda logo abaixo do cabeçalho, e o deslocamento é `--row-h`
   porque é essa a altura da célula de cabeçalho — medido, não deduzido. */
.datagrid-sticky .table-wrap { max-block-size:var(--datagrid-max-h,60vh); }
/* `z-index:1` fica DECLARADO COMO PRECAUÇÃO, não como fato provado: não consegui
   medi-lo (elementFromPoint usa coordenada de janela, e a grade está a 7000px de
   rolagem na página de prova). É prática corrente para cabeçalho fixo — sem ele o
   fundo da linha do corpo pode passar por cima —, e removê-lo por não ter gate
   seria trocar risco real por pureza de método. As outras três regras daqui foram
   provadas. */
.datagrid-sticky thead th { position:sticky; inset-block-start:0; z-index:1; }
.datagrid-sticky .datagrid-filters th { inset-block-start:var(--table-head-h); }

/* F7: a alça de redimensionar. Fina, colada no fim da célula e da altura toda —
   alvo estreito de propósito, porque largo demais rouba o clique do cabeçalho
   ordenável que está ao lado. O `th` precisa de `position:relative` para ancorá-la. */
.datagrid thead th:has(> .datagrid-resizer) { position:relative; }
/* A alça de largura toma o lugar do fio entre as colunas, como na referência. */
.table-wrap thead th:has(> .datagrid-resizer)::after { content:none; }
.datagrid-resizer { position:absolute; inset-block:0; inset-inline-end:0; inline-size:var(--space-1); padding:0; border:0; background:none; cursor:col-resize; touch-action:none; }
.datagrid-resizer:hover, .datagrid-resizer:focus-visible { background:var(--primary); }
.datagrid-resizer:focus-visible { outline:var(--focus-width) solid var(--focus-strong); outline-offset:calc(-1 * var(--focus-width)); }

/* F8: o esqueleto dentro da célula. Sem altura própria ele mede zero — a `.skeleton`
   é uma <div> vazia — e a linha de carregamento sairia rasa demais para parecer uma
   linha. `1em` acompanha a tipografia em vez de fixar pixel. */
.datagrid-skeleton { block-size:1em; }

/* F9: lista e detalhe lado a lado.
   LIMITE DECLARADO: a decisão é por largura de JANELA, não da grade. O `@container`
   seria mais certo — quem sabe se o painel cabe é a grade — e foi tentado: exige
   `container-type:inline-size` num ancestral, e pôr isso na `.datagrid` dá a ela
   contenção de tamanho, o que COLAPSA a grade dentro de um pai que encolhe para
   caber (float, inline-block, item de flex com largura automática). Trocar um
   defeito de layout raro por um defeito de layout comum não vale. Consequência
   honesta: grade estreita dentro de janela larga divide mesmo assim — o escape é
   `--datagrid-detail-w`. */
.datagrid-split { display:grid; gap:var(--space-3); align-items:start; }
@media (min-width:768px) {
  .datagrid-split { grid-template-columns:1fr var(--datagrid-detail-w,20rem); }
}
.datagrid-detail { border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); padding:var(--space-4); }
.datagrid-detail-head { display:flex; justify-content:flex-end; }

/* G2: a ação de conjunto fica à direita, acima da fila — perto do que ela comanda e
   fora do caminho de leitura da lista. */
.file-queue-actions { display:flex; justify-content:flex-end; }

/* G3/G4: a miniatura ocupa o mesmo espaço do ícone que ela substitui — a linha da
   fila não muda de altura por ter prévia. `object-fit:cover` porque foto não é
   quadrada e deformar a prévia mente sobre o arquivo. */
.file-thumb { flex:none; inline-size:var(--space-5); block-size:var(--space-5); border-radius:var(--radius-sm); object-fit:cover; }
.file-checksum { color:var(--muted-foreground); font-family:var(--font-code); font-size:var(--text-xs); }

/* G5/G6: a escolha do conflito e o recibo. Os dois são superfície de card porque são
   blocos de decisão e de registro, não linhas da fila. */
.file-conflict { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--surface-2); }
.file-receipt { padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); }
.file-receipt-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.file-receipt ul { margin:0; padding-inline-start:var(--space-5); color:var(--muted-foreground); font-size:var(--text-sm); }

/* Parte H — a camada operacional. As três primeiras peças são COMPOSIÇÃO: `.card` já
   dá a superfície flutuante, `.status` já dá o estado, `.data-list` já dá o par
   termo/valor. O que falta é só o arranjo — e arranjo é o que não vem de graça. */
.agent-card { display:grid; gap:var(--space-3); }
.agent-card-head { display:flex; align-items:center; gap:var(--space-3); }
.agent-card-id { display:grid; flex:1; min-inline-size:0; }
.agent-card-desc { margin:0; color:var(--muted-foreground); }
.agent-caps { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0; padding:0; list-style:none; }
.agent-cap { display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-1) var(--space-3); border:1px solid transparent; border-radius:var(--radius-control); font-size:var(--text-sm); }
.agent-card-actions { display:flex; justify-content:flex-end; gap:var(--space-2); }
.agent-inspector { display:grid; gap:var(--space-4); }
.agent-inspector-head { display:flex; align-items:center; justify-content:space-between; }
.agent-inspector-section { display:grid; gap:var(--space-2); }
.agent-inspector-label { margin:0; color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; font-weight:var(--weight-bold); }

/* H.b — a execução. O passo dobrável é `<details>` nativo, então a marca de aberto/
   fechado já é do navegador; o que se acrescenta é o arranjo e o traço de estado. */
.invocation { display:grid; gap:var(--space-4); }
.invocation-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.invocation-io { display:grid; gap:var(--space-2); }
.invocation-label { margin:0; color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; font-weight:var(--weight-bold); }
.invocation-steps { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
/* O estado do passo entra por BORDA lateral, não por cor de fundo: fundo colorido
   compete com o texto do passo, e a borda diz o mesmo sem disputar leitura. */
.invocation-step { padding-inline-start:var(--space-3); border-inline-start:2px solid transparent; }
.invocation-step[data-state="running"] { border-inline-start-color:transparent; background:color-mix(in oklab,var(--primary) 8%,transparent); }
.invocation-step[data-state="error"] { border-inline-start-color:transparent; background:var(--danger-bg); }
.invocation-step-body { padding-block-start:var(--space-2); }

.task-queue { display:grid; gap:var(--space-3); margin:0; padding:0; list-style:none; }
.task-item { display:grid; gap:var(--space-2); padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); }
.task-line { display:flex; align-items:center; gap:var(--space-2); }
.task-title { flex:1; min-inline-size:0; font-weight:var(--weight-medium); }
.task-desc { margin:0; color:var(--muted-foreground); font-size:var(--text-sm); }

/* H.c — governança da ação. */
.approval { display:grid; gap:var(--space-3); }
.approval-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.approval-desc, .approval-reason { margin:0; }
.approval-reason { color:var(--muted-foreground); font-size:var(--text-sm); }
/* Negar vem ANTES de aprovar na ordem de leitura e de tabulação: a ação destrutiva
   não deve ser a primeira a receber foco nem a mais fácil de acertar sem ler. */
.approval-actions { display:flex; justify-content:flex-end; gap:var(--space-2); }
.tool-permission-list { display:grid; gap:var(--space-3); margin:0; padding:0; list-style:none; }
.tool-permission-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); }
.tool-permission-id { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2); min-inline-size:0; }
.tool-permission-scope { padding:0 var(--space-1); border-radius:var(--radius-sm); background:var(--surface-2); font-family:var(--font-code); font-size:var(--text-xs); }

/* H.d — a observação. */
.event-stream { display:grid; gap:var(--space-2); }
/* O feed é do GRUPO: `role="feed"` só aceita `article` como filho, então o rótulo do grupo
   mora FORA dele. Ver o comentário do EventStream — a regra é do ARIA, não de estilo. */
.event-group-feed { display:grid; gap:var(--space-2); }
.event-group { margin:var(--space-3) 0 0; color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; font-weight:var(--weight-bold); }
.event-item { display:flex; align-items:baseline; gap:var(--space-3); }
.event-body { display:grid; flex:1; min-inline-size:0; }
/* O ponto do evento é o MESMO tamanho e a mesma escala do ponto do Status: dois
   indicadores de gravidade com tamanhos diferentes na mesma tela leem como coisas
   diferentes, e não são. */
.event-dot { flex:none; inline-size:var(--space-2); block-size:var(--space-2); border-radius:var(--radius-full); background:var(--muted-foreground); }
.event-item[data-severity="success"] .event-dot { background:var(--success-400); }
.event-item[data-severity="warning"] .event-dot { background:var(--warning-400); }
.event-item[data-severity="danger"] .event-dot { background:var(--danger-400); }
.event-time { flex:none; color:var(--muted-foreground); font-family:var(--font-code); font-size:var(--text-xs); }

.trace { display:grid; gap:var(--space-1); margin:0; padding:0; list-style:none; }
/* A profundidade do span entra como RECUO, e por variável: a cascata precisa mostrar
   quem chamou quem, e recuar por nível é o que a referência faz sem precisar desenhar
   linhas de ligação. */
/* O RÓTULO é quem cede, e a barra tem piso. A primeira versão era
   `minmax(6rem,14rem) 1fr`, e num painel estreito o rótulo comia tudo: medido no catálogo em
   09/08/2026, as colunas resolviam `224px 24px` e a cascata inteira desenhava em 24px — barras
   de 24, 5, 6 e **0** pixels. O `1fr` só recebe a sobra, e não havia sobra. Com o mínimo do
   lado da BARRA e o rótulo podendo encolher até zero, quem trunca é o texto, que já tem
   reticência para isso — e o dado, que é a barra, nunca desaparece. */
.trace-span { display:grid; grid-template-columns:minmax(0,14rem) minmax(8rem,1fr); align-items:center; gap:var(--space-3); padding-inline-start:calc(var(--trace-depth,0) * var(--space-3)); }
.trace-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); }
.trace-track { position:relative; block-size:var(--space-3); border-radius:var(--radius-full); background:var(--surface-2); }
.trace-bar { position:absolute; inset-block:0; border-radius:var(--radius-full); background:var(--primary); }
.trace-span[data-error] .trace-bar { background:var(--danger-400); }

.health-matrix { display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); gap:var(--space-3); margin:0; padding:0; list-style:none; }
.health-cell { display:grid; gap:var(--space-1); padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); }
.health-name { font-weight:var(--weight-medium); }

/* H.e — custo e memória.
   O número total é a métrica total da referência, e ele é UMA linha de arranjo: a escala
   tipográfica da Aurea vai só até `--text-base`, e o `text-3xl` de lá é a identidade DELA.
   Aqui o destaque vem do peso e do contraste com o rótulo em `--text-xs`, não de um degrau
   de fonte que a escala não tem. Compartilhado pelo ModelUsage e pelo CostMeter porque é a
   mesma coisa nos dois — duas classes diriam que são duas. */
.metric-total { display:flex; align-items:baseline; gap:var(--space-2); }
.metric-total strong { font-size:var(--text-base); font-weight:var(--weight-bold); font-variant-numeric:tabular-nums; }

.model-usage { display:grid; gap:var(--space-3); }
.model-usage-list { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
/* Mesma regra do `.trace-span`, e pelo mesmo defeito medido no mesmo dia: o mínimo fica do
   lado da BARRA, e o nome do modelo encolhe com reticência. Barra sem piso desaparece antes
   do texto, e é ela que carrega o dado. */
.model-usage-row { display:grid; grid-template-columns:minmax(0,12rem) minmax(8rem,1fr) auto; align-items:center; gap:var(--space-3); }
.model-usage-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); }
/* A trilha mede o MESMO que a do rastro: são os dois um `meter`, e dois medidores de
   alturas diferentes na mesma aplicação leem como coisas diferentes — não são. */
.model-usage-track { position:relative; block-size:var(--space-3); border-radius:var(--radius-full); background:var(--surface-2); }
.model-usage-bar { position:absolute; inset-block:0; inset-inline-start:0; border-radius:var(--radius-full); background:var(--primary); }
.model-usage-value { font-size:var(--text-sm); font-variant-numeric:tabular-nums; }

.cost-meter { display:grid; gap:var(--space-3); }
.cost-meter-track { position:relative; block-size:var(--space-3); border-radius:var(--radius-full); background:var(--surface-2); }
.cost-meter-bar { position:absolute; inset-block:0; inset-inline-start:0; border-radius:var(--radius-full); background:var(--primary); }
/* Estourar o teto muda a BARRA, e não o fundo do cartão: fundo colorido num cartão inteiro
   é o que a Aurea não faz, e a barra é justamente a peça que fala de quantidade.
   O limite BRANDO não tem cor, e isso foi MEDIDO, não escolhido por gosto: no tema escuro
   `--warning-400` É `var(--brand-yellow)`, o mesmo valor de `--primary`. Uma barra "de
   aviso" ali sairia idêntica à barra normal — degrau invisível justo em metade dos temas.
   O aviso do limite brando sai por PALAVRA, no Alert, que é o mesmo critério dos cinco
   estados do HealthMatrix. A cor fica para o limite rígido, onde o vermelho separa nos dois. */
.cost-meter[data-state="over"] .cost-meter-bar { background:var(--danger-400); }

.memory-ledger { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
.memory-entry { display:grid; gap:var(--space-1); padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); }
.memory-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2); }
.memory-content { flex:1; min-inline-size:0; }
.memory-time { flex:none; color:var(--muted-foreground); font-family:var(--font-code); font-size:var(--text-xs); }
/* Esquecida continua NA LISTA, riscada: o livro-razão registra o lançamento, não o estado
   final. Sumir com a linha apaga exatamente o que se procura quando o agente para de
   saber uma coisa. O risco não é a única marca — o selo ao lado diz "Forgotten" em palavra. */
.memory-entry[data-operation="forgotten"] .memory-content { color:var(--muted-foreground); text-decoration:line-through; }
.memory-provenance { font-size:var(--text-sm); }
.memory-provenance summary { color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; cursor:pointer; }
.memory-source { margin:var(--space-2) 0 0; color:var(--muted-foreground); font-size:var(--text-sm); }

/* H.f — a relação. */
.agent-messages { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
.agent-message { display:grid; gap:var(--space-1); padding:var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); }
/* O recado que FALHOU muda a borda, não o fundo: é o mesmo tratamento do passo do
   `InvocationPanel`, e pelo mesmo motivo — fundo colorido disputa leitura com o texto. */
.agent-message[data-kind="error"] { border-color:transparent; background:var(--danger-bg); }
.agent-message-line { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.agent-message-route { display:inline-flex; align-items:center; gap:var(--space-1); flex:1; min-inline-size:0; }
.agent-message-arrow { flex:none; color:var(--muted-foreground); }
.agent-message-time { flex:none; color:var(--muted-foreground); font-family:var(--font-code); font-size:var(--text-xs); }
.agent-message-body { margin:0; }
.agent-message-why { font-size:var(--text-sm); }
.agent-message-why summary { color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; font-weight:var(--weight-bold); cursor:pointer; }
.agent-message-reason { margin:var(--space-2) 0 0; color:var(--muted-foreground); font-size:var(--text-sm); }

.automation { display:grid; gap:var(--space-3); }
.automation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.automation-id { display:grid; flex:1; min-inline-size:0; }
/* Regra DESLIGADA não some e não muda de cor — ela recua. O interruptor ao lado já diz o
   estado em palavra e em teclado; apagar o cartão esconderia justamente a regra que alguém
   precisa achar para religar. */
.automation:not([data-enabled]) .automation-id { color:var(--muted-foreground); }
.automation-foot { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }

/* H14 — o grafo. A pele do MOTOR entra por variável, e nenhuma classe dele aparece aqui:
   o `@xyflow/react` publica tudo como `var(--xy-algo, --xy-algo-default)`, e sobrescrever a
   variável na nossa raiz vale para toda a árvore dele (propriedade customizada herda). Escrever
   `.react-flow__*` no core resolveria igual e criaria uma classe que componente nenhum daqui
   produz — o check 15 existe exatamente para barrar isso. O consumidor importa o `base.css`
   do motor (estrutura); o `style.css` dele, que é a identidade deles, nunca entra. */
/* `inline-size:100%` não é enfeite, é a mesma lição do Chart: painel de demo é flex, e uma
   caixa de largura automática entra como item que encolhe — medido no catálogo, a tela do grafo
   deu 71px e os nós saíram todos para fora dela. A tela ocupa o que lhe derem. */
.dependency-graph { inline-size:100%; block-size:28rem; border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); overflow:hidden;
  --xy-background-color:transparent;
  --xy-background-pattern-color:var(--border);
  --xy-edge-stroke:var(--muted-foreground);
  --xy-edge-stroke-selected:var(--primary);
  --xy-edge-label-color:var(--muted-foreground);
  --xy-edge-label-background-color:var(--card);
  --xy-connectionline-stroke:var(--primary);
  --xy-attribution-background-color:transparent;
  /* O minimapa (ADR-0064) se veste pelas variáveis dele, como o resto do motor. */
  --xy-minimap-background-color:var(--card);
  --xy-minimap-mask-background-color:color-mix(in oklab,var(--background) 70%,transparent);
  --xy-minimap-mask-stroke-color:var(--border-strong);
  --xy-minimap-node-background-color:var(--muted-foreground);
  --xy-minimap-node-stroke-color:transparent;
  /* A espessura de base da linha: a do sistema (1). O alto contraste dobra a base, e os pesos e
     traços são múltiplos dela — por isso nada aqui é número solto. */
  --graph-edge-base:var(--border-width);
  /* (Rodada 2) O rótulo de HTML fica ACIMA das linhas e dos contêineres: o motor eleva a linha de quem
     está dentro de um contêiner ao andar do nó (1, 2…), e a caixa do contêiner é um nó — sem isto, o
     "10G" saía por baixo da fibra e o nome da porta, por baixo do site (medido na bancada). 1000 é o
     degrau que o próprio motor usa para elevar o escolhido; o rótulo que encosta num nó some (MNT-12.5). */
  --graph-label-z:1000; }
/* A atribuição do motor (que a licença dele manda manter, e mantemos) traz `color:#999`
   CRAVADO no `init.css` — o único ponto em que a folha "estrutural" carrega cor. Reprovou
   contraste no axe, tema claro. A regra é de ELEMENTO e vem ESCOPADA à nossa classe, que é a
   lição que o `table { min-width:720px }` do Lote 4 deixou: regra de elemento no core não tem
   gate, então escreva-a presa a alguma coisa nossa ou ela é global.
   E leva `[href]` para GANHAR de `.react-flow__attribution a`, que tem a MESMA especificidade
   e vem depois na folha do consumidor. Subir por atributo evita citar a classe deles aqui —
   classe de terceiro no nosso core é o que o check 15 barra, e com razão. */
.dependency-graph a[href] { color:var(--muted-foreground); }
/* O nó é uma superfície flutuante como qualquer outra da Aurea — mesmo raio de cartão, mesma
   borda, mesmo fundo. É aqui que ele deixa de parecer React Flow. */
.graph-node { position:relative; inline-size:var(--graph-node-w,180px); }
.graph-node-body { display:grid; gap:var(--space-05); inline-size:100%; padding:var(--space-2) var(--space-3); border:1px solid transparent; border-radius:var(--radius-card); background:var(--card); color:var(--foreground); font-family:inherit; font-size:var(--text-sm); text-align:start; }
button.graph-node-body { cursor:pointer; }
/* O PONTEIRO NOS BOTÕES DO NÓ (lote U, 19/10/2026 — o pedido 16 do app de topologia). Fora do modo de arrumar, o nó vai ao
   motor como não escolhível (`selectable:false`, pela trava `alvo-clicavel`), e o motor tira o ponteiro do invólucro
   (`.react-flow__node`) quando o nó não é escolhível nem arrastável e o app não passa `onNodeClick`/`onNodeMouse*` — os
   botões de dentro herdavam o `none`, e o clique de mouse no corpo não chegava ao `onSelect` (pelo teclado chegava). Os
   botões pegam o ponteiro de volta: o corpo só é botão quando há `onSelect` (sem ele, segue sem ponteiro, como a trava
   pede); o de recolher e o de fechar o contêiner são sempre botões. A regra sai presa ao `.dependency-graph`, e não à
   classe do motor (o check 15 barra classe de terceiro no core): o `pointer-events` herda, e o `auto` no botão vale
   embaixo de qualquer invólucro. */
.dependency-graph :is(button.graph-node-body,.graph-node-toggle,.graph-group-toggle) { pointer-events:auto; }
.graph-node[data-selected] .graph-node-body { border-color:transparent; background:color-mix(in oklab,var(--primary) 14%,var(--card)); }
.graph-node-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--weight-medium); }
/* `kind` é TEXTO, e não cor: a referência pinta dez tipos de nó em dez cores, e é a quarta vez
   que esta parte recusa a mesma coisa. */
.graph-node-kind { color:var(--subtle-foreground); font-size:var(--text-xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; }
.graph-handle { inline-size:var(--space-2); block-size:var(--space-2); border:1px solid transparent; background:var(--surface-2); }
/* ── RODADA 1 DA REDE (ADR-0064, 10/10/2026) ───────────────────────────────────────────────
   O ÍCONE vai ao lado do texto, e o texto continua inteiro (o tipo é PALAVRA — a recusa das cores
   continua de pé). Os SELOS sentam na borda, nos cantos: a quantidade em cima, à direita; o estado
   embaixo, à esquerda — longe um do outro, e fora do nome. */
/* A alça do grafo de LEITURA existe só para o motor medir a borda: invisível e surda ao ponteiro. */
.graph-handle-oculta { visibility:hidden; pointer-events:none; }
.graph-node-text { display:grid; gap:var(--space-05); min-inline-size:0; }
.graph-node-has-icon { grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:var(--space-2); }
.graph-node-icon { color:var(--muted-foreground); }
.graph-node-count { position:absolute; inset-block-start:0; inset-inline-end:0; transform:translate(25%,-50%); }
.graph-node-status { position:absolute; inset-block-end:0; inset-inline-start:var(--space-3); max-inline-size:calc(100% - var(--space-6)); transform:translateY(50%); }
.graph-node-status .badge { max-inline-size:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* "Ir até" (focusId): a marca de achado é a borda da marca com uma linha por dentro, como o
   cartão escolhido — e não o anel de foco, que é do teclado. */
.graph-node[data-focused] .graph-node-body { border-color:transparent; outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; }
/* O resto apaga quando há caminho ou vizinhos acesos (MNT-18.3 e 18.6). */
.graph-node[data-dimmed] { opacity:.3; }
.dependency-graph .is-dimmed { opacity:.25; }
/* AS LINHAS: o desenho diz o que ela é, sem depender de cor (MNT-08 e MNT-15).
   ⚠ A ESPESSURA VAI PELA VARIÁVEL DO MOTOR (`--xy-edge-stroke-width`), e não por `stroke-width`:
   esta folha mora numa camada (`@layer aurea`) e a do motor não — e regra sem camada ganha de regra
   com camada, qualquer que seja a força do seletor. Medido na bancada da rodada 1: a fibra saía com
   1 de espessura em vez de 6. A variável não tem rival na linha, então a nossa vale. O `stroke-width`
   fica para os desenhos que são nossos (a amostra da legenda e o miolo do traço duplo). */
.dependency-graph .graph-edge { --graph-edge-w:calc(var(--graph-edge-base) * var(--graph-edge-scale,1)); --xy-edge-stroke-width:var(--graph-edge-w); stroke-width:var(--graph-edge-w); }
.dependency-graph .graph-edge-thick { --graph-edge-w:calc(var(--graph-edge-base) * 2 * var(--graph-edge-scale,1)); }
.dependency-graph .graph-edge-heavy { --graph-edge-w:calc(var(--graph-edge-base) * 3 * var(--graph-edge-scale,1)); }
/* MNT-26 (12/10/2026): a COR da linha é o ESTADO dela, o `status.tone` da linha, como o selo do nó (pedido
   do dono do app: "senti falta de cores"). A cor é a de LETRA e borda sobre a tela (o par `-400`,
   ADR-0061), e não o fundo cheio. Ela pinta a variável do motor no próprio traço — vence o alto contraste,
   que pinta a do mapa inteiro: a linha de cor continua de cor, e o traço fica grosso como o resto. A
   amostra da parte "Estado" da legenda usa a mesma classe, e a palavra ao lado dela é o que garante que a
   cor não fala sozinha; a amostra do TIPO da ligação não leva cor.
   A linha com cor tem o DOBRO da espessura (ordem do Victor, 13/10/2026: "pode engrossar a linha com cor").
   Medido no "caber na tela" (zoom 0,57): com 1 — e com 1,5 —, nenhum ponto do traço chegava à cor de
   verdade, e a linha verde parecia cinza; com 2, a cor aparece exata. As três espessuras dobram juntas
   (`--graph-edge-scale`), para a velocidade continuar legível entre as linhas com cor; o miolo do duplo
   leva a mesma classe e dobra junto. */
.dependency-graph :is(.graph-edge-tone-info,.graph-edge-tone-success,.graph-edge-tone-warning,.graph-edge-tone-danger) { --graph-edge-scale:2; }
.dependency-graph .graph-edge-tone-info { --xy-edge-stroke:var(--info-400); }
.dependency-graph .graph-edge-tone-success { --xy-edge-stroke:var(--success-400); }
.dependency-graph .graph-edge-tone-warning { --xy-edge-stroke:var(--warning-400); }
.dependency-graph .graph-edge-tone-danger { --xy-edge-stroke:var(--danger-400); }
.dependency-graph .graph-edge-dashed { stroke-dasharray:var(--space-2) var(--space-1); }
.dependency-graph .graph-edge-dotted { --xy-edge-stroke-width:calc(var(--graph-edge-w) * 2); stroke-width:calc(var(--graph-edge-w) * 2); stroke-dasharray:0 calc(var(--graph-edge-w) * 5); stroke-linecap:round; }
.dependency-graph .graph-edge-double { --xy-edge-stroke-width:calc(var(--graph-edge-w) * 3); stroke-width:calc(var(--graph-edge-w) * 3); }
.graph-edge-double-core { --graph-edge-w:calc(var(--graph-edge-base) * var(--graph-edge-scale,1)); fill:none; stroke:var(--xy-edge-label-background-color); stroke-width:var(--graph-edge-w); pointer-events:none; }
.graph-edge-double-core.graph-edge-thick { --graph-edge-w:calc(var(--graph-edge-base) * 2 * var(--graph-edge-scale,1)); }
.graph-edge-double-core.graph-edge-heavy { --graph-edge-w:calc(var(--graph-edge-base) * 3 * var(--graph-edge-scale,1)); }
/* A pastilha do meio (marca, número, grupo) e o nome da porta na ponta são HTML sobre o desenho. */
.graph-edge-chip { position:absolute; z-index:var(--graph-label-z); display:inline-flex; align-items:center; gap:var(--space-1); padding:var(--space-05) var(--space-2); border-radius:var(--radius-control); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:all; }
.graph-edge-end { position:absolute; z-index:var(--graph-label-z); padding:0 var(--space-1); border-radius:var(--radius-xs); background:var(--xy-edge-label-background-color); color:var(--xy-edge-label-color); font-size:var(--graph-edge-label-size,var(--text-xs)); line-height:var(--leading-tight); white-space:nowrap; pointer-events:none; }
/* As guias do arraste (MNT-28, 17/10/2026): onde o nó encaixa no vizinho, como no draw.io — desenho cheio, na espessura
   do foco e na cor dele (a que se vê nos dois temas), por cima das linhas e dos nós e sem receber o ponteiro. A posição e
   o comprimento vêm do mapa, como os da pastilha da linha. */
.graph-guide { position:absolute; z-index:var(--graph-label-z); background:var(--focus-strong); pointer-events:none; }
.graph-guide-x { inline-size:var(--focus-width); margin-inline-start:calc(var(--focus-width) / -2); }
.graph-guide-y { block-size:var(--focus-width); margin-block-start:calc(var(--focus-width) / -2); }
/* `nodrag`/`nopan`: a pastilha é HTML sobre o mapa, e as duas classes dizem ao motor para não arrastar
   nem rolar a tela por ela (o botão do grupo precisa do clique). Fora do botão, o cursor é o comum. */
.graph-edge-chip.nodrag.nopan { cursor:default; }
.graph-edge-count { font-variant-numeric:tabular-nums; font-weight:var(--weight-medium); }
.graph-edge-group { display:inline-flex; align-items:center; min-block-size:var(--space-5); padding:0 var(--space-2); border:var(--border-width) solid transparent; border-radius:var(--radius-control); background:var(--secondary); color:var(--foreground); font:inherit; font-variant-numeric:tabular-nums; font-weight:var(--weight-medium); cursor:pointer; }
.graph-edge-group[aria-expanded="true"] { border-color:transparent; }
.graph-edge-mark { display:inline-grid; place-items:center; color:var(--foreground); }
.graph-edge-mark-cross:before { content:"\2715"; font-weight:var(--weight-bold); }
.graph-edge-mark-dot { inline-size:var(--space-2); block-size:var(--space-2); border-radius:var(--radius-full); background:currentColor; }
/* Os botões de zoom, o minimapa e a legenda flutuam sobre o mapa, com a pele de cartão. */
.graph-controls { display:flex; gap:var(--space-1); padding:var(--space-1); border:var(--border-width) solid transparent; border-radius:var(--radius-control); background:var(--card); }
.graph-minimap { border:var(--border-width) solid transparent; border-radius:var(--radius-md); overflow:hidden; }
.graph-legend { display:grid; gap:var(--space-1); margin:0; padding:var(--space-2) var(--space-3); border:var(--border-width) solid transparent; border-radius:var(--radius-md); background:var(--card); color:var(--foreground); font-size:var(--graph-edge-label-size,var(--text-xs)); }
/* Duas partes (12/10/2026): o tipo da ligação e o estado, cada uma com o título à vista; com uma parte só,
   a lista sozinha, como era. */
.graph-legend ul { display:grid; gap:var(--space-1); margin:0; padding:0; list-style:none; }
.graph-legend-title { margin:0; color:var(--muted-foreground); font-weight:var(--weight-medium); }
.graph-legend-part { display:grid; gap:var(--space-1); }
.graph-legend-part + .graph-legend-part { margin-block-start:var(--space-2); }
/* A DOCA DA LEGENDA (MNT-31, 21/10/2026): o botão que a esconde fica parado no canto, e a lista sobe
   acima dele — abrir e fechar não tira o botão do lugar. */
.graph-dock { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
.graph-legend li { display:flex; align-items:center; gap:var(--space-2); }
.graph-legend-sample { inline-size:var(--space-8); block-size:var(--space-2); overflow:visible; }
.graph-legend-sample .graph-edge,.graph-legend-sample .graph-edge-double-core { fill:none; }
.graph-legend-sample .graph-edge { stroke:var(--xy-edge-stroke); }
/* TEXTO MAIOR, independente do zoom (MNT-19.3): o rótulo do nó vai a `--text-base`, o resto a
   `--text-sm`, e a caixa cresce na mesma razão (a conta mora no graph.tsx). */
.dependency-graph[data-text="lg"] { --graph-edge-label-size:var(--text-sm); }
.dependency-graph[data-text="lg"] .graph-node-body { font-size:var(--text-base); }
.dependency-graph[data-text="lg"] .graph-node-kind,.dependency-graph[data-text="lg"] .graph-node-body .hint { font-size:var(--text-sm); }
/* ALTO CONTRASTE (MNT-19.3): linha e letra no tom da letra, a base da linha dobra, e a borda do nó
   também. Tudo o mais (pesos, pontilhado, duplo) é múltiplo da base e acompanha sozinho. */
.dependency-graph[data-contrast="high"] { --xy-edge-stroke:var(--foreground); --xy-edge-label-color:var(--foreground); --graph-edge-base:calc(var(--border-width) * 2); }
.dependency-graph[data-contrast="high"] .graph-node-body { border-color:transparent; border-width:calc(var(--border-width) * 2); }
.dependency-graph[data-contrast="high"] .graph-node-kind,.dependency-graph[data-contrast="high"] .graph-node-icon { color:var(--foreground); }
/* ── RODADA 2 DA REDE (ADR-0065, 10/10/2026) ───────────────────────────────────────────────
   O LAÇO do modo de arrumar e a caixa em volta dos escolhidos se vestem pelas variáveis do motor. */
.dependency-graph { --xy-selection-background-color:color-mix(in oklab,var(--primary) 10%,transparent); --xy-selection-border:var(--border-width) dashed var(--primary); }
/* No modo de arrumar, quem recebe o foco é a caixa do MOTOR (que não tem classe nossa): o anel vai
   no corpo do nó, com o raio dele, e é UMA linha — a borda vira a cor do foco e o anel encosta nela
   (ADR-0059). A caixa do motor, quadrada, não desenha anel nenhum. */
.dependency-graph :focus-visible:has(> .graph-node) { outline:none; }
.dependency-graph :focus-visible:has(> .graph-group) { outline:none; }
.dependency-graph :focus-visible > .graph-node > .graph-node-body,.dependency-graph :focus-visible > .graph-group { outline:var(--focus-width) solid var(--focus-strong); outline-offset:0; border-color:transparent; }
/* O CONTÊINER aberto (site, andar, rack): a região em volta dos filhos, com a cabeça. A cabeça tem
   `--space-10` e o recheio `--space-4` — os mesmos números com que o graph.tsx monta a caixa. */
/* O fundo é um VÉU leve, e não uma cor cheia: a linha entre dois nós de fora que passa por cima da
   região continua aparecendo (o contêiner é um nó, e o motor o desenha acima das linhas comuns). E o
   véu soma: o andar dentro do site fica um tom acima, e o aninhamento se lê sem cor nova. */
.graph-group { position:relative; inline-size:100%; block-size:100%; border:var(--border-width) solid transparent; border-radius:var(--radius-card); background:color-mix(in oklab,var(--foreground) 3%,transparent); }
.graph-group[data-selected] { border-color:transparent; background:color-mix(in oklab,var(--primary) 10%,transparent); }
.graph-group[data-dimmed] { opacity:.3; }
.graph-group-head { display:flex; align-items:center; gap:var(--space-2); block-size:var(--space-10); padding-inline:var(--space-2) var(--space-3); color:var(--foreground); font-size:var(--text-sm); }
.graph-group-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:var(--weight-medium); }
/* Os dois botões de fechar e abrir têm 24 de lado (`--space-6`): o alvo mínimo de toque (WCAG 2.5.8). */
.graph-group-toggle { display:inline-grid; place-items:center; flex:none; inline-size:var(--space-6); block-size:var(--space-6); padding:0; border:0; border-radius:var(--radius-full); background:none; color:var(--muted-foreground); cursor:pointer; }
.graph-group-toggle:hover { background:var(--secondary); color:var(--foreground); }
/* O de NÓ senta no CANTO de baixo, à direita, como a quantidade no de cima: fechado, mostra QUANTOS
   guarda ("+12"). No canto, e não na borda: na borda ele cobria a alça da última porta (medido na
   bancada, a "porta 3" do núcleo saía por baixo dele). O selo de estado, embaixo à esquerda, encolhe. */
.graph-node-toggle { position:absolute; inset-block-end:0; inset-inline-end:0; display:inline-flex; align-items:center; justify-content:center; min-inline-size:var(--space-6); block-size:var(--space-6); padding:0 var(--space-2); border:var(--border-width) solid transparent; border-radius:var(--radius-control); background:var(--secondary); color:var(--foreground); font:inherit; font-size:var(--text-xs); font-variant-numeric:tabular-nums; font-weight:var(--weight-medium); transform:translate(25%,50%); cursor:pointer; }
.graph-node-toggle[aria-expanded="false"] { border-color:transparent; }
.graph-node:has(.graph-node-toggle) .graph-node-status { max-inline-size:calc(100% - var(--space-16)); }
/* O ALFINETE (nó fixo), no canto de cima à esquerda — a quantidade fica no da direita. */
.graph-node-pin { position:absolute; inset-block-start:0; inset-inline-start:0; display:inline-grid; place-items:center; inline-size:var(--space-5); block-size:var(--space-5); border:var(--border-width) solid transparent; border-radius:var(--radius-full); background:var(--card); color:var(--foreground); transform:translate(-25%,-50%); }
/* A NUVEM é desenho de FUNDO: a caixa do nó fica sem borda e sem fundo, e o texto vai ao centro. */
.graph-node-cloud { position:absolute; inset:0; inline-size:100%; block-size:100%; overflow:visible; pointer-events:none; }
.graph-node-cloud path { fill:var(--card); stroke:var(--border); stroke-width:var(--border-width); }
/* E o ícone vai JUNTO do texto, no meio da nuvem: na borda da caixa, onde fica nos outros nós, ele
   saía para fora do contorno. */
.graph-node[data-shape="cloud"] .graph-node-body { position:relative; border-color:transparent; background:none; justify-items:center; text-align:center; }
.graph-node[data-shape="cloud"] .graph-node-has-icon { grid-template-columns:auto auto; justify-content:center; }
.graph-node[data-shape="cloud"][data-selected] .graph-node-cloud path,.graph-node[data-shape="cloud"][data-focused] .graph-node-cloud path { stroke:var(--primary); }
.dependency-graph[data-contrast="high"] .graph-node-cloud path { stroke:var(--foreground); stroke-width:calc(var(--border-width) * 2); }
/* A BARRA do modo de arrumar quebra em mais linhas quando a tela é estreita. */
.graph-toolbar { max-inline-size:calc(100% - var(--space-8)); }
/* OS RÓTULOS QUE SOMEM (MNT-12.5): o que encosta noutro, pela prioridade (o graph.tsx mede e marca),
   e o texto das linhas inteiro quando a câmera está longe — a 60%, a letra viraria um risco. */
.dependency-graph [data-crowded],.dependency-graph[data-far] :is(.graph-edge-text,.graph-edge-end,.graph-edge-chip-text) { visibility:hidden; }
/* 0.32.0: as células têm o fundo de cartão (o corpo da tabela da referência), então o escolhido pinta
   a CÉLULA — na linha, ele ficava por baixo delas. É o clarinho da Aurea. */
.datagrid tbody tr[data-selected] > :is(td,th) { background:color-mix(in oklab,var(--primary) 10%,var(--card)); }
.datagrid-empty { padding:var(--space-6); color:var(--muted-foreground); text-align:center; }

/* ========================================================================== */
/* 10. RESPONSIVIDADE                                                          */
/* ========================================================================== */
/* Aperto de tela baixa: é densidade do SHELL DOS DOCS (.doc-sidebar), não da .doc-nav em
   si — sem o escopo ela zerava o gap de qualquer nav, inclusive a do catálogo. */
/* Legado do catálogo escrito à mão: `display:block` desmancha o grid e empilha a lateral.
   Agora vale SÓ para o shell que não tem gaveta — o `apps/docs/index.html`, que traz a
   própria `.doc-sidebar` e o próprio JS de abrir. O shell do sistema segue em grid de uma
   coluna com a gaveta acima. Sai junto com aquela página (achado M13). */
@media (max-width:640px) { :root { --card-pad:16px; --section-gap:16px; } .doc-actions .select { flex:1; width:auto!important; min-width:0; } .doc-actions>.btn-primary { width:var(--control-h-md); padding:0; font-size:0; } .doc-actions>.btn-primary .mono { display:none; } .tabs,.pagination,.segmented { max-width:100%; overflow-x:auto; } .step:nth-child(3):before { display:none; } .alert { grid-template-columns:auto minmax(0,1fr); } .alert>:last-child { grid-column:2; justify-self:start; } .log-line { grid-template-columns:70px 58px minmax(0,1fr); gap:6px; } .queue-item>.badge { grid-column:2; justify-self:start; } .event-row>.badge { grid-column:3; justify-self:start; } .message { grid-template-columns:1fr; } .media-player { min-height:330px; aspect-ratio:auto; } .media-overlay-title { top:12px; left:12px; right:12px; } .media-controls { padding:10px; } .media-control-row { align-items:flex-start; flex-direction:column; gap:8px; } .media-control-row>.media-control-group { width:100%; justify-content:space-between; } .media-optional,.media-volume { display:none; } .media-time { padding:0 4px; font-size:11px; } .toast-stack { inset-inline:12px; bottom:12px; } .toast { width:100%; min-width:0; grid-template-columns:minmax(0,1fr) auto; } .drawer { width:100%; padding:20px; } .dialog { padding:20px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Padrões compostos Aurea 1.7: blocos de operação, não widgets de domínio. */
.operational-grid .demo{min-height:0}@media(max-width:640px){.operational-grid .demo{grid-column:span 12}}
.universal-grid .demo { min-height:0; }
.pattern-toolbar .input-group { flex:1 1 180px; }
.media-library-row.active { border-color:transparent; background:color-mix(in oklab,var(--primary) 10%,transparent); }
/* Alvo de toque. `.tabs`/`.segmented` no lugar de `.tab`/`.segmented button`: agora a altura
   mora na cápsula, então é ela que precisa crescer — o filho estica atrás. O `CloseButton` fica de
   fora (0.32.0): o alvo dele é o `::before` de 44, e o círculo continua de 24, como o da referência. */
@media (pointer:coarse) { .btn:not(.btn-link):not(.close-button),.tabs,.segmented,.pagination button,.pagination-link,.schedule-grid button,.media-control,.nav-list-row { min-height:var(--target-min); } .btn-icon,.media-control,.pagination-link { min-width:var(--target-min); } }
@media (forced-colors:active) {
  :focus-visible { outline:var(--focus-width) solid CanvasText; outline-offset:var(--focus-offset); box-shadow:none; }
  .badge,.pattern-gallery button[aria-pressed="true"],.device-grid button[aria-pressed="true"] { border:1px solid transparent; }
  /* O glifo por máscara é FUNDO recortado, e aqui o navegador troca todo fundo pela cor da tela: o
     glifo sumia (medido em 12/10/2026: zero ponto de tinta nos cinco). Ele sai da troca e pinta com a
     cor do SISTEMA que o texto ao lado recebe — pelo nome, porque `inherit` aqui devolve a cor de
     antes da troca (medido: o amarelo do link e o branco do tema escuro, sobre a tela branca). O
     título do `Accordion` fica na cor de texto: sem isto, o Chromium o pintava na cor de link e o
     Firefox na de texto, e a seta não tinha como acompanhar os dois. Glifo novo por máscara entra
     nesta lista; quem cobra é `tests/visual/mascara-alto-contraste.spec.ts`. */
  :is(.topbar-menu-icon,.link-external,.kpi-trend-icon,.accordion-chevron,.toast-anchored-icon,.toc-label-icon) { forced-color-adjust:none; background:CanvasText; }
  .topbar-menu-icon { background:ButtonText; }
  .link-external { background:LinkText; opacity:1; }
  .accordion-item > summary { color:CanvasText; }
  /* A AMOSTRA DE COR (0.32.0, ADR-0069): a cor É o conteúdo dela — no `ColorSwatch`, nas amostras para escolher, no
     gatilho do `ColorPicker` e na frente do `ColorField`. Com a troca, viravam círculos brancos de contorno preto e o
     "visto" sumia (medido em 14/10/2026). Ela sai da troca, como a área e a trilha; o anel de foco fica na cor do
     sistema. Quem cobra: `tests/visual/mascara-alto-contraste.spec.ts`. */
  :is(.color-swatch,.color-swatch-option) { forced-color-adjust:none; }
  .color-swatch-option:has(:focus-visible) { outline-color:CanvasText; }
  /* Sem linha (ADR-0072, 16/10/2026): a rodinha do `Spinner` e o visto do `Checkbox` deixaram de ser linha (que o alto
     contraste pinta) e viraram desenho por máscara — fundo, que a troca apaga. Saem da troca, na cor do texto. */
  .spinner,.checkbox input:checked + .control-mark::after { forced-color-adjust:none; background:CanvasText; }
}


/* superfície (overflow, borda, fundo, raio) mora junto com a do `.table-wrap` lá em cima — aqui
   fica só o que é DESTA região: ela é focável, e o foco dela é a linha de dentro, abaixo. Era um
   halo de `--focus` a 38% (B-09, 24/09/2026): claro demais para se ver, e fora do contrato de foco.
   A linha vai para DENTRO porque a região é o próprio contêiner recortado — como na referência,
   que desenha o foco da tabela com `inset 0 0 0 2px var(--focus)`. */
.table-region{outline:none}
.table-region:focus-visible{outline:var(--focus-width) solid var(--focus-strong);outline-offset:calc(-1 * var(--focus-width));box-shadow:none}
/* CONTAINER QUERY, e não breakpoint de viewport — Parte D, item D3 (08/08/2026).
   Era `@media (max-width:400px)`, o último dos seis legados do achado M13. Trocar por um degrau
   da escala (639px) teria resolvido o gate e mantido o defeito: a largura que aperta os
   controles é a do PLAYER, não a da janela. Um player numa lateral de 400px dentro de uma tela
   de 1920px tem exatamente o mesmo aperto, e o breakpoint de viewport nunca o via.
   `.media-player` já era `position:relative` + `overflow:hidden`, então a contenção não muda o
   posicionamento do que está dentro — medido antes de escrever. */
.media-player { container-type:inline-size; }
@container (max-width:400px) {
  .media-controls { flex-wrap:wrap; overflow:visible!important; gap:8px; }
  .media-control { min-width:var(--target-min); min-height:var(--target-min); }
}
@media(pointer:coarse){
  .media-control,.btn-icon{min-width:var(--target-min);min-height:var(--target-min)}
}

/* ========================================================================== */
/* 12. RTL                                                                     */
/* ========================================================================== */
/* O eixo inline do CSS acima já é lógico e espelha sozinho. Aqui ficam só os
   casos sem forma lógica: background-position e translateX.
   Deliberadamente NÃO espelham:
   - o check do .checkbox e o .spinner são glifos desenhados com borda;
   - .map-* e .builder-* são geografia/arte com rotate() fixo — espelhar os
     nós sem as arestas quebraria o desenho;
   - .drawer-left/.drawer-right prometem lado físico no nome (prop side). */
:dir(rtl) .select { background-position:12px 50%; }
:dir(rtl) .switch input:checked + .switch-track:after { transform:translateX(calc(-1 * var(--switch-x))); }

/* BARRA DE ROLAGEM. A Aurea ESCONDIA a dela: `.sidebar` e `.toc` tinham `scrollbar-width:none`
   mais `::-webkit-scrollbar{width:0}`. Região que rola sem barra visível não avisa que rola e
   não dá o que arrastar — quem usa ponteiro perde o controle, e quem depende de alvo grande
   perde duas vezes. Não era estilo: era um controle removido.
   A barra continua NATIVA. Não há `<div>` fazendo de polegar, então o comportamento do sistema
   operacional, a rolagem por clique no trilho e as preferências de acessibilidade continuam de
   pé — é o que um ScrollArea de peças trocaria por conta própria, e por isso ele não entrou.
   DOIS CAMINHOS, e os dois são necessários. Medido nos dados do MDN em 21/08/2026:
     scrollbar-width   Chrome 121 · Firefox 64 · Safari 18.2
     scrollbar-color   Chrome 121 · Firefox 64 · Safari 26.2   <- recente demais para ser o único
     ::-webkit-scrollbar   Chrome 2 · Safari 4 · Firefox 153
   Ou seja: o par padrão cobre Firefox e Chrome e ainda não cobre o Safari da maioria; o caminho
   webkit cobre Safari e Chrome. Juntos cobrem os três, e onde os dois valem o padrão ganha por
   vir depois. Só cor e espessura — nada de desenhar seta ou canto. */
.carousel-track,.code-block,.combobox-popup,.command-palette,.dialog,.dialog-body,.drawer,.log-stream,.notification-list,.sidebar,.table-region,.table-wrap,.toc,.topbar-tabs {
  scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;
}
.carousel-track::-webkit-scrollbar,.code-block::-webkit-scrollbar,.combobox-popup::-webkit-scrollbar,.command-palette::-webkit-scrollbar,.dialog::-webkit-scrollbar,.dialog-body::-webkit-scrollbar,.drawer::-webkit-scrollbar,.log-stream::-webkit-scrollbar,.notification-list::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.table-region::-webkit-scrollbar,.table-wrap::-webkit-scrollbar,.toc::-webkit-scrollbar,.topbar-tabs::-webkit-scrollbar { inline-size:var(--space-2); block-size:var(--space-2); }
.carousel-track::-webkit-scrollbar-track,.code-block::-webkit-scrollbar-track,.combobox-popup::-webkit-scrollbar-track,.command-palette::-webkit-scrollbar-track,.dialog::-webkit-scrollbar-track,.dialog-body::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.log-stream::-webkit-scrollbar-track,.notification-list::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,.table-region::-webkit-scrollbar-track,.table-wrap::-webkit-scrollbar-track,.toc::-webkit-scrollbar-track,.topbar-tabs::-webkit-scrollbar-track { background:transparent; }
.carousel-track::-webkit-scrollbar-thumb,.code-block::-webkit-scrollbar-thumb,.combobox-popup::-webkit-scrollbar-thumb,.command-palette::-webkit-scrollbar-thumb,.dialog::-webkit-scrollbar-thumb,.dialog-body::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.log-stream::-webkit-scrollbar-thumb,.notification-list::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.table-region::-webkit-scrollbar-thumb,.table-wrap::-webkit-scrollbar-thumb,.toc::-webkit-scrollbar-thumb,.topbar-tabs::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--radius-control); }
/* A LATERAL é a exceção (0.32.0; o Victor, 13/10/2026, olhando a da documentação da referência: a barra
   "só aparece se o mouse fica em cima do sidebar e ela é clarinha" — e, sobre o padrão, "pode alterar o
   atual para ser claro e sumir a rolagem"). A barra continua NATIVA e continua lá — a largura fina não
   muda, então nada pula quando ela aparece; parada, o polegar é transparente. Ela aparece:
     - com o ponteiro em cima da lateral (é quando quem usa mouse vai arrastá-la);
     - com o foco do teclado dentro dela (quem navega com Tab vê que a lista rola);
     - sempre, em tela sem ponteiro que paire (`hover: none`), onde o "em cima" não existe.
   A cor sai da escala da LATERAL, não da página: é o texto dela, esmaecido.
   O desenho de antes — a barra sempre à vista, na cor de borda forte — não saiu: é a variante
   `scrollbar="visible"` (`.sidebar-scrollbar-visible`), para quem precisa da barra o tempo todo. */
.sidebar, .sidebar-body { scrollbar-color:transparent transparent; }
.sidebar::-webkit-scrollbar-thumb, .sidebar-body::-webkit-scrollbar-thumb { background:transparent; }
/* 4-C: com o topo e o pé fixos, quem rola é o meio (`.sidebar-body`) — a mesma barra, acesa pela lateral inteira. */
.sidebar:is(:hover,:focus-within), .sidebar:is(:hover,:focus-within) > .sidebar-body { scrollbar-color:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent) transparent; }
.sidebar:is(:hover,:focus-within)::-webkit-scrollbar-thumb, .sidebar:is(:hover,:focus-within) > .sidebar-body::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
@media (hover: none) {
  .sidebar, .sidebar-body { scrollbar-color:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent) transparent; }
  .sidebar::-webkit-scrollbar-thumb, .sidebar-body::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--sidebar-foreground) 45%, transparent); }
}
/* Duas classes, depois das de cima: ganha do "em cima" e do "sem ponteiro" com a mesma força, pela ordem. */
.sidebar.sidebar-scrollbar-visible, .sidebar.sidebar-scrollbar-visible > .sidebar-body { scrollbar-color:var(--border-strong) transparent; }
.sidebar.sidebar-scrollbar-visible::-webkit-scrollbar-thumb, .sidebar.sidebar-scrollbar-visible > .sidebar-body::-webkit-scrollbar-thumb { background:var(--border-strong); }

/* ========================================================================== */
/* 99. EIXO RESPONSIVO — a infraestrutura do G-AXIS-04                        */
/* ========================================================================== */
/* A Aurea tinha ZERO eixo responsivo e uma das referências tem em 47 de 50. O Victor decidiu que a
   Aurea terá os DOIS mecanismos, explícitos na API, e que a abstração vem ANTES dos componentes:
   uma camada compartilhada, não uma solução diferente por peça.

   O QUE CADA UM RESOLVE, que é a razão de serem dois:
   • VIEWPORT  — a decisão depende do tamanho da APLICAÇÃO. Layout de aplicação, decisões globais.
   • CONTAINER — o componente responde ao ESPAÇO EM QUE FOI COLOCADO. Para componente reutilizável
     é este, quase sempre: o mesmo botão dentro de uma lateral de 300px e dentro de um painel de
     900px são a mesma viewport e situações diferentes.

   COMO FUNCIONA, e por que é CSS-first sem uma linha de JS:
   um passo de escala é um conjunto de VARIÁVEIS (`--step-h`, `--step-px`, `--step-gap`,
   `--step-fs`); o componente LÊ as variáveis; a camada responsiva só as RE-PÕE dentro de `@media`
   ou `@container`. Assim a explosão combinatória (passos × pontos) fica aqui, UMA vez, e não em
   cada componente. Nada observa largura, nada depende de hidratação, e o HTML do servidor já sai
   com a resposta certa porque a resposta é do CSS.

   POR QUE AS CLASSES DE TAMANHO PRECISARAM PASSAR PELA VARIÁVEL: uma regra dentro de `@media` que
   setasse `--step-h` perderia para um `height:` direto — declaração direta não é sobrescrita por
   variável que o autor já não leu. É por isso que `.btn-sm` passou a setar variáveis; a classe
   emitida e o valor computado são os mesmos (a geometria e as baselines de pixel cobram isso).

   O NOME DIZ O MENSURÁVEL: `vp-md:` é viewport, `ct-md:` é container. Uma escala só, um nome um
   número — `md` é sempre 768px, e o prefixo diz 768px DE QUÊ. Era a condição do Victor para os
   nomes não ficarem ambíguos.

   `@media`/`@container` não leem `var()`, então os valores aqui são literais da escala — o
   check 4b do validate.py cobra que eles pertençam a `--breakpoint-*`, nos dois. */

/* ── SEM LINHA, OS FUNDOS (ADR-0072, 16/10/2026) ───────────────────────────────────────────────────────────────────
   Sem a linha, as peças que só ela separava do fundo sumiram (medido nas 149 páginas: 81 casos, 1,00 a 1,06:1). O Victor
   viu cada uma ao lado da sugestão e escolheu: "caixa B, o resto tudo B".
   · Três fundos TRANSLÚCIDOS da cor do texto — como o trilho desligado do switch da referência (o texto a 20%): se
     separam de QUALQUER fundo atrás. Uma cor fixa acaba igual a alguma superfície; foi assim que as peças sumiram.
     `--fill-1` 6% · `--fill-2` 10% (campo, botão de contorno, barra, código) · `--fill-3` 20% (marca do checkbox e do
     rádio, trilho do switch). Onde algo passa POR TRÁS ou uma peça cobre outra (a bolinha dos passos, as fotos, o nó do
     mapa), a mesma mistura OPACA, sobre a cor da página (`-solid`): translúcido, o que está atrás aparecia.
   · Declarados onde o tema se declara, para seguir a faixa de outro tema (GAR-05); as cores de cada marca também moram
     nos elementos com `[data-theme]` (os tokens da marca), então a marca vem junto.
   · A ÚNICA linha que fica é a do cartão de contorno (a caixa da vitrine): clara, o texto a 10% — a "B" da caixa. */
:root,[data-theme] { --fill-1:color-mix(in oklab,var(--foreground) 6%,transparent); --fill-2:color-mix(in oklab,var(--foreground) 10%,transparent); --fill-3:color-mix(in oklab,var(--foreground) 20%,transparent); --fill-2-solid:color-mix(in oklab,var(--foreground) 10%,var(--background)); --fill-3-solid:color-mix(in oklab,var(--foreground) 20%,var(--background)); }
/* O `secondary` do campo tem fundo próprio (`--secondary`, sem linha desde antes) e fica como era — sem o `:where`, esta
   regra (vinda depois) pintava por cima dele e o `secondary` ficava igual ao comum. O `:where` mantém a força de uma
   classe, e o inválido (que vem antes, com mais força) continua vencendo. */
/* ── OS CAMPOS BRANCOS NO CLARO (ADR-0078, 22/10/2026) ─────────────────────────────────────────────────────────────
   O Victor viu na bancada, no notebook e no monitor dele: *"gostei Branco + sombra ... dá pra ver também por conta da
   sombra"*. É o campo da referência: no CLARO, a cor do cartão com a sombra leve (`--shadow-sm`, a MESMA dela); no
   ESCURO, o de antes (o texto a 10%) — o dela, a superfície sem sombra, mede 1,13:1 contra 1,34:1, e sombra preta não
   se vê no escuro. DENTRO de uma superfície branca (cartão, janela, folha, menu, painel do app), o campo volta ao cinza:
   branco no branco só a sombra separa, e no escuro sumiria. A referência faz o mesmo com a variação `secondary`, mas
   deixa o app escolher; aqui a superfície escolhe sozinha.
   · O fundo "de página" mora em cada elemento de tema, como os `--fill-*` (segue a faixa de outro tema, GAR-05).
   · As superfícies que pintam a cor do cartão devolvem o cinza. As que NÃO pintam ficam de fora: o cartão de contorno
     (transparente — a caixa da vitrine) e o `inset` (cinza). O painel de prévia do site é página: volta ao branco.
   · 0.40.1: entraram as que a 0.40.0 esqueceu e que recebem campo do app — o `Header` flutuante e o de pílula (a busca
     na barra), a lateral da documentação aberta como popover e o item da `SortableList`. Quem pinta a cor do cartão e
     NÃO recebe campo fica de fora (a barra de baixo, a dica, o selo, a moldura de celular, as peças do mapa). Peça nova
     que pinta `--card` ou `--popover` e recebe conteúdo do app entra nesta lista. */
:root,[data-theme] { --field-fill-page:var(--fill-2); --field-lift-page:none; }
[data-theme="light"] { --field-fill-page:var(--card); --field-lift-page:var(--shadow-sm); }
:root,[data-theme],.demo-panel[data-panel="preview"] { --field-fill:var(--field-fill-page); --field-lift:var(--field-lift-page); }
:is(.card:not(.card-outline):not(.card-inset),.content:not(.content-plain),.section-card,.demo,.dialog,.drawer,.popover,.menu,.command-palette,.alert,.banner-consent,.toast,.accordion-surface,.datagrid-detail,:is(.table,.table-wrap) tbody :is(td,th),.topbar-floating,.topbar-pill,.sortable-item,.app-shell-docs > .sidebar[popover]:popover-open) { --field-fill:var(--fill-2); --field-lift:none; }
.input:where(:not(.input-secondary)),.textarea:where(:not(.textarea-secondary)),.select,.input-group:where(:not(:has(>.input-secondary))),.number-field-group,.combobox-multi { background-color:var(--field-fill); box-shadow:var(--field-lift); }
.input-group > :is(.input,.select,.textarea),.number-field-group .input,.combobox-multi .input { background-color:transparent; box-shadow:none; }
.control-mark,.switch-track { background-color:var(--fill-3); }
.btn-outline { --btn-bg:var(--fill-2); }
.btn-outline.btn-tone-brand,.btn-primary-outline { --btn-bg:color-mix(in oklab,var(--primary) 16%,transparent); }
/* Os tons de ESTADO: o tom a 16% (o mouse, 22%), o fundo aprovado na bancada. No CLARO o rótulo vai 20% para a cor
   do texto, porque o azul do claro já fica a 5,2:1 da página branca e qualquer fundo que se veja o derrubava abaixo de
   4,5 (o tom a 16% deixava o "info" a 4,02:1). Medido em 16/10/2026, o pior caso é o azul com o mouse, a 4,64:1. A "C"
   da bancada, escolhida pelo Victor. */
.btn-outline.btn-tone-danger,.btn-danger-outline { --btn-bg:color-mix(in oklab,var(--destructive) 16%,transparent); }
.btn-outline.btn-tone-success { --btn-bg:color-mix(in oklab,var(--success) 16%,transparent); }
.btn-outline.btn-tone-info { --btn-bg:color-mix(in oklab,var(--info) 16%,transparent); }
.btn-outline.btn-tone-warning { --btn-bg:color-mix(in oklab,var(--warning) 16%,transparent); }
.btn-outline.btn-tone-danger:hover:not(:disabled):not([aria-disabled="true"]),.btn-danger-outline:hover:not(:disabled):not([aria-disabled="true"]) { --btn-bg:color-mix(in oklab,var(--destructive) 22%,transparent); }
.btn-outline.btn-tone-success:hover:not(:disabled) { --btn-bg:color-mix(in oklab,var(--success) 22%,transparent); }
.btn-outline.btn-tone-info:hover:not(:disabled) { --btn-bg:color-mix(in oklab,var(--info) 22%,transparent); }
.btn-outline.btn-tone-warning:hover:not(:disabled) { --btn-bg:color-mix(in oklab,var(--warning) 22%,transparent); }
[data-theme="light"] .btn-outline.btn-tone-danger:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-outline.btn-tone-danger:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-outline:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-danger-outline:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab,var(--danger-400) 80%,var(--foreground)); }
[data-theme="light"] .btn-outline.btn-tone-success:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-outline.btn-tone-success:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab,var(--success-400) 80%,var(--foreground)); }
[data-theme="light"] .btn-outline.btn-tone-info:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-outline.btn-tone-info:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab,var(--info-400) 80%,var(--foreground)); }
[data-theme="light"] .btn-outline.btn-tone-warning:where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),[data-theme="light"] .btn-outline.btn-tone-warning:hover:not(:disabled):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { --btn-fg:color-mix(in oklab,var(--warning-400) 80%,var(--foreground)); }
.code-block,.log-stream,.dropzone,.toolbar,.file-item,.agent-cap { background-color:var(--fill-2); }
/* O selo de CONTORNO, sem a linha, ganha o acento a 16%, e a letra vai 20% para a cor do texto, nos dois temas (a regra
   da "C" dos botões): com a letra de sempre, o verde caía a 3,79:1 no claro e o `success` a 4,15:1 no escuro, dentro do
   cartão. Medido em 16/10/2026: o pior caso passa a 4,79:1. Os outros selos (suave, plano) têm fundo próprio e não mudam. */
.badge-outline { background-color:color-mix(in oklab,var(--badge-accent) 16%,transparent); color:color-mix(in oklab,var(--badge-accent) 80%,var(--foreground)); }
/* Menos o primário da Aurea (ADR-0073, decisão do Victor de 18/10/2026, "A"): a letra é o próprio acento (o amarelo no
   escuro; o azul no claro, desde a ADR-0076), a mesma do selo suave e do botão de contorno da marca — misturado ao texto,
   o amarelo virava mostarda (2,36:1) só nesta peça. A
   referência principal usa a mesma letra no suave e no contorno. Só sem `data-brand`: na `lory` do claro, sem a
   mistura, a letra cairia de 5,56 para 4,42:1. */
.badge-primary.badge-outline:not(:where([data-brand],[data-brand] *)) { color:var(--badge-accent); }
/* O registro ganhou o fundo dos campos; o nível `info` (o azul) caía a 4,08:1 sobre ele no claro. A mesma letra 20% para o texto. */
.log-stream .log-level.info { color:color-mix(in oklab,var(--info-400) 80%,var(--foreground)); }
.step:not(.step-done,.step-active,.step-error,.done,.active) .step-dot { background-color:var(--fill-3-solid); }
.avatar:not([class*="avatar-tone"],.avatar-count) { background-color:var(--fill-3-solid); }
.graph-node-body { background-color:var(--fill-2-solid); }
.card-outline { border-color:color-mix(in oklab,var(--foreground) 10%,transparent); }
/* O pino que se arrasta sobre a cor: branco por baixo e a cor numa bolinha por cima, 3 para dentro — o branco é
   DESENHO CHEIO, não aro; e a sombra o solta da trilha. */
.slider-color .slider-thumb,.color-area-thumb { background:var(--white); box-shadow:var(--shadow-md); }
.slider-color .slider-thumb::after,.color-area-thumb::after { content:""; position:absolute; inset:calc(3 * var(--border-width)); inline-size:auto; block-size:auto; border-radius:var(--radius-full); background:var(--color-checker) center/var(--space-2) var(--space-2); box-shadow:inset 0 0 0 var(--space-4) var(--slider-thumb-color,var(--color-area-thumb,var(--primary))); }

/* ═══ A PALETA DA 1.0 — passo A (ADR-0083, 26/10/2026) ═══════════════════════════════════════════════════════════
   A proposta de cores que o Victor aprovou família por família em 25 e 26/10/2026: a base Zinco profundo, o destaque
   GRAFITE no claro (o amarelo vira fundo, traço ou indicador, nunca letra), o link com marca-texto, os campos brancos,
   as marcas brancas dentro dos controles, o botão ligado amarelo e a linha do tempo consertada. Os TOKENS mudaram na
   fonte (`aurea.tokens.json`); aqui ficam as REGRAS que mudam junto.
   A `lory` fica 100% como é hoje (decisão do Victor, 26/10/2026): os tokens dela foram congelados na fonte, e toda
   regra desta seção leva `:where(:not([data-brand="lory"],[data-brand="lory"] *))`, de força zero. Quem prova que
   ela sai igual: `tests/visual/lory-congelada.spec.ts`. */

/* O ESCOLHIDO do claro tem a letra grafite (era a mistura de 45%, que dava marrom): a aba, o segmento aceso, o item de
   navegação atual e o rótulo `.eyebrow`. O fio amarelo de baixo continua. No escuro, a letra continua o amarelo. */
[data-theme="light"] .is-selected:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
[data-theme="light"] .eyebrow:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
[data-theme="light"] .btn-nav[aria-current]:not([aria-current="false"]):where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
[data-theme="light"] .segmented :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *)
  { --btn-fg:var(--foreground); color:var(--foreground); }

/* O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): amarelo cheio com a letra do botão primário, nos dois temas, sem
   o fio de baixo e sem o fundo "clarinho". As cores passam por `--pressed-*` no próprio botão, para uma faixa com outro
   `data-theme` acertar e para os outros estilos aprovados (o cinza e o grafite) só trocarem as três variáveis. */
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  --pressed-bg:var(--primary); --pressed-bg-hover:var(--primary-hover); --pressed-fg:var(--primary-foreground);
  --btn-bg:var(--pressed-bg); --btn-fg:var(--pressed-fg); background:var(--pressed-bg); color:var(--pressed-fg); }
:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):hover:not(:disabled):not([aria-disabled="true"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  --btn-bg:var(--pressed-bg-hover); background:var(--pressed-bg-hover); }

/* O LINK separa-se do texto por mais que a cor (WCAG 1.4.1): no claro a letra é o grafite e no escuro o amarelo — a
   mesma cor do texto em volta, ou quase (1,91:1 no escuro). Vale para o link sem classe, para o componente `Link` e
   para o texto no tom link. A NAVEGAÇÃO fica de fora — a trilha, todo link dentro de `<nav>` e o segmento que é link:
   o marca-texto é para o link no meio do texto (medido no site em 27/10/2026: dos 596 links sem classe, 588 eram a
   chave Web | Native e 6 a trilha; só 2 estavam na prosa).
   A base, nos dois temas (e a VARIAÇÃO do claro): o sublinhado amarelo de 2 com 3 de afastamento. */
:is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  color:var(--link); text-decoration-line:underline; text-decoration-color:var(--link-underline);
  text-decoration-thickness:calc(2 * var(--border-width)); text-underline-offset:calc(3 * var(--border-width)); }
/* O PADRÃO do claro: o MARCA-TEXTO — a faixa amarela a 45% atrás da metade de baixo das letras (o texto sobre ela mede
   14,79:1); no ponteiro, ela cobre a palavra inteira. É um sublinhado grosso que sobe para trás das letras, e não um
   fundo: assim acompanha só o texto, mesmo quando o elemento ocupa a linha inteira ou o link quebra em várias linhas.
   As medidas são PROPORÇÕES DA LETRA (em), medidas na bancada de 26/10/2026, e crescem com ela; provadas nos três
   navegadores em 27/10/2026. A variação (o sublinhado) se pede com `data-link="underline"` no próprio link, num
   contêiner ou no `<html>` — um atributo, e não uma classe: o core só tem classe que um componente produz. */
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):not([data-link="underline"],[data-link="underline"] *):where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
  text-decoration-color:var(--link-mark); text-decoration-thickness:.5em; text-underline-offset:-.32em; text-decoration-skip-ink:none;
  transition:text-decoration-thickness var(--duration-fast) var(--ease-standard),text-underline-offset var(--duration-fast) var(--ease-standard); }
[data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):not(.breadcrumb a,nav a,.segmented a):not([data-link="underline"],[data-link="underline"] *):hover:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
  text-decoration-thickness:1.25em; text-underline-offset:-1.02em; }
@media (prefers-reduced-motion:reduce) {
  [data-theme="light"] :is(a:not([class]),.link,.typography-tone-link):where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) { transition:none; }
}

/* As TINTAS que saíam do destaque ficariam cinza com o destaque grafite: no claro, elas saem do próprio amarelo — o selo
   primário de contorno (16%) e a marca do item atual da barra de baixo de aro (15%). */
[data-theme="light"] .badge-primary.badge-outline:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
  background-color:color-mix(in oklab, var(--primary) 16%, transparent); }
[data-theme="light"] .bottom-nav-ind-circle-outline .bottom-nav-item[aria-current] .bottom-nav-mark:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
  background:color-mix(in srgb, var(--primary) 15%, transparent); }

/* O CAMPO no claro é BRANCO com a sombra fina em todo lugar, também DENTRO das superfícies brancas (era o cinza
   `--fill-2` ali — ADR-0078, item 2, revertido pela ADR-0083): dentro de um cartão branco, quem separa o campo é a
   sombra. A lista é a das superfícies da regra de campo, acima. No escuro, nada muda. */
[data-theme="light"] :is(.card:not(.card-outline):not(.card-inset),.content:not(.content-plain),.section-card,.demo,.dialog,.drawer,.popover,.menu,.command-palette,.alert,.banner-consent,.toast,.accordion-surface,.datagrid-detail,:is(.table,.table-wrap) tbody :is(td,th),.topbar-floating,.topbar-pill,.sortable-item,.app-shell-docs > .sidebar[popover]:popover-open):where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
  --field-fill:var(--card); --field-lift:var(--field-lift-page); }

/* O FOCO DOS CAMPOS no claro é o amarelo, uma linha só, como no escuro (decisão do Victor, 26/10/2026; a medida — 1,75:1
   na página, 1,91:1 no cartão, abaixo dos 3:1 — vai à bancada do passo A). Os botões e o resto continuam com o grafite. */
[data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
[data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
  outline-color:var(--primary); }

/* "AUMENTAR CONTRASTE" do sistema (`prefers-contrast: more`: o "Aumentar contraste" do macOS, do iOS e do Android, o
   alto contraste do Windows). Sem linha nenhuma, um campo branco nunca chega aos 3:1 da WCAG 1.4.11 — a página ou o
   cartão teriam de ser um cinza médio. Então quem pede mais contraste recebe: o contorno de 3:1 nos campos (a única
   linha que esta preferência acende, exceção nomeada à ADR-0072 pela ADR-0083), as quatro marcas dos controles na
   tinta, e o foco dos campos de volta ao grafite. Fora dela, nada disto existe. */
@media (prefers-contrast:more) {
  :is(.input,.textarea,.select,.input-group,.combobox-multi,.input-secondary,.textarea-secondary):where(:not([data-brand="lory"],[data-brand="lory"] *)) { border-color:var(--input-strong); }
  .input-group > :is(.input,.select,.textarea):where(:not([data-brand="lory"],[data-brand="lory"] *)) { border:0; }
  :root:where(:not([data-brand="lory"])),[data-theme]:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
    --control-thumb:var(--brand-yellow-ink); --control-selected-foreground:var(--brand-yellow-ink); --control-selected-dot:var(--brand-yellow-ink); }
  [data-theme="light"] :is(.input,.textarea,.select):focus-visible:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *),
  [data-theme="light"] :is(.input-group,.combobox-multi):focus-within:where(:not([data-brand="lory"],[data-brand="lory"] *)):where(:not([data-theme="dark"] *),[data-theme="dark"] [data-theme="light"] *) {
    outline-color:var(--focus-strong); }
}

/* A LINHA DO TEMPO: o trilho por baixo dos pontos é conserto de todas as marcas (na regra da linha do tempo, acima). Aqui
   só a cor: de `--border` para `--input` — na página do Zinco profundo, o `--border` quase não aparecia. */
.timeline > li:not(:last-child):where(:not([data-brand="lory"],[data-brand="lory"] *))::before { background:var(--input); }

/* ═══ AS CORES, passo B — os estilos novos (ADR-0084, 27/10/2026) ═════════════════════════════════════════════════
   Os estilos que o Victor aprovou em 26/10/2026, todos para construir, cada um uma VARIAÇÃO (o padrão de cada peça não
   muda): o botão ligado em três (`data-pressed-style`), o segmento aceso em seis (`data-segment-style`), a linha do tempo
   em cinco (`data-timeline-style`) e o item atual da barra de baixo em treze (`data-current-style`), na barra flutuante e
   na fixa. O atributo vai na própria peça (é o que o React escreve) ou num contêiner — até o `<html>`, para o app todo. A
   peça com o seu atributo ganha do contêiner (`:not([data-…])` no caminho do contêiner); contêiner dentro de contêiner
   vale o que vem depois aqui.
   As cores ficam NA PEÇA, e não num token herdado da raiz: assim uma faixa com outro `data-theme` acerta.
   A `lory` fica de fora, como no passo A (a marca congelada): toda regra leva o `:where(:not(…lory…))` de força zero.
   As duas exceções desta seção, registradas na ADR-0084: o DEGRADÊ do `brand-gradient` (a segunda exceção à ADR-0007,
   depois da escolha de cor da ADR-0069) e os AROS dos estilos de aro (o desenho que dá nome ao estilo — exceção nomeada à
   ADR-0072, só quando o app escolhe o estilo). */

/* 2.8 · O BOTÃO LIGADO (Toggle, ToggleGroup, ToolbarButton): o C, amarelo, é o padrão desde a 0.45.0 (a regra do passo A
   já escreve as três variáveis). Aqui o A (`neutral`, o cinza) e o B (`contrast`, o grafite, invertido) trocam só as três. */
:is([data-pressed-style="neutral"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="neutral"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  --pressed-bg:var(--input); --pressed-bg-hover:color-mix(in oklab, var(--foreground) 9%, var(--input)); --pressed-fg:var(--foreground); }
:is([data-pressed-style="contrast"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="contrast"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  --pressed-bg:var(--foreground); --pressed-bg-hover:color-mix(in oklab, var(--foreground) 84%, var(--background)); --pressed-fg:var(--background); }
:is([data-pressed-style="brand"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="brand"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  --pressed-bg:var(--primary); --pressed-bg-hover:var(--primary-hover); --pressed-fg:var(--primary-foreground); }
/* O cinza é o mais discreto — o ligado fica perto do desligado. Quem pede mais contraste ganha o contorno de 3:1 (a mesma
   exceção dos campos, ADR-0083: a linha que só o "aumentar contraste" acende). */
@media (prefers-contrast:more) {
  :is([data-pressed-style="neutral"] :is(.btn[aria-pressed="true"],.btn.toggle[data-pressed]):not([data-pressed-style]),:is(.btn[aria-pressed="true"],.btn.toggle[data-pressed])[data-pressed-style="neutral"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
    box-shadow:inset 0 0 0 var(--border-width) var(--input-strong); }
}

/* 2.9 · O SEGMENTO ACESO em seis: `current` (a cápsula elevada com o fio amarelo — o de sempre, o padrão), `neutral` (a
   mesma cápsula, sem fio), `contrast` (o grafite), `brand` (o amarelo), `ring` (a cápsula neutra com o aro amarelo) e
   `dot` (a cápsula neutra com um ponto amarelo antes do texto). Do `neutral` ao `dot`, o fio de baixo sai. */
:is([data-segment-style="neutral"] .segmented:not([data-segment-style]),.segmented[data-segment-style="neutral"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:var(--shadow-sm); }
:is([data-segment-style="contrast"] .segmented:not([data-segment-style]),.segmented[data-segment-style="contrast"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--foreground); --seg-fg:var(--background); --seg-shadow:none; }
:is([data-segment-style="brand"] .segmented:not([data-segment-style]),.segmented[data-segment-style="brand"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--primary); --seg-fg:var(--primary-foreground); --seg-shadow:none; }
:is([data-segment-style="ring"] .segmented:not([data-segment-style]),.segmented[data-segment-style="ring"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary), var(--shadow-sm); }
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --seg-bg:var(--segment); --seg-fg:var(--foreground); --seg-shadow:var(--shadow-sm); }
:is([data-segment-style]:not([data-segment-style="current"]) .segmented:not([data-segment-style]),.segmented[data-segment-style]:not([data-segment-style="current"])) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  --btn-bg:var(--seg-bg); --btn-fg:var(--seg-fg); background:var(--seg-bg); color:var(--seg-fg); box-shadow:var(--seg-shadow); }
:is([data-segment-style]:not([data-segment-style="current"]) .segmented:not([data-segment-style]),.segmented[data-segment-style]:not([data-segment-style="current"])) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *))::after { content:none; }
/* O ponto do `dot` tem o lugar reservado em TODOS os segmentos, para a largura não pular quando a escolha muda. 6 de
   diâmetro (a proposta) e 8 até o texto (a proposta dizia 7; o 8 é o `--space-2`, o vão de ícone e texto da escala). */
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a):where(:not([data-brand="lory"],[data-brand="lory"] *))::before {
  content:""; display:inline-block; inline-size:calc(var(--space-1) + var(--space-05)); block-size:calc(var(--space-1) + var(--space-05));
  margin-inline-end:var(--space-2); border-radius:var(--radius-full); vertical-align:.1em; background:transparent; }
:is([data-segment-style="dot"] .segmented:not([data-segment-style]),.segmented[data-segment-style="dot"]) :is(button,a).active:where(:not([data-brand="lory"],[data-brand="lory"] *))::before { background:var(--primary); }

/* 2.12 · A LINHA DO TEMPO em cinco, todos sobre o conserto da ADR-0083: `default` (o ponto amarelo cheio — o padrão),
   `ring` (o ponto vazado com o aro amarelo de 2), `latest` (os pontos na cor fraca e só o último no amarelo, com halo de
   4), `time` (a hora numa coluna à esquerda, alinhada à direita) e `contrast` (os pontos na cor do texto). O `time` muda
   o arranjo pela grade e `display:contents` no `<div>` de dentro — a marcação do componente não muda. */
:is([data-timeline-style="ring"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="ring"]) .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:transparent; box-shadow:inset 0 0 0 calc(2 * var(--border-width)) var(--primary); }
:is([data-timeline-style="latest"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="latest"]) .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--muted-foreground); }
:is([data-timeline-style="latest"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="latest"]) > li:last-child .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--primary); box-shadow:0 0 0 var(--space-1) color-mix(in oklab, var(--primary) 28%, transparent); }
:is([data-timeline-style="contrast"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="contrast"]) .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--foreground); }
/* A coluna da hora tem 52 (a proposta, medida com "10:02" e "Ontem"): `--space-12` + `--space-1`. */
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  display:grid; grid-template-columns:calc(var(--space-12) + var(--space-1)) var(--space-3) minmax(0,1fr); column-gap:var(--space-3); row-gap:var(--space-05); align-items:start; }
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div:where(:not([data-brand="lory"],[data-brand="lory"] *)) { display:contents; }
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > small:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  grid-column:1; grid-row:1; text-align:end; font-variant-numeric:tabular-nums; line-height:calc(var(--text-sm) * var(--leading-normal)); }
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) .timeline-dot:where(:not([data-brand="lory"],[data-brand="lory"] *)) { grid-column:2; grid-row:1; }
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > strong:where(:not([data-brand="lory"],[data-brand="lory"] *)) { grid-column:3; grid-row:1; }
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li > div > p:where(:not([data-brand="lory"],[data-brand="lory"] *)) { grid-column:3; grid-row:2; }
:is([data-timeline-style="time"] .timeline:not([data-timeline-style]),.timeline[data-timeline-style="time"]) > li:not(:last-child):where(:not([data-brand="lory"],[data-brand="lory"] *))::before {
  inset-inline-start:calc(var(--space-12) + var(--space-1) + var(--space-3) + var(--space-3) / 2 - var(--border-width) / 2); }

/* 2.11 · O ITEM ATUAL DA BARRA DE BAIXO: o `indicator` escolhe a forma, o `currentStyle` a cor. O "fundo" é o do formato
   — o item inteiro no `pill`, no `subtle` e no `expand`; a marca do ícone no `circle`, no `circle-outline`, no
   `circle-raised` e no `capsule` (o nome fica embaixo, na cor do texto); o disco no `circle-bold`. O `none` não tem fundo:
   só a cor da letra muda. Vale igual na barra flutuante e na fixa (`edge`).
     neutral (A) o cinza · contrast (B) o grafite · brand (C) o amarelo cheio · ring (D) o aro amarelo, sem fundo ·
     plain (E) só o ícone cheio e o nome em semibold.
   2.11b · com amarelo e branco: brand-white (F) o amarelo com o branco — REPROVA a WCAG (1,91:1; aprovado pelo Victor
   sabendo disso) · white-ring (G) o branco com o aro amarelo, a tinta por dentro · brand-gradient (H) o degradê do
   amarelo até a ponta clara (a ponta é `--primary-gradient-end`, quando a marca define; sem ela, o amarelo com branco).
   2.13 · a barra inteira AMARELA, com todos os ícones e nomes na tinta (sem transparência: a tinta clareada sobre o
   amarelo vira marrom): bar-ink (I) a cápsula de tinta com o ícone amarelo · bar-ring (J) o aro de tinta · bar-plain (K)
   só o ícone cheio e o nome em semibold · bar-light (L) a cápsula amarelo-clara com a tinta. */
:is([data-current-style="neutral"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="neutral"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--secondary); --bn-fg:var(--foreground); --bn-ring:none; }
:is([data-current-style="contrast"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="contrast"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--foreground); --bn-fg:var(--background); --bn-ring:none; }
:is([data-current-style="brand"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--primary); --bn-fg:var(--primary-foreground); --bn-ring:none; }
:is([data-current-style="ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="ring"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:transparent; --bn-fg:var(--foreground); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary); }
:is([data-current-style="plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="plain"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:transparent; --bn-fg:var(--foreground); --bn-ring:none; }
:is([data-current-style="brand-white"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand-white"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--primary); --bn-fg:var(--white); --bn-ring:none; }
:is([data-current-style="white-ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="white-ring"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--white); --bn-fg:var(--brand-yellow-ink); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary); }
:is([data-current-style="brand-gradient"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="brand-gradient"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:linear-gradient(135deg, var(--primary) 20%, var(--primary-gradient-end, color-mix(in oklab, var(--primary) 30%, var(--white)))); --bn-fg:var(--primary-foreground); --bn-ring:none; }
:is([data-current-style="bar-ink"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-ink"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:var(--primary-foreground); --bn-fg:var(--primary); --bn-ring:none; }
:is([data-current-style="bar-ring"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-ring"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:transparent; --bn-fg:var(--primary-foreground); --bn-ring:inset 0 0 0 calc(1.5 * var(--border-width)) var(--primary-foreground); }
:is([data-current-style="bar-plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-plain"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:transparent; --bn-fg:var(--primary-foreground); --bn-ring:none; }
:is([data-current-style="bar-light"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-light"]) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { --bn-bg:color-mix(in oklab, var(--primary) 45%, var(--white)); --bn-fg:var(--brand-yellow-ink); --bn-ring:none; }
/* Onde vai a cor, por formato. O `:is()` com os dois caminhos (o atributo num contêiner, ou na barra) é o mesmo de cima. */
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-pill,.bottom-nav-ind-subtle,.bottom-nav-ind-expand) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  background:var(--bn-bg); color:var(--bn-fg); box-shadow:var(--bn-ring); }
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  color:var(--foreground); }
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item[aria-current] .bottom-nav-mark:where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  background:var(--bn-bg); color:var(--bn-fg); box-shadow:var(--bn-ring); border-color:transparent; }
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])).bottom-nav-ind-circle-bold .bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { color:var(--bn-fg); }
:is([data-current-style]:not([data-current-style="current"]) .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style]:not([data-current-style="current"])).bottom-nav-ind-circle-bold .bottom-nav-item[aria-current] .bottom-nav-disc:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--bn-bg); box-shadow:var(--bn-ring); }
:is([data-current-style="plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="plain"],[data-current-style="bar-plain"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style="bar-plain"]) .bottom-nav-item[aria-current] .bottom-nav-label:where(:not([data-brand="lory"],[data-brand="lory"] *)) { font-weight:var(--weight-semibold); }
/* A barra amarela (2.13): a barra inteira na marca, todos os itens na tinta e o ícone sem transparência. Na fixa (`edge`)
   o core pinta `--background`; esta passa por cima. O ponto de selo vazio, que é amarelo, vai para a tinta. */
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]):where(:not([data-brand="lory"],[data-brand="lory"] *)) {
  --bottomnav-surface:var(--primary); background:var(--primary); color:var(--primary-foreground); border-color:transparent; }
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-item:where(:not([data-brand="lory"],[data-brand="lory"] *)) { color:var(--primary-foreground); }
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-item .icon:where(:not([data-brand="lory"],[data-brand="lory"] *)) { opacity:1; }
:is([data-current-style^="bar-"] .bottom-nav:not([data-current-style]),.bottom-nav[data-current-style^="bar-"]) .bottom-nav-badge:empty:where(:not([data-brand="lory"],[data-brand="lory"] *)) { background:var(--primary-foreground); }
/* A classe DOBRADA é força, de propósito: a regra do nome na cor do texto (o 2.11, acima) também casa com a barra amarela,
   e no escuro pintaria o nome de branco sobre o amarelo. */
:is([data-current-style^="bar-"] .bottom-nav.bottom-nav:not([data-current-style]),.bottom-nav.bottom-nav[data-current-style^="bar-"]):is(.bottom-nav-ind-circle,.bottom-nav-ind-circle-outline,.bottom-nav-ind-circle-raised,.bottom-nav-ind-capsule) .bottom-nav-item.bottom-nav-item[aria-current]:where(:not([data-brand="lory"],[data-brand="lory"] *)) { color:var(--primary-foreground); }

/* >>> camada responsiva — GERADA por scripts/build-responsive-layer.mjs <<< */
/* As variáveis de passo NÃO HERDAM. Ver o comentário de VARIAVEIS no gerador: um ícone dentro
   de um botão responsivo herdaria o passo do botão e mudaria de tamanho sozinho. */
@property --step-h { syntax:"*"; inherits:false; }
@property --step-fs { syntax:"*"; inherits:false; }
@property --step-gap { syntax:"*"; inherits:false; }
@property --step-px { syntax:"*"; inherits:false; }
@property --step-field-px { syntax:"*"; inherits:false; }
@property --step-select-pe { syntax:"*"; inherits:false; }
@property --step-icon { syntax:"*"; inherits:false; }
@property --step-qr { syntax:"*"; inherits:false; }
@property --step-avatar-fs { syntax:"*"; inherits:false; }
@property --step-avatar { syntax:"*"; inherits:false; }

/* o passo de escala, genérico: qualquer peça que leia `--step-*` obedece. `md` também tem
   classe, porque um responsivo precisa poder dizer `md` como valor base. */
.size-xs { --step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8); }
.size-sm { --step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8); }
.size-md { --step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10); }
.size-lg { --step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12); }
.size-xl { --step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl); }

/* CONTÊINER NOMEADO. Sem nome, `@container` casa com o ancestral mais próximo que for contêiner
   — inclusive um que outra pessoa declarou por outro motivo. `inline-size` e não `size`:
   consultar o eixo de bloco exige altura contida, que quase nenhum layout de página tem. */
.container-scope { container:aurea / inline-size; }

/* por VIEWPORT — a decisão depende do tamanho da APLICAÇÃO */
@media (min-width:360px) { .vp-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-2xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }
@media (min-width:480px) { .vp-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xs\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-xs\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xs\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xs\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xs\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xs\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xs\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xs\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xs\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xs\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xs\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xs\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xs\:grid-span-12 { grid-column:span 12 / span 12; } }
@media (min-width:640px) { .vp-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-sm\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-sm\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-sm\:field-horizontal>*:not(.label) { grid-column:2; } .vp-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-sm\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-sm\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-sm\:grid-span-1 { grid-column:span 1 / span 1; } .vp-sm\:grid-span-2 { grid-column:span 2 / span 2; } .vp-sm\:grid-span-3 { grid-column:span 3 / span 3; } .vp-sm\:grid-span-4 { grid-column:span 4 / span 4; } .vp-sm\:grid-span-5 { grid-column:span 5 / span 5; } .vp-sm\:grid-span-6 { grid-column:span 6 / span 6; } .vp-sm\:grid-span-7 { grid-column:span 7 / span 7; } .vp-sm\:grid-span-8 { grid-column:span 8 / span 8; } .vp-sm\:grid-span-9 { grid-column:span 9 / span 9; } .vp-sm\:grid-span-10 { grid-column:span 10 / span 10; } .vp-sm\:grid-span-11 { grid-column:span 11 / span 11; } .vp-sm\:grid-span-12 { grid-column:span 12 / span 12; } }
@media (min-width:768px) { .vp-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-md\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-md\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-md\:field-horizontal>*:not(.label) { grid-column:2; } .vp-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-md\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-md\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-md\:grid-span-1 { grid-column:span 1 / span 1; } .vp-md\:grid-span-2 { grid-column:span 2 / span 2; } .vp-md\:grid-span-3 { grid-column:span 3 / span 3; } .vp-md\:grid-span-4 { grid-column:span 4 / span 4; } .vp-md\:grid-span-5 { grid-column:span 5 / span 5; } .vp-md\:grid-span-6 { grid-column:span 6 / span 6; } .vp-md\:grid-span-7 { grid-column:span 7 / span 7; } .vp-md\:grid-span-8 { grid-column:span 8 / span 8; } .vp-md\:grid-span-9 { grid-column:span 9 / span 9; } .vp-md\:grid-span-10 { grid-column:span 10 / span 10; } .vp-md\:grid-span-11 { grid-column:span 11 / span 11; } .vp-md\:grid-span-12 { grid-column:span 12 / span 12; } }
@media (min-width:1024px) { .vp-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-lg\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-lg\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-lg\:field-horizontal>*:not(.label) { grid-column:2; } .vp-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-lg\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-lg\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-lg\:grid-span-1 { grid-column:span 1 / span 1; } .vp-lg\:grid-span-2 { grid-column:span 2 / span 2; } .vp-lg\:grid-span-3 { grid-column:span 3 / span 3; } .vp-lg\:grid-span-4 { grid-column:span 4 / span 4; } .vp-lg\:grid-span-5 { grid-column:span 5 / span 5; } .vp-lg\:grid-span-6 { grid-column:span 6 / span 6; } .vp-lg\:grid-span-7 { grid-column:span 7 / span 7; } .vp-lg\:grid-span-8 { grid-column:span 8 / span 8; } .vp-lg\:grid-span-9 { grid-column:span 9 / span 9; } .vp-lg\:grid-span-10 { grid-column:span 10 / span 10; } .vp-lg\:grid-span-11 { grid-column:span 11 / span 11; } .vp-lg\:grid-span-12 { grid-column:span 12 / span 12; } }
@media (min-width:1280px) { .vp-xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-xl\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-xl\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-xl\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-xl\:grid-span-12 { grid-column:span 12 / span 12; } }
@media (min-width:1536px) { .vp-2xl\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .vp-2xl\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .vp-2xl\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .vp-2xl\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .vp-2xl\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .vp-2xl\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .vp-2xl\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .vp-2xl\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .vp-2xl\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .vp-2xl\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .vp-2xl\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .vp-2xl\:field-horizontal>*:not(.label) { grid-column:2; } .vp-2xl\:field-vertical { display:flex; flex-direction:column; gap:7px; } .vp-2xl\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .vp-2xl\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .vp-2xl\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .vp-2xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .vp-2xl\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .vp-2xl\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .vp-2xl\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .vp-2xl\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .vp-2xl\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .vp-2xl\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .vp-2xl\:grid-span-1 { grid-column:span 1 / span 1; } .vp-2xl\:grid-span-2 { grid-column:span 2 / span 2; } .vp-2xl\:grid-span-3 { grid-column:span 3 / span 3; } .vp-2xl\:grid-span-4 { grid-column:span 4 / span 4; } .vp-2xl\:grid-span-5 { grid-column:span 5 / span 5; } .vp-2xl\:grid-span-6 { grid-column:span 6 / span 6; } .vp-2xl\:grid-span-7 { grid-column:span 7 / span 7; } .vp-2xl\:grid-span-8 { grid-column:span 8 / span 8; } .vp-2xl\:grid-span-9 { grid-column:span 9 / span 9; } .vp-2xl\:grid-span-10 { grid-column:span 10 / span 10; } .vp-2xl\:grid-span-11 { grid-column:span 11 / span 11; } .vp-2xl\:grid-span-12 { grid-column:span 12 / span 12; } }

/* por CONTAINER — o componente responde ao ESPAÇO EM QUE FOI COLOCADO */
@container aurea (min-width:360px) { .ct-2xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-2xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .ct-2xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-2xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .ct-2xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-2xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-2xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .ct-2xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-2xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-2xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-2xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-2xs\:field-horizontal>*:not(.label) { grid-column:2; } .ct-2xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-2xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-2xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-2xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-2xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .ct-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .ct-2xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .ct-2xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .ct-2xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-2xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-2xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-2xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .ct-2xs\:grid-span-1 { grid-column:span 1 / span 1; } .ct-2xs\:grid-span-2 { grid-column:span 2 / span 2; } .ct-2xs\:grid-span-3 { grid-column:span 3 / span 3; } .ct-2xs\:grid-span-4 { grid-column:span 4 / span 4; } .ct-2xs\:grid-span-5 { grid-column:span 5 / span 5; } .ct-2xs\:grid-span-6 { grid-column:span 6 / span 6; } .ct-2xs\:grid-span-7 { grid-column:span 7 / span 7; } .ct-2xs\:grid-span-8 { grid-column:span 8 / span 8; } .ct-2xs\:grid-span-9 { grid-column:span 9 / span 9; } .ct-2xs\:grid-span-10 { grid-column:span 10 / span 10; } .ct-2xs\:grid-span-11 { grid-column:span 11 / span 11; } .ct-2xs\:grid-span-12 { grid-column:span 12 / span 12; } }
@container aurea (min-width:480px) { .ct-xs\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-xs\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .ct-xs\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-xs\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .ct-xs\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-xs\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-xs\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .ct-xs\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-xs\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-xs\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-xs\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-xs\:field-horizontal>*:not(.label) { grid-column:2; } .ct-xs\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-xs\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-xs\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-xs\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-xs\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .ct-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .ct-xs\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .ct-xs\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .ct-xs\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-xs\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-xs\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-xs\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .ct-xs\:grid-span-1 { grid-column:span 1 / span 1; } .ct-xs\:grid-span-2 { grid-column:span 2 / span 2; } .ct-xs\:grid-span-3 { grid-column:span 3 / span 3; } .ct-xs\:grid-span-4 { grid-column:span 4 / span 4; } .ct-xs\:grid-span-5 { grid-column:span 5 / span 5; } .ct-xs\:grid-span-6 { grid-column:span 6 / span 6; } .ct-xs\:grid-span-7 { grid-column:span 7 / span 7; } .ct-xs\:grid-span-8 { grid-column:span 8 / span 8; } .ct-xs\:grid-span-9 { grid-column:span 9 / span 9; } .ct-xs\:grid-span-10 { grid-column:span 10 / span 10; } .ct-xs\:grid-span-11 { grid-column:span 11 / span 11; } .ct-xs\:grid-span-12 { grid-column:span 12 / span 12; } }
@container aurea (min-width:640px) { .ct-sm\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-sm\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .ct-sm\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-sm\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .ct-sm\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-sm\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-sm\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .ct-sm\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-sm\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-sm\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-sm\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-sm\:field-horizontal>*:not(.label) { grid-column:2; } .ct-sm\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-sm\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-sm\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-sm\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-sm\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .ct-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .ct-sm\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .ct-sm\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .ct-sm\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-sm\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-sm\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-sm\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .ct-sm\:grid-span-1 { grid-column:span 1 / span 1; } .ct-sm\:grid-span-2 { grid-column:span 2 / span 2; } .ct-sm\:grid-span-3 { grid-column:span 3 / span 3; } .ct-sm\:grid-span-4 { grid-column:span 4 / span 4; } .ct-sm\:grid-span-5 { grid-column:span 5 / span 5; } .ct-sm\:grid-span-6 { grid-column:span 6 / span 6; } .ct-sm\:grid-span-7 { grid-column:span 7 / span 7; } .ct-sm\:grid-span-8 { grid-column:span 8 / span 8; } .ct-sm\:grid-span-9 { grid-column:span 9 / span 9; } .ct-sm\:grid-span-10 { grid-column:span 10 / span 10; } .ct-sm\:grid-span-11 { grid-column:span 11 / span 11; } .ct-sm\:grid-span-12 { grid-column:span 12 / span 12; } }
@container aurea (min-width:768px) { .ct-md\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-md\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .ct-md\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-md\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .ct-md\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-md\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-md\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .ct-md\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-md\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-md\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-md\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-md\:field-horizontal>*:not(.label) { grid-column:2; } .ct-md\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-md\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-md\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-md\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-md\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .ct-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .ct-md\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .ct-md\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .ct-md\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-md\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-md\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-md\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .ct-md\:grid-span-1 { grid-column:span 1 / span 1; } .ct-md\:grid-span-2 { grid-column:span 2 / span 2; } .ct-md\:grid-span-3 { grid-column:span 3 / span 3; } .ct-md\:grid-span-4 { grid-column:span 4 / span 4; } .ct-md\:grid-span-5 { grid-column:span 5 / span 5; } .ct-md\:grid-span-6 { grid-column:span 6 / span 6; } .ct-md\:grid-span-7 { grid-column:span 7 / span 7; } .ct-md\:grid-span-8 { grid-column:span 8 / span 8; } .ct-md\:grid-span-9 { grid-column:span 9 / span 9; } .ct-md\:grid-span-10 { grid-column:span 10 / span 10; } .ct-md\:grid-span-11 { grid-column:span 11 / span 11; } .ct-md\:grid-span-12 { grid-column:span 12 / span 12; } }
@container aurea (min-width:1024px) { .ct-lg\:size-xs{--step-h:var(--control-h-xs);--step-fs:var(--text-xs);--step-gap:6px;--step-px:10px;--step-field-px:var(--space-3);--step-select-pe:var(--space-8)} .ct-lg\:size-sm{--step-h:var(--control-h-sm);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-3);--step-field-px:var(--space-3);--step-select-pe:var(--space-8);--step-icon:var(--icon-sm);--step-qr:7.5rem;--step-avatar-fs:var(--text-xs);--step-avatar:var(--space-8)} .ct-lg\:size-md{--step-h:var(--control-h-md);--step-fs:var(--text-sm);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-3);--step-select-pe:38px;--step-icon:var(--icon-md);--step-qr:10rem;--step-avatar-fs:var(--text-sm);--step-avatar:var(--space-10)} .ct-lg\:size-lg{--step-h:var(--control-h-lg);--step-fs:var(--text-base);--step-gap:8px;--step-px:var(--space-4);--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-lg);--step-qr:15rem;--step-avatar-fs:var(--text-base);--step-avatar:var(--space-12)} .ct-lg\:size-xl{--step-h:var(--control-h-xl);--step-fs:var(--text-base);--step-gap:10px;--step-px:26px;--step-field-px:var(--space-4);--step-select-pe:calc(var(--space-10) + var(--space-1));--step-icon:var(--icon-xl)} .ct-lg\:btn-group-vertical { flex-direction:column; align-items:stretch; --btn-group-h:0; --btn-group-v:var(--radius-full); --btn-group-sep-i:25%; --btn-group-sep-b:0; --btn-group-sep-w:50%; --btn-group-sep-h:var(--border-width); --btn-group-bi:var(--border-width); --btn-group-bb:0; } .ct-lg\:btn-group-horizontal { flex-direction:row; align-items:center; --btn-group-h:var(--radius-full); --btn-group-v:0; --btn-group-sep-i:0; --btn-group-sep-b:25%; --btn-group-sep-w:var(--border-width); --btn-group-sep-h:50%; --btn-group-bi:0; --btn-group-bb:var(--border-width); } .ct-lg\:range-vertical { writing-mode:vertical-rl; direction:rtl; inline-size:var(--range-vertical-size,10rem); width:auto; } .ct-lg\:range-horizontal { writing-mode:horizontal-tb; direction:inherit; inline-size:auto; width:100%; } .ct-lg\:field-horizontal { display:grid; grid-template-columns:minmax(0,var(--field-label-width,12rem)) minmax(0,1fr); align-items:center; column-gap:var(--space-4); row-gap:var(--space-1); } .ct-lg\:field-horizontal>.label { grid-column:1; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--space-05); } .ct-lg\:field-horizontal>*:not(.label) { grid-column:2; } .ct-lg\:field-vertical { display:flex; flex-direction:column; gap:7px; } .ct-lg\:field-vertical>.label { flex-direction:row; align-items:stretch; justify-content:space-between; gap:12px; } .ct-lg\:input-group-addon-inline { inline-size:auto; justify-content:normal; } .ct-lg\:input-group-addon-inline.input-group-addon-start { padding-inline:var(--space-3); } .ct-lg\:input-group-addon-inline.input-group-addon-end { padding-inline-end:var(--space-3); } .ct-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .btn:last-child)) { padding-inline-end:var(--space-1); } .ct-lg\:input-group-addon-inline.input-group-addon-end:where(:has(> .kbd:last-child)) { padding-inline-end:var(--space-2); } .ct-lg\:input-group-addon-inline.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:0; } .ct-lg\:input-group-addon-block { inline-size:100%; justify-content:flex-start; } .ct-lg\:input-group-addon-block.input-group-addon-start { padding:var(--space-2) var(--space-3) 0; } .ct-lg\:input-group-addon-block.input-group-addon-end { padding:0 var(--space-3) var(--space-2); } .ct-lg\:input-group-addon-block.input-group-addon-start + :is(.input,.select,.textarea) { padding-inline-start:var(--step-field-px,var(--space-3)); } .ct-lg\:grid-span-1 { grid-column:span 1 / span 1; } .ct-lg\:grid-span-2 { grid-column:span 2 / span 2; } .ct-lg\:grid-span-3 { grid-column:span 3 / span 3; } .ct-lg\:grid-span-4 { grid-column:span 4 / span 4; } .ct-lg\:grid-span-5 { grid-column:span 5 / span 5; } .ct-lg\:grid-span-6 { grid-column:span 6 / span 6; } .ct-lg\:grid-span-7 { grid-column:span 7 / span 7; } .ct-lg\:grid-span-8 { grid-column:span 8 / span 8; } .ct-lg\:grid-span-9 { grid-column:span 9 / span 9; } .ct-lg\:grid-span-10 { grid-column:span 10 / span 10; } .ct-lg\:grid-span-11 { grid-column:span 11 / span 11; } .ct-lg\:grid-span-12 { grid-column:span 12 / span 12; } }
/* <<< fim da camada responsiva >>> */
}