/* layout-remote.css
   Remote iframe embed rules + shell layout (extracted Phase 1)
   These were previously inside the giant <style> in the monolith.
*/

/* ===== App shell: collapsible sidebar + main ===== */
/* ===== Remote iframe embed (Next.js) — use % not vh; scroll inside .content ===== */
html.remote-embed,
html.remote-embed body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
html.remote-embed .shell {
  display: flex;
  align-items: stretch;
  height: 100%;
  min-height: 0;
  max-height: 100%;
}
html.remote-embed .sidebar {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  /* padding-top: 46px; */
}
html.remote-embed .main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html.remote-embed .content {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.remote-embed .content:has(#tab-input:not([hidden])),
html.remote-embed .content:has(#tab-journal:not([hidden])),
html.remote-embed .content:has(#tab-timeline:not([hidden])) {
  overflow: hidden;
}
@media (max-width: 900px) {
  html.remote-embed .sidebar {
    height: 100%;
    max-height: 100%;
  }
}