/* Circulars — list (Figma 22316:167001) and detail (22316:166894). Detail attachments reuse .nd-* from screens.css. */

/* ---------- List ---------- */
.screen.ci { background: var(--goku); }
.ci-page { display: flex; flex-direction: column; gap: 32px; padding: calc(var(--sb-dash) + 24px) 20px 110px; }
.ci-head { display: flex; align-items: center; gap: 8px; height: 40px; }
.ci-head h1 { flex: 1; min-width: 0; }
.ci-back { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.ci-star { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; }
.ci-back:hover, .ci-star:hover { background: var(--heles); }
.ci-tools { display: flex; flex-direction: column; gap: 12px; }
.ci-search input { font-weight: 400; }
.ci-chips .m-chip { border-color: transparent; }
.ci-chips .m-chip.is-on, .ci-chips .m-chip.is-open { border-color: var(--piccolo); }
.ci-groups { display: flex; flex-direction: column; gap: 28px; }
.ci-group { display: flex; flex-direction: column; gap: 4px; }
.ci-label { padding: 0 16px; font: 700 10px/16px var(--font); letter-spacing: 0.5px; text-transform: uppercase; color: var(--zeno); }
.ci-card {
  position: relative; width: 100%; display: flex; flex-direction: column; gap: 16px;
  padding: 12px 16px; border-radius: 8px; background: var(--gohan); text-align: left;
}
.ci-card:hover { background: #FCFCFC; }
.ci-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ci-cls { font: 700 14px/20px var(--font); color: var(--trunks); }
.ci-title { font: 700 16px/24px var(--font); color: #0C1322; }
.ci-text {
  font: 400 12px/16px var(--font); color: #5D626C;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ci-when {
  display: flex; align-items: center; gap: 10px; font: 400 11px/normal var(--font); color: #5D626C;
  font-feature-settings: 'case' 1, 'dlig' 1, 'lnum' 1, 'pnum' 1;
}
.ci-when span:first-child { flex: 1; min-width: 0; }
.ci-dot {
  position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; box-sizing: content-box;
  border-radius: 80px; background: var(--piccolo); border: 3.2px solid var(--goku); margin: -3.2px -3.2px 0 0;
}

/* ---------- Detail ---------- */
.screen.cd { background: var(--gohan); }
.cd-page { display: flex; flex-direction: column; gap: 24px; padding: calc(var(--sb) + 24px) 20px 110px; }
.cd-head { display: flex; flex-direction: column; padding: 0 8px; }
.cd-cls { font: 700 14px/24px var(--font); color: var(--trunks); }
.cd-body { display: flex; flex-direction: column; gap: 12px; padding: 0 8px; }
.cd-when { font: 400 14px/24px var(--font); color: #5D626C; }
.cd-text { font: 400 16px/24px var(--font); color: var(--trunks); }