/* Communication panels share the forest, ivory and brass of Payments. */
:is(#panelNews, #panelAdministration) {
  --updates-forest: #1c4334;
  --updates-ivory: #fffef8;
  --updates-muted: #526459;
  --updates-line: #dfe5d8;
  --updates-brass: #7d6741;
  --updates-shadow: 0 12px 28px -25px #1c43346b;
  --updates-spacing: clamp(14px, 2.2vw, 24px);
  --updates-pad: clamp(19px, 3vw, 32px);
  --updates-contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 215' fill='none' stroke='%23e5d6ae' stroke-opacity='.28'%3E%3Cpath d='M320 205C221 202 228 133 163 135S55 120 52 77 14 58 0 24M320 190c-85-3-83-72-151-71S71 111 68 72 32 48 22 13M320 174c-70-2-73-72-145-71s-86-12-89-36S54 38 46 7M320 159c-55-2-64-71-137-72-53-1-74-7-79-26S76 25 72 0M320 143c-43-3-55-72-128-72-42 0-66-1-72-19s-19-32-21-52M320 127c-29-6-44-71-120-72-35-1-55 1-64-15s-12-27-12-40M320 112c-18-12-33-72-112-73-24 0-45-2-55-15s-7-24-7-24M320 92c-8-10-25-70-103-70-17 0-44-1-46-22'/%3E%3C/svg%3E");
}

:is(#panelNews, #panelAdministration) .panel-heading {
  margin-bottom: clamp(18px, 3vw, 30px);
  align-items: flex-end;
}

:is(#panelNews, #panelAdministration) .panel-heading .eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--updates-brass);
}

:is(#panelNews, #panelAdministration) .panel-heading .eyebrow::before {
  content: "";
  flex: 0 0 22px;
  height: 1px;
  background: #ae9565;
}

:is(#panelNews, #panelAdministration) .panel-heading h2 {
  margin: 8px 0;
  font-size: clamp(28px, 4vw, 49px);
  letter-spacing: -.035em;
  text-wrap: balance;
}

:is(#panelNews, #panelAdministration) .panel-heading .muted {
  font-size: 13px;
  color: var(--updates-muted);
}

:is(#panelNews, #panelAdministration) .card {
  min-width: 0;
  border: 1px solid var(--updates-line);
  border-radius: 22px;
  background: var(--updates-ivory);
  box-shadow: var(--updates-shadow);
}

/* Owner preferences and the staff demo stay visually distinct. */
#panelNews #ownerEmailPreview {
  margin: 0 0 var(--updates-spacing);
  gap: var(--updates-spacing);
  align-items: start;
}

#panelNews #ownerEmailPreview .owner-email-preferences {
  color: #fffdf5;
  border-color: transparent;
  background: var(--updates-contours) right top / min(68%, 350px) auto no-repeat,
    radial-gradient(ellipse at right top, #3d6550, transparent 70%),
    linear-gradient(145deg, var(--updates-forest), #17382c);
  box-shadow: 0 15px 32px -22px #0b2e2090;
}

#panelNews #ownerEmailPreview h3 {
  font: 400 clamp(22px, 2.5vw, 30px)/1.3 var(--serif);
  letter-spacing: -.02em;
  text-wrap: balance;
}

#panelNews #ownerEmailPreview .owner-email-preferences h3 {
  font-size: clamp(26px, 3.5vw, 40px);
}

#panelNews #ownerEmailPreview .owner-email-description,
#panelNews #ownerEmailPreview .owner-email-empty {
  color: var(--updates-muted);
}

#panelNews #ownerEmailPreview .owner-email-preferences .eyebrow { color: #ecd6a5; }
#panelNews #ownerEmailPreview .owner-email-preferences .owner-email-description { max-width: 46ch; color: #e4ece0; }

#panelNews #ownerEmailPreview .owner-email-options {
  border: 1px solid #e4eadf44;
  border-radius: 15px;
  background: #142f27b3;
}

#panelNews #ownerEmailPreview .owner-email-toggle { gap: 12px; line-height: 1.45; }
#panelNews #ownerEmailPreview .owner-email-toggle input { accent-color: #d9ba7d; }
#panelNews #ownerEmailPreview .owner-email-options p { color: #e3ebe1; line-height: 1.55; }
#panelNews #ownerEmailPreview .owner-email-options .owner-email-feedback { color: #f0d797; }

#panelNews #ownerEmailPreview .owner-email-staff,
#panelNews #ownerEmailPreview .owner-email-feed {
  padding: clamp(17px, 2.3vw, 25px);
}

#panelNews #ownerEmailPreview .owner-email-staff summary {
  min-height: 44px;
  gap: 9px 12px;
  flex-wrap: wrap;
  line-height: 1.4;
  color: var(--updates-forest);
}

#panelNews #ownerEmailPreview .owner-email-staff summary::after { color: var(--updates-brass); }
#panelNews #ownerEmailPreview .owner-email-staff .small-label { background: #f1e8d4; color: #654f2b; }
#panelNews #ownerEmailPreview .owner-email-form { gap: 10px; }

#panelNews #ownerEmailPreview .owner-email-form input,
#panelNews #ownerEmailPreview .owner-email-form textarea,
#panelAdministration .message-form textarea {
  border-color: #d7e0d3;
  border-radius: 12px;
  background: #fbfcf6;
}

#panelNews #ownerEmailPreview .owner-email-form input:focus,
#panelNews #ownerEmailPreview .owner-email-form textarea:focus,
#panelAdministration .message-form textarea:focus { border-color: #6e8c75; }

#panelNews #ownerEmailPreview .owner-email-review {
  padding: 17px;
  border-color: #e1d9c5;
  background: #fbf7eb;
}

#panelNews #ownerEmailPreview .owner-email-review h4,
#panelNews #ownerEmailPreview .owner-email-updates time { color: #705c39; }

#panelNews #ownerEmailPreview .owner-email-feed h3 { margin-top: 0; }

#panelNews #ownerEmailPreview .owner-email-empty:not([hidden]) {
  padding: 12px 14px;
  border: 1px dashed #d8dfd3;
  border-radius: 11px;
  background: #f6f8f1;
}

#panelNews .news-list { gap: var(--updates-spacing); }

#panelNews .news-item {
  padding: var(--updates-pad);
  border-top: 2px solid #b39a69;
}

#panelNews .news-item.is-read {
  border-top-color: #d3ddd0;
  background: #f8faf3;
}

#panelNews .news-item .news-meta {
  align-self: flex-start;
  border-radius: 999px;
  padding: 5px 9px;
  color: #725b36;
  background: #f5eddb;
  line-height: 1.35;
}

#panelNews .news-item.is-read .news-meta { color: #486251; background: #edf2e9; }

#panelNews .news-item h3 {
  margin: 15px 0 10px;
  font: 400 clamp(20px, 2.4vw, 27px)/1.35 var(--serif);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

#panelNews .news-item p { margin-bottom: 15px; color: var(--updates-muted); line-height: 1.75; }

#panelNews .news-item .read-toggle {
  padding-inline: 12px;
  border: 1px solid #dbe4d7;
  border-radius: 10px;
  background: #f7faf3;
  font-weight: 600;
  text-align: start;
  transition: background .18s, border-color .18s;
}

#panelNews .news-item .read-toggle:hover { border-color: #9cb39e; background: #e9f1e6; }
#panelNews #markAllRead { max-width: none; padding-inline: 16px; border-radius: 11px; background: #fffdf4; }
#panelNews #markAllRead:enabled:hover { background: #edf2e9; }

/* Correspondence surfaces and message states. */
#panelAdministration .local-tag {
  flex: 0 0 auto;
  border-color: #e1d5ba;
  background: #f5eddb;
  color: #65502e;
}

#panelAdministration .local-tag > span:first-child { flex: none; background: #a27d44; }
#panelAdministration .conversation-card { max-width: none; padding: 0; }

#panelAdministration .conversation-top {
  padding: clamp(18px, 2.6vw, 28px) var(--updates-pad);
  gap: 13px;
  border-bottom: 0;
  background: var(--updates-contours) right top / min(66%, 300px) auto no-repeat,
    linear-gradient(125deg, #193e30, #305844);
  color: #fffdf5;
}

#panelAdministration .conversation-top strong { display: block; font-size: 14px; font-weight: 650; line-height: 1.45; }
#panelAdministration .conversation-top p { margin-top: 3px; color: #d9e6d9; font-size: 11px; line-height: 1.45; }

#panelAdministration .admin-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  border: 1px solid #e2c58c9c;
  border-radius: 12px;
  color: #f6dca8;
  background: #0f2f2590;
  font: 600 13px/1 var(--serif);
  letter-spacing: .08em;
}

#panelAdministration .message-list {
  min-height: 205px;
  padding: clamp(19px, 3vw, 30px) var(--updates-pad);
  gap: 20px;
  background: radial-gradient(ellipse at 10% 0, #edf2e8 0%, transparent 60%), #fbfcf7;
}

#panelAdministration .message-heading { color: #566b5c; }
#panelAdministration .message-heading strong { color: #405849; font-weight: 650; }

#panelAdministration .message-bubble {
  padding: 15px 17px;
  border-color: #dce6d8;
  border-radius: 3px 15px 15px;
  background: #f0f5ec;
  color: #284739;
  font-size: 13px;
  line-height: 1.75;
}

#panelAdministration .message.user .message-bubble {
  border-color: #365a45;
  border-radius: 15px 3px 15px 15px;
  background: #315541;
  color: #fffdf5;
}

#panelAdministration .message-state { color: #53675a; }

#panelAdministration .message-form {
  padding: clamp(18px, 2.6vw, 28px) var(--updates-pad);
  border-color: var(--updates-line);
  background: var(--updates-ivory);
}

#panelAdministration .message-form label { margin-bottom: 8px; font-weight: 650; }
#panelAdministration .message-form textarea { color: #234333; box-shadow: none; }
#panelAdministration .message-form textarea::placeholder { color: #667968; }
#panelAdministration .composer-bottom p { color: var(--updates-muted); }

@media (min-width: 850px) {
  #panelNews #ownerEmailPreview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panelNews #ownerEmailPreview .owner-email-preferences { grid-column: 1 / -1; }
}

@media (max-width: 660px) {
  :is(#panelNews, #panelAdministration) .panel-heading h2 { line-height: 1.35; }
  #panelAdministration .local-tag { white-space: normal; }
  #panelAdministration .message { max-width: 96%; }
}

@media (max-width: 390px) {
  #panelNews #ownerEmailPreview .owner-email-review .button { width: 100%; }
}