body.digest-open { overflow: hidden; }
.family-digest { color-scheme: dark; width: min(760px, calc(100vw - 32px)); height: min(780px, calc(100dvh - 48px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid #bccbb42e; border-radius: 26px; background: linear-gradient(145deg, #34453d, #202e28); color: var(--wall-text, #efe9dc); box-shadow: 0 28px 90px #0007, inset 0 1px #ffffff0b; outline: none; }
.family-digest[open] { display: flex; flex-direction: column; }
.family-digest::backdrop { background: #101713ad; backdrop-filter: blur(7px); }
.digest-header, .digest-footer { display: flex; align-items: center; gap: 16px; padding: 20px 26px; flex-shrink: 0; }
.digest-header { justify-content: space-between; }
.digest-header h2 { min-width: 0; font-family: var(--editorial); font-weight: 400; font-size: 32px; }
.family-digest button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 44px; padding: 6px; color: inherit; background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.family-digest button:hover { color: #d9e6cb; }
.family-digest button:disabled { opacity: .4; cursor: default; }
.family-digest .icon { width: 18px; height: 18px; }
.digest-range { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 26px 20px; flex-shrink: 0; }
.digest-range label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; font-size: 12px; color: #c4cbbf; }
.digest-range :is(select,input) { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid #c5d0bb33; border-radius: 12px; background: #ffffff08; color: #eeeadd; font: inherit; font-size: 14px; }
/* Let iOS date controls shrink to the available grid width. */
.digest-range input[type="date"] { -webkit-appearance: none; appearance: none; }
.digest-range input[type="date"]::-webkit-date-and-time-value { min-width: 0; }
.digest-range option { background: #29392f; }
#digest-text { flex: 1; min-height: 120px; width: calc(100% - 52px); margin: 0 26px; padding: 20px; resize: none; border: 1px solid #c5d0bb24; border-radius: 17px; background: #ffffff05; color: inherit; font-family: var(--sans); font-size: 14px; line-height: 1.85; overflow: auto; overscroll-behavior: contain; }
.digest-footer { gap: 12px; }
#digest-status { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; color: #c4cbbf; }
.family-digest :is(button,input,select,textarea):focus-visible { outline: 2px solid #c5d9b5; outline-offset: 3px; }
@media(max-width: 540px) {
  .family-digest { width: calc(100vw - 16px); height: calc(100dvh - 24px); border-radius: 20px; }
  .digest-header,.digest-footer { padding: 14px 16px; }
  .digest-header { flex-wrap: wrap; gap: 8px 12px; }
  .digest-range { padding: 0 16px 16px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #digest-text { width: calc(100% - 32px); margin-inline: 16px; padding: 14px; }
  .digest-range :is(input,select) { font-size: 16px; }
  .digest-footer { flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; }
  #digest-status { flex-basis: 100%; }
  #digest-status:empty { display: none; }
}