/* CEL Common CSS v1.0
   Shared visual foundation for CEL applications.
   Load this file first, then exactly the component styles that are needed. */
:root{
  --cel-bg:#f9f2ef;
  --cel-surface:#fffaf7;
  --cel-sidebar:#f3e8e2;
  --cel-text:#3a3136;
  --cel-muted:#71676b;
  --cel-accent:#d11a6a;
  --cel-accent-soft:#f7edf2;
  --cel-line:rgba(58,49,54,.14);
  --cel-ok:#66876b;
  --cel-warn:#a77938;
  --cel-error:#a42e55;
  --cel-unknown:#81777a;
  --cel-tooltip-bg:#eee5d8;
  --cel-tooltip-text:#332c30;
  --cel-radius:5px;
  --cel-font:"Segoe UI",Arial,sans-serif;
  --cel-font-size:17px;
  --cel-small-size:14px;
  --cel-tiny-size:13px;
}
html{font-size:100%}
body{font-family:var(--cel-font);font-size:var(--cel-font-size);line-height:1.42;color:var(--cel-text);background:var(--cel-bg)}
small,.cel-small{font-size:var(--cel-small-size);line-height:1.38}
.cel-muted{color:var(--cel-muted)}
.cel-status-ok{color:var(--cel-ok)}
.cel-status-warn{color:var(--cel-warn)}
.cel-status-error{color:var(--cel-error)}
.cel-status-unknown{color:var(--cel-unknown)}

/* Quiet tooltip: explanatory, not decorative. */
.cel-tooltip[data-tooltip]{position:relative;cursor:help}
.cel-tooltip[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute;
  z-index:10000;
  left:0;
  bottom:calc(100% + 8px);
  width:max-content;
  max-width:min(360px,80vw);
  padding:8px 10px;
  border:1px solid rgba(75,62,55,.16);
  border-radius:5px;
  background:var(--cel-tooltip-bg);
  color:var(--cel-tooltip-text);
  font:13px/1.42 var(--cel-font);
  white-space:normal;
  text-align:left;
  opacity:0;
  visibility:hidden;
  transform:translateY(3px);
  pointer-events:none;
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.cel-tooltip[data-tooltip]::before{
  content:"";
  position:absolute;
  z-index:10001;
  left:14px;
  bottom:calc(100% + 3px);
  width:9px;height:9px;
  background:var(--cel-tooltip-bg);
  border-right:1px solid rgba(75,62,55,.16);
  border-bottom:1px solid rgba(75,62,55,.16);
  transform:rotate(45deg);
  opacity:0;visibility:hidden;
  transition:opacity .12s ease,visibility .12s ease;
}
.cel-tooltip[data-tooltip]:hover::after,
.cel-tooltip[data-tooltip]:focus-visible::after,
.cel-tooltip[data-tooltip]:hover::before,
.cel-tooltip[data-tooltip]:focus-visible::before{opacity:1;visibility:visible;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.cel-tooltip[data-tooltip]::after,.cel-tooltip[data-tooltip]::before{transition:none}}