/* The content editor. Layout and controls come from admin.css. */
.cms-nav { overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.cms-group { margin: 14px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.cms-edited { width: 7px; height: 7px; margin-left: auto; flex: none; border-radius: 50%; background: var(--lime); }

.cms-head { position: sticky; top: 0; z-index: 5; flex-wrap: wrap; gap: 12px; padding-block: 12px; background: var(--cream); }
.cms-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#section-note { margin-bottom: 16px; }

.cms-editor { display: flex; flex-direction: column; gap: 16px; max-width: 860px; padding-bottom: 48px; }
.cms-group-box { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--cream); }
.cms-group-box .cms-group-box { padding: 14px; background: var(--stone); }
.cms-group-box > h2, .cms-group-box > h3 { margin: 0; font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.cms-editor textarea { resize: vertical; }
.cms-check { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; }
.cms-check input { width: auto; }

.cms-item { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--cream); }
.cms-item > summary { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.cms-item > summary .cms-item-title { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cms-item-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 12px 14px; }
.cms-string-item { display: flex; gap: 8px; align-items: flex-start; }
.cms-string-item > :first-child { flex: 1; }
.cms-add { align-self: flex-start; }

.cms-image { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cms-image img { width: 140px; height: 90px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--stone); }
.cms-icon { display: flex; align-items: center; gap: 10px; }
.cms-icon > i { font-size: 20px; color: var(--forest); }
.cms-icon > input { flex: 1; }

/* admin.css collapses its sidebar to a row of icons on phones; these items are text only. */
@media (max-width: 860px) {
  .sidebar { position: static; flex-direction: column; align-items: stretch; }
  .sidebar .brand span:last-child, .who span, .nav-item span:not(.count) { display: revert; }
  .sidebar-foot { display: flex; justify-content: space-between; }
  .nav.cms-nav { flex-direction: column; justify-content: flex-start; max-height: 35vh; }
  .nav.cms-nav .nav-item { width: 100%; }
}