/* ===== Crew27 component styles =====
   Every value is a token. No hex, no brand name, no hue, no weight, no radius number in this file.
   The brand arrives as CSS variables (scales, radius-base, fonts, weights, case, icon stroke) from
   tokens.css for the default brand and from the brand blocks at the end of this file for the others.
   Components read ROLES (surface, ink, action...) and RADIUS STEPS (sm, md, lg), never a scale step. */

/* Derived per scope. A var() resolves on the element where it is declared, so these are declared on every
   element that can carry a brand or a theme; a nested brand then recomputes them from its own radius-base. */
:root, [data-theme], [data-brand] {
  --radius-sm: calc(var(--radius-base) * 0.5);
  --radius-md: var(--radius-base);
  --radius-lg: calc(var(--radius-base) * 1.5);
  --radius-xl: calc(var(--radius-base) * 2);
  --font-label: var(--font-body); --font-button: var(--font-body); --font-caption: var(--font-body);
}
/* marca padrão: label, button e caption usam a família body */

[class^="c27-"], [class*=" c27-"] { box-sizing: border-box; }
[class^="c27-"]:focus-visible, [class*=" c27-"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.c27-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Type style classes (from tokens.json) follow the brand's weight and case rules. */
.display-xl, .display-lg, .display-md, .heading-lg, .heading-md, .heading-sm { font-weight: var(--heading-weight); text-transform: var(--heading-case); }
.body-lg, .body, .body-sm { font-weight: var(--body-weight); }
.label { font-family: var(--font-label); font-weight: var(--label-weight); text-transform: var(--label-case); letter-spacing: var(--label-tracking); }
.button { font-family: var(--font-button); font-weight: var(--button-weight); text-transform: var(--button-case); letter-spacing: var(--button-tracking); }
.caption { font-family: var(--font-caption); font-weight: var(--caption-weight); text-transform: var(--caption-case); letter-spacing: var(--caption-tracking); }
.code { font-weight: var(--mono-weight); }

/* ---- Icon */
.c27-icon { flex: none; display: block; }

/* ---- Button and IconButton: one color/fill engine, roles only */
.c27-btn, .c27-iconbtn {
  --b-bg: var(--surface-inverse); --b-fg: var(--ink-inverse);
  --b-hover: color-mix(in srgb, var(--b-bg) 92%, var(--b-fg)); --b-active: color-mix(in srgb, var(--b-bg) 84%, var(--b-fg));
  --b-soft-bg: var(--surface-sunken); --b-soft-fg: var(--ink);
  --b-soft-hover: color-mix(in srgb, var(--b-soft-bg) 88%, var(--b-soft-fg)); --b-soft-active: color-mix(in srgb, var(--b-soft-bg) 78%, var(--b-soft-fg));
  --b-text: var(--ink); --b-line: var(--line-control);
}
:is(.c27-btn, .c27-iconbtn)[data-variant="primary"] { --b-bg: var(--action); --b-fg: var(--on-action); --b-hover: var(--action-hover); --b-active: var(--action-active); --b-soft-bg: var(--action-soft); --b-soft-fg: var(--on-action-soft); --b-text: var(--on-action-soft); --b-line: var(--action); }
:is(.c27-btn, .c27-iconbtn)[data-variant="secondary"] { --b-bg: var(--accent-solid); --b-fg: var(--on-accent-solid); --b-soft-bg: var(--accent-soft); --b-soft-fg: var(--on-accent-soft); --b-text: var(--on-accent-soft); --b-line: var(--accent); }
:is(.c27-btn, .c27-iconbtn)[data-variant="success"] { --b-bg: var(--success-solid); --b-fg: var(--on-success-solid); --b-soft-bg: var(--success-soft); --b-soft-fg: var(--on-success-soft); --b-text: var(--on-success-soft); --b-line: var(--success); }
:is(.c27-btn, .c27-iconbtn)[data-variant="alert"] { --b-bg: var(--alert); --b-fg: var(--on-alert); --b-soft-bg: var(--alert-soft); --b-soft-fg: var(--on-alert-soft); --b-text: var(--on-alert-soft); --b-line: var(--alert); }
:is(.c27-btn, .c27-iconbtn)[data-variant="danger"] { --b-bg: var(--danger-solid); --b-fg: var(--on-danger-solid); --b-soft-bg: var(--danger-soft); --b-soft-fg: var(--on-danger-soft); --b-text: var(--on-danger-soft); --b-line: var(--danger); }
:is(.c27-btn, .c27-iconbtn)[data-variant="info"] { --b-bg: var(--info-solid); --b-fg: var(--on-info-solid); --b-soft-bg: var(--info-soft); --b-soft-fg: var(--on-info-soft); --b-text: var(--on-info-soft); --b-line: var(--info); }

.c27-btn, .c27-iconbtn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; border: var(--border-control) solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
:is(.c27-btn, .c27-iconbtn)[data-fill="solid"] { background: var(--b-bg); color: var(--b-fg); }
:is(.c27-btn, .c27-iconbtn)[data-fill="tonal"] { background: var(--b-soft-bg); color: var(--b-soft-fg); }
:is(.c27-btn, .c27-iconbtn)[data-fill="outline"] { background: transparent; color: var(--b-text); border-color: var(--b-line); }
:is(.c27-btn, .c27-iconbtn)[data-fill="ghost"] { background: transparent; color: var(--b-text); }

:is(.c27-btn, .c27-iconbtn)[data-fill="solid"]:not([disabled]):not([aria-disabled="true"]):is(:hover, [data-state="hover"]) { background: var(--b-hover); }
:is(.c27-btn, .c27-iconbtn)[data-fill="tonal"]:not([disabled]):not([aria-disabled="true"]):is(:hover, [data-state="hover"]) { background: var(--b-soft-hover); }
:is(.c27-btn, .c27-iconbtn):is([data-fill="outline"], [data-fill="ghost"]):not([disabled]):not([aria-disabled="true"]):is(:hover, [data-state="hover"]) { background: var(--b-soft-bg); }
:is(.c27-btn, .c27-iconbtn)[data-fill="solid"]:not([disabled]):not([aria-disabled="true"]):is(:active, [data-state="pressed"]) { background: var(--b-active); }
:is(.c27-btn, .c27-iconbtn)[data-fill="tonal"]:not([disabled]):not([aria-disabled="true"]):is(:active, [data-state="pressed"]) { background: var(--b-soft-active); }
:is(.c27-btn, .c27-iconbtn):is([data-fill="outline"], [data-fill="ghost"]):not([disabled]):not([aria-disabled="true"]):is(:active, [data-state="pressed"]) { background: var(--b-soft-hover); }
:is(.c27-btn, .c27-iconbtn):not([disabled]):not([aria-disabled="true"]):is(:active, [data-state="pressed"]) { transform: scale(0.97); }
:is(.c27-btn, .c27-iconbtn)[data-state="focus"] { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.c27-btn, .c27-iconbtn)[disabled], :is(.c27-btn, .c27-iconbtn)[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
:is(.c27-btn, .c27-iconbtn)[aria-busy="true"] { cursor: progress; opacity: 1; }

.c27-btn { gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-3); font: var(--button-weight) 14px/20px var(--font-button); text-transform: var(--button-case); letter-spacing: var(--button-tracking); }
.c27-btn--sm { height: var(--control-sm); padding: 0 var(--space-2); }
.c27-btn--lg { height: var(--control-lg); padding: 0 calc(var(--space-3) + 2px); font-size: 16px; line-height: 24px; }
.c27-btn--block { display: flex; width: 100%; }

.c27-iconbtn { width: var(--control-md); height: var(--control-md); padding: 0; }
.c27-iconbtn--xs { width: var(--control-xs); height: var(--control-xs); }
.c27-iconbtn--sm { width: var(--control-sm); height: var(--control-sm); }
.c27-iconbtn--lg { width: var(--control-lg); height: var(--control-lg); }

.c27-spin { width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: c27-spin 0.7s linear infinite; }
@keyframes c27-spin { to { transform: rotate(360deg); } }

/* ---- Fields */
.c27-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.c27-label { font: var(--label-weight) 14px/20px var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking); color: var(--ink); }
.c27-req { color: var(--on-danger-soft); }
.c27-msg { display: flex; align-items: flex-start; gap: var(--space-1); margin: 0; font: var(--body-weight) 13px/18px var(--font-body); color: var(--ink-soft); }
.c27-msg--error { color: var(--on-danger-soft); font-weight: var(--label-weight); }
.c27-msg--error .c27-icon { margin-top: 1px; }
.c27-inputwrap, .c27-selectwrap { position: relative; display: flex; align-items: center; }
.c27-input { width: 100%; height: var(--control-md); padding: 0 var(--space-3); background: transparent; color: var(--ink); border: var(--border-control) solid var(--line-control); border-radius: var(--radius-md); font: var(--body-weight) 16px/24px var(--font-body); transition: border-color var(--duration-fast) var(--ease-standard); }
.c27-input::placeholder { color: var(--ink-faint); }
.c27-input:hover { border-color: var(--ink-soft); }
.c27-input[aria-invalid="true"] { border-color: var(--danger); }
.c27-input:disabled { background: var(--surface-sunken); color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; }
.c27-input--icon { padding-left: calc(var(--space-3) + 20px + var(--space-2)); }
.c27-inputicon, .c27-selecticon { position: absolute; color: var(--ink-soft); pointer-events: none; }
.c27-inputicon { left: var(--space-3); }
.c27-selecticon { right: var(--space-3); }
.c27-select { appearance: none; -webkit-appearance: none; display: flex; align-items: center; text-align: left; padding-right: calc(var(--space-3) + 20px + var(--space-2)); cursor: pointer; }
.c27-select__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c27-select[data-placeholder="true"] { color: var(--ink-faint); }
.c27-select:disabled { cursor: not-allowed; }
.c27-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.c27-selecticon { transition: transform var(--duration-base) var(--ease-standard); }
.c27-selecticon--open { transform: rotate(180deg); }
.c27-select__panel { position: absolute; left: 0; right: 0; z-index: var(--z-dropdown); box-sizing: border-box; max-height: 280px; overflow-y: auto; margin: 0; padding: var(--space-1); list-style: none; display: flex; flex-direction: column; gap: 2px; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); font: var(--body-weight) 16px/24px var(--font-body); }
.c27-select__panel[data-placement="bottom"] { top: calc(100% + var(--space-1)); transform-origin: top center; }
.c27-select__panel[data-placement="top"] { bottom: calc(100% + var(--space-1)); transform-origin: bottom center; }
.c27-select__panel { opacity: 0; pointer-events: none; transform: translateY(calc(var(--space-1) * -1)) scale(0.98); transition: opacity calc(var(--duration-base) * 0.75) var(--ease-exit), transform calc(var(--duration-base) * 0.75) var(--ease-exit); }
.c27-select__panel[data-placement="top"] { transform: translateY(var(--space-1)) scale(0.98); }
.c27-select__panel[data-visible="true"] { opacity: 1; pointer-events: auto; transform: none; transition: opacity var(--duration-base) var(--ease-gently), transform var(--duration-base) var(--ease-gently); }
.c27-select__panel--search { gap: 0; overflow: hidden; max-height: none; }
.c27-select__search { display: flex; align-items: center; gap: var(--space-2); height: var(--control-sm); margin: 0 0 var(--space-1); padding: 0 var(--space-2); color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.c27-select__search:focus-within { border-bottom-color: var(--action); }
.c27-select__q { flex: 1; min-width: 0; padding: 0; background: transparent; color: var(--ink); border: 0; outline: 0; -webkit-appearance: none; appearance: none; font: var(--body-weight) 14px/20px var(--font-body); }
.c27-select__q:focus-visible { outline: 0; }   /* the line under the field shows the focus */
.c27-select__q::-webkit-search-cancel-button, .c27-select__q::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.c27-select__list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.c27-select__empty { padding: var(--space-3); color: var(--ink-soft); font: var(--body-weight) 14px/20px var(--font-body); text-align: center; }
.c27-select__opt { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-md); cursor: pointer; }
.c27-select__label { flex: 1; min-width: 0; }
.c27-select__opt[data-active="true"] { background: var(--surface-sunken); }
.c27-select__opt[aria-selected="true"] { background: var(--action-soft); color: var(--on-action-soft); font-weight: var(--label-weight); }
.c27-select__opt[aria-disabled="true"] { color: var(--ink-faint); cursor: not-allowed; background: transparent; }
/* Select type="multiselect": chips inside the field, check boxes in the list */
.c27-msel { position: relative; overflow: hidden; flex-wrap: nowrap; gap: var(--space-1); cursor: text; }   /* one line: chips that do not fit become "mais N..." */
.c27-msel:has(.c27-msel__q:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.c27-msel[data-disabled="true"] { background: var(--surface-sunken); color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; }
.c27-msel__chip { display: inline-flex; flex: 0 1 auto; min-width: 0; align-items: center; gap: var(--space-1); max-width: 100%; height: 24px; padding: 0 var(--space-1) 0 var(--space-2); border-radius: var(--radius-sm); background: var(--action-soft); color: var(--on-action-soft); font: var(--label-weight) 14px/20px var(--font-body); }
.c27-msel[data-disabled="true"] .c27-msel__chip { padding-right: var(--space-2); background: var(--surface-sunken); color: var(--ink-faint); border: 1px solid var(--line); }
.c27-msel__chiptext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c27-msel__x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.c27-msel__x:hover { background: var(--action); color: var(--on-action); }
.c27-msel__more { flex: none; color: var(--ink-soft); font: var(--body-weight) 14px/20px var(--font-body); white-space: nowrap; }
.c27-msel__meas { position: absolute; left: 0; top: 0; width: max-content; height: 0; display: flex; gap: var(--space-1); overflow: hidden; visibility: hidden; pointer-events: none; white-space: nowrap; }
.c27-msel__meas > * { flex: none; max-width: none; }
.c27-msel__q { flex: 1 1 0; min-width: 0; height: 24px; padding: 0; background: transparent; color: inherit; border: 0; outline: 0; -webkit-appearance: none; appearance: none; font: var(--body-weight) 16px/24px var(--font-body); }
.c27-msel__q:focus-visible { outline: 0; }   /* the ring is drawn around the whole field */
.c27-msel__q::placeholder { color: var(--ink-faint); }
.c27-msel__q[readonly] { caret-color: transparent; cursor: pointer; }
.c27-msel__q:disabled { cursor: not-allowed; }
.c27-select__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; box-sizing: border-box; border: var(--border-control) solid var(--line-control); border-radius: var(--radius-sm); color: var(--on-action); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.c27-select__opt[aria-selected="true"] .c27-select__box { background: var(--action); border-color: var(--action); }
.c27-select__panel--multi .c27-select__opt[aria-selected="true"] { background: transparent; color: inherit; font-weight: inherit; }
.c27-select__panel--multi .c27-select__opt[data-active="true"] { background: var(--surface-sunken); }
.c27-select__panel--multi .c27-select__opt[aria-disabled="true"] .c27-select__box { border-color: var(--line); }
.c27-textarea { height: auto; min-height: 96px; padding: var(--space-3); resize: vertical; }

.c27-choicewrap { display: flex; flex-direction: column; gap: var(--space-1); align-items: flex-start; }
.c27-choicewrap__msg { padding-left: calc(20px + var(--space-3)); }
.c27-choice { display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font: var(--body-weight) 16px/24px var(--font-body); color: var(--ink); }
.c27-choice__text { display: flex; flex-direction: column; }
.c27-choice__hint { font-size: 13px; line-height: 18px; color: var(--ink-soft); }
.c27-choice--disabled { cursor: not-allowed; color: var(--ink-faint); }
.c27-check, .c27-radio { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 2px 0 0; display: inline-grid; place-content: center; background: var(--surface-raised); border: var(--border-control) solid var(--line-control); cursor: pointer; }
.c27-check { border-radius: var(--radius-sm); }
.c27-radio { border-radius: var(--radius-full); }
.c27-check:hover, .c27-radio:hover { border-color: var(--ink-soft); }
.c27-check:checked { background: var(--action); border-color: var(--action); }
.c27-check:checked::after { content: ""; width: 10px; height: 5px; margin-top: -2px; border-left: 2px solid var(--on-action); border-bottom: 2px solid var(--on-action); transform: rotate(-45deg); }
.c27-check:indeterminate:not(:checked) { background: var(--action); border-color: var(--action); }
.c27-check:indeterminate:not(:checked)::after { content: ""; width: 10px; height: 2px; background: var(--on-action); border-radius: 1px; }
.c27-radio:checked { border-width: 6px; border-color: var(--action); }
.c27-check[aria-invalid="true"], .c27-radio[aria-invalid="true"] { border-color: var(--danger); }
.c27-check[aria-invalid="true"]:hover, .c27-radio[aria-invalid="true"]:hover { border-color: var(--danger); }
.c27-check[aria-invalid="true"]:checked { background: var(--danger); }
.c27-check:disabled, .c27-radio:disabled { background: var(--surface-sunken); border-color: var(--line); cursor: not-allowed; }
.c27-check:disabled:checked::after { border-color: var(--ink-faint); }
.c27-radio:disabled:checked { border-color: var(--ink-faint); }
.c27-toggle { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); background: var(--ink-faint); cursor: pointer; transition: background var(--duration-base) var(--ease-standard); }
.c27-toggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--surface-raised); transition: transform var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard); }
.c27-toggle:checked { background: var(--action); }
.c27-toggle:checked::before { transform: translateX(20px); background: var(--on-action); }
.c27-toggle:disabled { background: var(--line); cursor: not-allowed; }
.c27-toggle:disabled::before { background: var(--surface-sunken); }

/* ---- Tag */
.c27-tag { --tag-bg: var(--surface-sunken); --tag-fg: var(--ink-soft); display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); background: var(--tag-bg); color: var(--tag-fg); font: var(--caption-weight) 12px/16px var(--font-caption); letter-spacing: var(--caption-tracking); text-transform: var(--caption-case); white-space: nowrap; }

/* ---- Card */
.c27-card { box-sizing: border-box; padding: var(--space-5); background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); font: var(--body-weight) 16px/24px var(--font-body); transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.c27-card:hover, .c27-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-control); }
.c27-card[data-clickable="true"] { cursor: pointer; }
a.c27-card { display: block; color: var(--ink); text-decoration: none; }

/* ---- Divider */
.c27-divider { border: 0; background: var(--line); height: 1px; width: 100%; margin: 0; }
.c27-divider--vertical { width: 1px; height: auto; align-self: stretch; }

/* ---- Banner */
.c27-banner { --bn-bg: var(--surface-sunken); --bn-fg: var(--ink); --bn-line: var(--line-control); display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--bn-bg); color: var(--bn-fg); border: 1px solid var(--bn-line); border-radius: var(--radius-lg); font: var(--body-weight) 14px/20px var(--font-body); }
.c27-banner-wrap { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows calc(var(--duration-base) * 0.75) var(--ease-inout), opacity calc(var(--duration-base) * 0.75) var(--ease-exit); }
.c27-banner-wrap[data-visible="true"] { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--duration-base) var(--ease-inout), opacity var(--duration-base) var(--ease-gently); }
.c27-banner-wrap__in { min-height: 0; overflow: hidden; }
.c27-banner > .c27-icon { margin-top: 0; }
.c27-banner__text { flex: 1; min-width: 0; }
.c27-banner__title { margin: 0; font-weight: var(--label-weight); }
.c27-banner__body { margin: 0; }
.c27-banner__title + .c27-banner__body { margin-top: var(--space-1); }
.c27-banner__action { flex: none; }

/* ---- Tabs */
.c27-tabs__list { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
.c27-tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-md); margin-bottom: -1px; padding: 0 var(--space-4); background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--ink-soft); font: var(--label-weight) 14px/20px var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking); cursor: pointer; white-space: nowrap; }
.c27-tab:focus-visible { outline-offset: -2px; }   /* the list clips vertically, so the ring stays inside */
.c27-tab:hover { color: var(--ink); background: var(--surface-sunken); }
.c27-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--action); }
.c27-tab[disabled] { color: var(--ink-faint); cursor: not-allowed; background: transparent; }
.c27-tabs__panel { padding: var(--space-4) 0; font: var(--body-weight) 16px/24px var(--font-body); color: var(--ink); }

/* ---- Modal */
.c27-scrim { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--scrim); opacity: 0; transition: opacity calc(var(--duration-slow) * 0.75) var(--ease-exit); }
.c27-scrim[data-visible="true"] { opacity: 1; transition: opacity var(--duration-slow) var(--ease-gently); }
.c27-scrim--inline { position: relative; inset: auto; z-index: auto; min-height: 320px; }
.c27-modal { position: relative; box-sizing: border-box; padding: var(--space-6); width: 100%; max-width: 480px; max-height: 100%; overflow: auto; font: var(--body-weight) 16px/24px var(--font-body); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); opacity: 0; transform: translateY(var(--space-2)) scale(0.96); transition: opacity calc(var(--duration-slow) * 0.75) var(--ease-exit), transform calc(var(--duration-slow) * 0.75) var(--ease-exit); }
.c27-scrim[data-visible="true"] .c27-modal { opacity: 1; transform: none; transition: opacity var(--duration-slow) var(--ease-gently), transform var(--duration-slow) var(--ease-gently); }
.c27-modal[data-size="sm"] { max-width: 400px; }
.c27-modal[data-size="lg"] { max-width: 720px; }
.c27-modal[data-size="xl"] { max-width: 960px; }
.c27-modal__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; }

/* ---- Tooltip */
.c27-tip { position: relative; display: inline-flex; }
.c27-tip__bubble { --tip-shift: var(--space-1); position: absolute; left: 50%; bottom: calc(100% + var(--space-2)); transform: translate(-50%, var(--tip-shift)); z-index: var(--z-tooltip); max-width: 240px; width: max-content; padding: var(--space-1) var(--space-2); background: var(--surface-inverse); color: var(--ink-inverse); border-radius: var(--radius-sm); font: var(--label-weight) 12px/16px var(--font-body); opacity: 0; pointer-events: none; transition: opacity calc(var(--duration-base) * 0.75) var(--ease-exit), transform calc(var(--duration-base) * 0.75) var(--ease-exit); }
.c27-tip--bottom .c27-tip__bubble { --tip-shift: calc(var(--space-1) * -1); bottom: auto; top: calc(100% + var(--space-2)); }
.c27-tip:hover .c27-tip__bubble, .c27-tip:focus-within .c27-tip__bubble, .c27-tip[data-open="true"] .c27-tip__bubble { --tip-shift: 0px; opacity: 1; transition: opacity var(--duration-base) var(--ease-gently), transform var(--duration-base) var(--ease-gently); }

/* ---- Table. The header is dark in both themes: surface-inverse with ink-inverse, and in dark (where surface-inverse turns light) surface-sunken with ink, the same rule as the black Sidebar. The body stays surface-raised. */
.c27-tablewrap { --th-bg: var(--surface-inverse); --th-fg: var(--ink-inverse); position: relative; overflow: auto; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
[data-theme="dark"] .c27-tablewrap { --th-bg: var(--surface-sunken); --th-fg: var(--ink); }
.c27-table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--body-weight) 14px/20px var(--font-body); color: var(--ink); }
.c27-table th { padding: var(--space-3) var(--space-4); background: var(--th-bg); color: var(--th-fg); font: var(--caption-weight) 12px/16px var(--font-caption); letter-spacing: var(--caption-tracking); text-transform: var(--caption-case); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.c27-table th, .c27-table td { box-sizing: border-box; }
.c27-table td, .c27-table tbody th { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); transition: background var(--duration-fast) var(--ease-standard); }
.c27-table tbody th { background: transparent; color: var(--ink); font: var(--label-weight) 14px/20px var(--font-body); letter-spacing: normal; text-transform: none; white-space: normal; }
.c27-table--dense th, .c27-table--dense td { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.c27-table tbody tr:last-child > * { border-bottom: 0; }
.c27-table tbody tr:not(.c27-tbl__skel):not(.c27-tbl__state):not([data-selected="true"]):hover > * { background: var(--surface-sunken); }
.c27-table tbody tr[data-selected="true"] > * { background: var(--action-soft); color: var(--on-action-soft); }
.c27-table tbody tr[data-clickable="true"] { cursor: pointer; }
.c27-table tbody tr[data-clickable="true"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.c27-tablewrap[data-sticky="true"] thead th { position: sticky; top: 0; z-index: 1; }
.c27-tablewrap :focus-visible { outline-color: var(--focus); }
.c27-table thead :focus-visible { outline-color: var(--th-fg); }
.c27-table thead .c27-check { background: var(--surface-raised); }
.c27-tbl__num { font-variant-numeric: tabular-nums; }
.c27-tbl__trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c27-table th.c27-tbl__sel, .c27-table td.c27-tbl__sel { width: 1%; padding-right: 0; }
.c27-tbl__sel .c27-check { margin: 0; vertical-align: middle; }
.c27-table th.c27-tbl__act, .c27-table td.c27-tbl__act { width: 1%; padding-left: var(--space-2); text-align: right; white-space: nowrap; }
.c27-tbl__act .c27-pop { display: inline-flex; }
/* sorting: the arrow is hidden with no order and shows on hover and focus */
.c27-th__btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; margin: 0; background: none; border: 0; border-radius: var(--radius-sm); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.c27-table th[data-align="right"] .c27-th__btn { flex-direction: row-reverse; }
.c27-th__arrow { flex: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.c27-table th[data-sorted="true"] .c27-th__arrow, .c27-th__btn:hover .c27-th__arrow, .c27-th__btn:focus-visible .c27-th__arrow { opacity: 1; }
/* editing: the cell is a button with a pencil; the field fades in */
.c27-tbl__cell { display: inline-flex; align-items: center; gap: var(--space-2); max-width: calc(100% + var(--space-4)); margin: calc(var(--space-1) * -1) calc(var(--space-2) * -1); padding: var(--space-1) var(--space-2); background: none; border: 0; border-radius: var(--radius-sm); color: inherit; font: inherit; text-align: inherit; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard); }
.c27-tbl__cell[data-align="right"] { flex-direction: row-reverse; }
.c27-tbl__cell:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.c27-tbl__celltext { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c27-tbl__pencil { flex: none; opacity: 0; color: var(--ink-soft); transition: opacity var(--duration-fast) var(--ease-standard); }
.c27-tbl__cell:hover .c27-tbl__pencil, .c27-tbl__cell:focus-visible .c27-tbl__pencil { opacity: 1; }
/* The field is laid over the cell (the cell keeps its size, so nothing moves): same width as the cell, with a floor so a short number still fits what is typed. Right aligned cells grow to the left. */
.c27-tbl__editing { position: relative; overflow: visible; }
.c27-tbl__edit { --ed-in: calc(var(--space-4) - var(--space-2) - 1px); position: absolute; z-index: 2; top: 50%; left: var(--ed-in); width: calc(100% - 2 * var(--ed-in)); min-width: calc(7ch + var(--space-4) + 2px); height: var(--control-sm); transform: translateY(-50%); animation: c27-tbl-fade var(--duration-fast) var(--ease-standard); }
.c27-tbl__edit[data-align="right"] { left: auto; right: var(--ed-in); }
.c27-tbl__edit[data-align="right"] .c27-tbl__editor { text-align: right; }
.c27-tbl__edit .c27-msg { position: absolute; z-index: 1; top: calc(100% + var(--space-1)); left: 0; width: max-content; max-width: 260px; box-sizing: border-box; padding: var(--space-1) var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: left; white-space: normal; animation: c27-tbl-fade var(--duration-fast) var(--ease-standard); }
.c27-tbl__edit .c27-msg--error { border-color: var(--danger); }
.c27-tbl__edit[data-align="right"] .c27-msg { left: auto; right: 0; }
.c27-table tbody tr:last-child .c27-tbl__edit .c27-msg { top: auto; bottom: calc(100% + var(--space-1)); }
.c27-tbl__editor { width: 100%; height: var(--control-sm); box-sizing: border-box; padding: 0 var(--space-2); background: var(--surface-raised); font: var(--body-weight) 14px/20px var(--font-body); }
select.c27-tbl__editor { appearance: auto; -webkit-appearance: menulist; padding: 0 var(--space-1); }
.c27-tbl__editor[readonly], .c27-tbl__editor:disabled { color: var(--ink-soft); }
@keyframes c27-tbl-fade { from { opacity: 0; } to { opacity: 1; } }
/* states */
.c27-tbl__skelcell { display: flex; align-items: center; min-height: 20px; }
.c27-tbl__skelcell[data-align="right"] { justify-content: flex-end; }
.c27-tbl__skelcell[data-align="center"] { justify-content: center; }
.c27-table td.c27-tbl__statecell { padding: 0; }

/* ---- Avatar */
.c27-avatar { --av: 36px; box-sizing: border-box; display: inline-grid; place-content: center; flex: none; width: var(--av); height: var(--av); border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-soft); font: var(--label-weight) calc(var(--av) * 0.38)/1 var(--font-body); overflow: hidden; }
.c27-avatar[data-shape="square"] { border-radius: var(--radius-md); }
.c27-avatar--sm { --av: 28px; }
.c27-avatar--lg { --av: 48px; }
.c27-avatar { position: relative; }
.c27-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Badge */
.c27-badge { --bd-bg: var(--badge-danger); --bd-fg: var(--on-badge-danger); --bd-h: 20px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: var(--bd-h); height: var(--bd-h); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--bd-bg); color: var(--bd-fg); font: var(--heading-weight) 12px/1 var(--font-heading); font-variant-numeric: tabular-nums; text-transform: var(--heading-case); white-space: nowrap; vertical-align: middle; opacity: 0; transition: opacity calc(var(--duration-fast)) var(--ease-exit); }
.c27-badge[data-visible="true"] { opacity: 1; transition: opacity var(--duration-fast) var(--ease-gently); }
.c27-badge[data-tone="primary"] { --bd-bg: var(--badge-action); --bd-fg: var(--on-badge-action); }
.c27-badge[data-size="sm"] { --bd-h: 16px; }
.c27-badge[data-dot="true"] { --bd-h: 10px; min-width: 0; width: var(--bd-h); padding: 0; }
.c27-badge[data-dot="true"][data-size="sm"] { --bd-h: 8px; }
/* anchored: the corner of the child sits at the center of the badge, and a ring in the surface color separates it from what is behind */
.c27-badgewrap { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.c27-badge--anchored { --bd-ring: var(--bd-surface, var(--surface)); position: absolute; top: 0; right: 0; transform: translate(50%, -50%); box-shadow: 0 0 0 2px var(--bd-ring); }
.c27-paper, .c27-modal, .c27-drawer, .c27-sidebar, .c27-topbar { --bd-surface: var(--surface-raised); }
.c27-paper[data-variant="sunken"] { --bd-surface: var(--surface-sunken); }
.c27-paper[data-variant="outlined"] { --bd-surface: var(--surface); }
.c27-sidebar[data-color="black"] { --bd-surface: var(--sb-bg); }

/* ---- ProgressBar */
.c27-progress { display: flex; flex-direction: column; gap: var(--space-1); }
.c27-progress__head { display: flex; justify-content: space-between; font: var(--label-weight) 14px/20px var(--font-label); text-transform: var(--label-case); letter-spacing: var(--label-tracking); color: var(--ink); }
.c27-progress__head span:last-child { color: var(--ink-soft); font-weight: var(--body-weight); text-transform: none; letter-spacing: 0; }
.c27-progress__track { height: 8px; background: var(--surface-sunken); border-radius: var(--radius-full); overflow: hidden; }
.c27-progress__bar { --bar: var(--action); height: 100%; background: var(--bar); border-radius: var(--radius-full); transition: width var(--duration-slow) var(--ease-inout); }
.c27-progress__bar[data-indeterminate="true"] { width: 40%; transition: none; animation: c27-indeterminate 1.4s var(--ease-inout) infinite; }
@keyframes c27-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes c27-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }


/* ===== Containers. Roles only: surface*, line*, ink*, scrim, shadow-*, radius-*, space-*. */
.c27-paper { background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-lg); min-width: 0; }
.c27-paper[data-variant="raised"] { border: 1px solid var(--line); }
.c27-paper[data-variant="outlined"] { background: transparent; border: 1px solid var(--line-control); }
.c27-paper[data-variant="sunken"] { background: var(--surface-sunken); border: 1px solid transparent; }
.c27-paper[data-elevation="0"] { box-shadow: none; }
.c27-paper[data-elevation="1"] { box-shadow: var(--shadow-1); }
.c27-paper[data-elevation="2"] { box-shadow: var(--shadow-2); }
.c27-paper[data-elevation="3"] { box-shadow: var(--shadow-3); }
.c27-paper[data-pad="sm"] { padding: var(--space-3); }
.c27-paper[data-pad="md"] { padding: var(--space-5); }
.c27-paper[data-pad="lg"] { padding: var(--space-8); }

.c27-scrim--drawer { padding: 0; align-items: stretch; justify-content: flex-end; }
.c27-scrim--drawer[data-side="left"] { justify-content: flex-start; }
.c27-scrim--drawer[data-side="bottom"] { align-items: flex-end; justify-content: stretch; }
.c27-scrim--drawer.c27-scrim--inline { min-height: 360px; overflow: hidden; }
/* Inline, the scrim has no fixed height (only a min-height), so height: 100% cannot resolve and the drawer stopped short. auto lets align-items: stretch fill it. */
.c27-scrim--drawer.c27-scrim--inline:not([data-side="bottom"]) .c27-drawer { height: auto; }
.c27-drawer { display: flex; flex-direction: column; width: 100%; max-width: 400px; height: 100%; background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-3); outline: none; transform: translateX(100%); transition: transform calc(var(--duration-slow) * 0.75) var(--ease-exit); }
.c27-drawer[data-side="left"] { transform: translateX(-100%); }
.c27-drawer[data-side="bottom"] { transform: translateY(100%); max-width: none; height: auto; max-height: 70%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 1px solid var(--line); }
.c27-drawer[data-side="bottom"][data-size="sm"] { max-width: none; max-height: 45%; }
.c27-drawer[data-side="bottom"][data-size="lg"] { max-width: none; max-height: 92%; }
.c27-scrim[data-visible="true"] .c27-drawer { transform: none; transition: transform var(--duration-slow) var(--ease-gently); }
.c27-drawer[data-size="sm"] { max-width: 320px; }
.c27-drawer[data-size="lg"] { max-width: 560px; }
.c27-drawer[data-side="right"] { border-left: 1px solid var(--line); }
.c27-drawer[data-side="left"] { border-right: 1px solid var(--line); }
.c27-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--line); }
.c27-drawer__title { margin: 0; font: var(--heading-weight) 20px/28px var(--font-heading); text-transform: var(--heading-case); }
.c27-drawer__body { flex: 1; overflow: auto; padding: var(--space-5); font: var(--body-weight) 16px/24px var(--font-body); }
.c27-drawer__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); }

.c27-pop { position: relative; display: inline-flex; }
.c27-pop__trigger { display: inline-flex; }
.c27-pop__panel { --pop-pad: var(--space-4); position: absolute; z-index: var(--z-dropdown); box-sizing: border-box; width: max-content; min-width: 200px; max-width: min(360px, calc(100vw - 2 * var(--space-4))); max-height: var(--pop-max, none); overflow-y: auto; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--pop-pad); font: var(--body-weight) 14px/20px var(--font-body); }
.c27-pop__panel[data-size="sm"] { max-width: min(280px, calc(100vw - 2 * var(--space-4))); }
.c27-pop__panel[data-size="lg"] { --pop-pad: var(--space-5); width: 520px; max-width: calc(100vw - 2 * var(--space-4)); }
.c27-pop__panel[data-size="xl"] { --pop-pad: var(--space-5); width: 720px; max-width: calc(100vw - 2 * var(--space-4)); }
.c27-pop__panel[data-menu="true"] { padding: 0; overflow: hidden auto; }
.c27-pop__panel[data-head="true"] { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.c27-pop__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--pop-pad) var(--pop-pad) var(--space-3); }
.c27-pop__title { margin: 0; font: var(--heading-weight) 16px/24px var(--font-heading); text-transform: var(--heading-case); }
.c27-pop__panel[data-size="lg"] .c27-pop__title, .c27-pop__panel[data-size="xl"] .c27-pop__title { font-size: 20px; line-height: 28px; }
.c27-pop__head .c27-iconbtn { margin-left: auto; }
.c27-pop__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--pop-pad) var(--pop-pad); }
.c27-pop__panel[data-placement^="bottom"] { top: calc(100% + var(--space-2)); }
.c27-pop__panel[data-placement^="top"] { bottom: calc(100% + var(--space-2)); }
.c27-pop__panel[data-placement$="start"] { left: var(--pop-shift, 0px); }
.c27-pop__panel[data-placement$="end"] { right: calc(var(--pop-shift, 0px) * -1); }
.c27-pop__panel { opacity: 0; pointer-events: none; transform: translateY(calc(var(--space-1) * -1)) scale(0.97); transform-origin: top left; transition: opacity calc(var(--duration-base) * 0.75) var(--ease-exit), transform calc(var(--duration-base) * 0.75) var(--ease-exit); }
.c27-pop__panel[data-placement^="top"] { transform: translateY(var(--space-1)) scale(0.97); transform-origin: bottom left; }
.c27-pop__panel[data-placement="bottom-end"] { transform-origin: top right; }
.c27-pop__panel[data-placement="top-end"] { transform-origin: bottom right; }
.c27-pop__panel[data-fixed="true"] { position: fixed; }
.c27-pop__panel[data-placement^="right"] { transform: translateX(calc(var(--space-1) * -1)) scale(0.97); transform-origin: left top; }
.c27-pop__panel[data-placement^="left"] { transform: translateX(var(--space-1)) scale(0.97); transform-origin: right top; }
.c27-pop__panel[data-visible="true"] { opacity: 1; pointer-events: auto; transform: none; transition: opacity var(--duration-base) var(--ease-gently), transform var(--duration-base) var(--ease-gently); }

.c27-menu { display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: var(--space-1); background: transparent; color: var(--ink); }
.c27-menuitem { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-md); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: var(--body-weight) 14px/20px var(--font-body); transition: background var(--duration-fast) var(--ease-standard); }
.c27-menuitem:hover, .c27-menuitem:focus-visible { background: var(--surface-sunken); }
.c27-menuitem:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.c27-menuitem[disabled] { color: var(--ink-faint); cursor: not-allowed; background: transparent; }
.c27-menuitem[data-tone="danger"] { color: var(--on-danger-soft); }
.c27-menuitem[data-tone="danger"]:not([disabled]):is(:hover, :focus-visible) { background: var(--danger-soft); }
.c27-menuitem__label { flex: 1; min-width: 0; }
.c27-menuitem__kbd { font: var(--body-weight) 12px/16px var(--font-mono); color: var(--ink-soft); }
.c27-menusub { display: flex; }
.c27-menusub > .c27-pop { display: flex; width: 100%; }
.c27-menusub .c27-pop__trigger { display: flex; flex: 1; min-width: 0; }
.c27-menuitem--sub[aria-expanded="true"] { background: var(--surface-sunken); }
.c27-menuitem__chev { flex: none; color: var(--ink-soft); }

.c27-toasts { position: fixed; z-index: var(--z-tooltip); display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); width: 100%; max-width: 440px; pointer-events: none; }
.c27-toasts > * { pointer-events: auto; }
.c27-toasts[data-placement="bottom-end"] { right: 0; bottom: 0; }
.c27-toasts[data-placement="bottom-start"] { left: 0; bottom: 0; }
.c27-toasts[data-placement="top-end"] { right: 0; top: 0; }
.c27-toasts[data-placement="top-start"] { left: 0; top: 0; }
.c27-toasts--inline { position: relative; inset: auto; padding: 0; }
.c27-toast { --tn-bg: var(--surface-sunken); --tn-fg: var(--ink); --tn-line: var(--line-control); box-sizing: border-box; display: flex; align-items: flex-start; gap: var(--space-3); width: 340px; max-width: 100%; padding: var(--space-3) var(--space-4); background: var(--tn-bg); color: var(--tn-fg); border: 1px solid var(--tn-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); font: var(--body-weight) 14px/20px var(--font-body); opacity: 0; transform: translateY(8px); transition: opacity calc(var(--duration-base) * 0.75) var(--ease-exit), transform calc(var(--duration-base) * 0.75) var(--ease-exit); }
.c27-toast[data-visible="true"] { opacity: 1; transform: none; transition: opacity var(--duration-base) var(--ease-gently), transform var(--duration-base) var(--ease-gently); }
.c27-toast[data-variant="primary"] { --tn-bg: var(--action-soft); --tn-fg: var(--on-action-soft); --tn-line: var(--action); }
.c27-toast[data-variant="success"] { --tn-bg: var(--success-soft); --tn-fg: var(--on-success-soft); --tn-line: var(--success); }
.c27-toast[data-variant="alert"] { --tn-bg: var(--alert-soft); --tn-fg: var(--on-alert-soft); --tn-line: var(--alert); }
.c27-toast[data-variant="danger"] { --tn-bg: var(--danger-soft); --tn-fg: var(--on-danger-soft); --tn-line: var(--danger); }
.c27-toast[data-variant="info"] { --tn-bg: var(--info-soft); --tn-fg: var(--on-info-soft); --tn-line: var(--info); }
.c27-toast__icon { flex: none; margin-top: 2px; }
.c27-toast__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.c27-toast__title { margin: 0; font: var(--label-weight) 14px/20px var(--font-body); }
.c27-toast__body { margin: 0; font: var(--body-weight) 13px/20px var(--font-body); }
.c27-toast__action { margin-top: var(--space-1); }
.c27-toast__link { padding: 0; background: none; border: 0; color: inherit; cursor: pointer; font: var(--label-weight) 13px/20px var(--font-body); text-decoration: underline; }
.c27-toast__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--radius-sm); }
.c27-toasts[data-placement$="end"] { align-items: flex-end; }
.c27-toasts[data-placement$="start"] { align-items: flex-start; }

.c27-sidebar { --sb-line: var(--line); box-sizing: border-box; display: flex; flex-direction: column; width: 256px; height: 100%; background: var(--surface-raised); color: var(--ink); border-right: 1px solid var(--sb-line); transition: width var(--duration-base) var(--ease-standard); }
.c27-sidebar[data-collapsed="true"] { width: 72px; }
/* primary: the brand's action color. Every color is a role pair that is guaranteed to read: on-action over action, action-hover and action-active. */
.c27-sidebar[data-color="primary"] { --sb-line: var(--action-active); --sb-fg: var(--on-action); --sb-fg-hi: var(--on-action); --sb-hover: var(--action-hover); --sb-active: var(--action-active); --sb-on-active: var(--on-action); --sb-faint: var(--on-action); --sb-accent: var(--on-action); --sb-guide: var(--action-active); --sb-focus: var(--on-action); --sb-dis: var(--on-action); --sb-dis-op: 0.5; background: var(--action); color: var(--on-action); }
.c27-sidebar[data-color="primary"] :is(.c27-sideitem__action .c27-iconbtn):not(.c27-sidegroup__fly *) { --b-text: var(--on-action); --b-soft-bg: var(--action-hover); --b-soft-hover: var(--action-active); }
.c27-sidebar[data-color="primary"] :is(.c27-sideitem__action .c27-iconbtn):not(.c27-sidegroup__fly *):focus-visible { outline-color: var(--on-action); }
/* black: stays dark in BOTH themes. surface-inverse flips to light in dark mode, so dark mode uses surface-sunken (the brand's darkest surface) with ink. Text is ink-inverse / ink, both the lightest neutral. The active item is the brand action with on-action (a guaranteed pair). */
.c27-sidebar[data-color="black"] { --sb-bg: var(--surface-inverse); --sb-ink: var(--ink-inverse); --sb-line: color-mix(in srgb, var(--sb-ink) 16%, transparent); --sb-fg: color-mix(in srgb, var(--sb-ink) 80%, transparent); --sb-fg-hi: var(--sb-ink); --sb-hover: color-mix(in srgb, var(--sb-ink) 12%, transparent); --sb-active: var(--action); --sb-on-active: var(--on-action); --sb-faint: color-mix(in srgb, var(--sb-ink) 60%, transparent); --sb-accent: var(--sb-ink); --sb-guide: color-mix(in srgb, var(--sb-ink) 24%, transparent); --sb-focus: var(--sb-ink); --sb-dis: var(--sb-ink); --sb-dis-op: 0.4; background: var(--sb-bg); color: var(--sb-ink); }
[data-theme="dark"] .c27-sidebar[data-color="black"] { --sb-bg: var(--surface-sunken); --sb-ink: var(--ink); }
.c27-sidebar[data-color="black"] :is(.c27-sideitem__action .c27-iconbtn):not(.c27-sidegroup__fly *) { --b-text: var(--sb-ink); --b-soft-bg: color-mix(in srgb, var(--sb-ink) 12%, transparent); --b-soft-hover: color-mix(in srgb, var(--sb-ink) 20%, transparent); }
.c27-sidebar[data-color="black"] :is(.c27-sideitem__action .c27-iconbtn):not(.c27-sidegroup__fly *):focus-visible { outline-color: var(--sb-ink); }
/* floating: a rounded, elevated panel that lets the page show around it */
.c27-sidebar[data-floating="true"] { height: calc(100% - 2 * var(--space-3)); margin: var(--space-3); border: 1px solid var(--sb-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); overflow: hidden; }
.c27-sideitem[data-collapsed="true"] .c27-sideitem__label, .c27-sideitem[data-collapsed="true"] .c27-sideitem__badge { display: none; }
.c27-sidebar__head { box-sizing: border-box; flex: none; display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: 0 var(--space-4); }
.c27-sidebar__brand { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.c27-sidebar__brand > :is(img, svg) { display: block; max-width: 100%; max-height: 32px; width: auto; }
.c27-sidebar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--heading-weight) 18px/24px var(--font-heading); text-transform: var(--heading-case); color: var(--sb-fg-hi, var(--ink)); }
.c27-sidebar__nav { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); }
.c27-sidebar__foot { flex: none; padding: var(--space-3); }
.c27-sidebar__bottom { flex: none; box-sizing: border-box; padding: var(--space-3); border-top: 1px solid var(--sb-line); }
.c27-sidebar__bottom + .c27-sidebar__foot { padding-top: 0; }
.c27-sideitem { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-md); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sb-fg, var(--ink-soft)); text-decoration: none; text-align: left; cursor: pointer; font: var(--label-weight) 14px/20px var(--font-body); transition: background var(--duration-fast) var(--ease-standard); }
.c27-sideitem:hover { background: var(--sb-hover, var(--surface-sunken)); color: var(--sb-fg-hi, var(--ink)); }
.c27-sideitem:focus-visible { outline: 2px solid var(--sb-focus, var(--focus)); outline-offset: 2px; }
.c27-sideitem[aria-current="page"] { background: var(--sb-active, var(--action-soft)); color: var(--sb-on-active, var(--on-action-soft)); }
.c27-sideitem[disabled] { color: var(--sb-dis, var(--ink-faint)); opacity: var(--sb-dis-op, 1); cursor: not-allowed; background: transparent; }
/* action: an IconButton in the badge slot, a sibling of the link so the row is hovered as one */
.c27-sideitemwrap { position: relative; display: flex; align-items: center; }
.c27-sideitem--action { padding-right: calc(var(--control-sm) + var(--space-2)); }
.c27-sideitem__action { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); display: flex; }
.c27-sideitemwrap:hover > .c27-sideitem:not([disabled]):not([aria-current="page"]) { background: var(--sb-hover, var(--surface-sunken)); color: var(--sb-fg-hi, var(--ink)); }
.c27-sideitem__label { flex: 1; min-width: 0; }
/* SidebarGroup: parent + one tree level. The accent line is per child, CSS only. */
/* branch parent (SidebarItem expanded): chevron in the badge slot, ink text while open or on the active branch */
.c27-sideitem__chev { flex: none; color: var(--sb-faint, var(--ink-faint)); transition: transform var(--duration-base) var(--ease-standard); }
.c27-sideitem[aria-expanded="true"] .c27-sideitem__chev { transform: rotate(180deg); }
.c27-sideitem:not([disabled])[aria-expanded="true"] { color: var(--sb-fg-hi, var(--ink)); }
.c27-sideitem[data-branch="true"]:not([disabled]) { background: var(--sb-active, var(--action-soft)); color: var(--sb-on-active, var(--on-action-soft)); }
.c27-sideitem[data-collapsed="true"][aria-expanded="true"]:not([data-branch="true"]) { background: var(--sb-hover, var(--surface-sunken)); }
.c27-sidegroup__pop { display: flex; width: 100%; }
.c27-sidegroup__pop .c27-pop__trigger { display: flex; flex: 1; min-width: 0; }
.c27-sidegroup__fly { --sb-fg: initial; --sb-fg-hi: initial; --sb-hover: initial; --sb-active: initial; --sb-on-active: initial; --sb-faint: initial; --sb-accent: initial; --sb-guide: initial; --sb-focus: initial; --sb-dis: initial; --sb-dis-op: initial; display: flex; flex-direction: column; gap: 2px; padding: var(--space-1); min-width: 200px; }
.c27-sidegroup__fly .c27-sideitem { gap: var(--space-2); color: var(--ink); font-weight: var(--body-weight); }
.c27-sidegroup__fly .c27-sideitem[aria-current="page"] { color: var(--on-action-soft); font-weight: var(--label-weight); }
.c27-sidegroup__fly .c27-sideitem > svg:first-child { width: 18px; height: 18px; }
.c27-sidegroup__flytitle { margin: 0; padding: var(--space-2) var(--space-3) var(--space-1); font: var(--caption-weight) 12px/16px var(--font-caption); letter-spacing: var(--caption-tracking); text-transform: var(--caption-case); color: var(--ink-soft); }
.c27-sidegroup { display: flex; flex-direction: column; }
.c27-sidegroup__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-base) var(--ease-standard); }
.c27-sidegroup[data-open="true"] > .c27-sidegroup__body { grid-template-rows: 1fr; }
.c27-sidegroup__clip { overflow: hidden; min-height: 0; visibility: hidden; opacity: 0; transition: opacity var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base); }
.c27-sidegroup[data-open="true"] .c27-sidegroup__clip { visibility: visible; opacity: 1; transition-delay: 0s; }
/* Ritmo do acento: um trecho por filho, no máximo 120ms por trecho e 320ms no total (a duração acompanha o tamanho). --n e --from vêm do componente. */
.c27-sidegroup__tree { --slot: min(var(--duration-fast), calc(var(--duration-slow) / var(--n, 1))); position: relative; display: flex; flex-direction: column; gap: 2px; padding: 2px 0 var(--space-1) calc(var(--space-3) + 9px); }
.c27-sidegroup__child { position: relative; padding-left: var(--space-4); }
/* Tronco único: uma linha guia contínua do pai até onde começa a curva do último filho (2px de respiro da árvore, meio do item de 32px menos a espessura da linha). */
.c27-sidegroup__tree::before { content: ""; position: absolute; left: calc(var(--space-3) + 9px); top: 0; bottom: calc(var(--space-1) + 14px + var(--radius-md)); border-left: 2px solid var(--sb-guide, var(--line)); transition: border-color var(--duration-base) var(--ease-standard); }
/* Os filhos do meio saem do tronco em ângulo reto; só o último fecha em cotovelo arredondado. */
.c27-sidegroup__child:not(:last-child)::before { border-bottom-left-radius: 0; }
.c27-sidegroup__child::before { content: ""; position: absolute; left: 0; top: -2px; width: 12px; height: calc(50% + 2px); border-left: 2px solid var(--sb-guide, var(--line)); border-bottom: 2px solid var(--sb-guide, var(--line)); border-bottom-left-radius: var(--radius-md); transition: border-color calc(var(--slot) * 0.75) var(--ease-exit); }
.c27-sidegroup__child::after { content: ""; position: absolute; left: 0; top: -2px; bottom: -2px; border-left: 2px solid var(--sb-accent, var(--action)); transform: scaleY(0); transform-origin: top; transition: transform calc(var(--slot) * 0.75) var(--ease-exit) calc(max(0, var(--from, 0) - 1 - var(--i, 0)) * var(--slot)); }
.c27-sidegroup__child[data-trail="here"]::before { border-color: var(--sb-accent, var(--action)); transition: border-color var(--slot) var(--ease-inout) calc(max(var(--i, 0) - var(--from, 0), var(--from, 0) - var(--i, 0)) * var(--slot)); }
.c27-sidegroup__child[data-trail="past"]::after { transform: scaleY(1); transition: transform var(--slot) var(--ease-inout) calc(max(0, var(--i, 0) - var(--from, 0)) * var(--slot)); }
@media (prefers-reduced-motion: reduce) {
  /* Sem escala nem espera: o acento aparece por fade curto e o estado continua visível. */
  .c27-sidegroup__child::after { transform: none !important; opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard) !important; }
  .c27-sidegroup__child[data-trail="past"]::after { opacity: 1; }
  .c27-sidegroup__child::before { transition-duration: var(--duration-fast) !important; transition-delay: 0s !important; }
}
.c27-sidegroup__child .c27-sideitem { min-height: var(--control-sm); padding: 0 var(--space-2); gap: var(--space-2); }
.c27-sidegroup__child .c27-sideitem[aria-current="page"] { background: transparent; color: var(--sb-fg-hi, var(--ink)); font-weight: var(--heading-weight); }
.c27-sidegroup__child .c27-sideitem[aria-current="page"] > svg:first-child { color: var(--sb-accent, var(--action)); }
.c27-sidegroup__child .c27-sideitem[aria-current="page"]:hover { background: var(--sb-hover, var(--surface-sunken)); }

.c27-topbar { display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: 0 var(--space-4); background: var(--surface-raised); color: var(--ink); border-bottom: 1px solid var(--line); }
.c27-topbar--sticky { position: sticky; top: 0; z-index: var(--z-sticky); }
.c27-topbar__start, .c27-topbar__end { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.c27-topbar__mid { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); }


.c27-shell { display: flex; flex-direction: column; width: 100%; min-width: 0; box-sizing: border-box; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; font: var(--body-weight) 16px/24px var(--font-body); }
.c27-shell__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line); transition: border-color var(--duration-base) var(--ease-standard); }
.c27-shell[data-open="false"] > .c27-shell__head { border-bottom-color: transparent; }
.c27-shell__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.c27-shell__title { margin: 0; font: var(--heading-weight) 16px/24px var(--font-heading); text-transform: var(--heading-case); }
.c27-shell__desc { margin: 0; font: var(--body-weight) 14px/20px var(--font-body); color: var(--ink-soft); }
.c27-shell__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.c27-shell__clip { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--duration-base) var(--ease-inout); }
.c27-shell[data-open="false"] > .c27-shell__clip { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--duration-base) var(--ease-inout), visibility 0s linear var(--duration-base); }
.c27-shell__inner { min-height: 0; overflow: hidden; }
.c27-shell__body { padding: var(--space-6); transition: opacity var(--duration-base) var(--ease-standard); }
.c27-shell__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); transition: opacity var(--duration-base) var(--ease-standard); }
.c27-shell[data-open="false"] .c27-shell__body, .c27-shell[data-open="false"] .c27-shell__foot { opacity: 0; }
.c27-shell__action, .c27-shell__toggle { display: flex; align-items: center; gap: var(--space-3); }
.c27-shell__titles:empty { display: none; }
/* Telas pequenas (celular): o botão de ação desce para baixo da descrição; o botão de recolher fica no canto do título. */
@media (max-width: 600px) {
  .c27-shell__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-3) var(--space-4); }
  .c27-shell__actions { display: contents; }
  .c27-shell__titles { grid-column: 1; grid-row: 1; }
  .c27-shell__toggle { grid-column: 2; grid-row: 1; }
  .c27-shell__action { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; justify-content: flex-start; }
}

/* ---- LinkButton */
.c27-link { --l-fg: var(--ink); box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0; background: none; border: 0; color: var(--l-fg); cursor: pointer; text-decoration: none; white-space: nowrap; font: var(--button-weight) 14px/20px var(--font-button); text-transform: var(--button-case); letter-spacing: var(--button-tracking); }
.c27-link--sm { height: var(--control-sm); }
.c27-link--lg { height: var(--control-lg); font-size: 16px; line-height: 24px; }
.c27-link__label { padding-bottom: 2px; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 var(--border-control); transition: background-size var(--duration-base) var(--ease-gently); }
.c27-link:not([disabled]):not([aria-disabled="true"]):is(:hover, :focus-visible) .c27-link__label { background-size: 100% var(--border-control); }
.c27-link[disabled], .c27-link[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.c27-link[data-variant="primary"] { --l-fg: var(--on-action-soft); }

/* ---- Pickers (DatePicker, TimePicker, ColorPicker): a self-contained panel. Inside a Popover the Popover steps aside and the picker keeps its own chrome. */
.c27-picker { box-sizing: border-box; display: inline-flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); font: var(--body-weight) 14px/20px var(--font-body); }
.c27-pop__panel:has(> .c27-picker) { padding: 0; max-width: none; max-height: none; overflow: visible; background: transparent; border: 0; box-shadow: none; }
.c27-pop__panel > .c27-picker { box-shadow: var(--shadow-2); }
.c27-picker__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.c27-picker__gap { width: var(--control-sm); height: var(--control-sm); flex: none; }
.c27-picker__title { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm); padding: 0 var(--space-2); background: transparent; color: var(--ink); border: 0; border-radius: var(--radius-md); cursor: pointer; font: var(--label-weight) 14px/20px var(--font-label); text-transform: var(--label-case); transition: background var(--duration-fast) var(--ease-standard); }
.c27-picker__title:hover { background: var(--surface-sunken); }
.c27-picker__body { animation: c27-fade-in var(--duration-base) var(--ease-gently); }
@keyframes c27-fade-in { from { opacity: 0; } to { opacity: 1; } }

.c27-dp { width: 320px; }
.c27-dp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.c27-dp__week { display: flex; align-items: center; justify-content: center; height: var(--control-xs); color: var(--ink-soft); font: var(--caption-weight) 12px/16px var(--font-caption); letter-spacing: var(--caption-tracking); text-transform: var(--caption-case); }
.c27-dp__day, .c27-dp__cell { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: var(--control-sm); padding: 0; background: transparent; color: var(--ink); border: 0; border-radius: var(--radius-md); cursor: pointer; font: var(--body-weight) 14px/20px var(--font-body); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.c27-dp__cell { height: var(--control-md); }
.c27-dp__day:hover, .c27-dp__cell:hover { background: var(--surface-sunken); }
.c27-dp__day[data-out="true"] { color: var(--ink-faint); }
.c27-dp__day[data-today="true"] { box-shadow: inset 0 0 0 var(--border-control) var(--action); }
.c27-dp__day[aria-pressed="true"], .c27-dp__cell[aria-pressed="true"] { background: var(--action); color: var(--on-action); font-weight: var(--label-weight); box-shadow: none; }
.c27-dp__day[aria-disabled="true"] { color: var(--ink-faint); opacity: 0.5; cursor: not-allowed; background: transparent; }
.c27-dp__cell:disabled { color: var(--ink-faint); opacity: 0.5; cursor: not-allowed; background: transparent; }
.c27-dp__cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
/* DatePicker: período (mode="range") e dois meses (months={2}) */
.c27-dp[data-months="2"] { width: 630px; }
.c27-dp__months { display: flex; align-items: flex-start; gap: var(--space-6); }
.c27-dp__month { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.c27-dp__void { display: block; height: var(--control-sm); }
.c27-dp[data-mode="range"] .c27-dp__grid { column-gap: 0; }
.c27-dp__day[data-range] { border-radius: 0; }
.c27-dp__day[data-range="start"], .c27-dp__day[data-range="single"], .c27-dp__day[data-range][data-col="0"] { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.c27-dp__day[data-range="end"], .c27-dp__day[data-range="single"], .c27-dp__day[data-range][data-col="6"] { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.c27-dp__day[data-fill="soft"], .c27-dp__day[data-fill="soft"]:hover { background: var(--action-soft); color: var(--on-action-soft); }
/* DateField: the masked input with the calendar button inside it, and the DatePicker in a Popover that hangs from the input box (not from the label or the message). */
.c27-df { display: block; width: 100%; }
.c27-df__pop { display: flex; width: 100%; }
.c27-df__pop > .c27-pop__trigger { display: flex; flex: 1; min-width: 0; }
.c27-df__pop .c27-inputwrap { width: 100%; }

.c27-time { flex-direction: row; align-items: center; gap: var(--space-3); }
.c27-time__unit { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.c27-time__field { box-sizing: border-box; width: var(--control-md); height: var(--control-lg); padding: 0; text-align: center; background: transparent; color: var(--ink); border: var(--border-control) solid var(--line-control); border-radius: var(--radius-md); font: var(--label-weight) 20px/28px var(--font-body); transition: border-color var(--duration-fast) var(--ease-standard); }
.c27-time__field:hover { border-color: var(--ink-soft); }
.c27-time__sep { color: var(--ink-soft); font: var(--label-weight) 20px/28px var(--font-body); }
.c27-time__ampm { display: flex; flex-direction: column; gap: var(--space-1); }
.c27-time__mer { width: var(--control-lg); height: var(--control-sm); padding: 0; background: var(--surface-sunken); color: var(--ink-soft); border: 0; border-radius: var(--radius-md); cursor: pointer; font: var(--label-weight) 12px/16px var(--font-label); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.c27-time__mer[aria-pressed="true"] { background: var(--action); color: var(--on-action); }

.c27-cp { width: 320px; gap: var(--space-4); }
.c27-cp__panel { display: flex; flex-direction: column; gap: var(--space-4); }
.c27-cp__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.c27-cp__tabs { display: flex; gap: var(--space-5); }
.c27-cp__tab { padding: 0 0 var(--space-2); margin-bottom: -1px; background: transparent; color: var(--ink-soft); border: 0; border-bottom: 2px solid transparent; cursor: pointer; font: var(--label-weight) 14px/20px var(--font-label); text-transform: var(--label-case); transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.c27-cp__tab:hover { color: var(--ink); }
.c27-cp__tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--action); }
/* Color data, not interface color: the hue rainbow and the black and white of the saturation square are the color model itself. */
.c27-cp__sv { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); cursor: crosshair; touch-action: none; background-image: linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent); }
.c27-cp__sv--grad { cursor: default; background-image: none; overflow: hidden; }
.c27-cp__line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.c27-cp__line line { stroke: var(--white); stroke-width: 1.5; stroke-dasharray: 4 4; }
.c27-cp__edit { display: flex; flex-direction: column; gap: var(--space-4); aspect-ratio: 1; }   /* same height as the gradient square it replaces, so nothing below jumps */
.c27-cp__edit > .c27-cp__sv { flex: 1; min-height: 0; aspect-ratio: auto; }
.c27-cp__row { display: flex; align-items: center; gap: var(--space-2); }
.c27-cp__row--between { justify-content: space-between; }
.c27-cp__sliders { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.c27-cp__track { position: relative; margin-inline: calc(var(--space-5) / 2); height: var(--space-4); border-radius: var(--radius-full); cursor: pointer; touch-action: none; }
.c27-cp__track--hue { background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red); }
.c27-cp__track--alpha { background-image: conic-gradient(var(--line) 25%, var(--surface) 0 50%, var(--line) 0 75%, var(--surface) 0); background-size: 8px 8px; }
.c27-cp__alphafill { position: absolute; inset: 0; border-radius: var(--radius-full); }
.c27-cp__thumb { position: absolute; width: var(--space-5); height: var(--space-5); box-sizing: border-box; border: 2px solid var(--white); border-radius: var(--radius-full); box-shadow: var(--shadow-2); transform: translate(-50%, -50%); pointer-events: none; }
.c27-cp__thumb--drag { pointer-events: auto; cursor: grab; touch-action: none; }
.c27-cp__thumb--drag[data-active="true"] { border-color: var(--action); }
.c27-cp__fmt { flex: none; width: 88px; }
.c27-cp__type { width: 112px; }
.c27-cp__fmt .c27-input, .c27-cp__type .c27-input { height: var(--control-md); }
.c27-cp__box { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); height: var(--control-md); padding: 0 var(--space-2); border: var(--border-control) solid var(--line-control); border-radius: var(--radius-md); background: transparent; transition: border-color var(--duration-fast) var(--ease-standard); }
.c27-cp__box:hover { border-color: var(--ink-soft); }
.c27-cp__box:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.c27-cp__box[data-invalid="true"] { border-color: var(--danger); }
.c27-cp__box--grow { flex: 1; min-width: 0; }
.c27-cp__box--pct { flex: none; justify-content: center; gap: 0; width: 60px; }
.c27-cp__triple { gap: 0; padding: 0; }
.c27-cp__triple .c27-cp__num { flex: 1; width: 0; text-align: center; }
.c27-cp__triple .c27-cp__num + .c27-cp__num { border-left: 1px solid var(--line); }
.c27-cp__num, .c27-cp__txt { min-width: 0; padding: 0; background: transparent; color: var(--ink); border: 0; outline: 0; font: var(--body-weight) 14px/20px var(--font-mono); }
.c27-cp__num:focus-visible, .c27-cp__txt:focus-visible { outline: 0; }   /* the box around the field already shows the focus ring */
.c27-cp__num { width: 3ch; text-align: right; }
.c27-cp__txt { flex: 1; width: 0; }
.c27-cp__dot { flex: none; width: var(--space-4); height: var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--line); }
.c27-cp__unit { color: var(--ink-soft); font: var(--body-weight) 12px/16px var(--font-body); }
.c27-cp__group { display: flex; flex-direction: column; gap: var(--space-2); }
.c27-cp__sec { display: flex; align-items: center; justify-content: space-between; }
.c27-cp__seclabel { color: var(--ink); font: var(--label-weight) 14px/20px var(--font-label); text-transform: var(--label-case); }
.c27-cp__swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c27-cp__swatch { box-sizing: border-box; width: var(--space-6); height: var(--space-6); padding: 0; border: 1px solid var(--line-control); border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--duration-fast) var(--ease-standard); }
.c27-cp__swatch:hover { transform: scale(1.08); }
.c27-cp__swatch[aria-pressed="true"] { border: 2px solid var(--action); }
.c27-cp__stops { display: flex; flex-direction: column; gap: var(--space-1); }
.c27-cp__stop { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md); transition: background var(--duration-fast) var(--ease-standard); }

/* ---- CodeInput */
.c27-code { display: flex; gap: var(--space-2); }
.c27-code__cell { width: var(--control-lg); height: calc(var(--control-lg) + var(--space-1)); padding: 0; text-align: center; font: var(--label-weight) 20px/28px var(--font-body); }
.c27-code__sep { display: inline-flex; align-items: center; align-self: center; color: var(--ink-soft); font: var(--label-weight) 20px/28px var(--font-body); user-select: none; }

/* ---- FileInput (drop zone) */
.c27-drop { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); text-align: center; background: transparent; color: var(--ink-soft); border: var(--border-control) dashed var(--line-control); border-radius: var(--radius-lg); cursor: pointer; transition: border-color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
.c27-drop:not([data-disabled="true"]):not([data-drag="true"]):hover { background: var(--surface-sunken); }
.c27-drop:not([data-disabled="true"]):not([data-drag="true"]):not([data-invalid="true"]):hover { border-color: var(--action); }
.c27-drop__icon { transition: color var(--duration-fast) var(--ease-standard); }
.c27-drop:not([data-disabled="true"]):not([data-drag="true"]):hover .c27-drop__icon { color: var(--action); }
.c27-drop:has(.c27-drop__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.c27-drop[data-drag="true"] { border-color: var(--action); background: var(--action-soft); color: var(--on-action-soft); }
.c27-drop[data-invalid="true"] { border-color: var(--danger); }
.c27-drop[data-disabled="true"] { opacity: 0.4; cursor: not-allowed; border-color: var(--line); }
.c27-drop__title { font: var(--label-weight) 14px/20px var(--font-label); color: var(--ink); }
.c27-drop[data-drag="true"] .c27-drop__title { color: var(--on-action-soft); }
.c27-drop__desc { font: var(--body-weight) 13px/18px var(--font-body); }
.c27-drop__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Attachment */
.c27-attach { box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-lg); font: var(--body-weight) 13px/18px var(--font-body); }
.c27-attach__media { flex: none; display: flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm); background: var(--surface-sunken); color: var(--ink-soft); border-radius: var(--radius-md); }
.c27-attach__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c27-attach .c27-progress { margin-top: var(--space-1); }
.c27-attach .c27-progress__track { height: 4px; }
.c27-attach__name, .c27-attach__desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c27-attach__name { font-weight: var(--label-weight); color: var(--ink); }
.c27-attach__desc { color: var(--ink-soft); font-size: 12px; line-height: 16px; }
.c27-attach[data-state="error"] { border-color: var(--danger); }
.c27-attach[data-state="error"] .c27-attach__media { background: var(--danger-soft); color: var(--on-danger-soft); }
.c27-attach[data-state="error"] .c27-attach__desc { color: var(--on-danger-soft); }
.c27-attach__name[data-busy="true"] { color: transparent; background-image: linear-gradient(90deg, var(--ink) 25%, var(--ink-faint) 50%, var(--ink) 75%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; animation: c27-shimmer 1.4s var(--ease-inout) infinite; }
@keyframes c27-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---- Shortcut */
.c27-shortcut { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--body-weight) 12px/16px var(--font-mono); }
.c27-shortcut__key { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--space-1); background: var(--surface-sunken); color: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; }

/* ---- Input: notice, trailing action, search, phone */
.c27-msg--notice { color: var(--on-info-soft); font-weight: var(--label-weight); }
.c27-msg--notice .c27-icon { margin-top: 1px; }
.c27-input--trail { padding-right: calc(var(--control-sm) + var(--space-2)); }
.c27-inputtrail { position: absolute; right: var(--space-1); display: flex; align-items: center; }
.c27-input[type="search"] { -webkit-appearance: textfield; appearance: textfield; }
.c27-input[type="search"]::-webkit-search-cancel-button, .c27-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.c27-phone { display: flex; align-items: flex-start; gap: var(--space-2); }
.c27-phone > .c27-inputwrap { flex: 1; min-width: 0; }
.c27-phone__country { flex: none; width: 124px; }
.c27-phone__country .c27-field { gap: 0; }
.c27-phone__country .c27-select__panel { right: auto; min-width: 288px; }
.c27-flagopt { display: inline-flex; align-items: center; gap: var(--space-2); }
.c27-select__label > .c27-flagopt { display: flex; }
.c27-flagopt__name { flex: 1; min-width: 0; }
.c27-flagopt__dial { color: var(--ink-soft); }
.c27-select__opt[aria-selected="true"] .c27-flagopt__dial { color: inherit; }
.c27-flag { flex: none; width: 20px; height: 20px; border-radius: var(--radius-full); }
.c27-flag--none { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--ink-soft); font: 600 9px/1 var(--font-body); }

/* ---- Accordion (container) */
.c27-acc { display: flex; flex-direction: column; font-family: var(--font-body); }
.c27-acc__item { border-bottom: 1px solid var(--line); }
.c27-acc__head { margin: 0; font: inherit; }
.c27-acc__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: var(--control-lg); padding: var(--space-3) 0; background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink); text-align: left; cursor: pointer; font: var(--label-weight) 14px/20px var(--font-body); }
.c27-acc__chev { flex: none; color: var(--ink-soft); transition: transform var(--duration-base) var(--ease-gently), color var(--duration-fast) var(--ease-standard); }
.c27-acc__trigger:hover .c27-acc__chev { color: var(--ink); }
.c27-acc__item[data-open="true"] .c27-acc__chev { transform: rotate(180deg); }
.c27-acc__trigger[disabled] { opacity: 0.4; cursor: not-allowed; }
.c27-acc__body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows calc(var(--duration-base) * 0.75) var(--ease-inout), visibility 0s linear calc(var(--duration-base) * 0.75); }
.c27-acc__item[data-open="true"] .c27-acc__body { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--duration-base) var(--ease-inout), visibility 0s; }
.c27-acc__clip { min-height: 0; overflow: hidden; }
.c27-acc__content { padding: 0 0 var(--space-4); color: var(--ink-soft); font: var(--body-weight) 14px/22px var(--font-body); opacity: 0; transform: translateY(calc(var(--space-1) * -1)); transition: opacity calc(var(--duration-base) * 0.75) var(--ease-exit), transform calc(var(--duration-base) * 0.75) var(--ease-exit); }
.c27-acc__item[data-open="true"] .c27-acc__content { opacity: 1; transform: none; transition: opacity var(--duration-base) var(--ease-gently), transform var(--duration-base) var(--ease-gently); }

/* ---- Beacon */
.c27-beacon { --bc: var(--ink-soft); position: relative; display: inline-flex; flex: none; width: 10px; height: 10px; vertical-align: middle; }
.c27-beacon[data-variant="primary"] { --bc: var(--action); }
.c27-beacon[data-variant="secondary"] { --bc: var(--accent); }
.c27-beacon[data-variant="success"] { --bc: var(--success); }
.c27-beacon[data-variant="alert"] { --bc: var(--alert); }
.c27-beacon[data-variant="danger"] { --bc: var(--danger); }
.c27-beacon[data-variant="info"] { --bc: var(--info); }
.c27-beacon__dot { position: relative; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--bc); }
.c27-beacon[data-pulse="true"]::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--bc); animation: c27-ping 1.6s var(--ease-exit) infinite; }
.c27-beacon[data-disabled="true"] { opacity: 0.4; }
@keyframes c27-ping { 0% { transform: scale(1); opacity: 0.6; } 75%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---- Breadcrumb */
.c27-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; font: var(--body-weight) 14px/20px var(--font-body); }
.c27-crumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.c27-crumbs__sep { display: inline-flex; color: var(--ink-faint); }
.c27-crumb { display: inline-flex; align-items: center; min-height: var(--control-xs); padding: 0 var(--space-1); background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none; font: inherit; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); }
a.c27-crumb:hover, button.c27-crumb:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.c27-crumbs__item:first-child > .c27-crumb { margin-left: calc(var(--space-1) * -1); }
.c27-crumb[aria-current="page"], .c27-crumb[data-static="true"] { cursor: default; }
.c27-crumb[aria-current="page"] { color: var(--ink); font-weight: var(--label-weight); }
.c27-crumb--more:hover { background: var(--surface-sunken); text-decoration: none; }

/* ---- Pagination */
.c27-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); font: var(--body-weight) 14px/20px var(--font-body); color: var(--ink); }
.c27-pager__summary { margin: 0; color: var(--ink-soft); white-space: nowrap; }
.c27-pager__size { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-soft); white-space: nowrap; }
.c27-pager__sel { width: 88px; }
.c27-pager__sel .c27-select { height: var(--control-sm); padding-left: var(--space-2); padding-right: calc(var(--space-2) + 20px + var(--space-1)); font-size: 14px; line-height: 20px; }
.c27-pager__sel .c27-selecticon { right: var(--space-2); }
.c27-pager__list { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.c27-pager > .c27-pager__list:not(:only-child) { margin-left: auto; }
.c27-pager__item, .c27-pager__num { display: flex; }
.c27-pagebtn { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-width: var(--control-sm); height: var(--control-sm); padding: 0 var(--space-2); background: transparent; color: var(--ink); border: 0; border-radius: var(--radius-md); cursor: pointer; font: var(--label-weight) 14px/20px var(--font-body); font-variant-numeric: tabular-nums; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.c27-pagebtn:hover { background: var(--surface-sunken); }
.c27-pagebtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.c27-pagebtn[aria-current="page"], .c27-pagebtn[aria-current="page"]:hover { background: var(--action); color: var(--on-action); cursor: default; }
.c27-pager__gap { display: flex; align-items: center; justify-content: center; min-width: var(--control-sm); height: var(--control-sm); color: var(--ink-soft); }
.c27-pager__status { display: none; padding: 0 var(--space-2); font-weight: var(--label-weight); white-space: nowrap; }
@media (max-width: 640px) {
  .c27-pager__num, .c27-pager__gap { display: none; }
  .c27-pager__status { display: block; }
  .c27-pager > .c27-pager__list:not(:only-child) { margin-left: 0; width: 100%; justify-content: space-between; }
  .c27-pager > .c27-pager__list:only-child { width: 100%; justify-content: space-between; }
}

/* ---- ButtonGroup (container) */
.c27-btngroup { display: inline-flex; align-items: stretch; }
.c27-btngroup > :not(:first-child):is(.c27-btn, .c27-iconbtn), .c27-btngroup > :not(:first-child) .c27-pop__trigger > :is(.c27-btn, .c27-iconbtn) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.c27-btngroup > :not(:last-child):is(.c27-btn, .c27-iconbtn), .c27-btngroup > :not(:last-child) .c27-pop__trigger > :is(.c27-btn, .c27-iconbtn) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.c27-btngroup:not([data-fill="outline"]) > :not(:first-child):is(.c27-btn, .c27-iconbtn), .c27-btngroup:not([data-fill="outline"]) > :not(:first-child) .c27-pop__trigger > :is(.c27-btn, .c27-iconbtn) { border-left-color: color-mix(in srgb, currentColor 25%, transparent); }
.c27-btngroup[data-fill="outline"] > :not(:first-child) { margin-left: calc(var(--border-control) * -1); }
.c27-btngroup :is(.c27-btn, .c27-iconbtn):focus-visible { position: relative; z-index: 1; }

/* ---- FabButton */
.c27-fab { box-shadow: var(--shadow-3); }
.c27-fab[data-shape="rounded"] { border-radius: var(--radius-full); }
.c27-fab.c27-fab--text { padding: 0 var(--space-4); }
.c27-fab.c27-fab--text.c27-btn--sm { padding: 0 var(--space-3); }

/* ---- SocialButton */
.c27-social__mark { flex: none; display: block; }
.c27-social--icon { width: var(--control-md); padding: 0; }
.c27-social--icon.c27-btn--sm { width: var(--control-sm); }
.c27-social--icon.c27-btn--lg { width: var(--control-lg); }

/* ---- Skeleton */
.c27-skel { position: relative; display: block; flex: none; overflow: hidden; background: var(--surface-sunken); border-radius: var(--radius-sm); }
.c27-skel[data-shape="circle"] { border-radius: var(--radius-full); }
.c27-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 8%, transparent), transparent); transform: translateX(-100%); animation: c27-skel-sweep 1.4s var(--ease-inout) infinite; }
@keyframes c27-skel-sweep { to { transform: translateX(100%); } }

/* ---- EmptyState */
.c27-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); text-align: center; }
.c27-empty--sm { gap: var(--space-1); padding: var(--space-4); }
.c27-empty__icon { color: var(--ink-soft); margin-bottom: var(--space-1); }
.c27-empty[data-tone="danger"] .c27-empty__icon { color: var(--danger); }
.c27-empty__title { margin: 0; font: var(--label-weight) 16px/24px var(--font-body); color: var(--ink); }
.c27-empty--sm .c27-empty__title { font-size: 14px; line-height: 20px; }
.c27-empty__text { max-width: 44ch; margin: 0; font: var(--body-weight) 14px/20px var(--font-body); color: var(--ink-soft); }
.c27-empty__action { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }

/* ---- Slider */
.c27-slider { --sl-thumb: 24px; --sl-rail: 4px; --sl-fill: var(--action); --sl-knob: var(--action); min-width: 160px; }
.c27-slider__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.c27-slider__value { font: var(--body-weight) 14px/20px var(--font-body); font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.c27-slider__ctl { position: relative; height: var(--sl-thumb); cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.c27-slider__rail { position: absolute; left: 0; right: 0; top: 50%; height: var(--sl-rail); transform: translateY(-50%); border-radius: var(--radius-full); background: var(--line); }
.c27-slider__fill { position: absolute; top: 50%; height: var(--sl-rail); transform: translateY(-50%); border-radius: var(--radius-full); background: var(--sl-fill);
  left: calc(var(--sl-thumb) / 2 + (100% - var(--sl-thumb)) * var(--p0)); right: calc(var(--sl-thumb) / 2 + (100% - var(--sl-thumb)) * (1 - var(--p1)));
  transition: left var(--duration-fast) var(--ease-standard), right var(--duration-fast) var(--ease-standard); }
.c27-slider[data-mode="single"] .c27-slider__fill { left: 0; }
.c27-slider__input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.c27-slider__thumb { position: absolute; top: 0; box-sizing: border-box; width: var(--sl-thumb); height: var(--sl-thumb); border-radius: var(--radius-full); background: var(--sl-knob); border: 2px solid var(--surface-raised); box-shadow: var(--shadow-1); pointer-events: none;
  left: calc((100% - var(--sl-thumb)) * var(--p)); transition: left var(--duration-fast) var(--ease-standard); }
.c27-slider__input:focus-visible + .c27-slider__thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
.c27-slider[data-dragging="true"] :is(.c27-slider__thumb, .c27-slider__fill) { transition: none; }
.c27-slider[data-error="true"] { --sl-fill: var(--danger); --sl-knob: var(--danger); }
.c27-slider[data-disabled="true"] { --sl-fill: var(--ink-faint); --sl-knob: var(--ink-faint); }
.c27-slider[data-disabled="true"] .c27-slider__ctl { cursor: not-allowed; }
.c27-slider[data-disabled="true"] :is(.c27-label, .c27-slider__value) { color: var(--ink-faint); }
.c27-slider[data-disabled="true"] .c27-slider__thumb { box-shadow: none; }
.c27-slider__marks { position: relative; height: 24px; }
.c27-slider__mark { position: absolute; top: 0; left: calc(var(--sl-thumb) / 2 + (100% - var(--sl-thumb)) * var(--p)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; font: var(--caption-weight) 12px/16px var(--font-caption); color: var(--ink-soft); white-space: nowrap; }
.c27-slider__mark::before { content: ""; width: 2px; height: 6px; border-radius: 1px; background: var(--line-control); }

/* ---- AlertDialog (builds on the Modal surface) */
.c27-alert { display: block; margin: 0; }
.c27-alert__head { display: flex; align-items: flex-start; gap: var(--space-4); }
.c27-alert__icon { flex: none; display: inline-flex; margin-top: 2px; color: var(--danger); }
.c27-alert__text { flex: 1; min-width: 0; }
.c27-alert__title { margin: 0 0 var(--space-2); font: var(--heading-weight) 20px/28px var(--font-heading); text-transform: var(--heading-case); color: var(--ink); }
.c27-alert__desc { margin: 0; font: var(--body-weight) 16px/24px var(--font-body); color: var(--ink-soft); }
.c27-alert__confirm { margin-top: var(--space-5); }
.c27-alert__err { margin-top: var(--space-3); }
.c27-alert__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }
/* Narrow screens (the same 640px as the Popover sheet): everything centered. Icon on top, then title and description, then the extra confirmation,
   then the actions as full-width buttons, the confirm first and Cancelar after it. The DOM order stays Cancelar, confirm (focus starts on Cancelar), only the visual order flips. */
@media (max-width: 640px) {
  .c27-alert { text-align: center; }
  .c27-alert__head { flex-direction: column; align-items: center; gap: var(--space-3); }
  .c27-alert__icon { margin-top: 0; }
  .c27-alert__icon svg { width: 32px; height: 32px; }
  .c27-alert__text { flex: none; width: 100%; }
  .c27-alert__confirm { text-align: left; }
  .c27-alert__err { text-align: center; }
  .c27-alert__actions { flex-direction: column-reverse; flex-wrap: nowrap; align-items: stretch; }
  .c27-alert__actions > * { width: 100%; justify-content: center; }
}

/* ---- List and ListItem. Rows with a divider between them; the hover and the selected row use surface-sunken, the selected row also gets a bar in action. */
.c27-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-family: var(--font-body); color: var(--ink); }
.c27-list[data-variant="outlined"] { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); }
.c27-list__item { --li-pad: var(--space-3); position: relative; display: flex; align-items: center; gap: var(--space-3); min-width: 0; border-bottom: 1px solid var(--line); transition: background var(--duration-fast) var(--ease-standard); }
.c27-list[data-density="compact"] .c27-list__item { --li-pad: var(--space-2); }
.c27-list__item:last-child { border-bottom: 0; }
.c27-list__item[data-action="true"]:not([data-disabled="true"]):hover, .c27-list__item[data-action="true"]:not([data-disabled="true"]):focus-within { background: var(--surface-sunken); }
.c27-list__item[data-selected="true"] { background: var(--surface-sunken); }
.c27-list__item[data-selected="true"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--action); }
.c27-list__main { box-sizing: border-box; display: flex; flex: 1; align-items: center; gap: var(--space-3); min-width: 0; min-height: var(--control-lg); padding: var(--li-pad) var(--space-3); margin: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; }
.c27-list__item:has(.c27-list__end) .c27-list__main { padding-right: 0; }
.c27-list__item[data-action="true"] .c27-list__main { cursor: pointer; }
.c27-list__main:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--radius-sm); }
.c27-list__start { display: inline-flex; flex: none; }
.c27-list__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.c27-list__title { font: var(--label-weight) 14px/20px var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.c27-list__desc { font: var(--body-weight) 14px/20px var(--font-body); color: var(--ink-soft); overflow-wrap: anywhere; }
.c27-list__item[data-truncate="true"] :is(.c27-list__title, .c27-list__desc) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.c27-list__end { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); padding: 0 var(--space-3) 0 var(--space-3); color: var(--ink-soft); font: var(--body-weight) 14px/20px var(--font-body); }
.c27-list__item[data-disabled="true"] :is(.c27-list__title, .c27-list__desc) { color: var(--ink-faint); }
.c27-list__item[data-disabled="true"] .c27-list__main { cursor: not-allowed; }

/* ---- DescriptionList. The wrapper is the size container, so the layout follows the width it is given, not the screen. */
.c27-dl { container-type: inline-size; --dl-label: 180px; font-family: var(--font-body); color: var(--ink); }
.c27-dl__list { display: grid; grid-template-columns: repeat(var(--dl-cols, 1), minmax(0, 1fr)); column-gap: var(--space-8); margin: 0; padding: 0; }
.c27-dl[data-columns="2"] { --dl-cols: 2; }
.c27-dl[data-columns="3"] { --dl-cols: 3; }
.c27-dl__row { display: grid; grid-template-columns: var(--dl-label) minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.c27-dl[data-divided="false"] .c27-dl__row { border-bottom: 0; }
.c27-dl[data-layout="stacked"] .c27-dl__row { grid-template-columns: minmax(0, 1fr); }
.c27-dl__term { margin: 0; color: var(--ink-soft); font: var(--label-weight) 14px/20px var(--font-body); }
.c27-dl__def { margin: 0; min-width: 0; color: var(--ink); font: var(--body-weight) 14px/20px var(--font-body); overflow-wrap: anywhere; }
.c27-dl__def[data-empty="true"] { color: var(--ink-faint); }
@container (max-width: 480px) {
  .c27-dl__list { grid-template-columns: minmax(0, 1fr); }
  .c27-dl__row { grid-template-columns: minmax(0, 1fr); }
}
@container (min-width: 481px) and (max-width: 719px) {
  .c27-dl[data-columns="3"] .c27-dl__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Spinner */
.c27-spinner { --sp: 24px; --sp-w: 3px; display: inline-flex; align-items: center; gap: var(--space-2); vertical-align: middle; color: var(--ink-soft); font: var(--body-weight) 14px/20px var(--font-body); }
.c27-spinner--sm { --sp: 16px; --sp-w: 2px; }
.c27-spinner--lg { --sp: 40px; --sp-w: 4px; gap: var(--space-3); font-size: 16px; line-height: 24px; }
.c27-spinner[data-tone="action"] { --sp-c: var(--action); }
.c27-spinner[data-tone="inherit"] { color: inherit; }
.c27-spinner__ring { flex: none; box-sizing: border-box; width: var(--sp); height: var(--sp); border: var(--sp-w) solid color-mix(in srgb, var(--sp-c, currentColor) 22%, transparent); border-top-color: var(--sp-c, currentColor); border-radius: 50%; animation: c27-spin 0.8s linear infinite, c27-spinner-in var(--duration-fast) var(--ease-standard); }
.c27-spinner__label { animation: c27-spinner-in var(--duration-fast) var(--ease-standard); }
@keyframes c27-spinner-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- Snippet */
.c27-snip { display: flex; align-items: stretch; max-width: 100%; overflow: hidden; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); font: var(--mono-weight) 13px/20px var(--font-mono); }
.c27-snip__code { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); padding: var(--space-3); overflow-x: auto; }
.c27-snip__code:focus-visible { outline-offset: -2px; }
.c27-snip__line { display: flex; gap: var(--space-2); white-space: pre; }
.c27-snip__prompt, .c27-snip__ph { color: var(--ink-faint); user-select: none; }
.c27-snip__copy { position: relative; flex: none; width: var(--control-lg); padding: 0; background: transparent; color: var(--ink-soft); border: 0; border-left: 1px solid var(--line); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.c27-snip__copy:hover:not([disabled]) { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.c27-snip__copy:focus-visible { outline-offset: -2px; }
.c27-snip__copy[disabled] { opacity: 0.4; cursor: default; }
.c27-snip__i { position: absolute; top: 50%; left: 50%; margin: -9px 0 0 -9px; transition: opacity var(--duration-base) var(--ease-gently), transform var(--duration-base) var(--ease-gently); }
.c27-snip__i--ok { color: var(--success); opacity: 0; transform: scale(0.6); }
.c27-snip__copy[data-copied="true"] .c27-snip__i--copy { opacity: 0; transform: scale(0.6); }
.c27-snip__copy[data-copied="true"] .c27-snip__i--ok { opacity: 1; transform: none; }

/* ---- StepIndicator */
.c27-steps { display: flex; margin: 0; padding: 0; list-style: none; font-family: var(--font-body); }
.c27-step { display: flex; flex: 1 1 0; min-width: 0; }
.c27-step:last-child { flex: none; }
.c27-step__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.c27-step__mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface-sunken); color: var(--ink-soft); font: var(--label-weight) 12px/16px var(--font-body); transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.c27-step[data-state="done"] .c27-step__mark, .c27-step[data-state="active"] .c27-step__mark { background: var(--action); border-color: var(--action); color: var(--on-action); }
.c27-step[data-state="active"] .c27-step__mark { box-shadow: 0 0 0 4px var(--action-soft); }
.c27-step__text { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.c27-step__label { color: var(--ink-soft); font: var(--label-weight) 13px/16px var(--font-body); white-space: nowrap; }
.c27-step[data-state="done"] .c27-step__label, .c27-step[data-state="active"] .c27-step__label { color: var(--ink); }
.c27-step__desc { color: var(--ink-soft); font: var(--body-weight) 13px/18px var(--font-body); }
.c27-step__rail { position: relative; flex: 1; align-self: flex-start; height: 2px; margin: 13px var(--space-2) 0; overflow: hidden; background: var(--line); border-radius: var(--radius-full); }
.c27-step__rail::after { content: ""; position: absolute; inset: 0; background: var(--action); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-slow) var(--ease-inout); }
.c27-step[data-state="done"] .c27-step__rail::after { transform: scaleX(1); }
.c27-steps[data-orientation="vertical"] { flex-direction: column; }
.c27-steps[data-orientation="vertical"] .c27-step { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--space-3); flex: none; }
.c27-steps[data-orientation="vertical"] .c27-step__col { display: contents; }
.c27-steps[data-orientation="vertical"] .c27-step__text { grid-column: 2; grid-row: 1 / span 2; align-items: flex-start; gap: 2px; padding: 3px 0 var(--space-5); text-align: left; }
.c27-steps[data-orientation="vertical"] .c27-step:last-child .c27-step__text { padding-bottom: 0; }
.c27-steps[data-orientation="vertical"] .c27-step__label { font-size: 14px; line-height: 22px; white-space: normal; }
.c27-steps[data-orientation="vertical"] .c27-step__mark { grid-column: 1; grid-row: 1; }
.c27-steps[data-orientation="vertical"] .c27-step__rail { grid-column: 1; grid-row: 2; justify-self: center; align-self: stretch; width: 2px; height: auto; min-height: var(--space-4); margin: var(--space-1) 0; }
.c27-steps[data-orientation="vertical"] .c27-step__rail::after { transform: scaleY(0); transform-origin: top; }
.c27-steps[data-orientation="vertical"] .c27-step[data-state="done"] .c27-step__rail::after { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  .c27-acc__content { transform: none !important; }
  .c27-beacon[data-pulse="true"]::before { animation: none; opacity: 0.3; transform: scale(1.8); }
  .c27-skel::after { animation: none; display: none; }
  .c27-snip__i { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduzir não é cortar: some o deslocamento e a escala, fica o fade curto, e o estado continua visível. */
  [class^="c27-"], [class*=" c27-"] { transition-duration: var(--duration-fast) !important; }
  .c27-modal, .c27-pop__panel, .c27-select__panel, .c27-toast, .c27-card, .c27-cp__swatch { transform: none !important; }
  .c27-tip__bubble { transform: translate(-50%, 0) !important; }
  .c27-drawer { transform: none !important; opacity: 0; }
  .c27-scrim[data-visible="true"] .c27-drawer { opacity: 1; }
  .c27-spin { animation-duration: 2s; }
  .c27-spinner__ring { animation-duration: 2s, var(--duration-fast); }
  .c27-attach__name[data-busy="true"] { animation: none; background-image: none; color: var(--ink-soft); }
  .c27-progress__bar[data-indeterminate="true"] { width: 100%; transform: none; animation: c27-pulse 1.6s var(--ease-inout) infinite; }
}
}

/* ---- Tone maps (generated: one rule per tone, roles only) */
.c27-tag[data-tone="neutral"][data-variant="soft"] { --tag-bg: var(--surface-sunken); --tag-fg: var(--ink-soft); }
.c27-tag[data-tone="action"][data-variant="soft"] { --tag-bg: var(--action-soft); --tag-fg: var(--on-action-soft); }
.c27-tag[data-tone="accent"][data-variant="soft"] { --tag-bg: var(--accent-soft); --tag-fg: var(--on-accent-soft); }
.c27-tag[data-tone="success"][data-variant="soft"] { --tag-bg: var(--success-soft); --tag-fg: var(--on-success-soft); }
.c27-tag[data-tone="alert"][data-variant="soft"] { --tag-bg: var(--alert-soft); --tag-fg: var(--on-alert-soft); }
.c27-tag[data-tone="danger"][data-variant="soft"] { --tag-bg: var(--danger-soft); --tag-fg: var(--on-danger-soft); }
.c27-tag[data-tone="info"][data-variant="soft"] { --tag-bg: var(--info-soft); --tag-fg: var(--on-info-soft); }
.c27-tag[data-tone="neutral"][data-variant="solid"] { --tag-bg: var(--surface-inverse); --tag-fg: var(--ink-inverse); }
.c27-tag[data-tone="action"][data-variant="solid"] { --tag-bg: var(--action); --tag-fg: var(--on-action); }
.c27-tag[data-tone="accent"][data-variant="solid"] { --tag-bg: var(--accent); --tag-fg: var(--on-accent); }
.c27-tag[data-tone="success"][data-variant="solid"] { --tag-bg: var(--success); --tag-fg: var(--on-success); }
.c27-tag[data-tone="alert"][data-variant="solid"] { --tag-bg: var(--alert); --tag-fg: var(--on-alert); }
.c27-tag[data-tone="danger"][data-variant="solid"] { --tag-bg: var(--danger); --tag-fg: var(--on-danger); }
.c27-tag[data-tone="info"][data-variant="solid"] { --tag-bg: var(--info); --tag-fg: var(--on-info); }
.c27-banner[data-tone="neutral"] { --bn-bg: var(--surface-sunken); --bn-fg: var(--ink); --bn-line: var(--line-control); }
.c27-banner[data-tone="success"] { --bn-bg: var(--success-soft); --bn-fg: var(--on-success-soft); --bn-line: var(--success); }
.c27-banner[data-tone="alert"] { --bn-bg: var(--alert-soft); --bn-fg: var(--on-alert-soft); --bn-line: var(--alert); }
.c27-banner[data-tone="danger"] { --bn-bg: var(--danger-soft); --bn-fg: var(--on-danger-soft); --bn-line: var(--danger); }
.c27-banner[data-tone="info"] { --bn-bg: var(--info-soft); --bn-fg: var(--on-info-soft); --bn-line: var(--info); }
.c27-progress__bar[data-tone="neutral"] { --bar: var(--ink-soft); }
.c27-progress__bar[data-tone="action"] { --bar: var(--action); }
.c27-progress__bar[data-tone="success"] { --bar: var(--success); }
.c27-progress__bar[data-tone="alert"] { --bar: var(--alert); }
.c27-progress__bar[data-tone="danger"] { --bar: var(--danger); }
.c27-progress__bar[data-tone="info"] { --bar: var(--info); }

/* ===== BRANDS (generated from brands/*.json) ===== */
/* ===== Marca Crewtech (gerado de brands/crewtech.json; não edite aqui) =====
   Ponha data-brand="crewtech" e data-theme no MESMO elemento. */
[data-brand="crewtech"] {
  --p50: #f1f7ff;
  --p100: #ddecff;
  --p200: #c3ddff;
  --p300: #9ac6ff;
  --p400: #5ea6fe;
  --p500: #1988fb;
  --p600: #0470d6;
  --p700: #015fb7;
  --p800: #054c94;
  --p900: #00407f;
  --p950: #01264f;
  --s50: #fff3f6;
  --s100: #ffe2ea;
  --s200: #feccda;
  --s300: #fea9c3;
  --s400: #fe6fa3;
  --s500: #fb1988;
  --s600: #d20c70;
  --s700: #b3055f;
  --s800: #91084c;
  --s900: #7c003f;
  --s950: #4c0124;
  --n50: #f5f9fd;
  --n100: #eaf0f7;
  --n200: #dce5f0;
  --n300: #cad5e3;
  --n400: #b2becd;
  --n500: #98a4b3;
  --n600: #5f6a77;
  --n700: #39424e;
  --n800: #212933;
  --n900: #0f161e;
  --n950: #05090f;
  --su50: #e5ffea;
  --su100: #c7fad1;
  --su200: #a0f2b3;
  --su300: #75e192;
  --su400: #46c46f;
  --su500: #16aa54;
  --su600: #098d44;
  --su700: #047838;
  --su800: #06602c;
  --su900: #005123;
  --su950: #003012;
  --a50: #fff6e6;
  --a100: #fff0d5;
  --a200: #ffe8c0;
  --a300: #fedc9e;
  --a400: #fecb68;
  --a500: #ffbb00;
  --a600: #cd9711;
  --a700: #a97b0b;
  --a800: #825e00;
  --a900: #694b00;
  --a950: #342300;
  --d50: #fff4f2;
  --d100: #ffe3df;
  --d200: #feccc6;
  --d300: #ffa89d;
  --d400: #fd6f63;
  --d500: #f42d2d;
  --d600: #d20e19;
  --d700: #b40914;
  --d800: #93030d;
  --d900: #7d040a;
  --d950: #4f0103;
  --i50: #f2f7ff;
  --i100: #d8e9ff;
  --i200: #b8d6fe;
  --i300: #86b9fe;
  --i400: #398ffb;
  --i500: #006cd9;
  --i600: #015bb9;
  --i700: #034fa0;
  --i800: #004188;
  --i900: #033875;
  --i950: #012551;
  --radius-base: 6px;
  --font-heading: "Kumbh Sans", system-ui, sans-serif;
  --font-body: "Kumbh Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-label: var(--font-body);
  --font-button: var(--font-body);
  --font-caption: var(--font-body);
  --heading-weight: 700;
  --heading-case: none;
  --body-weight: 400;
  --mono-weight: 400;
  --label-weight: 600;
  --label-case: none;
  --label-tracking: 0;
  --button-weight: 700;
  --button-case: none;
  --button-tracking: 0;
  --caption-weight: 600;
  --caption-case: none;
  --caption-tracking: 0.02em;
  --icon-weight: regular;
  --border-control: 1px;
}
[data-theme="light"][data-brand="crewtech"], [data-theme="light"] [data-brand="crewtech"] {
  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--n100);
  --surface-inverse: var(--n900);
  --ink: var(--n900);
  --ink-soft: var(--n700);
  --ink-faint: var(--n600);
  --ink-inverse: var(--n50);
  --line: var(--n300);
  --line-control: var(--n600);
  --action: var(--p600);
  --action-hover: var(--p700);
  --action-active: var(--p800);
  --on-action: var(--white);
  --action-soft: var(--p100);
  --on-action-soft: var(--p800);
  --link: var(--p700);
  --focus: var(--p700);
  --accent: var(--s600);
  --on-accent: var(--white);
  --accent-soft: var(--s100);
  --on-accent-soft: var(--s800);
  --success: var(--su700);
  --on-success: var(--white);
  --success-soft: var(--su100);
  --on-success-soft: var(--su800);
  --alert: var(--a800);
  --on-alert: var(--white);
  --alert-soft: var(--a100);
  --on-alert-soft: var(--a800);
  --danger: var(--d600);
  --on-danger: var(--white);
  --danger-soft: var(--d100);
  --on-danger-soft: var(--d800);
  --info: var(--i500);
  --on-info: var(--white);
  --info-soft: var(--i100);
  --on-info-soft: var(--i800);
  --accent-solid: var(--s600);
  --on-accent-solid: var(--white);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i500);
  --on-info-solid: var(--white);
  --badge-action: var(--p600);
  --on-badge-action: var(--white);
  --badge-danger: var(--d600);
  --on-badge-danger: var(--white);
  --scrim: #000000a6;
}
[data-theme="dark"][data-brand="crewtech"], [data-theme="dark"] [data-brand="crewtech"] {
  --surface: var(--n900);
  --surface-raised: var(--n800);
  --surface-sunken: var(--n950);
  --surface-inverse: var(--n50);
  --ink: var(--n50);
  --ink-soft: var(--n400);
  --ink-faint: var(--n500);
  --ink-inverse: var(--n900);
  --line: var(--n600);
  --line-control: var(--n500);
  --action: var(--p600);
  --action-hover: var(--p700);
  --action-active: var(--p800);
  --on-action: var(--white);
  --action-soft: var(--p950);
  --on-action-soft: var(--p200);
  --link: var(--p400);
  --focus: var(--p400);
  --accent: var(--s500);
  --on-accent: var(--n950);
  --accent-soft: var(--s950);
  --on-accent-soft: var(--s200);
  --success: var(--su500);
  --on-success: var(--n950);
  --success-soft: var(--su950);
  --on-success-soft: var(--su200);
  --alert: var(--a500);
  --on-alert: var(--n950);
  --alert-soft: var(--a950);
  --on-alert-soft: var(--a200);
  --danger: var(--d500);
  --on-danger: var(--n950);
  --danger-soft: var(--d950);
  --on-danger-soft: var(--d200);
  --info: var(--i400);
  --on-info: var(--n950);
  --info-soft: var(--i950);
  --on-info-soft: var(--i200);
  --accent-solid: var(--s600);
  --on-accent-solid: var(--white);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i500);
  --on-info-solid: var(--white);
  --badge-action: var(--p600);
  --on-badge-action: var(--white);
  --badge-danger: var(--d600);
  --on-badge-danger: var(--white);
  --scrim: #000000cc;
}

/* ===== Marca Batalha de Rima (gerado de brands/batalha-rima.json; não edite aqui) =====
   Ponha data-brand="batalha-rima" e data-theme no MESMO elemento. */
[data-brand="batalha-rima"] {
  --p50: #fff4f2;
  --p100: #ffe3de;
  --p200: #feccc4;
  --p300: #ffa89b;
  --p400: #fd6f5f;
  --p500: #ea4335;
  --p600: #cb281e;
  --p700: #b2140e;
  --p800: #940403;
  --p900: #7d0403;
  --p950: #4f0101;
  --s50: #fff3fa;
  --s100: #ffe2f4;
  --s200: #fecdec;
  --s300: #feaae2;
  --s400: #fe72d5;
  --s500: #ff00cc;
  --s600: #d308a8;
  --s700: #b3008e;
  --s800: #8f0371;
  --s900: #78015f;
  --s950: #470237;
  --n50: #f5f9fd;
  --n100: #eaf0f7;
  --n200: #dce5f0;
  --n300: #cad5e3;
  --n400: #b2becd;
  --n500: #98a4b3;
  --n600: #5f6a77;
  --n700: #39424e;
  --n800: #212933;
  --n900: #0f161e;
  --n950: #05090f;
  --su50: #e5ffea;
  --su100: #c7fad1;
  --su200: #a0f2b3;
  --su300: #75e192;
  --su400: #46c46f;
  --su500: #16aa54;
  --su600: #098d44;
  --su700: #047838;
  --su800: #06602c;
  --su900: #005123;
  --su950: #003012;
  --a50: #fff6e6;
  --a100: #fff0d5;
  --a200: #ffe8c0;
  --a300: #fedc9e;
  --a400: #fecb68;
  --a500: #ffbb00;
  --a600: #cd9711;
  --a700: #a97b0b;
  --a800: #825e00;
  --a900: #694b00;
  --a950: #342300;
  --d50: #fff4f2;
  --d100: #ffe3df;
  --d200: #feccc6;
  --d300: #ffa89d;
  --d400: #fd6f63;
  --d500: #f42d2d;
  --d600: #d20e19;
  --d700: #b40914;
  --d800: #93030d;
  --d900: #7d040a;
  --d950: #4f0103;
  --i50: #eafaff;
  --i100: #c9f2fe;
  --i200: #9ee7fc;
  --i300: #71d1eb;
  --i400: #3fb1cd;
  --i500: #0095b2;
  --i600: #097c94;
  --i700: #06697e;
  --i800: #025567;
  --i900: #034857;
  --i950: #012c36;
  --radius-base: 8px;
  --font-heading: Geist, system-ui, sans-serif;
  --font-body: Geist, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-label: var(--font-body);
  --font-button: var(--font-body);
  --font-caption: var(--font-body);
  --heading-weight: 700;
  --heading-case: none;
  --body-weight: 400;
  --mono-weight: 400;
  --label-weight: 600;
  --label-case: none;
  --label-tracking: 0;
  --button-weight: 700;
  --button-case: none;
  --button-tracking: 0;
  --caption-weight: 600;
  --caption-case: none;
  --caption-tracking: 0.02em;
  --icon-weight: bold;
  --border-control: 1px;
}
[data-theme="light"][data-brand="batalha-rima"], [data-theme="light"] [data-brand="batalha-rima"] {
  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--n100);
  --surface-inverse: var(--n900);
  --ink: var(--n900);
  --ink-soft: var(--n700);
  --ink-faint: var(--n600);
  --ink-inverse: var(--n50);
  --line: var(--n300);
  --line-control: var(--n600);
  --action: var(--p600);
  --action-hover: var(--p700);
  --action-active: var(--p800);
  --on-action: var(--white);
  --action-soft: var(--p100);
  --on-action-soft: var(--p800);
  --link: var(--p600);
  --focus: var(--p600);
  --accent: var(--s600);
  --on-accent: var(--white);
  --accent-soft: var(--s100);
  --on-accent-soft: var(--s800);
  --success: var(--su700);
  --on-success: var(--white);
  --success-soft: var(--su100);
  --on-success-soft: var(--su800);
  --alert: var(--a800);
  --on-alert: var(--white);
  --alert-soft: var(--a100);
  --on-alert-soft: var(--a800);
  --danger: var(--d600);
  --on-danger: var(--white);
  --danger-soft: var(--d100);
  --on-danger-soft: var(--d800);
  --info: var(--i600);
  --on-info: var(--white);
  --info-soft: var(--i100);
  --on-info-soft: var(--i800);
  --accent-solid: var(--s600);
  --on-accent-solid: var(--white);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i600);
  --on-info-solid: var(--white);
  --badge-action: var(--p600);
  --on-badge-action: var(--white);
  --badge-danger: var(--d600);
  --on-badge-danger: var(--white);
  --scrim: #000000a6;
}
[data-theme="dark"][data-brand="batalha-rima"], [data-theme="dark"] [data-brand="batalha-rima"] {
  --surface: var(--n900);
  --surface-raised: var(--n800);
  --surface-sunken: var(--n950);
  --surface-inverse: var(--n50);
  --ink: var(--n50);
  --ink-soft: var(--n400);
  --ink-faint: var(--n500);
  --ink-inverse: var(--n900);
  --line: var(--n600);
  --line-control: var(--n500);
  --action: var(--p500);
  --action-hover: var(--p400);
  --action-active: var(--p300);
  --on-action: var(--n950);
  --action-soft: var(--p950);
  --on-action-soft: var(--p200);
  --link: var(--p400);
  --focus: var(--p400);
  --accent: var(--s600);
  --on-accent: var(--white);
  --accent-soft: var(--s950);
  --on-accent-soft: var(--s200);
  --success: var(--su500);
  --on-success: var(--n950);
  --success-soft: var(--su950);
  --on-success-soft: var(--su200);
  --alert: var(--a500);
  --on-alert: var(--n950);
  --alert-soft: var(--a950);
  --on-alert-soft: var(--a200);
  --danger: var(--d500);
  --on-danger: var(--n950);
  --danger-soft: var(--d950);
  --on-danger-soft: var(--d200);
  --info: var(--i600);
  --on-info: var(--white);
  --info-soft: var(--i950);
  --on-info-soft: var(--i200);
  --accent-solid: var(--s600);
  --on-accent-solid: var(--white);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i600);
  --on-info-solid: var(--white);
  --badge-action: var(--p600);
  --on-badge-action: var(--white);
  --badge-danger: var(--d600);
  --on-badge-danger: var(--white);
  --scrim: #000000cc;
}

/* ===== Marca Midaas (gerado de brands/midaas.json; não edite aqui) =====
   Ponha data-brand="midaas" e data-theme no MESMO elemento. */
[data-brand="midaas"] {
  --p50: #f1f8ff;
  --p100: #dbecfe;
  --p200: #bfddfe;
  --p300: #92c6fd;
  --p400: #4ba5fe;
  --p500: #1e88e5;
  --p600: #0071c6;
  --p700: #0860a7;
  --p800: #044d89;
  --p900: #004176;
  --p950: #00274b;
  --s50: #fff5e8;
  --s100: #ffeed9;
  --s200: #fee5c3;
  --s300: #fed7a2;
  --s400: #ffc36b;
  --s500: #ffb020;
  --s600: #d08d01;
  --s700: #ac7402;
  --s800: #845904;
  --s900: #6b4703;
  --s950: #362200;
  --n50: #f5f9fd;
  --n100: #eaf0f7;
  --n200: #dce5f0;
  --n300: #cad5e3;
  --n400: #b2becd;
  --n500: #98a4b3;
  --n600: #5f6a77;
  --n700: #39424e;
  --n800: #212933;
  --n900: #0f161e;
  --n950: #05090f;
  --su50: #e5ffea;
  --su100: #c7fad1;
  --su200: #a0f2b3;
  --su300: #75e192;
  --su400: #46c46f;
  --su500: #16aa54;
  --su600: #098d44;
  --su700: #047838;
  --su800: #06602c;
  --su900: #005123;
  --su950: #003012;
  --a50: #fff4ee;
  --a100: #ffe8db;
  --a200: #ffd8c0;
  --a300: #fec098;
  --a400: #fe9b56;
  --a500: #f57c00;
  --a600: #c96503;
  --a700: #a85407;
  --a800: #854204;
  --a900: #6f3502;
  --a950: #3f1b00;
  --d50: #fff4f2;
  --d100: #ffe3df;
  --d200: #feccc6;
  --d300: #ffa89d;
  --d400: #fd6f63;
  --d500: #f42d2d;
  --d600: #d20e19;
  --d700: #b40914;
  --d800: #93030d;
  --d900: #7d040a;
  --d950: #4f0103;
  --i50: #f7f5ff;
  --i100: #e9e6ff;
  --i200: #d9d2fe;
  --i300: #c1b3fd;
  --i400: #a386fd;
  --i500: #8b5cf6;
  --i600: #7645d9;
  --i700: #6536c0;
  --i800: #5326a4;
  --i900: #46208b;
  --i950: #2c0c5f;
  --radius-base: 6px;
  --font-heading: "Red Hat Display", system-ui, sans-serif;
  --font-body: "Red Hat Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-label: var(--font-body);
  --font-button: var(--font-body);
  --font-caption: var(--font-body);
  --heading-weight: 700;
  --heading-case: none;
  --body-weight: 400;
  --mono-weight: 400;
  --label-weight: 600;
  --label-case: none;
  --label-tracking: 0;
  --button-weight: 700;
  --button-case: none;
  --button-tracking: 0;
  --caption-weight: 600;
  --caption-case: none;
  --caption-tracking: 0.02em;
  --icon-weight: regular;
  --border-control: 1px;
}
[data-theme="light"][data-brand="midaas"], [data-theme="light"] [data-brand="midaas"] {
  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--n100);
  --surface-inverse: var(--n900);
  --ink: var(--n900);
  --ink-soft: var(--n700);
  --ink-faint: var(--n600);
  --ink-inverse: var(--n50);
  --line: var(--n300);
  --line-control: var(--n600);
  --action: var(--p600);
  --action-hover: var(--p700);
  --action-active: var(--p800);
  --on-action: var(--white);
  --action-soft: var(--p100);
  --on-action-soft: var(--p800);
  --link: var(--p700);
  --focus: var(--p700);
  --accent: var(--s500);
  --on-accent: var(--n950);
  --accent-soft: var(--s100);
  --on-accent-soft: var(--s800);
  --success: var(--su700);
  --on-success: var(--white);
  --success-soft: var(--su100);
  --on-success-soft: var(--su800);
  --alert: var(--a700);
  --on-alert: var(--white);
  --alert-soft: var(--a100);
  --on-alert-soft: var(--a800);
  --danger: var(--d600);
  --on-danger: var(--white);
  --danger-soft: var(--d100);
  --on-danger-soft: var(--d800);
  --info: var(--i600);
  --on-info: var(--white);
  --info-soft: var(--i100);
  --on-info-soft: var(--i800);
  --accent-solid: var(--s500);
  --on-accent-solid: var(--n950);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i600);
  --on-info-solid: var(--white);
  --badge-action: var(--p600);
  --on-badge-action: var(--white);
  --badge-danger: var(--d600);
  --on-badge-danger: var(--white);
  --scrim: #000000a6;
}
[data-theme="dark"][data-brand="midaas"], [data-theme="dark"] [data-brand="midaas"] {
  --surface: var(--n900);
  --surface-raised: var(--n800);
  --surface-sunken: var(--n950);
  --surface-inverse: var(--n50);
  --ink: var(--n50);
  --ink-soft: var(--n400);
  --ink-faint: var(--n500);
  --ink-inverse: var(--n900);
  --line: var(--n600);
  --line-control: var(--n500);
  --action: var(--p500);
  --action-hover: var(--p400);
  --action-active: var(--p300);
  --on-action: var(--n950);
  --action-soft: var(--p950);
  --on-action-soft: var(--p200);
  --link: var(--p400);
  --focus: var(--p400);
  --accent: var(--s500);
  --on-accent: var(--n950);
  --accent-soft: var(--s950);
  --on-accent-soft: var(--s200);
  --success: var(--su500);
  --on-success: var(--n950);
  --success-soft: var(--su950);
  --on-success-soft: var(--su200);
  --alert: var(--a500);
  --on-alert: var(--n950);
  --alert-soft: var(--a950);
  --on-alert-soft: var(--a200);
  --danger: var(--d500);
  --on-danger: var(--n950);
  --danger-soft: var(--d950);
  --on-danger-soft: var(--d200);
  --info: var(--i500);
  --on-info: var(--n950);
  --info-soft: var(--i950);
  --on-info-soft: var(--i200);
  --accent-solid: var(--s500);
  --on-accent-solid: var(--n950);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i600);
  --on-info-solid: var(--white);
  --badge-action: var(--p600);
  --on-badge-action: var(--white);
  --badge-danger: var(--d600);
  --on-badge-danger: var(--white);
  --scrim: #000000cc;
}

/* ===== Marca younamp (gerado de brands/younamp.json; não edite aqui) =====
   Ponha data-brand="younamp" e data-theme no MESMO elemento. */
[data-brand="younamp"] {
  --p50: #fffff9;
  --p100: #feffee;
  --p200: #fdffdf;
  --p300: #fcffc7;
  --p400: #fcff94;
  --p500: #ffff00;
  --p600: #cbcb0d;
  --p700: #a4a413;
  --p800: #7b7b07;
  --p900: #606007;
  --p950: #292900;
  --s50: #fff4f2;
  --s100: #fcd2cb;
  --s200: #eaaba1;
  --s300: #c3786d;
  --s400: #843930;
  --s500: #4e0001;
  --s600: #440001;
  --s700: #3d0101;
  --s800: #350001;
  --s900: #300000;
  --s950: #240101;
  --n50: #f5f9fd;
  --n100: #eaf0f7;
  --n200: #dce5f0;
  --n300: #cad5e3;
  --n400: #b2becd;
  --n500: #98a4b3;
  --n600: #5f6a77;
  --n700: #39424e;
  --n800: #212933;
  --n900: #0f161e;
  --n950: #05090f;
  --su50: #e5ffea;
  --su100: #c7fad1;
  --su200: #a0f2b3;
  --su300: #75e192;
  --su400: #46c46f;
  --su500: #16aa54;
  --su600: #098d44;
  --su700: #047838;
  --su800: #06602c;
  --su900: #005123;
  --su950: #003012;
  --a50: #fff6e6;
  --a100: #fff0d5;
  --a200: #ffe8c0;
  --a300: #fedc9e;
  --a400: #fecb68;
  --a500: #ffbb00;
  --a600: #cd9711;
  --a700: #a97b0b;
  --a800: #825e00;
  --a900: #694b00;
  --a950: #342300;
  --d50: #fff4f2;
  --d100: #ffe3df;
  --d200: #feccc6;
  --d300: #ffa89d;
  --d400: #fd6f63;
  --d500: #f42d2d;
  --d600: #d20e19;
  --d700: #b40914;
  --d800: #93030d;
  --d900: #7d040a;
  --d950: #4f0103;
  --i50: #f2f7ff;
  --i100: #d8e9ff;
  --i200: #b8d6fe;
  --i300: #86b9fe;
  --i400: #398ffb;
  --i500: #006cd9;
  --i600: #015bb9;
  --i700: #034fa0;
  --i800: #004188;
  --i900: #033875;
  --i950: #012551;
  --radius-base: 6px;
  --font-heading: Outfit, system-ui, sans-serif;
  --font-body: Outfit, system-ui, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-label: var(--font-body);
  --font-button: var(--font-body);
  --font-caption: var(--font-body);
  --heading-weight: 600;
  --heading-case: none;
  --body-weight: 300;
  --mono-weight: 400;
  --label-weight: 600;
  --label-case: none;
  --label-tracking: 0;
  --button-weight: 700;
  --button-case: none;
  --button-tracking: 0;
  --caption-weight: 400;
  --caption-case: none;
  --caption-tracking: 0.02em;
  --icon-weight: regular;
  --border-control: 1px;
}
[data-theme="light"][data-brand="younamp"], [data-theme="light"] [data-brand="younamp"] {
  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--n100);
  --surface-inverse: var(--n900);
  --ink: var(--n900);
  --ink-soft: var(--n700);
  --ink-faint: var(--n600);
  --ink-inverse: var(--n50);
  --line: var(--n300);
  --line-control: var(--n600);
  --action: var(--p500);
  --action-hover: var(--p600);
  --action-active: var(--p700);
  --on-action: var(--n950);
  --action-soft: var(--p100);
  --on-action-soft: var(--p900);
  --link: var(--p900);
  --focus: var(--p900);
  --accent: var(--s500);
  --on-accent: var(--white);
  --accent-soft: var(--s100);
  --on-accent-soft: var(--s800);
  --success: var(--su700);
  --on-success: var(--white);
  --success-soft: var(--su100);
  --on-success-soft: var(--su800);
  --alert: var(--a800);
  --on-alert: var(--white);
  --alert-soft: var(--a100);
  --on-alert-soft: var(--a800);
  --danger: var(--d600);
  --on-danger: var(--white);
  --danger-soft: var(--d100);
  --on-danger-soft: var(--d800);
  --info: var(--i500);
  --on-info: var(--white);
  --info-soft: var(--i100);
  --on-info-soft: var(--i800);
  --accent-solid: var(--s500);
  --on-accent-solid: var(--white);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i500);
  --on-info-solid: var(--white);
  --badge-action: var(--p500);
  --on-badge-action: var(--n950);
  --badge-danger: var(--d600);
  --on-badge-danger: var(--white);
  --scrim: #000000a6;
}
[data-theme="dark"][data-brand="younamp"], [data-theme="dark"] [data-brand="younamp"] {
  --surface: var(--n900);
  --surface-raised: var(--n800);
  --surface-sunken: var(--n950);
  --surface-inverse: var(--n50);
  --ink: var(--n50);
  --ink-soft: var(--n400);
  --ink-faint: var(--n500);
  --ink-inverse: var(--n900);
  --line: var(--n600);
  --line-control: var(--n500);
  --action: var(--p500);
  --action-hover: var(--p400);
  --action-active: var(--p300);
  --on-action: var(--n950);
  --action-soft: var(--p950);
  --on-action-soft: var(--p200);
  --link: var(--p500);
  --focus: var(--p500);
  --accent: var(--s300);
  --on-accent: var(--n950);
  --accent-soft: var(--s950);
  --on-accent-soft: var(--s200);
  --success: var(--su500);
  --on-success: var(--n950);
  --success-soft: var(--su950);
  --on-success-soft: var(--su200);
  --alert: var(--a500);
  --on-alert: var(--n950);
  --alert-soft: var(--a950);
  --on-alert-soft: var(--a200);
  --danger: var(--d500);
  --on-danger: var(--n950);
  --danger-soft: var(--d950);
  --on-danger-soft: var(--d200);
  --info: var(--i400);
  --on-info: var(--n950);
  --info-soft: var(--i950);
  --on-info-soft: var(--i200);
  --accent-solid: var(--s400);
  --on-accent-solid: var(--white);
  --success-solid: var(--su700);
  --on-success-solid: var(--white);
  --danger-solid: var(--d600);
  --on-danger-solid: var(--white);
  --info-solid: var(--i500);
  --on-info-solid: var(--white);
  --badge-action: var(--p500);
  --on-badge-action: var(--n950);
  --badge-danger: var(--d600);
  --on-badge-danger: var(--white);
  --scrim: #000000cc;
}