/* Popup styling. The demo harness links this same file, so everything is scoped under .cdk-. */
.cdk-body { margin: 0; background: #14213d; }

.cdk-popup {
  --cdk-ink: #14213d;
  --cdk-paper: #f7f3ea;
  --cdk-sage: #6f8f72;
  --cdk-sage-soft: #e3ebe1;
  --cdk-amber: #b7791f;
  --cdk-amber-soft: #f6e7c8;
  --cdk-muted: #5f6b7a;
  width: 360px;
  box-sizing: border-box;
  padding: 16px 16px 12px;
  background: var(--cdk-paper);
  color: var(--cdk-ink);
  font: 13px/1.4 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.cdk-popup *, .cdk-popup *::before { box-sizing: border-box; }

.cdk-header { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.cdk-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(160deg, var(--cdk-ink) 55%, var(--cdk-amber) 55%);
  box-shadow: inset 0 -6px 0 rgba(255, 255, 255, 0.12);
}
.cdk-header h1 { margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.cdk-tagline { margin: 1px 0 0; color: var(--cdk-muted); font-size: 12px; }

.cdk-summary { margin: 0 0 8px; font-weight: 600; }
.cdk-summary--clear { color: var(--cdk-sage); }

.cdk-list { list-style: none; margin: 0 0 10px; padding: 0; max-height: 220px; overflow-y: auto; }
.cdk-row {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: start;
  padding: 7px 8px; border-radius: 8px; background: #fff; margin-bottom: 4px;
  border: 1px solid #e8e1d2;
}
.cdk-row input { margin: 2px 0 0; accent-color: var(--cdk-ink); }
.cdk-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.cdk-row-sub { color: var(--cdk-muted); font-size: 11.5px; }
.cdk-chip {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 6px; border-radius: 999px; background: var(--cdk-amber-soft); color: #7a4f12; white-space: nowrap;
}
.cdk-chip--page { background: #f3d9d2; color: #8a3a26; }
.cdk-chip--custom { background: var(--cdk-sage-soft); color: #3e5a41; }

.cdk-primary, .cdk-secondary {
  width: 100%; border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer;
  font: inherit; font-weight: 700;
}
.cdk-primary { background: var(--cdk-ink); color: var(--cdk-paper); }
.cdk-primary:disabled { background: #c9c4b8; color: #f7f3ea; cursor: default; }
.cdk-primary:not(:disabled):hover { background: #1f2f55; }
.cdk-secondary { background: var(--cdk-sage-soft); color: #2f4632; }
.cdk-secondary:hover { background: #d4e0d1; }

.cdk-drawer { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #d8cfbd; }
.cdk-drawer-head { display: flex; justify-content: space-between; align-items: baseline; }
.cdk-drawer h2 { margin: 0 0 6px; font-size: 13px; }
.cdk-meta { color: var(--cdk-muted); font-size: 11.5px; }
.cdk-list--drawer .cdk-row { grid-template-columns: 1fr auto; background: #fbf9f4; }
.cdk-restore {
  border: 0; background: none; color: var(--cdk-sage); font: inherit; font-weight: 700; cursor: pointer; padding: 0;
}

.cdk-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; font-size: 11.5px; color: var(--cdk-muted);
}
.cdk-link { border: 0; background: none; padding: 0; color: var(--cdk-ink); text-decoration: underline; font: inherit; cursor: pointer; }
.cdk-link:disabled { color: var(--cdk-muted); text-decoration: none; cursor: default; }

.cdk-hidden { display: none !important; }
.cdk-empty { color: var(--cdk-muted); margin: 0 0 10px; }