.menu { position: absolute; z-index: 60; min-width: 220px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; transform-origin: top right; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.menu[data-motion] { opacity: 0; transform: translateY(-4px) scale(.98); }
.menu-item { appearance: none; border: 0; background: none; text-align: left; padding: 9px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease); }
.menu-item[aria-busy="true"] { cursor: progress; }
.menu-item:hover, .menu-item:focus-visible { background: var(--paper-2); }
.menu-item.danger { color: var(--danger); }
.menu-item svg { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
.menu-item.danger svg { color: var(--danger); }
.menu-item .tick { margin-left: auto; color: var(--ink); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu-sep.wide { margin: 8px 4px; }
.menu-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); padding: 6px 10px 4px; }
.menu-who { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 1px; }
.anchor { position: relative; }

.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 65; display: flex; align-items: center; justify-content: center; padding: 40px var(--gutter); transition: opacity var(--dur) var(--ease); }
.scrim[data-motion] { opacity: 0; }
.scrim[data-motion] .modal { transform: translateY(10px) scale(.98); }
.modal { width: 100%; max-width: 560px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--dur) var(--ease); }
.modal.form { max-width: 600px; }
.modal.attempt { max-width: 780px; height: min(640px, calc(100vh - 80px)); }
.drawer-body > div > .disc:first-child { border-top: 0; }
.modal.attempt .modal-body { gap: 24px; padding: 24px 28px 28px; }
.modal.wide { max-width: 860px; }
.modal.xwide { max-width: 1140px; }
.modal.full { max-width: calc(100vw - 48px); height: calc(100vh - 64px); max-height: none; }
.modal.tall { height: calc(100vh - 80px); }
.modal.tall .modal-body { padding-bottom: 28px; }
.modal.confirm { max-width: 460px; }
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); flex: none; }
.modal-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal-body { padding: 20px; overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; scrollbar-color: var(--line-hard) transparent; }
.modal-body.flush { padding: 0; gap: 0; }
.modal.confirm .modal-body { gap: 10px; font-size: 15px; line-height: 1.55; padding-top: 22px; }
.modal.confirm .strong { font-weight: 600; }
.confirm-items { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); flex: none; }
.modal.confirm .modal-foot { border-top: 0; padding-top: 4px; }
.modal-foot .left { margin-right: auto; }
/* A sign-in visit's dialog is sized from its frame: the widest frame of the browser's ratio (--visit-ratio, from the
   server) the window holds without scrolling. 250px is the scrim's margins, the head, the foot and the insets; 88px the
   scrim's gutters and the dialog's own 42px. A frame under 800px is too small to read, so a short window keeps 800px
   and the body scrolls. The dialog is the frame plus its 20px insets and border, so title, frame and foot share edges. */
.modal.visit { --visit-w: min(1100px, 100vw - 88px, max(800px, (100vh - 250px) * var(--visit-ratio))); width: calc(var(--visit-w) + 42px); max-width: none; }
.modal.visit .modal-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Square: the 20px inset is wider than the dialog's radius, so a rounded inner corner would not follow it. */
.modal.visit .browser-frame { width: var(--visit-w); aspect-ratio: var(--visit-ratio); border-radius: 0; flex: none; }

.drawer-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 62; transition: opacity var(--dur) var(--ease); }
[data-motion] > .drawer-scrim { opacity: 0; }
[data-motion] > .drawer { transform: translateX(100%); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 520px; max-width: 100%; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; z-index: 63; transition: transform var(--dur-slow) var(--ease); }
.drawer.wide { width: 720px; }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); flex: none; }
.drawer-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 28px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; scrollbar-color: var(--line-hard) transparent; }
.drawer-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); flex: none; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px)); background: var(--ink); color: var(--on-ink); border-radius: var(--r); padding: 10px 8px 10px 14px; font-size: 14px; box-shadow: var(--shadow); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.toast .toast-ico { width: 18px; height: 18px; flex: none; color: var(--warn-solid); }
.toast .toast-x { color: inherit; opacity: .75; }
.toast .toast-x:hover { opacity: 1; background: transparent; }
.toast[data-motion] { opacity: 0; transform: translate(-50%, 8px); }

.fb-wait { display: flex; justify-content: center; padding: 28px 0; }
.fb-box { field-sizing: fixed; height: 168px; overflow-y: auto; }
.fb-error { min-height: 1lh; }
.fb-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 4px 0; }
.fb-sent .fb-ok { width: 28px; height: 28px; color: var(--ok); }