/* Library checkpoints follow the active StyleDock semantic tokens. */
.cbl-panel {
  margin-bottom: 24px;
  padding: 24px;
  border: var(--cb-border-width, 1px) solid var(--cb-border, var(--line));
  border-radius: var(--cb-radius, 12px);
  background: var(--cb-surface, var(--surface));
  color: var(--cb-text, var(--text));
  font: calc(13px * var(--cb-type-scale, 1))/1.7 var(--cb-font, var(--p-font, sans-serif));
}
.cbl-panel [hidden] { display: none !important; }
.cbl-heading { display: flex; align-items: flex-start; gap: 14px; }
.cbl-heading-icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
  color: var(--cb-primary, var(--jade)); background: var(--cb-primary-soft, var(--jade-soft));
  border-radius: var(--cb-radius-sm, 7px);
}
.cbl-heading h2 { margin: 0; font-size: calc(18px * var(--cb-type-scale, 1)); font-family: var(--cb-heading-font, inherit); }
.cbl-heading p { margin: 4px 0 0; color: var(--cb-muted, var(--muted)); font-size: calc(12px * var(--cb-type-scale, 1)); }
.cbl-space {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
  padding: 14px 0; margin-top: 8px; border-bottom: 1px solid var(--cb-border, var(--line));
}
.cbl-space > strong { overflow-wrap: anywhere; }
.cbl-space [data-cbl-summary] { display: flex; flex-wrap: wrap; gap: 3px 18px; color: var(--cb-muted, var(--muted)); font-size: calc(11px * var(--cb-type-scale, 1)); }
.cbl-space [data-cbl-summary] > .cbl-warning-list { flex: 0 0 100%; }
.cbl-scope { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 18px; color: var(--cb-muted, var(--muted)); font-size: calc(11px * var(--cb-type-scale, 1)); }
.cbl-scope > .cb-icon { flex: 0 0 15px; margin-top: 3px; }
.cbl-note-field { display: flex; flex-direction: column; gap: 6px; max-width: 540px; margin-bottom: 18px; font-size: calc(12px * var(--cb-type-scale, 1)); }
.cbl-note-field input { min-height: 37px; font-size: calc(12px * var(--cb-type-scale, 1)); }
.cbl-storage-grid, .cbl-history-grid, .cbl-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cbl-storage-card {
  padding: 18px; min-width: 0; border: 1px solid var(--cb-border, var(--line));
  border-radius: var(--cb-radius-sm, 8px); background: var(--cb-inset, var(--paper));
}
.cbl-card-title { display: flex; gap: 8px; align-items: center; }
.cbl-card-title > .cb-icon { color: var(--cb-primary, var(--jade)); }
.cbl-card-title h3, .cbl-list-heading h3, .cbl-preview h3, .cbl-import h3 {
  font-size: calc(14px * var(--cb-type-scale, 1)); font-family: var(--cb-heading-font, inherit); margin: 0;
}
.cbl-storage-card > p { color: var(--cb-muted, var(--muted)); font-size: calc(11px * var(--cb-type-scale, 1)); margin: 8px 0 12px; }
.cbl-storage-card .cbl-connection { color: var(--cb-text, var(--text)); font-size: calc(12px * var(--cb-type-scale, 1)); overflow-wrap: anywhere; margin: 12px 0 5px; }
.cbl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cbl-panel .btn { white-space: normal; text-align: center; min-height: 34px; padding: 6px 11px; font-size: calc(11px * var(--cb-type-scale, 1)); line-height: 1.5; }
.cbl-panel .btn:disabled { opacity: .55; cursor: not-allowed; }
.cbl-panel .btn:focus-visible, .cbl-panel a:focus-visible, .cbl-panel summary:focus-visible {
  outline: 2px solid var(--cb-focus, var(--cb-primary, var(--jade))); outline-offset: 3px;
}
.cbl-account-link { display: inline-block; margin-top: 5px; color: var(--cb-primary, var(--jade)); font-size: calc(11px * var(--cb-type-scale, 1)); text-decoration: underline; text-underline-offset: 3px; }
.cbl-small { font-size: calc(11px * var(--cb-type-scale, 1)); color: var(--cb-muted, var(--muted)); margin: 7px 0; overflow-wrap: anywhere; }
.cbl-history-grid { margin-top: 24px; }
.cbl-history-grid > section { min-width: 0; }
.cbl-list-heading { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cbl-list-heading .btn { flex-shrink: 0; font-size: calc(10px * var(--cb-type-scale, 1)); min-height: 30px; }
.cbl-history-list {
  list-style: none; padding: 0; margin: 0; max-height: 360px; overflow: auto;
  border: 1px solid var(--cb-border, var(--line)); border-radius: var(--cb-radius-sm, 7px);
}
.cbl-history-list li { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 12px; }
.cbl-history-list li + li { border-top: 1px solid var(--cb-border, var(--line)); }
.cbl-history-list li > div { min-width: 0; }
.cbl-history-list strong { display: block; font-size: calc(11px * var(--cb-type-scale, 1)); font-weight: 600; overflow-wrap: anywhere; }
.cbl-history-list small { display: block; color: var(--cb-muted, var(--muted)); font-size: calc(10px * var(--cb-type-scale, 1)); margin-top: 3px; overflow-wrap: anywhere; }
.cbl-history-list .btn { flex: 0 0 auto; max-width: 128px; font-size: calc(10px * var(--cb-type-scale, 1)); min-height: 30px; }
.cbl-empty { color: var(--cb-muted, var(--muted)); font-size: calc(11px * var(--cb-type-scale, 1)); padding: 16px; border: 1px dashed var(--cb-border, var(--line)); border-radius: var(--cb-radius-sm, 7px); }
.cbl-more { margin-top: 10px; text-align: center; }
.cbl-preview { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--cb-border, var(--line)); }
.cbl-preview-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cbl-preview-heading > div { min-width: 0; }
.cbl-preview-heading p { margin-top: 4px; color: var(--cb-muted, var(--muted)); font-size: calc(11px * var(--cb-type-scale, 1)); overflow-wrap: anywhere; }
.cbl-preview-heading .cbl-actions { margin-top: 0; }
.cbl-plan-grid { margin: 14px 0; }
.cbl-plan { padding: 16px; border: 1px solid var(--cb-border, var(--line)); border-radius: var(--cb-radius-sm, 7px); min-width: 0; }
.cbl-plan h4 { font-size: calc(13px * var(--cb-type-scale, 1)); margin: 0 0 7px; }
.cbl-plan-counts { font-size: calc(11px * var(--cb-type-scale, 1)); color: var(--cb-muted, var(--muted)); }
.cbl-plan-action { margin-top: 13px; }
.cbl-plan-action .btn { color: var(--cb-primary, var(--jade)); border-color: var(--cb-primary, var(--jade)); }
.cbl-details { margin-top: 10px; border-top: 1px solid var(--cb-border, var(--line)); padding-top: 9px; }
.cbl-details summary { cursor: pointer; font-size: calc(11px * var(--cb-type-scale, 1)); }
.cbl-details summary > span { font-variant-numeric: tabular-nums; color: var(--cb-muted, var(--muted)); margin-inline-start: 5px; }
.cbl-details ul { list-style: none; padding: 0; margin: 8px 0 0; }
.cbl-details li { display: flex; flex-direction: column; gap: 3px; padding: 7px 0; overflow-wrap: anywhere; font-size: calc(10px * var(--cb-type-scale, 1)); }
.cbl-details li + li { border-top: 1px solid var(--cb-border, var(--line)); }
.cbl-details li strong { font-weight: 600; }
.cbl-details li > span { color: var(--cb-muted, var(--muted)); }
.cbl-import { margin-top: 18px; padding: 16px; background: var(--cb-primary-soft, var(--jade-soft)); border: 1px solid var(--cb-border, var(--line)); border-radius: var(--cb-radius-sm, 7px); }
.cbl-import p { margin: 8px 0; font-size: calc(11px * var(--cb-type-scale, 1)); overflow-wrap: anywhere; }
.cbl-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 16px; background: var(--cb-primary-soft, var(--jade-soft)); border: 1px solid var(--cb-border, var(--line)); border-radius: var(--cb-radius-sm, 7px); }
.cbl-download > div { min-width: 0; }
.cbl-download strong { font-size: calc(12px * var(--cb-type-scale, 1)); }
.cbl-download [data-cbl-download-name] { display: block; overflow-wrap: anywhere; font-size: calc(11px * var(--cb-type-scale, 1)); margin-top: 3px; }
.cbl-download p { font-size: calc(11px * var(--cb-type-scale, 1)); color: var(--cb-muted, var(--muted)); margin: 4px 0 0; }
.cbl-download .btn { flex-shrink: 0; }
.cbl-warning { color: var(--cb-warning-ink, var(--warning)); font-size: calc(11px * var(--cb-type-scale, 1)); margin: 10px 0; }
.cbl-warning-list { padding-inline-start: 17px; margin: 10px 0; color: var(--cb-warning-ink, var(--warning)); font-size: calc(11px * var(--cb-type-scale, 1)); }
.cbl-warning-list li + li { margin-top: 5px; }
.cbl-status { margin: 18px 0 0; min-height: 20px; font-size: calc(12px * var(--cb-type-scale, 1)); color: var(--cb-primary, var(--jade)); overflow-wrap: anywhere; }
.cbl-status.is-error { color: var(--cb-danger-ink, var(--cb-danger, #b53535)); }
@media (max-width: 900px) {
  .cbl-storage-grid, .cbl-history-grid, .cbl-plan-grid { grid-template-columns: minmax(0, 1fr); }
  .cbl-history-list { max-height: 290px; }
}
@media (max-width: 520px) {
  .cbl-panel { padding: 17px; }
  .cbl-heading { gap: 10px; }
  .cbl-heading-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .cbl-heading h2 { font-size: calc(17px * var(--cb-type-scale, 1)); }
  .cbl-storage-card, .cbl-plan { padding: 13px; }
  .cbl-list-heading { align-items: flex-start; }
  .cbl-history-list li { align-items: flex-start; flex-direction: column; gap: 9px; }
  .cbl-history-list .btn { max-width: none; }
  .cbl-preview-heading .cbl-actions { width: 100%; }
  .cbl-actions .btn { min-height: 36px; }
}