@charset "UTF-8";

/* Fixed dark appearance, shared by readers and authors. */
.site-menu > .dropdown-panel {
  width: min(228px, calc(100vw - 42px));
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

:root ::selection { background: #506649; color: #f3f7ec; }
:root input::placeholder,
:root textarea::placeholder { color: #8e9c86; }
:root input:focus-visible,
:root textarea:focus-visible { outline-color: #acc598; }
:root .skip-link { background: #dde8d2; color: #1c271b; }

:root .button-primary { color: #e8f1df; }
:root .button-primary:hover { background: #4b6545; }
:root .button-danger,
:root .noscript-note { background: #4b332c; color: #ffd1bd; }
:root .button-danger:hover { background: #604237; }
:root .icon-button:hover,
:root .dropdown[open] > summary { background: #303e30; color: var(--ink); }
:root .dropdown-panel { background: #242d25; border-color: #414e3e; box-shadow: 0 12px 35px #00000040; }

:root .section-heading { border-bottom-color: #475640; }
:root .heading-period,
:root .small-dot { color: #9cb887; }
:root .small-dot { background: #9bb586; }
:root .date-day { color: #a4b994; }
:root .thought-text,
:root .thought-text.only-text { color: #dbe2d4; }
:root .thought-label { border-color: #47583e; color: #acbf9b; }
:root .thought-label.latest { background: #2c3c29; border-color: transparent; color: #b5c9a3; }
:root .example-notice p,
:root .loading-state { color: #a2b594; }
:root .example-notice .small-dot { background: #829e70; }
:root .storage-notice { background: #3e3523; color: #e8ca8e; }

:root .dialog { background: #242c25; border-color: #404d3e; box-shadow: 0 28px 110px #00000066; }
:root .dialog::backdrop { background: #080e09a6; }
:root .dialog-footer { background: #2b362b; border-top-color: #3d4b39; }
:root .dialog-header .eyebrow,
:root .composer-bottomline,
:root .local-hint { color: #a1b194; }
:root .form-fields input,
:root .form-fields textarea { background: #1e271f; border-color: #46553f; }
:root .title-input:focus-visible { border-bottom-color: #a1bd89; }
:root .body-input:focus-visible { background: #2b372b; box-shadow: 0 0 0 8px #2b372b; }
:root input:-webkit-autofill,
:root textarea:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: 0 0 0 1000px #1e271f inset; caret-color: var(--ink); }

/* Image pixels stay untouched; only frames and controls receive theme colors. */
:root .attachment-remove { background: #1e291fec; color: var(--ink); }
:root .attachment-remove:hover { background: #3a4b32; }
:root .attachment-tile progress,
:root .transfer-content > progress { accent-color: #a9c88e; }
:root .thought-image-button { background: #20291f; }
:root .image-dialog { background: #181f1a; }
:root .image-dialog::backdrop { background: #060b08eb; }

:root .site-footer { color: #9aa88e; }
:root .footer-brand > span { color: #78876b; }
:root .footer-data .small-dot { background: #a2c08a; }
:root .empty-drawing { color: #9dbb84; }

:root .toast { background: #3b5037; color: #f0f5e8; box-shadow: 0 7px 32px #00000040; }
:root .toast > .icon { color: #c2dbab; }
:root .toast.error { background: #594033; }
:root #toastAction { color: #d6e9bf; border-left-color: #7b906b; }
:root .toast-close { color: #d3e2c3; }
:root .toast-close:hover { background: #ffffff18; color: #ffffff; }