/**
 * Penn South content management — shared styles for the resource library, the
 * article view, the admin screens and the header dropdown.
 *
 * Colours follow the survey module's palette so the two admin areas read as one
 * product rather than two.
 */

:root {
  --cms-green: #2d7a3d;
  --cms-green-dark: #1e5a2a;
  --cms-green-wash: #f0f7f1;
  --cms-ink: #111827;
  --cms-body: #374151;
  --cms-muted: #6b7280;
  --cms-line: #e5e7eb;
  --cms-line-soft: #f3f4f6;
}

/* ── Header taskbar dropdown ─────────────────────────────────── */

.cms-nav-badge {
  background-color: #d9534f;
  color: #fff;
  border-radius: 50%;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  position: relative;
  top: -10px;
  left: -10px;
  display: none;
}

/* Bootstrap toggles .dropdown-menu between none and block, so this must not
   declare its own display — the panel would then be stuck open. */
.cms-menu {
  width: 380px;
  max-width: 92vw;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .18);
  border: 1px solid var(--cms-line);
}

.cms-menu__head {
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--cms-line-soft);
  background: #fff;
  border-radius: 10px 10px 0 0;
}

.cms-menu__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cms-muted);
  margin: 0 0 9px;
}

.cms-menu__search {
  width: 100%;
  border: 1.5px solid var(--cms-line);
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 13.5px;
  color: var(--cms-body);
  transition: border-color .15s;
}

.cms-menu__search:focus {
  outline: none;
  border-color: var(--cms-green);
}

.cms-menu__list {
  overflow-y: auto;
  max-height: 52vh;
  padding: 6px;
  margin: 0;
  list-style: none;
}

.cms-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 7px;
  color: var(--cms-body);
  text-decoration: none;
  transition: background .13s;
}

.cms-menu__item:hover,
.cms-menu__item:focus {
  background: var(--cms-green-wash);
  color: var(--cms-body);
  text-decoration: none;
}

.cms-menu__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--cms-green-wash);
  color: var(--cms-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-top: 1px;
}

.cms-menu__text { min-width: 0; }

.cms-menu__item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cms-ink);
  margin: 0 0 2px;
  line-height: 1.35;
}

.cms-menu__item-summary {
  font-size: 12px;
  color: var(--cms-muted);
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cms-menu__pin {
  color: var(--cms-green);
  font-size: 10px;
  margin-left: 5px;
}

.cms-menu__empty {
  padding: 26px 18px;
  text-align: center;
  color: var(--cms-muted);
  font-size: 13px;
}

.cms-menu__empty i {
  display: block;
  font-size: 22px;
  margin-bottom: 9px;
  color: #d1d5db;
}

.cms-menu__foot {
  border-top: 1px solid var(--cms-line-soft);
  padding: 10px 16px;
  background: #fafafa;
  border-radius: 0 0 10px 10px;
}

.cms-menu__foot a {
  color: var(--cms-green);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.cms-menu__foot a:hover { color: var(--cms-green-dark); text-decoration: none; }

/* ── Library ─────────────────────────────────────────────────── */

.cms-hero {
  background: linear-gradient(135deg, #2d7a3d 0%, #24632f 100%);
  border-radius: 12px;
  padding: 30px 32px;
  color: #fff;
  margin-bottom: 26px;
}

.cms-hero h1 { font-size: 26px; font-weight: 700; margin: 0 0 6px; color: #fff; }
.cms-hero p { margin: 0 0 18px; opacity: .9; font-size: 14.5px; max-width: 620px; }

.cms-searchbar { display: flex; gap: 10px; max-width: 620px; }

.cms-searchbar input {
  flex: 1 1 auto;
  border: none;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 14.5px;
  color: var(--cms-body);
}

.cms-searchbar input:focus { outline: 2px solid rgba(255, 255, 255, .55); }

.cms-searchbar button {
  border: none;
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background .15s;
}

.cms-searchbar button:hover { background: rgba(255, 255, 255, .28); }

.cms-sidebar-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cms-muted);
  margin: 0 0 10px;
}

.cms-catlist { list-style: none; padding: 0; margin: 0 0 26px; }

.cms-catlist a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 7px;
  color: var(--cms-body);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background .13s, color .13s;
}

.cms-catlist a:hover { background: var(--cms-green-wash); color: var(--cms-green); text-decoration: none; }
.cms-catlist a.is-active { background: var(--cms-green-wash); color: var(--cms-green); font-weight: 700; }
.cms-catlist i { width: 15px; text-align: center; font-size: 12.5px; color: var(--cms-muted); }
.cms-catlist a:hover i, .cms-catlist a.is-active i { color: var(--cms-green); }
.cms-catlist .cms-count { margin-left: auto; font-size: 11.5px; color: var(--cms-muted); font-weight: 600; }

.cms-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }

.cms-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--cms-line-soft);
  color: var(--cms-body);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .13s, color .13s;
}

.cms-tag:hover { background: var(--cms-green-wash); color: var(--cms-green); text-decoration: none; }
.cms-tag.is-active { background: var(--cms-green); color: #fff; }

.cms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.cms-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .18s, border-color .18s, transform .18s;
}

.cms-card:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, .09);
  border-color: #cfe0d2;
  text-decoration: none;
  transform: translateY(-2px);
}

.cms-card__img { height: 140px; background: var(--cms-line-soft) center/cover no-repeat; }

.cms-card__body { padding: 16px 17px 17px; flex: 1 1 auto; display: flex; flex-direction: column; }

.cms-card__cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cms-green);
  margin: 0 0 7px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cms-card__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cms-ink);
  margin: 0 0 7px;
  line-height: 1.35;
}

.cms-card__summary {
  font-size: 13px;
  color: var(--cms-muted);
  line-height: 1.55;
  margin: 0 0 13px;
  flex: 1 1 auto;
}

.cms-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: #9ca3af;
  border-top: 1px solid var(--cms-line-soft);
  padding-top: 11px;
}

.cms-pin-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cms-green);
}

.cms-empty {
  text-align: center;
  padding: 62px 20px;
  color: var(--cms-muted);
}

.cms-empty i { font-size: 40px; color: #d1d5db; margin-bottom: 16px; display: block; }
.cms-empty h4 { font-weight: 700; color: var(--cms-body); margin-bottom: 7px; }

/* ── Article ─────────────────────────────────────────────────── */

.cms-article { background: #fff; border-radius: 12px; border: 1px solid var(--cms-line); overflow: hidden; }
.cms-article__hero { width: 100%; max-height: 340px; object-fit: cover; display: block; }
.cms-article__inner { padding: 34px 40px 40px; }

.cms-article__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--cms-ink);
  margin: 0 0 12px;
  line-height: 1.25;
}

.cms-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 12.5px;
  color: var(--cms-muted);
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--cms-line-soft);
}

.cms-article__summary {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cms-body);
  font-weight: 500;
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 3px solid var(--cms-green);
}

.cms-prose { font-size: 15.5px; line-height: 1.75; color: var(--cms-body); }
.cms-prose h1, .cms-prose h2, .cms-prose h3, .cms-prose h4 { color: var(--cms-ink); font-weight: 700; margin: 30px 0 12px; line-height: 1.3; }
.cms-prose h1 { font-size: 24px; }
.cms-prose h2 { font-size: 20px; }
.cms-prose h3 { font-size: 17px; }
.cms-prose h4 { font-size: 15.5px; }
.cms-prose p { margin: 0 0 16px; }
.cms-prose ul, .cms-prose ol { margin: 0 0 16px; padding-left: 24px; }
.cms-prose li { margin-bottom: 7px; }
.cms-prose a { color: var(--cms-green); text-decoration: underline; }
.cms-prose a:hover { color: var(--cms-green-dark); }
.cms-prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0 18px; }
.cms-prose blockquote { margin: 0 0 18px; padding: 12px 18px; background: var(--cms-green-wash); border-left: 3px solid var(--cms-green); border-radius: 0 6px 6px 0; color: var(--cms-body); }
.cms-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.cms-prose th, .cms-prose td { border: 1px solid var(--cms-line); padding: 9px 12px; text-align: left; }
.cms-prose th { background: #fafafa; font-weight: 700; color: var(--cms-ink); }
.cms-prose pre { background: #f8f9fa; border: 1px solid var(--cms-line); border-radius: 7px; padding: 14px; overflow-x: auto; margin: 0 0 18px; }
/* Embedded video. The explicit height is the fallback for engines without
   aspect-ratio; the @supports block hands sizing back to the ratio where it
   is understood. */
.cms-prose .ql-video,
.cms-prose iframe.cms-embed,
.cms-editor-shell .ql-editor .ql-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 420px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  margin: 8px 0 18px;
  background: #000;
}

@supports (aspect-ratio: 16 / 9) {
  .cms-prose .ql-video,
  .cms-prose iframe.cms-embed,
  .cms-editor-shell .ql-editor .ql-video { height: auto; }
}

@media (max-width: 640px) {
  .cms-prose .ql-video,
  .cms-prose iframe.cms-embed { height: 220px; }
}

.cms-prose .ql-align-center { text-align: center; }
.cms-prose .ql-align-right { text-align: right; }
.cms-prose .ql-align-justify { text-align: justify; }

.cms-attachments { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--cms-line-soft); }

.cms-attachment {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--cms-line);
  border-radius: 8px;
  margin-bottom: 9px;
  color: var(--cms-body);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.cms-attachment:hover { border-color: var(--cms-green); background: var(--cms-green-wash); text-decoration: none; color: var(--cms-body); }
.cms-attachment i { font-size: 19px; color: var(--cms-green); }
.cms-attachment__name { font-weight: 600; font-size: 14px; }
.cms-attachment__size { font-size: 11.5px; color: var(--cms-muted); }

.cms-preview-banner {
  background: #fff8e1;
  border: 1px solid #f5d78e;
  color: #7a5a00;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 13.5px;
  font-weight: 600;
}

/* ── Admin ───────────────────────────────────────────────────── */

.cms-admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }

.cms-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cms-green);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s;
}

.cms-btn:hover { background: var(--cms-green-dark); color: #fff; text-decoration: none; }
.cms-btn--ghost { background: #fff; color: var(--cms-body); border: 1.5px solid var(--cms-line); }
.cms-btn--ghost:hover { background: var(--cms-green-wash); border-color: var(--cms-green); color: var(--cms-green); }
.cms-btn--danger { background: #fff; color: #b91c1c; border: 1.5px solid #fecaca; }
.cms-btn--danger:hover { background: #fef2f2; border-color: #b91c1c; color: #b91c1c; }

.cms-statustabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }

.cms-statustab {
  padding: 7px 15px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cms-body);
  background: var(--cms-line-soft);
  text-decoration: none;
  transition: background .13s, color .13s;
}

.cms-statustab:hover { background: var(--cms-green-wash); color: var(--cms-green); text-decoration: none; }
.cms-statustab.is-active { background: var(--cms-green); color: #fff; }

.cms-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cms-muted);
  font-weight: 600;
  border-bottom: 2px solid var(--cms-line-soft);
}

.cms-table td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.cms-table tbody tr:hover { background: #fafafa; }

.cms-title-link { font-weight: 700; color: var(--cms-ink); text-decoration: none; font-size: 14.5px; }
.cms-title-link:hover { color: var(--cms-green); text-decoration: none; }

.cms-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cms-pill--live { background: #dcfce7; color: #166534; }
.cms-pill--draft { background: #f3f4f6; color: #4b5563; }
.cms-pill--scheduled { background: #dbeafe; color: #1e40af; }
.cms-pill--expired { background: #fee2e2; color: #991b1b; }
.cms-pill--archived { background: #ede9fe; color: #5b21b6; }

.cms-subtle { font-size: 12px; color: var(--cms-muted); }

/* ── Editor ──────────────────────────────────────────────────── */

.cms-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start; }

/* The rail scrolls within itself rather than dragging the page: the app header
   is fixed at 50px, so the rail starts just below it and never runs past the
   viewport. Without this the editor is one very tall column and the Save
   controls end up thousands of pixels down. */
.cms-editor-side {
  position: sticky;
  top: 62px;
  max-height: calc(100vh - 78px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.cms-editor-side::-webkit-scrollbar { width: 8px; }
.cms-editor-side::-webkit-scrollbar-thumb { background: #d8dcd9; border-radius: 4px; }
.cms-editor-side::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 1100px) {
  .cms-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .cms-editor-side { position: static; max-height: none; overflow: visible; }
}

/* ── Accordion rail ──────────────────────────────────────────── */

.cms-acc { background: #fff; border: 1px solid var(--cms-line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }

.cms-acc__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 15px;
  background: #fff;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background .13s;
}

.cms-acc__head:hover { background: #fafbfa; }
.cms-acc__head:focus { outline: none; background: var(--cms-green-wash); }

.cms-acc__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cms-ink);
  flex: 0 0 auto;
}

.cms-acc__title i { color: var(--cms-green); font-size: 12.5px; width: 14px; text-align: center; }

/* Collapsed sections still have to answer "what is this set to?", so the
   summary carries the current value and is hidden once the body opens. */
.cms-acc__summary {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 12px;
  color: var(--cms-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cms-acc__caret { color: #9ca3af; font-size: 11px; transition: transform .18s; flex: 0 0 auto; }
.cms-acc.is-open .cms-acc__caret { transform: rotate(180deg); }
.cms-acc.is-open .cms-acc__summary { visibility: hidden; }

.cms-acc__body { display: none; padding: 4px 15px 16px; border-top: 1px solid var(--cms-line-soft); }
.cms-acc.is-open .cms-acc__body { display: block; }

/* ── Summary rows and chips ──────────────────────────────────── */

.cms-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--cms-line);
  border-radius: 7px;
  margin-bottom: 9px;
}

.cms-summary__text { flex: 1 1 auto; min-width: 0; }
.cms-summary__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cms-muted); margin-bottom: 3px; }
.cms-summary__value { display: block; font-size: 13px; color: var(--cms-body); font-weight: 600; }

.cms-linkbtn {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--cms-green);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 5px;
}

.cms-linkbtn:hover { background: var(--cms-green-wash); text-decoration: none; }

.cms-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.cms-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--cms-green-wash);
  color: var(--cms-green-dark);
  font-size: 11.5px;
  font-weight: 600;
}

.cms-chip--muted { background: var(--cms-line-soft); color: var(--cms-muted); }

/* ── Wide pickers inside modals ──────────────────────────────── */

.cms-picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cms-line-soft);
  flex-wrap: wrap;
}

.cms-picker-toolbar .cms-input { flex: 1 1 220px; }

.cms-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 7px; }

.cms-picker-section { margin-bottom: 22px; }
.cms-picker-section:last-child { margin-bottom: 0; }

.cms-picker-section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}

.cms-picker-section__head h6 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cms-muted);
  font-weight: 700;
  margin: 0;
}

.cms-modal .modal-dialog { max-width: 860px; }
.cms-modal .modal-content { border-radius: 12px; border: none; }
.cms-modal .modal-header { border-bottom: 1px solid var(--cms-line-soft); padding: 18px 22px; }
.cms-modal .modal-header h5 { font-weight: 700; font-size: 17px; margin: 0; color: var(--cms-ink); }
.cms-modal .modal-header p { margin: 4px 0 0; font-size: 13px; color: var(--cms-muted); }
.cms-modal .modal-body { padding: 20px 22px; max-height: 66vh; overflow-y: auto; }
.cms-modal .modal-footer { border-top: 1px solid var(--cms-line-soft); padding: 14px 22px; }

/* ── Save bar ────────────────────────────────────────────────── */

/* Sticks to the bottom of the viewport while the editor is taller than the
   screen, then settles at the end of the page. Save must never be something
   you have to scroll to find. */
.cms-savebar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 18px;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .07);
}

.cms-savebar__status { flex: 1 1 auto; font-size: 12.5px; color: var(--cms-muted); min-width: 140px; }
.cms-savebar__status strong { color: var(--cms-ink); }

/* Save feedback is inline rather than a modal: this page is not guaranteed to
   have SweetAlert loaded, and a toast that interrupts on every save is worse
   than a status line you can glance at. */
.cms-savestate { display: block; margin-top: 3px; font-weight: 600; }
.cms-savestate.is-idle { display: none; }
.cms-savestate.is-dirty { color: #92400e; }
.cms-savestate.is-saving { color: var(--cms-muted); }
.cms-savestate.is-saved { color: var(--cms-green-dark); }
.cms-savestate.is-error { color: #b91c1c; }

.cms-btn:disabled, .cms-btn[disabled] { opacity: .6; cursor: default; }
.cms-btn:disabled:hover { background: var(--cms-green); }

/* Briefly outline the bar on a successful save, so the change registers even
   if the admin's eyes are on the editor rather than the status text. */
@keyframes cmsSavedFlash {
  0%   { border-color: var(--cms-green); box-shadow: 0 0 0 3px rgba(45, 122, 61, .16), 0 -6px 18px rgba(0, 0, 0, .07); }
  100% { border-color: var(--cms-line); box-shadow: 0 -6px 18px rgba(0, 0, 0, .07); }
}

.cms-savebar.is-flashing { animation: cmsSavedFlash 1.1s ease-out; }

.cms-panel { background: #fff; border: 1px solid var(--cms-line); border-radius: 10px; margin-bottom: 18px; }
.cms-panel__head { padding: 15px 18px; border-bottom: 1px solid var(--cms-line-soft); }
.cms-panel__head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--cms-ink); }
.cms-panel__head p { margin: 4px 0 0; font-size: 12.5px; color: var(--cms-muted); }
.cms-panel__body { padding: 18px; }

.cms-field { margin-bottom: 17px; }
.cms-field:last-child { margin-bottom: 0; }

.cms-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cms-body);
  margin-bottom: 6px;
}

.cms-field .cms-hint { font-size: 11.5px; color: var(--cms-muted); font-weight: 400; margin-top: 5px; display: block; }

.cms-input,
.cms-textarea,
.cms-select {
  width: 100%;
  border: 1.5px solid var(--cms-line);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 14px;
  color: var(--cms-body);
  background: #fff;
  transition: border-color .15s;
}

.cms-input:focus, .cms-textarea:focus, .cms-select:focus { outline: none; border-color: var(--cms-green); }
.cms-textarea { resize: vertical; min-height: 76px; }

.cms-checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 7px; }

.cms-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1.5px solid var(--cms-line);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cms-body);
  cursor: pointer;
  transition: border-color .13s, background .13s;
  margin: 0;
}

.cms-check:hover { border-color: var(--cms-green); background: var(--cms-green-wash); }
.cms-check input { margin: 0; }
.cms-check.is-checked { border-color: var(--cms-green); background: var(--cms-green-wash); color: var(--cms-green); font-weight: 600; }

.cms-reach {
  background: var(--cms-green-wash);
  border: 1px solid #cfe0d2;
  border-radius: 8px;
  padding: 13px 15px;
  font-size: 13px;
  color: #1e5a2a;
}

.cms-reach strong { font-size: 19px; display: block; margin-bottom: 2px; }

.cms-patternrow { display: flex; gap: 8px; margin-bottom: 8px; }
.cms-patternrow .cms-input { flex: 1 1 auto; }

.cms-attachrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--cms-line);
  border-radius: 7px;
  margin-bottom: 8px;
  font-size: 13px;
}

.cms-attachrow__name { flex: 1 1 auto; font-weight: 600; color: var(--cms-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cms-hero-preview { width: 100%; border-radius: 8px; border: 1px solid var(--cms-line); margin-bottom: 10px; display: block; }

/* Quill sits inside a panel, so soften its default chrome to match. */
.cms-editor-shell .ql-toolbar.ql-snow { border: 1.5px solid var(--cms-line); border-bottom: none; border-radius: 7px 7px 0 0; background: #fafafa; }
.cms-editor-shell .ql-container.ql-snow { border: 1.5px solid var(--cms-line); border-radius: 0 0 7px 7px; font-size: 15px; font-family: inherit; }
.cms-editor-shell .ql-editor { min-height: 420px; line-height: 1.7; color: var(--cms-body); }
.cms-editor-shell .ql-editor.ql-blank::before { color: #9ca3af; font-style: normal; }