Something went wrong. Try again.
Tea journaling on ATProto (alpha)
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178/* Modals */.modal-backdrop { position: fixed; display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; background: var(--modal-backdrop); /* backdrop-filter removed — solid overlay for performance */}
.modal-content { background: var(--modal-bg); border: 1px solid var(--modal-border); color: var(--text-primary); border-radius: 0.75rem; padding: 1.5rem; max-width: 28rem; width: 100%; overflow-y: auto; box-shadow: var(--shadow-lg);}
.modal-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin-bottom: 1rem; color: var(--text-primary);}
/* Native Dialog Element */.modal-dialog { padding: 0; background: transparent; box-shadow: none; max-width: 28rem; width: 100%; /* Tailwind v4 preflight resets `margin: 0` on `*`, which clobbers the browser-default `margin: auto` that centers a top-layer <dialog> opened via showModal(). Restore it so modals don't snap to 0,0. */ margin: auto; /* UA default for <dialog> is `border: solid`, which renders as a thin rectangular outline in the page text color outside the modal-content card. Reset it. */ border: none;}
.modal-dialog::backdrop { background: var(--modal-backdrop); /* backdrop-filter removed — solid overlay for performance */}
.modal-dialog .modal-content { background: var(--modal-bg); border: 1px solid var(--modal-border); color: var(--text-primary); border-radius: 0.75rem; padding: 1.5rem; width: 100%; overflow-y: auto; box-shadow: var(--shadow-lg);}
/* Handle autocomplete typeahead dropdown */.handle-dropdown { border-radius: 0.5rem; max-height: 15rem; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-lg);}
/* When shown as a top-layer popover (via showPopover()), the UA forces inset:0 and margin:auto, which fight our inline viewport-relative top/left/width. Zero them so positioning is fully driven by the inline style set from getBoundingClientRect(). */.handle-dropdown:popover-open { inset: auto; margin: 0; /* Popovers start at display:none; force a sensible base so the inline max-height/overflow drive the scrollable list. */ position: fixed;}
.handle-dropdown:empty { display: none;}
.handle-result { width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; text-align: left; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; color: var(--text-primary);}
.handle-result:hover { background: var(--surface-bg);}
.handle-result .handle-name { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary);}
.handle-result .handle-at { font-size: 0.75rem; line-height: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted);}
.handle-no-results { padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--text-muted);}
/* Entity suggestion typeahead dropdown */.suggestions-dropdown { position: absolute; z-index: 50; margin-top: 0.25rem; border-radius: 0.5rem; max-height: 12rem; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-md);}
.suggestions-item { width: 100%; text-align: left; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; cursor: pointer; color: var(--text-primary); border-bottom: 1px solid var(--surface-border);}
.suggestions-item:hover { background: var(--surface-bg);}