html.discovery-open { overflow: hidden; scrollbar-gutter: stable; }
#discovery-overlay {
  position: fixed; inset: var(--discovery-top, 0px) 0 auto;
  width: 100%; max-width: none; height: var(--discovery-height, 100dvh); max-height: none;
  margin: 0; padding: 1.5rem; border: 0; background: transparent; color: var(--tz-text);
  font-family: var(--tz-font-body); box-sizing: border-box;
}
#discovery-overlay:not([open]) { display: none; }
#discovery-overlay[open] { display: grid; place-items: center; }
#discovery-overlay::backdrop { background: rgba(0,0,0,.72); }
.discovery-panel { display: flex; flex-direction: column; width: min(100%, var(--tz-content)); height: 100%; max-height: 54rem; min-height: 0; overflow: hidden; background: var(--tz-panel); border: var(--tz-border); border-radius: var(--tz-radius-panel); box-shadow: var(--tz-shadow); }
.discovery-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; border-bottom: var(--tz-border); flex-shrink: 0; }
.discovery-bar h2 { font: 500 1.2rem/1.3 var(--tz-font-heading); color: #fff; margin: 0; }
.discovery-close { flex-shrink: 0; width: 44px; height: 44px; border: var(--tz-border); border-radius: var(--tz-radius-control); background: transparent; color: #fff; cursor: pointer; font: 28px/1 sans-serif; }
.discovery-close:focus-visible, #discovery-status button:focus-visible { outline: var(--tz-focus); outline-offset: 3px; }
.discovery-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
#discovery-status { padding: var(--tz-space-8); text-align: center; }
#discovery-status button { display: inline-flex; margin: 1rem; padding: .75rem 1.25rem; border: var(--tz-border); border-radius: var(--tz-radius-control); background: var(--tz-gold-fill); color: #050505; font: inherit; cursor: pointer; }
#discovery-status [hidden], #discovery-status[hidden] { display: none; }
#discovery-root *, #discovery-root *::before, #discovery-root *::after { box-sizing: border-box; }
@media (max-width: 800px) {
  #discovery-overlay { padding: max(.5rem, env(safe-area-inset-top)) 0 0; }
  .discovery-scroll { display: flex; flex-direction: column; }
  #discovery-root { display: flex; flex-direction: column; flex: 1 0 auto; }
  #discovery-overlay[open] { align-items: end; }
  .discovery-panel { max-height: none; border-radius: var(--tz-radius-panel) var(--tz-radius-panel) 0 0; border-bottom: 0; }
  .discovery-bar { padding: .75rem 1rem; }
}
@media (max-height: 480px) { #discovery-overlay { padding: 0; } .discovery-panel { border-radius: 0; } }
@media print {
  body.discovery-open { position: static !important; overflow: visible !important; }
  body.discovery-open > :not(#discovery-overlay) { display: none !important; }
  html.discovery-open { overflow: visible !important; }
  #discovery-overlay[open], .discovery-panel, .discovery-scroll { display: block; position: static; width: auto; height: auto; max-height: none; padding: 0; overflow: visible; border: 0; box-shadow: none; background: white; }
  .discovery-bar, #discovery-status { display: none !important; }
  #discovery-overlay::backdrop { background: transparent; }
}

/* Keep the native dialog in the top layer until its exit motion completes. */
.discovery-panel { --discovery-travel: 24px; }
#discovery-overlay[open] .discovery-panel { animation: discovery-enter 360ms cubic-bezier(.22,.75,.2,1) both; }
#discovery-overlay[open]::backdrop { animation: discovery-backdrop-in 280ms ease both; }
#discovery-overlay.is-closing .discovery-panel { animation: discovery-exit 280ms cubic-bezier(.4,0,.8,.2) both; }
#discovery-overlay.is-closing::backdrop { animation: discovery-backdrop-out 280ms ease both; }
@keyframes discovery-enter { from { transform: translateY(var(--discovery-travel)); } to { transform: translateY(0); } }
@keyframes discovery-exit { from { transform: translateY(0); } to { transform: translateY(var(--discovery-travel)); } }
@keyframes discovery-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes discovery-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 800px) { .discovery-panel { --discovery-travel: 100%; } }
@media (prefers-reduced-motion: reduce), print {
  #discovery-overlay[open] .discovery-panel, #discovery-overlay[open]::backdrop { animation: none; }
}

html.diaspora-open { overflow: hidden; scrollbar-gutter: stable; }
#diaspora-overlay {
  position: fixed; inset: var(--diaspora-top, 0px) 0 auto;
  width: 100%; max-width: none; height: var(--diaspora-height, 100dvh); max-height: none;
  margin: 0; padding: 1.5rem; border: 0; background: transparent; color: var(--tz-text);
  font-family: var(--tz-font-body); box-sizing: border-box;
}
#diaspora-overlay:not([open]) { display: none; }
#diaspora-overlay[open] { display: grid; place-items: center; }
#diaspora-overlay::backdrop { background: rgba(0,0,0,.72); }
.diaspora-panel { display: flex; flex-direction: column; width: min(100%, var(--tz-content)); height: 100%; max-height: 54rem; min-height: 0; overflow: hidden; background: var(--tz-panel); border: var(--tz-border); border-radius: var(--tz-radius-panel); box-shadow: var(--tz-shadow); }
.diaspora-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; border-bottom: var(--tz-border); flex-shrink: 0; }
.diaspora-bar h2 { font: 500 1.2rem/1.3 var(--tz-font-heading); color: #fff; margin: 0; }
.diaspora-close { flex-shrink: 0; width: 44px; height: 44px; border: var(--tz-border); border-radius: var(--tz-radius-control); background: transparent; color: #fff; cursor: pointer; font: 28px/1 sans-serif; }
.diaspora-close:focus-visible, #diaspora-status button:focus-visible { outline: var(--tz-focus); outline-offset: 3px; }
.diaspora-scroll { min-height: 0; flex: 1; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
#diaspora-status { padding: var(--tz-space-8); text-align: center; }
#diaspora-status button { display: inline-flex; margin: 1rem; padding: .75rem 1.25rem; border: var(--tz-border); border-radius: var(--tz-radius-control); background: var(--tz-gold-fill); color: #050505; font: inherit; cursor: pointer; }
#diaspora-status [hidden], #diaspora-status[hidden] { display: none; }
#diaspora-root *, #diaspora-root *::before, #diaspora-root *::after { box-sizing: border-box; }
@media (max-width: 800px) {
  #diaspora-overlay { padding: max(.5rem, env(safe-area-inset-top)) 0 0; }
  .diaspora-scroll { display: flex; flex-direction: column; }
  #diaspora-root { display: flex; flex-direction: column; flex: 1 0 auto; }
  #diaspora-overlay[open] { align-items: end; }
  .diaspora-panel { max-height: none; border-radius: var(--tz-radius-panel) var(--tz-radius-panel) 0 0; border-bottom: 0; }
  .diaspora-bar { padding: .75rem 1rem; }
}
@media (max-height: 480px) { #diaspora-overlay { padding: 0; } .diaspora-panel { border-radius: 0; } }
@media print {
  body.diaspora-open { position: static !important; overflow: visible !important; }
  body.diaspora-open > :not(#diaspora-overlay) { display: none !important; }
  html.diaspora-open { overflow: visible !important; }
  #diaspora-overlay[open], .diaspora-panel, .diaspora-scroll { display: block; position: static; width: auto; height: auto; max-height: none; padding: 0; overflow: visible; border: 0; box-shadow: none; background: white; }
  .diaspora-bar, #diaspora-status { display: none !important; }
  #diaspora-overlay::backdrop { background: transparent; }
}

/* Keep the native dialog in the top layer until its exit motion completes. */
.diaspora-panel { --diaspora-travel: 24px; }
#diaspora-overlay[open] .diaspora-panel { animation: diaspora-enter 360ms cubic-bezier(.22,.75,.2,1) both; }
#diaspora-overlay[open]::backdrop { animation: diaspora-backdrop-in 280ms ease both; }
#diaspora-overlay.is-closing .diaspora-panel { animation: diaspora-exit 280ms cubic-bezier(.4,0,.8,.2) both; }
#diaspora-overlay.is-closing::backdrop { animation: diaspora-backdrop-out 280ms ease both; }
@keyframes diaspora-enter { from { transform: translateY(var(--diaspora-travel)); } to { transform: translateY(0); } }
@keyframes diaspora-exit { from { transform: translateY(0); } to { transform: translateY(var(--diaspora-travel)); } }
@keyframes diaspora-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes diaspora-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width: 800px) { .diaspora-panel { --diaspora-travel: 100%; } }
@media (prefers-reduced-motion: reduce), print {
  #diaspora-overlay[open] .diaspora-panel, #diaspora-overlay[open]::backdrop { animation: none; }
}

#diaspora-root { flex:1; min-height:0; display:flex; }
#diaspora-root iframe { width:100%; height:100%; flex:1; border:0; background:#111a1c; }
