/* CaptrixOS mark and wordmark. Navy on light surfaces, white on dark ones. The top-right square is always amber. */
.vbmark { display: block; width: 100%; height: 100%; }
.vb-box { width: 36px; height: 36px; flex: none; display: block; background: none !important; }
.vb-body { fill: #14284B; } .vb-fold { fill: #F2A33A; } .vb-ink { fill: #fff; }
.vbword { height: 22px; width: auto; flex: none; display: block; }
.vb-w1 { fill: #14284B; } .vb-w2 { fill: #F2A33A; }
.vb-lock { display: flex; align-items: center; gap: 10px; }
.vb-lock .vb-box { width: 40px; height: 40px; } .vb-lock .vbword { height: 26px; }
#auth .vb-lock { justify-content: center; margin-bottom: 14px; }
html[data-theme="dark"] .vb-body, html[data-sidebar="dark"] .rail .vb-body, html[data-sidebar="accent"] .rail .vb-body { fill: #fff; }
html[data-theme="dark"] .vb-ink, html[data-sidebar="dark"] .rail .vb-ink, html[data-sidebar="accent"] .rail .vb-ink { fill: #14284B; }
html[data-theme="dark"] .vb-w1, html[data-sidebar="dark"] .rail .vb-w1, html[data-sidebar="accent"] .rail .vb-w1 { fill: #fff; }

/* Navy replacements for the old green utility classes (tw.css stays as generated). */
:where(.tw) a:focus-visible,:where(.tw) button:focus-visible{outline:2px solid #14284B;outline-offset:2px}
:where(.tw input[type=checkbox],.tw input[type=radio]){width:14px;height:14px;margin:0;accent-color:#14284B}
.border-emerald-200{--tw-border-opacity:1;border-color:rgb(185 199 227/var(--tw-border-opacity,1))}
.border-emerald-200\/70{border-color:rgba(185,199,227,.7)}
.border-emerald-200\/80{border-color:rgba(185,199,227,.8)}
.bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(219 227 241/var(--tw-bg-opacity,1))}
.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(238 242 249/var(--tw-bg-opacity,1))}
.from-\[\#14284B\]{--tw-gradient-from:#14284B var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,40,75,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-50{--tw-gradient-from:#eef2f9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(238,242,249,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-600{--tw-gradient-from:#1d3a6b var(--tw-gradient-from-position);--tw-gradient-to:rgba(29,58,107,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.to-emerald-500{--tw-gradient-to:#2a4a85 var(--tw-gradient-to-position)}
.to-emerald-700{--tw-gradient-to:#14284B var(--tw-gradient-to-position)}
.to-teal-400{--tw-gradient-to:#F2A33A var(--tw-gradient-to-position)}
.to-teal-50{--tw-gradient-to:#f3f6fb var(--tw-gradient-to-position)}
.text-\[\#14284B\]{--tw-text-opacity:1;color:rgb(20 40 75/var(--tw-text-opacity,1))}
.text-emerald-700{--tw-text-opacity:1;color:rgb(20 40 75/var(--tw-text-opacity,1))}
.text-emerald-800{--tw-text-opacity:1;color:rgb(20 40 75/var(--tw-text-opacity,1))}
.text-emerald-800\/80{color:rgba(20,40,75,.8)}
.ring-emerald-100{--tw-ring-opacity:1;--tw-ring-color:rgb(219 227 241/var(--tw-ring-opacity,1))}
.ring-emerald-600\/20{--tw-ring-color:rgba(29,58,107,.2)}
.hover\:from-\[\#0c1b35\]:hover{--tw-gradient-from:#0c1b35 var(--tw-gradient-from-position);--tw-gradient-to:rgba(12,27,53,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.hover\:to-emerald-800:hover{--tw-gradient-to:#0c1b35 var(--tw-gradient-to-position)}
.focus\:border-emerald-600:focus{--tw-border-opacity:1;border-color:rgb(29 58 107/var(--tw-border-opacity,1))}
.focus\:ring-emerald-600\/25:focus{--tw-ring-color:rgba(29,58,107,.25)}

/* Amber, used sparingly: the plan tag and the focus ring. */
.rail .rail-top span.rounded-full { background: rgba(242,163,58,.16) !important; color: #8a5400 !important; border-color: rgba(242,163,58,.5) !important; }
html[data-theme="dark"] .rail .rail-top span.rounded-full, html[data-sidebar="dark"] .rail .rail-top span.rounded-full, html[data-sidebar="accent"] .rail .rail-top span.rounded-full { color: #f7c978 !important; }
.rail .newfile { color: var(--brand-ink); }
html[data-theme="dark"] section.from-primary { background-image: linear-gradient(135deg, #1d3a6b, #14284B); color: #fff; }
html[data-theme="dark"] section.from-primary .text-on-primary { color: #fff; }
html[data-theme="dark"] .rail .newfile { background: #2a4a85; color: #fff !important; }
html[data-theme="dark"] .rail .newfile:hover { background: #3a5fa3; }