/* =====================================================================
   compat.css — переводит палитру Tailwind (slate / blue / green / red / orange)
   в цвета бренда и переменные темы. Подключать ПОСЛЕ style.css.
   Нужен потому, что JS-шаблоны и views/*.html используют классы Tailwind напрямую.
   Специфичность поднята префиксом "html", чтобы выигрывать у Tailwind CDN.
   ===================================================================== */
html .bg-white { background-color: var(--surface); }
html .border-white { border-color: var(--surface); }
html .hover\:bg-slate-50:hover, html .hover\:bg-gray-50:hover,
html .hover\:bg-slate-100:hover, html .hover\:bg-gray-100:hover { background-color: var(--row-hover); }

/* Разделители divide-* */
html .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
html .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }

/* Кольца фокуса и переключатели (peer-checked) */
html .focus\:ring-blue-500:focus, html .focus\:ring-blue-400:focus, html .focus\:ring-indigo-500:focus { --tw-ring-color: var(--ink-3); }
html .peer:checked ~ .peer-checked\:bg-blue-600, html .peer:checked ~ .peer-checked\:bg-blue-500 { background-color: var(--brand-solid); }
html .peer:focus ~ .peer-focus\:ring-blue-300, html .peer:focus ~ .peer-focus\:ring-blue-200 { --tw-ring-color: color-mix(in srgb, var(--accent-deep) 35%, transparent); }
html .accent-blue-600, html .accent-blue-500 { accent-color: var(--ink); }
html input[type="checkbox"].text-blue-600, html input[type="checkbox"].text-blue-500 { color: var(--ink); }

html .bg-slate-50,
html .hover\:bg-slate-50:hover,
html .focus\:bg-slate-50:focus,
html .bg-slate-100,
html .hover\:bg-slate-100:hover,
html .focus\:bg-slate-100:focus,
html .bg-gray-50,
html .hover\:bg-gray-50:hover,
html .focus\:bg-gray-50:focus,
html .bg-gray-100,
html .hover\:bg-gray-100:hover,
html .focus\:bg-gray-100:focus { background-color: var(--surface-2); }

html .bg-slate-200,
html .hover\:bg-slate-200:hover,
html .focus\:bg-slate-200:focus,
html .bg-gray-200,
html .hover\:bg-gray-200:hover,
html .focus\:bg-gray-200:focus { background-color: var(--line); }

html .bg-slate-300,
html .hover\:bg-slate-300:hover,
html .focus\:bg-slate-300:focus,
html .bg-slate-400,
html .hover\:bg-slate-400:hover,
html .focus\:bg-slate-400:focus,
html .bg-gray-300,
html .hover\:bg-gray-300:hover,
html .focus\:bg-gray-300:focus,
html .bg-gray-400,
html .hover\:bg-gray-400:hover,
html .focus\:bg-gray-400:focus { background-color: var(--line-strong); }

html .bg-slate-500,
html .hover\:bg-slate-500:hover,
html .focus\:bg-slate-500:focus,
html .bg-slate-600,
html .hover\:bg-slate-600:hover,
html .focus\:bg-slate-600:focus,
html .bg-gray-500,
html .hover\:bg-gray-500:hover,
html .focus\:bg-gray-500:focus,
html .bg-gray-600,
html .hover\:bg-gray-600:hover,
html .focus\:bg-gray-600:focus { background-color: var(--ink-3); }

html .bg-slate-700,
html .hover\:bg-slate-700:hover,
html .focus\:bg-slate-700:focus,
html .bg-slate-800,
html .hover\:bg-slate-800:hover,
html .focus\:bg-slate-800:focus,
html .bg-slate-900,
html .hover\:bg-slate-900:hover,
html .focus\:bg-slate-900:focus,
html .bg-gray-700,
html .hover\:bg-gray-700:hover,
html .focus\:bg-gray-700:focus,
html .bg-gray-800,
html .hover\:bg-gray-800:hover,
html .focus\:bg-gray-800:focus,
html .bg-gray-900,
html .hover\:bg-gray-900:hover,
html .focus\:bg-gray-900:focus { background-color: var(--ink); }

html .bg-blue-50,
html .hover\:bg-blue-50:hover,
html .focus\:bg-blue-50:focus,
html .bg-blue-100,
html .hover\:bg-blue-100:hover,
html .focus\:bg-blue-100:focus,
html .bg-blue-200,
html .hover\:bg-blue-200:hover,
html .focus\:bg-blue-200:focus,
html .bg-indigo-50,
html .hover\:bg-indigo-50:hover,
html .focus\:bg-indigo-50:focus,
html .bg-indigo-100,
html .hover\:bg-indigo-100:hover,
html .focus\:bg-indigo-100:focus,
html .bg-indigo-200,
html .hover\:bg-indigo-200:hover,
html .focus\:bg-indigo-200:focus,
html .bg-sky-50,
html .hover\:bg-sky-50:hover,
html .focus\:bg-sky-50:focus,
html .bg-sky-100,
html .hover\:bg-sky-100:hover,
html .focus\:bg-sky-100:focus,
html .bg-sky-200,
html .hover\:bg-sky-200:hover,
html .focus\:bg-sky-200:focus { background-color: var(--accent-soft); }

html .bg-blue-300,
html .hover\:bg-blue-300:hover,
html .focus\:bg-blue-300:focus,
html .bg-blue-400,
html .hover\:bg-blue-400:hover,
html .focus\:bg-blue-400:focus,
html .bg-indigo-300,
html .hover\:bg-indigo-300:hover,
html .focus\:bg-indigo-300:focus,
html .bg-indigo-400,
html .hover\:bg-indigo-400:hover,
html .focus\:bg-indigo-400:focus,
html .bg-sky-300,
html .hover\:bg-sky-300:hover,
html .focus\:bg-sky-300:focus,
html .bg-sky-400,
html .hover\:bg-sky-400:hover,
html .focus\:bg-sky-400:focus { background-color: var(--accent); }

html .bg-blue-500,
html .hover\:bg-blue-500:hover,
html .focus\:bg-blue-500:focus,
html .bg-blue-600,
html .hover\:bg-blue-600:hover,
html .focus\:bg-blue-600:focus,
html .bg-blue-700,
html .hover\:bg-blue-700:hover,
html .focus\:bg-blue-700:focus,
html .bg-blue-800,
html .hover\:bg-blue-800:hover,
html .focus\:bg-blue-800:focus,
html .bg-blue-900,
html .hover\:bg-blue-900:hover,
html .focus\:bg-blue-900:focus,
html .bg-indigo-500,
html .hover\:bg-indigo-500:hover,
html .focus\:bg-indigo-500:focus,
html .bg-indigo-600,
html .hover\:bg-indigo-600:hover,
html .focus\:bg-indigo-600:focus,
html .bg-indigo-700,
html .hover\:bg-indigo-700:hover,
html .focus\:bg-indigo-700:focus,
html .bg-indigo-800,
html .hover\:bg-indigo-800:hover,
html .focus\:bg-indigo-800:focus,
html .bg-indigo-900,
html .hover\:bg-indigo-900:hover,
html .focus\:bg-indigo-900:focus,
html .bg-sky-500,
html .hover\:bg-sky-500:hover,
html .focus\:bg-sky-500:focus,
html .bg-sky-600,
html .hover\:bg-sky-600:hover,
html .focus\:bg-sky-600:focus,
html .bg-sky-700,
html .hover\:bg-sky-700:hover,
html .focus\:bg-sky-700:focus,
html .bg-sky-800,
html .hover\:bg-sky-800:hover,
html .focus\:bg-sky-800:focus,
html .bg-sky-900,
html .hover\:bg-sky-900:hover,
html .focus\:bg-sky-900:focus { background-color: var(--brand-solid); }

html .bg-green-50,
html .hover\:bg-green-50:hover,
html .focus\:bg-green-50:focus,
html .bg-green-100,
html .hover\:bg-green-100:hover,
html .focus\:bg-green-100:focus,
html .bg-green-200,
html .hover\:bg-green-200:hover,
html .focus\:bg-green-200:focus,
html .bg-emerald-50,
html .hover\:bg-emerald-50:hover,
html .focus\:bg-emerald-50:focus,
html .bg-emerald-100,
html .hover\:bg-emerald-100:hover,
html .focus\:bg-emerald-100:focus,
html .bg-emerald-200,
html .hover\:bg-emerald-200:hover,
html .focus\:bg-emerald-200:focus { background-color: var(--ok-soft); }

html .bg-green-300,
html .hover\:bg-green-300:hover,
html .focus\:bg-green-300:focus,
html .bg-green-400,
html .hover\:bg-green-400:hover,
html .focus\:bg-green-400:focus,
html .bg-green-500,
html .hover\:bg-green-500:hover,
html .focus\:bg-green-500:focus,
html .bg-green-600,
html .hover\:bg-green-600:hover,
html .focus\:bg-green-600:focus,
html .bg-green-700,
html .hover\:bg-green-700:hover,
html .focus\:bg-green-700:focus,
html .bg-green-800,
html .hover\:bg-green-800:hover,
html .focus\:bg-green-800:focus,
html .bg-green-900,
html .hover\:bg-green-900:hover,
html .focus\:bg-green-900:focus,
html .bg-emerald-300,
html .hover\:bg-emerald-300:hover,
html .focus\:bg-emerald-300:focus,
html .bg-emerald-400,
html .hover\:bg-emerald-400:hover,
html .focus\:bg-emerald-400:focus,
html .bg-emerald-500,
html .hover\:bg-emerald-500:hover,
html .focus\:bg-emerald-500:focus,
html .bg-emerald-600,
html .hover\:bg-emerald-600:hover,
html .focus\:bg-emerald-600:focus,
html .bg-emerald-700,
html .hover\:bg-emerald-700:hover,
html .focus\:bg-emerald-700:focus,
html .bg-emerald-800,
html .hover\:bg-emerald-800:hover,
html .focus\:bg-emerald-800:focus,
html .bg-emerald-900,
html .hover\:bg-emerald-900:hover,
html .focus\:bg-emerald-900:focus { background-color: var(--ok); }

html .bg-red-50,
html .hover\:bg-red-50:hover,
html .focus\:bg-red-50:focus,
html .bg-red-100,
html .hover\:bg-red-100:hover,
html .focus\:bg-red-100:focus,
html .bg-red-200,
html .hover\:bg-red-200:hover,
html .focus\:bg-red-200:focus,
html .bg-rose-50,
html .hover\:bg-rose-50:hover,
html .focus\:bg-rose-50:focus,
html .bg-rose-100,
html .hover\:bg-rose-100:hover,
html .focus\:bg-rose-100:focus,
html .bg-rose-200,
html .hover\:bg-rose-200:hover,
html .focus\:bg-rose-200:focus { background-color: var(--danger-soft); }

html .bg-red-300,
html .hover\:bg-red-300:hover,
html .focus\:bg-red-300:focus,
html .bg-red-400,
html .hover\:bg-red-400:hover,
html .focus\:bg-red-400:focus,
html .bg-red-500,
html .hover\:bg-red-500:hover,
html .focus\:bg-red-500:focus,
html .bg-red-600,
html .hover\:bg-red-600:hover,
html .focus\:bg-red-600:focus,
html .bg-red-700,
html .hover\:bg-red-700:hover,
html .focus\:bg-red-700:focus,
html .bg-red-800,
html .hover\:bg-red-800:hover,
html .focus\:bg-red-800:focus,
html .bg-red-900,
html .hover\:bg-red-900:hover,
html .focus\:bg-red-900:focus,
html .bg-rose-300,
html .hover\:bg-rose-300:hover,
html .focus\:bg-rose-300:focus,
html .bg-rose-400,
html .hover\:bg-rose-400:hover,
html .focus\:bg-rose-400:focus,
html .bg-rose-500,
html .hover\:bg-rose-500:hover,
html .focus\:bg-rose-500:focus,
html .bg-rose-600,
html .hover\:bg-rose-600:hover,
html .focus\:bg-rose-600:focus,
html .bg-rose-700,
html .hover\:bg-rose-700:hover,
html .focus\:bg-rose-700:focus,
html .bg-rose-800,
html .hover\:bg-rose-800:hover,
html .focus\:bg-rose-800:focus,
html .bg-rose-900,
html .hover\:bg-rose-900:hover,
html .focus\:bg-rose-900:focus { background-color: var(--danger); }

html .bg-orange-50,
html .hover\:bg-orange-50:hover,
html .focus\:bg-orange-50:focus,
html .bg-orange-100,
html .hover\:bg-orange-100:hover,
html .focus\:bg-orange-100:focus,
html .bg-orange-200,
html .hover\:bg-orange-200:hover,
html .focus\:bg-orange-200:focus,
html .bg-amber-50,
html .hover\:bg-amber-50:hover,
html .focus\:bg-amber-50:focus,
html .bg-amber-100,
html .hover\:bg-amber-100:hover,
html .focus\:bg-amber-100:focus,
html .bg-amber-200,
html .hover\:bg-amber-200:hover,
html .focus\:bg-amber-200:focus,
html .bg-yellow-50,
html .hover\:bg-yellow-50:hover,
html .focus\:bg-yellow-50:focus,
html .bg-yellow-100,
html .hover\:bg-yellow-100:hover,
html .focus\:bg-yellow-100:focus,
html .bg-yellow-200,
html .hover\:bg-yellow-200:hover,
html .focus\:bg-yellow-200:focus { background-color: var(--warn-bg); }

html .bg-orange-300,
html .hover\:bg-orange-300:hover,
html .focus\:bg-orange-300:focus,
html .bg-orange-400,
html .hover\:bg-orange-400:hover,
html .focus\:bg-orange-400:focus,
html .bg-orange-500,
html .hover\:bg-orange-500:hover,
html .focus\:bg-orange-500:focus,
html .bg-orange-600,
html .hover\:bg-orange-600:hover,
html .focus\:bg-orange-600:focus,
html .bg-orange-700,
html .hover\:bg-orange-700:hover,
html .focus\:bg-orange-700:focus,
html .bg-orange-800,
html .hover\:bg-orange-800:hover,
html .focus\:bg-orange-800:focus,
html .bg-orange-900,
html .hover\:bg-orange-900:hover,
html .focus\:bg-orange-900:focus,
html .bg-amber-300,
html .hover\:bg-amber-300:hover,
html .focus\:bg-amber-300:focus,
html .bg-amber-400,
html .hover\:bg-amber-400:hover,
html .focus\:bg-amber-400:focus,
html .bg-amber-500,
html .hover\:bg-amber-500:hover,
html .focus\:bg-amber-500:focus,
html .bg-amber-600,
html .hover\:bg-amber-600:hover,
html .focus\:bg-amber-600:focus,
html .bg-amber-700,
html .hover\:bg-amber-700:hover,
html .focus\:bg-amber-700:focus,
html .bg-amber-800,
html .hover\:bg-amber-800:hover,
html .focus\:bg-amber-800:focus,
html .bg-amber-900,
html .hover\:bg-amber-900:hover,
html .focus\:bg-amber-900:focus,
html .bg-yellow-300,
html .hover\:bg-yellow-300:hover,
html .focus\:bg-yellow-300:focus,
html .bg-yellow-400,
html .hover\:bg-yellow-400:hover,
html .focus\:bg-yellow-400:focus,
html .bg-yellow-500,
html .hover\:bg-yellow-500:hover,
html .focus\:bg-yellow-500:focus,
html .bg-yellow-600,
html .hover\:bg-yellow-600:hover,
html .focus\:bg-yellow-600:focus,
html .bg-yellow-700,
html .hover\:bg-yellow-700:hover,
html .focus\:bg-yellow-700:focus,
html .bg-yellow-800,
html .hover\:bg-yellow-800:hover,
html .focus\:bg-yellow-800:focus,
html .bg-yellow-900,
html .hover\:bg-yellow-900:hover,
html .focus\:bg-yellow-900:focus { background-color: var(--warn); }

html .text-slate-300,
html .hover\:text-slate-300:hover,
html .focus\:text-slate-300:focus,
html .text-slate-400,
html .hover\:text-slate-400:hover,
html .focus\:text-slate-400:focus,
html .text-slate-500,
html .hover\:text-slate-500:hover,
html .focus\:text-slate-500:focus,
html .text-gray-300,
html .hover\:text-gray-300:hover,
html .focus\:text-gray-300:focus,
html .text-gray-400,
html .hover\:text-gray-400:hover,
html .focus\:text-gray-400:focus,
html .text-gray-500,
html .hover\:text-gray-500:hover,
html .focus\:text-gray-500:focus { color: var(--ink-3); }

html .text-slate-600,
html .hover\:text-slate-600:hover,
html .focus\:text-slate-600:focus,
html .text-gray-600,
html .hover\:text-gray-600:hover,
html .focus\:text-gray-600:focus { color: var(--ink-2); }

html .text-slate-700,
html .hover\:text-slate-700:hover,
html .focus\:text-slate-700:focus,
html .text-slate-800,
html .hover\:text-slate-800:hover,
html .focus\:text-slate-800:focus,
html .text-slate-900,
html .hover\:text-slate-900:hover,
html .focus\:text-slate-900:focus,
html .text-gray-700,
html .hover\:text-gray-700:hover,
html .focus\:text-gray-700:focus,
html .text-gray-800,
html .hover\:text-gray-800:hover,
html .focus\:text-gray-800:focus,
html .text-gray-900,
html .hover\:text-gray-900:hover,
html .focus\:text-gray-900:focus { color: var(--ink); }

html .text-blue-300,
html .hover\:text-blue-300:hover,
html .focus\:text-blue-300:focus,
html .text-blue-400,
html .hover\:text-blue-400:hover,
html .focus\:text-blue-400:focus,
html .text-blue-500,
html .hover\:text-blue-500:hover,
html .focus\:text-blue-500:focus,
html .text-blue-600,
html .hover\:text-blue-600:hover,
html .focus\:text-blue-600:focus,
html .text-indigo-300,
html .hover\:text-indigo-300:hover,
html .focus\:text-indigo-300:focus,
html .text-indigo-400,
html .hover\:text-indigo-400:hover,
html .focus\:text-indigo-400:focus,
html .text-indigo-500,
html .hover\:text-indigo-500:hover,
html .focus\:text-indigo-500:focus,
html .text-indigo-600,
html .hover\:text-indigo-600:hover,
html .focus\:text-indigo-600:focus,
html .text-sky-300,
html .hover\:text-sky-300:hover,
html .focus\:text-sky-300:focus,
html .text-sky-400,
html .hover\:text-sky-400:hover,
html .focus\:text-sky-400:focus,
html .text-sky-500,
html .hover\:text-sky-500:hover,
html .focus\:text-sky-500:focus,
html .text-sky-600,
html .hover\:text-sky-600:hover,
html .focus\:text-sky-600:focus { color: var(--accent-deep); }

html .text-blue-700,
html .hover\:text-blue-700:hover,
html .focus\:text-blue-700:focus,
html .text-blue-800,
html .hover\:text-blue-800:hover,
html .focus\:text-blue-800:focus,
html .text-blue-900,
html .hover\:text-blue-900:hover,
html .focus\:text-blue-900:focus,
html .text-indigo-700,
html .hover\:text-indigo-700:hover,
html .focus\:text-indigo-700:focus,
html .text-indigo-800,
html .hover\:text-indigo-800:hover,
html .focus\:text-indigo-800:focus,
html .text-indigo-900,
html .hover\:text-indigo-900:hover,
html .focus\:text-indigo-900:focus,
html .text-sky-700,
html .hover\:text-sky-700:hover,
html .focus\:text-sky-700:focus,
html .text-sky-800,
html .hover\:text-sky-800:hover,
html .focus\:text-sky-800:focus,
html .text-sky-900,
html .hover\:text-sky-900:hover,
html .focus\:text-sky-900:focus { color: var(--ink); }

html .text-green-300,
html .hover\:text-green-300:hover,
html .focus\:text-green-300:focus,
html .text-green-400,
html .hover\:text-green-400:hover,
html .focus\:text-green-400:focus,
html .text-green-500,
html .hover\:text-green-500:hover,
html .focus\:text-green-500:focus,
html .text-green-600,
html .hover\:text-green-600:hover,
html .focus\:text-green-600:focus,
html .text-green-700,
html .hover\:text-green-700:hover,
html .focus\:text-green-700:focus,
html .text-green-800,
html .hover\:text-green-800:hover,
html .focus\:text-green-800:focus,
html .text-emerald-300,
html .hover\:text-emerald-300:hover,
html .focus\:text-emerald-300:focus,
html .text-emerald-400,
html .hover\:text-emerald-400:hover,
html .focus\:text-emerald-400:focus,
html .text-emerald-500,
html .hover\:text-emerald-500:hover,
html .focus\:text-emerald-500:focus,
html .text-emerald-600,
html .hover\:text-emerald-600:hover,
html .focus\:text-emerald-600:focus,
html .text-emerald-700,
html .hover\:text-emerald-700:hover,
html .focus\:text-emerald-700:focus,
html .text-emerald-800,
html .hover\:text-emerald-800:hover,
html .focus\:text-emerald-800:focus { color: var(--ok); }

html .text-red-300,
html .hover\:text-red-300:hover,
html .focus\:text-red-300:focus,
html .text-red-400,
html .hover\:text-red-400:hover,
html .focus\:text-red-400:focus,
html .text-red-500,
html .hover\:text-red-500:hover,
html .focus\:text-red-500:focus,
html .text-red-600,
html .hover\:text-red-600:hover,
html .focus\:text-red-600:focus,
html .text-red-700,
html .hover\:text-red-700:hover,
html .focus\:text-red-700:focus,
html .text-red-800,
html .hover\:text-red-800:hover,
html .focus\:text-red-800:focus,
html .text-rose-300,
html .hover\:text-rose-300:hover,
html .focus\:text-rose-300:focus,
html .text-rose-400,
html .hover\:text-rose-400:hover,
html .focus\:text-rose-400:focus,
html .text-rose-500,
html .hover\:text-rose-500:hover,
html .focus\:text-rose-500:focus,
html .text-rose-600,
html .hover\:text-rose-600:hover,
html .focus\:text-rose-600:focus,
html .text-rose-700,
html .hover\:text-rose-700:hover,
html .focus\:text-rose-700:focus,
html .text-rose-800,
html .hover\:text-rose-800:hover,
html .focus\:text-rose-800:focus { color: var(--danger); }

html .text-orange-300,
html .hover\:text-orange-300:hover,
html .focus\:text-orange-300:focus,
html .text-orange-400,
html .hover\:text-orange-400:hover,
html .focus\:text-orange-400:focus,
html .text-orange-500,
html .hover\:text-orange-500:hover,
html .focus\:text-orange-500:focus,
html .text-orange-600,
html .hover\:text-orange-600:hover,
html .focus\:text-orange-600:focus,
html .text-orange-700,
html .hover\:text-orange-700:hover,
html .focus\:text-orange-700:focus,
html .text-orange-800,
html .hover\:text-orange-800:hover,
html .focus\:text-orange-800:focus,
html .text-amber-300,
html .hover\:text-amber-300:hover,
html .focus\:text-amber-300:focus,
html .text-amber-400,
html .hover\:text-amber-400:hover,
html .focus\:text-amber-400:focus,
html .text-amber-500,
html .hover\:text-amber-500:hover,
html .focus\:text-amber-500:focus,
html .text-amber-600,
html .hover\:text-amber-600:hover,
html .focus\:text-amber-600:focus,
html .text-amber-700,
html .hover\:text-amber-700:hover,
html .focus\:text-amber-700:focus,
html .text-amber-800,
html .hover\:text-amber-800:hover,
html .focus\:text-amber-800:focus,
html .text-yellow-300,
html .hover\:text-yellow-300:hover,
html .focus\:text-yellow-300:focus,
html .text-yellow-400,
html .hover\:text-yellow-400:hover,
html .focus\:text-yellow-400:focus,
html .text-yellow-500,
html .hover\:text-yellow-500:hover,
html .focus\:text-yellow-500:focus,
html .text-yellow-600,
html .hover\:text-yellow-600:hover,
html .focus\:text-yellow-600:focus,
html .text-yellow-700,
html .hover\:text-yellow-700:hover,
html .focus\:text-yellow-700:focus,
html .text-yellow-800,
html .hover\:text-yellow-800:hover,
html .focus\:text-yellow-800:focus { color: var(--warn); }

html .border-slate-50,
html .hover\:border-slate-50:hover,
html .focus\:border-slate-50:focus,
html .border-slate-100,
html .hover\:border-slate-100:hover,
html .focus\:border-slate-100:focus,
html .border-slate-200,
html .hover\:border-slate-200:hover,
html .focus\:border-slate-200:focus,
html .border-gray-50,
html .hover\:border-gray-50:hover,
html .focus\:border-gray-50:focus,
html .border-gray-100,
html .hover\:border-gray-100:hover,
html .focus\:border-gray-100:focus,
html .border-gray-200,
html .hover\:border-gray-200:hover,
html .focus\:border-gray-200:focus { border-color: var(--line); }

html .border-slate-300,
html .hover\:border-slate-300:hover,
html .focus\:border-slate-300:focus,
html .border-slate-400,
html .hover\:border-slate-400:hover,
html .focus\:border-slate-400:focus,
html .border-gray-300,
html .hover\:border-gray-300:hover,
html .focus\:border-gray-300:focus,
html .border-gray-400,
html .hover\:border-gray-400:hover,
html .focus\:border-gray-400:focus { border-color: var(--line-strong); }

html .border-slate-500,
html .hover\:border-slate-500:hover,
html .focus\:border-slate-500:focus,
html .border-slate-600,
html .hover\:border-slate-600:hover,
html .focus\:border-slate-600:focus,
html .border-gray-500,
html .hover\:border-gray-500:hover,
html .focus\:border-gray-500:focus,
html .border-gray-600,
html .hover\:border-gray-600:hover,
html .focus\:border-gray-600:focus { border-color: var(--ink-3); }

html .border-blue-50,
html .hover\:border-blue-50:hover,
html .focus\:border-blue-50:focus,
html .border-blue-100,
html .hover\:border-blue-100:hover,
html .focus\:border-blue-100:focus,
html .border-blue-200,
html .hover\:border-blue-200:hover,
html .focus\:border-blue-200:focus,
html .border-blue-300,
html .hover\:border-blue-300:hover,
html .focus\:border-blue-300:focus,
html .border-indigo-50,
html .hover\:border-indigo-50:hover,
html .focus\:border-indigo-50:focus,
html .border-indigo-100,
html .hover\:border-indigo-100:hover,
html .focus\:border-indigo-100:focus,
html .border-indigo-200,
html .hover\:border-indigo-200:hover,
html .focus\:border-indigo-200:focus,
html .border-indigo-300,
html .hover\:border-indigo-300:hover,
html .focus\:border-indigo-300:focus,
html .border-sky-50,
html .hover\:border-sky-50:hover,
html .focus\:border-sky-50:focus,
html .border-sky-100,
html .hover\:border-sky-100:hover,
html .focus\:border-sky-100:focus,
html .border-sky-200,
html .hover\:border-sky-200:hover,
html .focus\:border-sky-200:focus,
html .border-sky-300,
html .hover\:border-sky-300:hover,
html .focus\:border-sky-300:focus { border-color: color-mix(in srgb, var(--accent-deep) 32%, transparent); }

html .border-blue-400,
html .hover\:border-blue-400:hover,
html .focus\:border-blue-400:focus,
html .border-blue-500,
html .hover\:border-blue-500:hover,
html .focus\:border-blue-500:focus,
html .border-blue-600,
html .hover\:border-blue-600:hover,
html .focus\:border-blue-600:focus,
html .border-indigo-400,
html .hover\:border-indigo-400:hover,
html .focus\:border-indigo-400:focus,
html .border-indigo-500,
html .hover\:border-indigo-500:hover,
html .focus\:border-indigo-500:focus,
html .border-indigo-600,
html .hover\:border-indigo-600:hover,
html .focus\:border-indigo-600:focus,
html .border-sky-400,
html .hover\:border-sky-400:hover,
html .focus\:border-sky-400:focus,
html .border-sky-500,
html .hover\:border-sky-500:hover,
html .focus\:border-sky-500:focus,
html .border-sky-600,
html .hover\:border-sky-600:hover,
html .focus\:border-sky-600:focus { border-color: var(--ink); }

html .border-green-50,
html .hover\:border-green-50:hover,
html .focus\:border-green-50:focus,
html .border-green-100,
html .hover\:border-green-100:hover,
html .focus\:border-green-100:focus,
html .border-green-200,
html .hover\:border-green-200:hover,
html .focus\:border-green-200:focus,
html .border-green-300,
html .hover\:border-green-300:hover,
html .focus\:border-green-300:focus,
html .border-emerald-50,
html .hover\:border-emerald-50:hover,
html .focus\:border-emerald-50:focus,
html .border-emerald-100,
html .hover\:border-emerald-100:hover,
html .focus\:border-emerald-100:focus,
html .border-emerald-200,
html .hover\:border-emerald-200:hover,
html .focus\:border-emerald-200:focus,
html .border-emerald-300,
html .hover\:border-emerald-300:hover,
html .focus\:border-emerald-300:focus { border-color: color-mix(in srgb, var(--ok) 32%, transparent); }

html .border-green-400,
html .hover\:border-green-400:hover,
html .focus\:border-green-400:focus,
html .border-green-500,
html .hover\:border-green-500:hover,
html .focus\:border-green-500:focus,
html .border-green-600,
html .hover\:border-green-600:hover,
html .focus\:border-green-600:focus,
html .border-emerald-400,
html .hover\:border-emerald-400:hover,
html .focus\:border-emerald-400:focus,
html .border-emerald-500,
html .hover\:border-emerald-500:hover,
html .focus\:border-emerald-500:focus,
html .border-emerald-600,
html .hover\:border-emerald-600:hover,
html .focus\:border-emerald-600:focus { border-color: var(--ok); }

html .border-red-50,
html .hover\:border-red-50:hover,
html .focus\:border-red-50:focus,
html .border-red-100,
html .hover\:border-red-100:hover,
html .focus\:border-red-100:focus,
html .border-red-200,
html .hover\:border-red-200:hover,
html .focus\:border-red-200:focus,
html .border-red-300,
html .hover\:border-red-300:hover,
html .focus\:border-red-300:focus,
html .border-rose-50,
html .hover\:border-rose-50:hover,
html .focus\:border-rose-50:focus,
html .border-rose-100,
html .hover\:border-rose-100:hover,
html .focus\:border-rose-100:focus,
html .border-rose-200,
html .hover\:border-rose-200:hover,
html .focus\:border-rose-200:focus,
html .border-rose-300,
html .hover\:border-rose-300:hover,
html .focus\:border-rose-300:focus { border-color: color-mix(in srgb, var(--danger) 32%, transparent); }

html .border-red-400,
html .hover\:border-red-400:hover,
html .focus\:border-red-400:focus,
html .border-red-500,
html .hover\:border-red-500:hover,
html .focus\:border-red-500:focus,
html .border-red-600,
html .hover\:border-red-600:hover,
html .focus\:border-red-600:focus,
html .border-rose-400,
html .hover\:border-rose-400:hover,
html .focus\:border-rose-400:focus,
html .border-rose-500,
html .hover\:border-rose-500:hover,
html .focus\:border-rose-500:focus,
html .border-rose-600,
html .hover\:border-rose-600:hover,
html .focus\:border-rose-600:focus { border-color: var(--danger); }

html .border-orange-50,
html .hover\:border-orange-50:hover,
html .focus\:border-orange-50:focus,
html .border-orange-100,
html .hover\:border-orange-100:hover,
html .focus\:border-orange-100:focus,
html .border-orange-200,
html .hover\:border-orange-200:hover,
html .focus\:border-orange-200:focus,
html .border-orange-300,
html .hover\:border-orange-300:hover,
html .focus\:border-orange-300:focus,
html .border-amber-50,
html .hover\:border-amber-50:hover,
html .focus\:border-amber-50:focus,
html .border-amber-100,
html .hover\:border-amber-100:hover,
html .focus\:border-amber-100:focus,
html .border-amber-200,
html .hover\:border-amber-200:hover,
html .focus\:border-amber-200:focus,
html .border-amber-300,
html .hover\:border-amber-300:hover,
html .focus\:border-amber-300:focus,
html .border-yellow-50,
html .hover\:border-yellow-50:hover,
html .focus\:border-yellow-50:focus,
html .border-yellow-100,
html .hover\:border-yellow-100:hover,
html .focus\:border-yellow-100:focus,
html .border-yellow-200,
html .hover\:border-yellow-200:hover,
html .focus\:border-yellow-200:focus,
html .border-yellow-300,
html .hover\:border-yellow-300:hover,
html .focus\:border-yellow-300:focus { border-color: color-mix(in srgb, var(--warn) 32%, transparent); }

html .border-orange-400,
html .hover\:border-orange-400:hover,
html .focus\:border-orange-400:focus,
html .border-orange-500,
html .hover\:border-orange-500:hover,
html .focus\:border-orange-500:focus,
html .border-orange-600,
html .hover\:border-orange-600:hover,
html .focus\:border-orange-600:focus,
html .border-amber-400,
html .hover\:border-amber-400:hover,
html .focus\:border-amber-400:focus,
html .border-amber-500,
html .hover\:border-amber-500:hover,
html .focus\:border-amber-500:focus,
html .border-amber-600,
html .hover\:border-amber-600:hover,
html .focus\:border-amber-600:focus,
html .border-yellow-400,
html .hover\:border-yellow-400:hover,
html .focus\:border-yellow-400:focus,
html .border-yellow-500,
html .hover\:border-yellow-500:hover,
html .focus\:border-yellow-500:focus,
html .border-yellow-600,
html .hover\:border-yellow-600:hover,
html .focus\:border-yellow-600:focus { border-color: var(--warn); }