:root {
  --cj-accent:#122959; /* primary/dark */
  --cj-accent-cta:#65E696; /* CTA green (optional) */
  --cj-text:#122959;
  --cj-muted:#5A6A93;
  --cj-bg:#ffffff;
  --cj-border:#e6e9f2;
  --cj-radius:8px;
  --cj-font:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  --cj-scroll-offset:96px; /* used for scroll-margin-top when focusing headers; host can override via data-scroll-offset */
}
.cj-container{font-family:var(--cj-font); color:var(--cj-text); background:transparent;}
.cj-list{display:flex; flex-direction:column; gap:16px;}

.cj-card{background:var(--cj-bg); border:1px solid var(--cj-border); border-radius:var(--cj-radius); overflow:hidden; box-shadow:0 6px 24px rgba(18,41,89,.06), 0 2px 8px rgba(18,41,89,.04)}
.cj-header{display:flex; align-items:stretch; justify-content:space-between; gap:12px; width:100%}
.cj-toggle{all:unset; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; width:100%; border-radius:calc(var(--cj-radius) - 2px)}
.cj-toggle:focus-visible{outline:2px solid var(--cj-accent); outline-offset:2px}
.cj-toggle:hover{background:color-mix(in oklab, var(--cj-accent) 6%, white)}

.cj-title{font-weight:600; font-size:1.06rem; line-height:1.3; letter-spacing:-0.3px}
.cj-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.cj-badge{font-size:.8rem; color:var(--cj-accent); background:color-mix(in oklab, var(--cj-accent) 10%, white); padding:4px 10px; border-radius:999px; border:1px solid color-mix(in oklab, var(--cj-accent) 28%, white)}
.cj-desc{font-size:.93rem; color:var(--cj-muted)}
.cj-icon{margin-left:auto; transition:transform .2s ease}
.cj-card[aria-expanded="true"] .cj-icon{transform:rotate(180deg)}
.cj-panel{display:none; border-top:1px solid var(--cj-border);}
.cj-panel-inner{padding:18px 20px;}
.cj-empty{color:var(--cj-muted); font-size:.95rem}
.cj-sect h2{font-size:1rem; margin:16px 0 6px; font-weight:600; letter-spacing:-0.2px; color:var(--cj-text)}
.cj-sect p{margin:8px 0}
.cj-sect ul{margin:8px 0 8px 20px; padding:0}

/* Utility: allow external page to control max width */
.cj-container[data-width] { max-width: attr(data-width px, 100%); }

/* Open state */
.cj-card[aria-expanded="true"] .cj-panel{display:block}

/* Force left alignment inside widget to override host text centering */
.cj-container, .cj-container * { text-align: left !important; }

/* Scroll anchor offset for sticky headers on host pages */
.cj-header { scroll-margin-top: var(--cj-scroll-offset, 16px); }