/* Classic screens rendered by classic.js — loading, error and drawer states only.
   Everything else reuses app.html's existing component styles, so screens look exactly as before. */
:root{--cl-sk-a:rgba(160,170,255,.06);--cl-sk-b:rgba(160,170,255,.13)}
html[data-theme="light"]{--cl-sk-a:rgba(38,48,110,.05);--cl-sk-b:rgba(38,48,110,.11)}
.cl-skel{display:flex;flex-direction:column}
.cl-sk{display:block;width:100%;border-radius:12px;background:linear-gradient(100deg,var(--cl-sk-a) 30%,var(--cl-sk-b) 50%,var(--cl-sk-a) 70%);background-size:300% 100%;animation:cl-shimmer 1.3s linear infinite}
.cl-skel>div>.cl-sk+.cl-sk,.cl-skel>div>.cl-sk-grid+.cl-sk,.cl-skel>div>.cl-sk+.cl-sk-grid{margin-top:14px}
.cl-sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cl-sk-grid.four{grid-template-columns:repeat(4,1fr)}
@keyframes cl-shimmer{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion: reduce){.cl-sk{animation:none}}
@media (max-width:760px){.cl-sk-grid,.cl-sk-grid.four{grid-template-columns:1fr}}
.cl-err{max-width:560px;border-style:dashed}
.cl-err-t{font-weight:750;font-size:14px;color:var(--text);margin-bottom:4px}
.cl-err p{font-size:12.5px;color:var(--text-2);margin-bottom:12px}
.cl-cite-body{margin-top:10px;border:1px solid var(--border-2);border-radius:12px;padding:16px;background:var(--inset);font-size:12.5px;line-height:1.8;color:var(--text-2)}
.cl-cite-body mark{background:rgba(124,92,252,.35);color:var(--text);padding:1px 3px;border-radius:3px}
/* long pills on kanban cards wrap instead of pushing the page sideways (phone) */
.kcard .foot .pill{white-space:normal;line-height:1.4}